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

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
     height="1em"
     role="img"
     style="vertical-align: -0.125em;"
-    viewBox="0 0 448 512"
+    viewBox="0 0 830 1024"
     width="1em"
   >
     <title
@@ -19,7 +19,7 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
       string
     </title>
     <path
-      d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"
+      d="M0,1024 C7.8,907.1 37.3,664.2 147.8,568.3 C147.8,568.3 207.5,511.5 298.4,511.996718 L530.3,511.996718 C621.3,511.996718 680.9,568.3 680.9,568.3 C680.9,568.3 813.9,680.1 830,1024 L0,1024 Z M639.4,224 C639.4,347.7 539.1,448 415.4,448 C291.7,448 191.4,347.7 191.4,224 C191.4,100.3 291.9,0 415.6,0 C539.3,0 639.4,100.3 639.4,224 L639.4,224 Z"
     />
   </svg>
 </DocumentFragment>

package/src/components/Hint/examples/HintBasicWithTitle.tsx

@@ -14,7 +14,7 @@ import {
 export const HintBasicWithTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 

package/src/components/Hint/examples/HintBasicWithoutTitle.tsx

@@ -13,7 +13,7 @@ import {
 export const HintBasicWithoutTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 

package/src/components/InputGroup/examples/InputGroupWithDropdown.tsx

@@ -4,7 +4,7 @@ import { Button, InputGroup, TextInput, Dropdown, DropdownToggle, DropdownItem }
 export const InputGroupWithDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 

package/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx

@@ -114,15 +114,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
         categoryName="Label group 1"
         numLabels={5}
         isEditable
-        addLabelControl={
-          <Popper
-            trigger={toggle}
-            popper={menu}
-            appendTo={containerRef.current}
-            isVisible={isOpen}
-            popperMatchesTriggerWidth={false}
-          />
-        }
+        addLabelControl={<Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />}
       >
         {labels.map((label, index) => (
           <Label

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -45,7 +45,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
     <SelectOption key={6} value={i18n.Bengali} />
   ];
 
-  const onHeaderUtilsToggle = (isExpanded: boolean) => {
+  const onHeaderUtilsToggle = (_event: any, isExpanded: boolean) => {
     setIsHeaderUtilsOpen(isExpanded);
   };
 

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -110,7 +110,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
       <BreadcrumbItem isDropdown>
         <Dropdown
           toggle={
-            <BadgeToggle id="toggle-id" onToggle={open => onToggle(open, 'app')}>
+            <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'app')}>
               1
             </BadgeToggle>
           }
@@ -144,7 +144,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
       <BreadcrumbItem isDropdown>
         <Dropdown
           toggle={
-            <BadgeToggle id="toggle-id" onToggle={open => onToggle(open, 'label')}>
+            <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'label')}>
               1
             </BadgeToggle>
           }
@@ -190,7 +190,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
       <BreadcrumbItem isDropdown>
         <Dropdown
           toggle={
-            <BadgeToggle id="toggle-id" onToggle={open => onToggle(open, 'pause-app')}>
+            <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'pause-app')}>
               1
             </BadgeToggle>
           }
@@ -224,7 +224,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
       <BreadcrumbItem isDropdown>
         <Dropdown
           toggle={
-            <BadgeToggle id="toggle-id" onToggle={open => onToggle(open, 'pause-label')}>
+            <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'pause-label')}>
               1
             </BadgeToggle>
           }

package/src/components/Modal/examples/ModalWithDropdown.tsx

@@ -11,7 +11,7 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
     setIsDropdownOpen(false);
   };
 
