@patternfly/react-core 5.0.0-alpha.10 → 5.0.0-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.10",
+  "version": "5.0.0-alpha.11",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "839ed5ddbf8283a88ab30a88724a1b3e35b0d637"
+  "gitHead": "64e059907345bcb4d492f2a6f421ff6c87816f6a"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -15,7 +15,7 @@ export interface AboutModalProps {
   /** Flag to show the about modal  */
   isOpen?: boolean;
   /** A callback for when the close button is clicked  */
-  onClose?: () => void;
+  onClose?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
   /** Product name  */
   productName?: string;
   /** Trademark information  */
@@ -50,7 +50,7 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
   static defaultProps: PickOptional<AboutModalProps> = {
     className: '',
     isOpen: false,
-    onClose: (): any => undefined,
+    onClose: (_e): any => undefined,
     productName: '',
     trademark: '',
     backgroundImageSrc: '',
@@ -72,7 +72,7 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
 
   handleEscKeyClick = (event: KeyboardEvent) => {
     if (event.key === KeyTypes.Escape && this.props.isOpen) {
-      this.props.onClose();
+      this.props.onClose?.(event);
     }
   };
 

package/src/components/AboutModal/AboutModalBoxCloseButton.tsx

@@ -8,14 +8,14 @@ export interface AboutModalBoxCloseButtonProps extends React.HTMLProps<HTMLDivEl
   /** additional classes added to the About Modal Close button  */
   className?: string;
   /** A callback for when the close button is clicked  */
-  onClose?: () => void;
+  onClose?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
   /** Set close button aria label */
   'aria-label'?: string;
 }
 
 export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxCloseButtonProps> = ({
   className = '',
-  onClose = () => undefined as any,
+  onClose = _e => undefined as any,
   'aria-label': ariaLabel = 'Close Dialog',
   ...props
 }: AboutModalBoxCloseButtonProps) => (

package/src/components/AboutModal/AboutModalContainer.tsx

@@ -19,7 +19,7 @@ export interface AboutModalContainerProps extends React.HTMLProps<HTMLDivElement
   /** Flag to show the About Modal  */
   isOpen?: boolean;
   /** A callback for when the close button is clicked  */
-  onClose?: () => void;
+  onClose?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
   /** Product Name  */
   productName?: string;
   /** Trademark information  */
@@ -44,7 +44,7 @@ export const AboutModalContainer: React.FunctionComponent<AboutModalContainerPro
   children,
   className = '',
   isOpen = false,
-  onClose = () => undefined,
+  onClose = _e => undefined,
   productName = '',
   trademark,
   brandImageSrc,

package/src/components/AboutModal/examples/AboutModalBasic.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalBasic: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = () => {
+  const toggleModal = (_event: React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,7 +16,7 @@ export const AboutModalBasic: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={toggleModal}
+        onClose={(e: React.MouseEvent<Element, MouseEvent>) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"

package/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = () => {
+  const toggleModal = (_event: React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,7 +16,7 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={toggleModal}
+        onClose={(e: React.MouseEvent<Element, MouseEvent>) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"

package/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx

@@ -6,7 +6,7 @@ import bgImg from './patternfly-orb.svg';
 export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = () => {
+  const toggleModal = (_event: React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -17,7 +17,7 @@ export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={toggleModal}
+        onClose={(event: any) => toggleModal(event)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"

package/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalWithoutProductName: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = () => {
+  const toggleModal = (_event: React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,7 +16,7 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={toggleModal}
+        onClose={(event: any) => toggleModal(event)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -13,8 +13,8 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const onToggle = (
-    isOpen: boolean,
-    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>
+    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
+    isOpen: boolean
   ) => {
     event.stopPropagation();
     setIsOpen(isOpen);

package/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -27,7 +27,10 @@ export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement
   /** Function callback called when user selects item */
   onSelect?: (event: any) => void;
   /** Callback called when application launcher toggle is clicked */
-  onToggle?: (value: boolean) => void;
+  onToggle?: (
+    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
+    isOpen: boolean
+  ) => void;
   /** Adds accessible text to the button. Required for plain buttons */
   'aria-label'?: string;
   /** Flag to indicate if application launcher has groups */
@@ -76,7 +79,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
     position: DropdownPosition.left,
     /* eslint-disable @typescript-eslint/no-unused-vars */
     onSelect: (_event: any): any => undefined,
-    onToggle: (_value: boolean): any => undefined,
+    onToggle: (_event: any, _value: boolean): any => undefined,
     /* eslint-enable @typescript-eslint/no-unused-vars */
     'aria-label': 'Application launcher',
     isGrouped: false,

package/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx

@@ -16,7 +16,7 @@ const appLauncherItems: React.ReactElement[] = [
 export const ApplicationLauncherAlignRight: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
   const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
 
   return (

package/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx

@@ -16,7 +16,7 @@ const appLauncherItems: React.ReactElement[] = [
 export const ApplicationLauncherAlignTop: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
   const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
 
   return (

package/src/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx

@@ -16,7 +16,7 @@ const appLauncherItems: React.ReactElement[] = [
 export const ApplicationLauncherBasic: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
   const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
 
   return <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} />;

package/src/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx

@@ -17,7 +17,7 @@ const appLauncherItems: React.ReactElement[] = [
 export const ApplicationLauncherCustomIcon: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
   const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
 
   return (

package/src/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx

@@ -16,7 +16,7 @@ const appLauncherItems: React.ReactElement[] = [
 export const ApplicationLauncherDisabled: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
   const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
 
   return (

package/src/components/ApplicationLauncher/examples/ApplicationLauncherDocumentBody.tsx

@@ -16,7 +16,7 @@ const appLauncherItems: React.ReactElement[] = [
 export const ApplicationLauncherDocumentBody: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
   const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
 
   return (

package/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx

@@ -40,7 +40,7 @@ export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = ()
   const [favorites, setFavorites] = React.useState<string[]>([]);
   const [filteredItems, setFilteredItems] = React.useState<React.ReactNode[]>(null);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
     setFilteredItems(null);
   };

package/src/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx

@@ -43,7 +43,7 @@ const appLauncherItems: React.ReactElement[] = [
 export const ApplicationLauncherRouterLink: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
   const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
 
   return <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} />;

package/src/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx

@@ -38,7 +38,7 @@ const appLauncherItems: React.ReactElement[] = [
 export const ApplicationLauncherSectionsAndIcons: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
   const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
 
   return (

package/src/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx

@@ -28,7 +28,7 @@ const appLauncherItems: React.ReactElement[] = [
 export const ApplicationLauncherTooltip: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
   const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
 
   return <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} />;

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -25,11 +25,11 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const badgeToggleRef = React.useRef<HTMLButtonElement>();
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
 
   const onSelect = () => {
     setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
-    badgeToggleRef.current.focus();
+    badgeToggleRef?.current?.focus();
   };
 
   return (

package/src/components/Card/examples/CardExpandable.tsx

@@ -81,7 +81,7 @@ export const CardExpandable: React.FunctionComponent = () => {
           <CardActions>
             <Dropdown
               onSelect={onSelect}
-              toggle={<KebabToggle onToggle={setIsOpen} />}
+              toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
               isOpen={isOpen}
               isPlain
               dropdownItems={dropdownItems}

package/src/components/Card/examples/CardExpandableWithIcon.tsx

@@ -65,7 +65,7 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
         <CardActions>
           <Dropdown
             onSelect={onSelect}
-            toggle={<KebabToggle onToggle={setIsOpen} />}
+            toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
             isOpen={isOpen}
             isPlain
             dropdownItems={dropdownItems}

package/src/components/Card/examples/CardHeaderInCardHead.tsx

@@ -48,7 +48,7 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
         <CardActions>
           <Dropdown
             onSelect={onSelect}
-            toggle={<KebabToggle onToggle={setIsOpen} />}
+            toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
             isOpen={isOpen}
             isPlain
             dropdownItems={dropdownItems}

package/src/components/Card/examples/CardLegacySelectable.tsx

@@ -36,7 +36,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     setSelected(newSelected);
   };
 
-  const onToggle = (isOpen: boolean, event: any) => {
+  const onToggle = (event: any, isOpen: boolean) => {
     event.stopPropagation();
     setIsKebabOpen(isOpen);
   };

package/src/components/Card/examples/CardOnlyActionsInCardHead.tsx

@@ -46,7 +46,7 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
         <CardActions>
           <Dropdown
             onSelect={onSelect}
-            toggle={<KebabToggle onToggle={setIsOpen} />}
+            toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
             isOpen={isOpen}
             isPlain
             dropdownItems={dropdownItems}

package/src/components/Card/examples/CardSelectable.tsx

@@ -37,8 +37,8 @@ export const CardSelectable: React.FunctionComponent = () => {
   };
 
   const onToggle = (
-    isOpen: boolean,
-    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>
+    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
+    isOpen: boolean
   ) => {
     event.stopPropagation();
     setIsKebabOpen(isOpen);

package/src/components/Card/examples/CardWithImageAndActions.tsx

@@ -59,7 +59,7 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
           <CardActions hasNoOffset={hasNoOffset}>
             <Dropdown
               onSelect={onSelect}
-              toggle={<KebabToggle onToggle={setIsOpen} />}
+              toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
               isOpen={isOpen}
               isPlain
               dropdownItems={dropdownItems}

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

@@ -17,7 +17,7 @@ export const DataListActions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [isDeleted, setIsDeleted] = React.useState(false);
 
-  const onToggle = isOpen => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 

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

@@ -19,7 +19,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
   const [isOpen2, setIsOpen2] = React.useState(false);
   const [isOpen3, setIsOpen3] = React.useState(false);
 
-  const onToggle1 = isOpen1 => {
+  const onToggle1 = (_event: any, isOpen1: boolean) => {
     setIsOpen1(isOpen1);
   };
 
@@ -27,14 +27,14 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = isOpen2 => {
+  const onToggle2 = (_event: any, isOpen2: boolean) => {
     setIsOpen2(isOpen2);
   };
 
   const onSelect2 = () => {
     setIsOpen2(!isOpen2);
   };
-  const onToggle3 = isOpen3 => {
+  const onToggle3 = (_event: any, isOpen3: boolean) => {
     setIsOpen3(isOpen3);
   };
 

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

@@ -21,7 +21,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
   const [isOpen3, setIsOpen3] = React.useState(false);
   const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);
 
-  const onToggle1 = isOpen1 => {
+  const onToggle1 = (_event: any, isOpen1: boolean) => {
     setIsOpen1(isOpen1);
   };
 
@@ -29,14 +29,14 @@ export const DataListExpandable: React.FunctionComponent = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = isOpen2 => {
+  const onToggle2 = (_event: any, isOpen2: boolean) => {
     setIsOpen2(isOpen2);
   };
 
   const onSelect2 = () => {
     setIsOpen2(!isOpen2);
   };
-  const onToggle3 = isOpen3 => {
+  const onToggle3 = (_event: any, isOpen3: boolean) => {
     setIsOpen3(isOpen3);
   };
 

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

@@ -21,7 +21,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
   const [isOpen3, setIsOpen3] = React.useState(false);
   const [expanded, setExpanded] = React.useState(['m-ex-toggle1', 'm-ex-toggle3']);
 
-  const onToggle1 = isOpen1 => {
+  const onToggle1 = (_event: any, isOpen1: boolean) => {
     setIsOpen1(isOpen1);
   };
 
@@ -29,7 +29,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = isOpen2 => {
+  const onToggle2 = (_event: any, isOpen2: boolean) => {
     setIsOpen2(isOpen2);
   };
 
@@ -37,7 +37,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
     setIsOpen2(!isOpen2);
   };
 
-  const onToggle3 = isOpen3 => {
+  const onToggle3 = (_event: any, isOpen3: boolean) => {
     setIsOpen3(isOpen3);
   };
 

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

@@ -17,7 +17,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
   const [isOpen2, setIsOpen2] = React.useState(false);
   const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
 
-  const onToggle1 = isOpen1 => {
+  const onToggle1 = (_event: any, isOpen1: boolean) => {
     setIsOpen1(isOpen1);
   };
 
@@ -25,7 +25,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = isOpen2 => {
+  const onToggle2 = (_event: any, isOpen2: boolean) => {
     setIsOpen2(isOpen2);
   };
 

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

@@ -23,7 +23,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = React.useState(false);
   const [isOpen2, setIsOpen2] = React.useState(false);
 
-  const onToggle1 = isOpen1 => {
+  const onToggle1 = (_event: any, isOpen1: boolean) => {
     setIsOpen1(isOpen1);
   };
 
@@ -31,7 +31,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = isOpen2 => {
+  const onToggle2 = (_event: any, isOpen2: boolean) => {
     setIsOpen2(isOpen2);
   };
 

package/src/components/DatePicker/DatePicker.tsx

@@ -16,13 +16,13 @@ import { isValidDate } from '../../helpers/datetimeUtils';
 export interface DatePickerProps
   extends CalendarFormat,
     Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
-  /** The container to append the menu to. Defaults to 'parent'.
+  /** The container to append the menu to. Defaults to 'inline'.
    * 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';
+  appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';
   /** Accessible label for the date picker. */
   'aria-label'?: string;
   /** Accessible label for the button to open the date picker. */
@@ -95,7 +95,7 @@ const DatePickerBase = (
     onBlur = (): any => undefined,
     invalidFormatText = 'Invalid date',
     helperText,
-    appendTo = 'parent',
+    appendTo = 'inline',
     popoverProps,
     monthFormat,
     weekdayFormat,
@@ -197,9 +197,6 @@ const DatePickerBase = (
     [setPopoverOpen, popoverOpen, selectOpen]
   );
 
-  const getParentElement = () =>
-    datePickerWrapperRef && datePickerWrapperRef.current ? datePickerWrapperRef.current : null;
-
   return (
     <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
       <Popover
@@ -243,7 +240,7 @@ const DatePickerBase = (
         withFocusTrap
         hasNoPadding
         hasAutoWidth
-        appendTo={appendTo === 'parent' ? getParentElement() : appendTo}
+        appendTo={appendTo}
         {...popoverProps}
       >
         <div className={styles.datePickerInput}>

package/src/components/DatePicker/__tests__/DatePicker.test.tsx

@@ -3,6 +3,8 @@ import { DatePicker } from '../DatePicker';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 
+jest.mock('../../../helpers/util.ts')
+
 test('disabled date picker', () => {
   const { asFragment } = render(<DatePicker value="2020-11-20" isDisabled aria-label="disabled date picker" />);
   expect(asFragment()).toMatchSnapshot();
@@ -48,3 +50,14 @@ test('Error state can be cleared from outside', async () => {
 
   expect(screen.getByRole('textbox')).not.toBeInvalid();
 });
+
+test('With popover opened', async () => {
+  const user = userEvent.setup();
+
+  const { asFragment } = render(<DatePicker />);
+
+  await user.click(screen.getByRole('button', { name: 'Toggle date picker' }));
+  await screen.findByRole('button', { name: 'Previous month' });
+
+  expect(asFragment()).toMatchSnapshot();
+})