-  const handleDropdownToggle = (isDropdownOpen: boolean) => {
+  const handleDropdownToggle = (_event: any, isDropdownOpen: boolean) => {
     setIsDropdownOpen(isDropdownOpen);
   };
 

package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -18,7 +18,7 @@ import {
 export const NotificationDrawerBasic: React.FunctionComponent = () => {
   const [isOpenMap, setIsOpenMap] = React.useState(new Array(7).fill(false));
 
-  const onToggle = (index: number) => (isOpen: boolean) => {
+  const onToggle = (index: number) => (_event: any, isOpen: boolean) => {
     const newState = [...isOpenMap.slice(0, index), isOpen, ...isOpenMap.slice(index + 1)];
     setIsOpenMap(newState);
   };

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -74,7 +74,10 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
         <Dropdown
           onSelect={onSelect}
           toggle={
-            <KebabToggle onToggle={isOpen => onToggle('groups-kebab-toggle-1', isOpen)} id="groups-kebab-toggle-1" />
+            <KebabToggle
+              onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-1', isOpen)}
+              id="groups-kebab-toggle-1"
+            />
           }
           isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-1']}
           isPlain
@@ -103,7 +106,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                     onSelect={onSelect}
                     toggle={
                       <KebabToggle
-                        onToggle={isOpen => onToggle('groups-kebab-toggle-2', isOpen)}
+                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-2', isOpen)}
                         id="groups-kebab-toggle-2"
                       />
                     }
@@ -128,7 +131,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                     onSelect={onSelect}
                     toggle={
                       <KebabToggle
-                        onToggle={isOpen => onToggle('groups-kebab-toggle-3', isOpen)}
+                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-3', isOpen)}
                         id="groups-kebab-toggle-3"
                       />
                     }
@@ -154,7 +157,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                     onSelect={onSelect}
                     toggle={
                       <KebabToggle
-                        onToggle={isOpen => onToggle('groups-kebab-toggle-4', isOpen)}
+                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-4', isOpen)}
                         id="groups-kebab-toggle-4"
                       />
                     }
@@ -180,7 +183,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                     onSelect={onSelect}
                     toggle={
                       <KebabToggle
-                        onToggle={isOpen => onToggle('groups-kebab-toggle-5', isOpen)}
+                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-5', isOpen)}
                         id="groups-kebab-toggle-5"
                       />
                     }
@@ -214,7 +217,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                     onSelect={onSelect}
                     toggle={
                       <KebabToggle
-                        onToggle={isOpen => onToggle('groups-kebab-toggle-6', isOpen)}
+                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-6', isOpen)}
                         id="groups-kebab-toggle-6"
                       />
                     }
@@ -239,7 +242,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                     onSelect={onSelect}
                     toggle={
                       <KebabToggle
-                        onToggle={isOpen => onToggle('groups-kebab-toggle-7', isOpen)}
+                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-7', isOpen)}
                         id="groups-kebab-toggle-7"
                       />
                     }
@@ -265,7 +268,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                     onSelect={onSelect}
                     toggle={
                       <KebabToggle
-                        onToggle={isOpen => onToggle('groups-kebab-toggle-8', isOpen)}
+                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-8', isOpen)}
                         id="groups-kebab-toggle-8"
                       />
                     }
@@ -291,7 +294,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                     onSelect={onSelect}
                     toggle={
                       <KebabToggle
-                        onToggle={isOpen => onToggle('groups-kebab-toggle-9', isOpen)}
+                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-9', isOpen)}
                         id="groups-kebab-toggle-9"
                       />
                     }

package/src/components/OptionsMenu/OptionsMenu.tsx

@@ -43,8 +43,6 @@ export interface OptionsMenuProps extends React.HTMLProps<HTMLDivElement>, OUIAP
    * menuAppendTo={document.getElementById('target')}
    */
   menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /** z-index of the options menu when menuAppendTo is not inline. */
   zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -65,7 +63,6 @@ export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({
   menuAppendTo = 'inline',
   ouiaId,
   ouiaSafe = true,
-  removeFindDomNode = false,
   zIndex = 9999,
   ...props
 }: OptionsMenuProps) => (
@@ -94,7 +91,6 @@ export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({
       isGrouped={isGrouped}
       toggle={toggle}
       menuAppendTo={menuAppendTo}
-      removeFindDomNode={removeFindDomNode}
       zIndex={zIndex}
       {...props}
     />

package/src/components/OptionsMenu/OptionsMenuToggle.tsx

@@ -5,7 +5,10 @@ export interface OptionsMenuToggleProps extends React.HTMLProps<HTMLButtonElemen
   /** Id of the parent options menu component */
   parentId?: string;
   /** Callback for when this options menu is toggled */
-  onToggle?: (isOpen: boolean) => void;
+  onToggle?: (
+    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
+    isOpen: boolean
+  ) => void;
   /** Flag to indicate if menu is open */
   isOpen?: boolean;
   /** Flag to indicate if the button is plain */

package/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx

@@ -16,7 +16,10 @@ export interface OptionsMenuToggleWithTextProps extends React.HTMLProps<HTMLDivE
   /** Classes to be added to the options menu toggle button */
   toggleButtonContentsClassName?: string;
   /** Callback for when this options menu is toggled */
-  onToggle?: (event: boolean) => void;
+  onToggle?: (
+    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
+    isOpen: boolean
+  ) => void;
   /** Inner function to indicate open on Enter */
   onEnter?: (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<Element>) => void;
   /** Flag to indicate if menu is open */
@@ -77,7 +80,7 @@ export const OptionsMenuToggleWithText: React.FunctionComponent<OptionsMenuToggl
 
   const onDocClick = (event: MouseEvent | TouchEvent) => {
     if (isOpen && parentRef && parentRef.current && !parentRef.current.contains(event.target as Node)) {
-      onToggle(false);
+      onToggle(event, false);
       buttonRef.current.focus();
     }
   };
@@ -88,9 +91,9 @@ export const OptionsMenuToggleWithText: React.FunctionComponent<OptionsMenuToggl
     }
     event.preventDefault();
     if ((event.key === 'Enter' || event.key === ' ') && isOpen) {
-      onToggle(!isOpen);
+      onToggle(event, !isOpen);
     } else if ((event.key === 'Enter' || event.key === ' ') && !isOpen) {
-      onToggle(!isOpen);
+      onToggle(event, !isOpen);
       onEnter(event);
     }
   };
@@ -103,7 +106,7 @@ export const OptionsMenuToggleWithText: React.FunctionComponent<OptionsMenuToggl
       parentRef.current &&
       parentRef.current.contains(event.target as Node)
     ) {
-      onToggle(false);
+      onToggle(event, false);
       buttonRef.current.focus();
     }
   };
@@ -130,7 +133,7 @@ export const OptionsMenuToggleWithText: React.FunctionComponent<OptionsMenuToggl
             aria-expanded={isOpen}
             ref={buttonRef}
             disabled={isDisabled}
-            onClick={() => onToggle(!isOpen)}
+            onClick={event => onToggle(event, !isOpen)}
             onKeyDown={onKeyDown}
           >
             <span className={css(styles.optionsMenuToggleButtonIcon)}>{toggleButtonContents}</span>

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

@@ -39,7 +39,7 @@ class SimpleOverflowMenu extends React.Component {
     this.state = {
       isOpen: false
     };
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -121,7 +121,7 @@ class OverflowMenuGroupTypes extends React.Component {
     this.state = {
       isOpen: false
     };
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -241,7 +241,7 @@ class OverflowMenuAdditionalOptions extends React.Component {
     this.state = {
       isOpen: false
     };
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });
@@ -345,7 +345,7 @@ class OverflowMenuPersist extends React.Component {
     this.state = {
       isOpen: false
     };
-    this.onToggle = isOpen => {
+    this.onToggle = (_event, isOpen) => {
       this.setState({
         isOpen
       });

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

@@ -16,7 +16,7 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
   const [containerWidth, setContainerWidth] = React.useState(100);
   const containerRef = React.useRef<HTMLDivElement>(null);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 

package/src/components/Popover/Popover.tsx

@@ -48,8 +48,8 @@ export interface PopoverProps {
   alertSeverityVariant?: 'default' | 'info' | 'warning' | 'success' | 'danger';
   /** The duration of the CSS fade transition animation. */
   animationDuration?: number;
-  /** The element to append the popover to. Defaults to "document.body". */
-  appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement);
+  /** The element to append the popover to. Defaults to "inline". */
+  appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';
   /** Accessible label for the popover, required when header is not present. */
   'aria-label'?: string;
   /**
@@ -232,7 +232,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   alertSeverityVariant,
   alertSeverityScreenReaderText,
   footerContent = null,
-  appendTo = () => document.body,
+  appendTo = 'inline',
   hideOnOutsideClick = true,
   onHide = (): void => null,
   onHidden = (): void => null,

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

@@ -106,7 +106,6 @@ test('popover renders in strict mode', () => {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
           </div>
         }
-        removeFindDomNode
       >
         <div>Toggle Popover</div>
       </Popover>

package/src/components/Select/Select.tsx

@@ -127,7 +127,7 @@ export interface SelectProps
     isPlaceholder?: boolean
   ) => void;
   /** Callback for toggle button behavior */
-  onToggle: (isExpanded: boolean, event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => void;
+  onToggle: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event, isExpanded: boolean) => void;
   /** Callback for toggle blur */
   onBlur?: (event?: any) => void;
   /** Callback for typeahead clear button */
@@ -385,7 +385,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     this.setState({ focusFirstOption: true });
   };
 
-  onToggle = (isExpanded: boolean, e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => {
+  onToggle = (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event, isExpanded: boolean) => {
     const { isInputValuePersisted, onSelect, onToggle, hasInlineFilter } = this.props;
     if (!isExpanded && isInputValuePersisted && onSelect) {
       onSelect(undefined, this.inputRef.current ? this.inputRef.current.value : '');
@@ -395,7 +395,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         focusFirstOption: true
       });
     }
-    onToggle(isExpanded, e);
+    onToggle(e, isExpanded);
   };
 
   onClose = () => {
@@ -415,7 +415,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
 
   onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value.toString() !== '' && !this.props.isOpen) {
-      this.onToggle(true, e);
+      this.onToggle(e, true);
     }
 
     if (this.props.onTypeaheadInputChanged) {
@@ -572,7 +572,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
 
   onClick = (e: React.MouseEvent) => {
     if (!this.props.isOpen) {
-      this.onToggle(true, e);
+      this.onToggle(e, true);
     }
   };
 
@@ -836,7 +836,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         } else {
           // Close if there is no footer
           if (!this.props.footer) {
-            this.onToggle(false, null);
+            this.onToggle(null, false);
             this.onClose();
           } else {
             // has footer
@@ -845,14 +845,14 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             if (this.inputRef.current === document.activeElement) {
               if (shiftKey) {
                 // close toggle if shift key and tab on input
-                this.onToggle(false, null);
+                this.onToggle(null, false);
                 this.onClose();
               } else {
                 // tab to first tabbable item in footer
                 if (tabbableItems[0]) {
                   tabbableItems[0].focus();
                 } else {
-                  this.onToggle(false, null);
+                  this.onToggle(null, false);
                   this.onClose();
                 }
               }
@@ -872,7 +872,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                   tabbableItems[currentElementIndex + 1].focus();
                 } else {
                   // no next item, close toggle
-                  this.onToggle(false, null);
+                  this.onToggle(null, false);
                   this.inputRef.current.focus();
                   this.onClose();
                 }
@@ -1174,7 +1174,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                 } else if (event.key === KeyTypes.Tab && variant !== SelectVariant.checkbox && this.props.footer) {
                   // tab to footer or close menu if shift key
                   if (event.shiftKey) {
-                    this.onToggle(false, event);
+                    this.onToggle(event, false);
                   } else {
                     const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
                     if (tabbableItems.length > 0) {
@@ -1182,7 +1182,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                       event.stopPropagation();
                       event.preventDefault();
                     } else {
-                      this.onToggle(false, event);
+                      this.onToggle(event, false);
                     }
                   }
                 } else if (event.key === KeyTypes.Tab && variant === SelectVariant.checkbox) {

package/src/components/Select/SelectToggle.tsx

@@ -18,7 +18,7 @@ export interface SelectToggleProps extends Omit<React.HTMLProps<HTMLElement>, 'r
   /** Flag to indicate if select is open */
   isOpen?: boolean;
   /** Callback called when toggle is clicked */
-  onToggle?: (isExpanded: boolean, event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => void;
+  onToggle?: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event, isExpanded: boolean) => void;
   /** Callback for toggle open on keyboard entry */
   onEnter?: () => void;
   /** Callback for toggle close */
@@ -118,7 +118,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
       footerRef && footerRef.current && footerRef.current.contains && footerRef.current.contains(event.target as Node);
 
     if (isOpen && !(clickedOnToggle || clickedWithinMenu || clickedWithinFooter)) {
-      onToggle(false, event);
+      onToggle(event, false);
       onClose();
     }
   };
@@ -153,7 +153,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
 
       // If no tabbable item in footer close select
       if (tabbableItems.length <= 0) {
-        onToggle(false, event);
+        onToggle(event, false);
         onClose();
         this.toggle.current.focus();
         return;
@@ -164,7 +164,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
           if (event.shiftKey) {
             if (variant !== 'checkbox') {
               // only close non checkbox variation on shift clicked
-              onToggle(false, event);
+              onToggle(event, false);
               onClose();
               this.toggle.current.focus();
             }
@@ -188,7 +188,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
           tabbableItems[currentElementIndex + 1].focus();
         } else {
           // no more footer items close menu
-          onToggle(false, event);
+          onToggle(event, false);
           onClose();
           this.toggle.current.focus();
         }
@@ -202,7 +202,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
       (event.key === KeyTypes.Escape || event.key === KeyTypes.Tab) &&
       (escFromToggle || escFromWithinMenu)
     ) {
-      onToggle(false, event);
+      onToggle(event, false);
       onClose();
       this.toggle.current.focus();
     }
@@ -219,7 +219,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
         if (isOpen) {
           handleTypeaheadKeys('enter');
         } else {
-          onToggle(!isOpen, event);
+          onToggle(event, !isOpen);
         }
       }
     }
@@ -234,11 +234,11 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
     }
     event.preventDefault();
     if ((event.key === KeyTypes.Tab || event.key === KeyTypes.Enter || event.key === KeyTypes.Space) && isOpen) {
-      onToggle(!isOpen, event);
+      onToggle(event, !isOpen);
       onClose();
       this.toggle.current.focus();
     } else if ((event.key === KeyTypes.Enter || event.key === KeyTypes.Space) && !isOpen) {
-      onToggle(!isOpen, event);
+      onToggle(event, !isOpen);
       onEnter();
     }
   };
@@ -308,7 +308,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
             onBlur={onBlur}
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             onClick={event => {
-              onToggle(!isOpen, event);
+              onToggle(event, !isOpen);
               if (isOpen) {
                 onClose();
               }
@@ -336,7 +336,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             onClick={event => {
               if (!isDisabled) {
-                onToggle(!isOpen, event);
+                onToggle(event, !isOpen);
                 if (isOpen) {
                   onClose();
                 }
@@ -351,7 +351,7 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
               className={css(buttonStyles.button, styles.selectToggleButton, styles.modifiers.plain)}
               aria-label={ariaLabel}
               onClick={event => {
-                onToggle(!isOpen, event);
+                onToggle(event, !isOpen);
                 if (isOpen) {
                   onClose();
                 }

package/src/components/Select/__tests__/SelectToggle.test.tsx

@@ -18,7 +18,7 @@ describe('SelectToggle', () => {
       );
 
       await user.click(screen.getByRole('button'));
-      expect(mockToggle).toHaveBeenCalledWith(true, expect.any(Object));
+      expect(mockToggle).toHaveBeenCalledWith(expect.any(Object), true);
     });
 
     test('click on opened', async () => {
@@ -37,7 +37,7 @@ describe('SelectToggle', () => {
       );
 
       await user.click(screen.getByRole('button'));
-      expect(mockToggle).toHaveBeenCalledWith(false, expect.any(MouseEvent));
+      expect(mockToggle).toHaveBeenCalledWith(expect.any(MouseEvent), false);
     });
 
     test('click on document', async () => {
@@ -56,7 +56,7 @@ describe('SelectToggle', () => {
       );
 
       await user.click(screen.getByText('Select').parentElement);
-      expect(mockToggle).toHaveBeenCalledWith(false, expect.any(MouseEvent));
+      expect(mockToggle).toHaveBeenCalledWith(expect.any(MouseEvent), false);
     });
 
     test('on click outside has been removed', async () => {