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

package/src/components/Dropdown/BadgeToggle.tsx

@@ -20,7 +20,10 @@ export interface BadgeToggleProps extends DropdownToggleProps {
   /** Label Toggle button */
   'aria-label'?: string;
   /** Callback called when toggle is clicked */
-  onToggle?: (isOpen: boolean) => void;
+  onToggle?: (
+    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
+    isOpen: boolean
+  ) => void;
   /** Element which wraps toggle */
   parentRef?: any;
   /** The menu element */

package/src/components/Dropdown/DropdownToggle.tsx

@@ -16,7 +16,10 @@ export interface DropdownToggleProps extends React.HTMLProps<HTMLButtonElement>,
   /** Flag to indicate if menu is opened */
   isOpen?: boolean;
   /** Callback called when toggle is clicked */
-  onToggle?: (value: boolean, event: any) => void;
+  onToggle?: (
+    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
+    isOpen: boolean
+  ) => void;
   /** Element which wraps toggle */
   parentRef?: HTMLElement;
   /** The menu element */
@@ -67,7 +70,7 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   isActive = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onToggle = (_isOpen: boolean) => undefined as any,
+  onToggle = (_evt: any, _isOpen: boolean) => undefined as any,
   icon = null,
   toggleIndicator: ToggleIndicator = CaretDownIcon,
   splitButtonItems,

package/src/components/Dropdown/KebabToggle.tsx

@@ -15,7 +15,10 @@ export interface KebabToggleProps extends DropdownToggleProps {
   /** Label Toggle button */
   'aria-label'?: string;
   /** Callback called when toggle is clicked */
-  onToggle?: (value: boolean, event: any) => void;
+  onToggle?: (
+    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
+    isOpen: boolean
+  ) => void;
   /** Element which wraps toggle */
   parentRef?: any;
   /** The menu element */

package/src/components/Dropdown/Toggle.tsx

@@ -18,8 +18,8 @@ export interface ToggleProps {
   isOpen?: boolean;
   /** Callback called when toggle is clicked */
   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
   ) => void;
   /** Callback called when the Enter key is pressed */
   onEnter?: () => void;
@@ -86,7 +86,7 @@ export class Toggle extends React.Component<ToggleProps> {
     const clickedOnToggle = parentRef && parentRef.current && parentRef.current.contains(event.target as Node);
     const clickedWithinMenu = menuRef && menuRef.contains && menuRef.contains(event.target as Node);
     if (isOpen && !(clickedOnToggle || clickedWithinMenu)) {
-      onToggle?.(false, event);
+      onToggle?.(event, false);
     }
   };
 
@@ -100,7 +100,7 @@ export class Toggle extends React.Component<ToggleProps> {
       (event.key === KeyTypes.Escape || event.key === 'Tab') &&
       (escFromToggle || escFromWithinMenu)
     ) {
-      this.props.onToggle?.(false, event);
+      this.props.onToggle?.(event, false);
       this.buttonRef.current?.focus();
     }
   };
@@ -115,14 +115,14 @@ export class Toggle extends React.Component<ToggleProps> {
       }
       event.preventDefault();
 
-      this.props.onToggle?.(!this.props.isOpen, event);
+      this.props.onToggle?.(event, !this.props.isOpen);
     } else if ((event.key === 'Enter' || event.key === ' ') && !this.props.isOpen) {
       if (!this.props.bubbleEvent) {
         event.stopPropagation();
       }
       event.preventDefault();
 
-      this.props.onToggle?.(!this.props.isOpen, event);
+      this.props.onToggle?.(event, !this.props.isOpen);
       this.props.onEnter?.();
     }
   };
@@ -166,7 +166,7 @@ export class Toggle extends React.Component<ToggleProps> {
               className
             )}
             type={type || 'button'}
-            onClick={event => onToggle?.(!isOpen, event)}
+            onClick={event => onToggle?.(event, !isOpen)}
             aria-expanded={isOpen}
             aria-haspopup={ariaHasPopup}
             onKeyDown={event => this.onKeyDown(event)}

package/src/components/Dropdown/__tests__/DropdownToggle.test.tsx

@@ -19,7 +19,7 @@ describe('DropdownToggle', () => {
       );
 
       await user.click(screen.getByRole('button'));
-      expect(mockToggle.mock.calls[0][0]).toBe(true);
+      expect(mockToggle.mock.calls[0][1]).toBe(true);
     });
 
     test('click on opened', async () => {
@@ -33,7 +33,7 @@ describe('DropdownToggle', () => {
       );
 
       await user.click(screen.getByRole('button'));
-      expect(mockToggle.mock.calls[0][0]).toBe(false);
+      expect(mockToggle.mock.calls[0][1]).toBe(false);
     });
 
     test('on click outside has been removed', () => {

package/src/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx

@@ -4,13 +4,13 @@ import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patt
 export const DropdownAlignmentOnBreakpoints: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-breakpoints');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx

@@ -5,20 +5,20 @@ export const DropdownAppendBodyVsParent: React.FunctionComponent = () => {
   const [isBodyOpen, setIsBodyOpen] = React.useState(false);
   const [isParentOpen, setIsParentOpen] = React.useState(false);
 
-  const onBodyToggle = (isBodyOpen: boolean) => {
+  const onBodyToggle = (_event: any, isBodyOpen: boolean) => {
     setIsBodyOpen(isBodyOpen);
   };
-  const onParentToggle = (isParentOpen: boolean) => {
+  const onParentToggle = (_event: any, isParentOpen: boolean) => {
     setIsParentOpen(isParentOpen);
   };
 
   const onBodyFocus = () => {
     const element = document.getElementById('toggle-append-body');
-    element.focus();
+    element?.focus();
   };
   const onParentFocus = () => {
     const element = document.getElementById('toggle-append-parent');
-    element.focus();
+    element?.focus();
   };
 
   const onBodySelect = () => {

package/src/components/Dropdown/examples/DropdownBadge.tsx

@@ -5,13 +5,13 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 export const DropdownBadge: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-badge');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownBasic.tsx

@@ -4,13 +4,13 @@ import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patt
 export const DropdownBasic: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-basic');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownBasicPanel.tsx

@@ -4,13 +4,13 @@ import { Dropdown, DropdownToggle } from '@patternfly/react-core';
 export const DropdownBasicPanel: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-panel');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownDescriptions.tsx

@@ -6,13 +6,13 @@ import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 export const DropdownDescriptions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-descriptions');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownDirectionUp.tsx

@@ -4,13 +4,13 @@ import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownDire
 export const DropdownDirectionUp: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-direction-up');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownDisabled.tsx

@@ -4,13 +4,13 @@ import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patt
 export const DropdownDisabled: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-disabled');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownGroups.tsx

@@ -4,13 +4,13 @@ import { Dropdown, DropdownToggle, DropdownGroup, DropdownItem } from '@patternf
 export const DropdownGroups: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-groups');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownIconOnly.tsx

@@ -5,13 +5,13 @@ import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 export const DropdownIconOnly: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-icon-only');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownImageAndText.tsx

@@ -12,13 +12,13 @@ import avatarImg from '../../Avatar/examples/avatarImg.svg';
 export const DropdownImageAndText: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-image-and-text');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownInitialSelection.tsx

@@ -4,13 +4,13 @@ import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patt
 export const DropdownInitialSelection: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-initial-selection');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownKebab.tsx

@@ -4,13 +4,13 @@ import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from '@pattern
 export const DropdownKebab: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-kebab');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownPlainTextToggle.tsx

@@ -4,13 +4,13 @@ import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patt
 export const DropdownPlainTextToggle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-plain-text');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownPositionRight.tsx

@@ -4,13 +4,13 @@ import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosi
 export const DropdownPositionRight: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-position-right');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownPrimaryToggle.tsx

@@ -4,13 +4,13 @@ import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patt
 export const DropdownPrimaryToggle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-primary');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownRouterLink.tsx

@@ -5,13 +5,13 @@ import { Link } from '@reach/router';
 export const DropdownRouterLink: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-router-link');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownSecondaryToggle.tsx

@@ -4,13 +4,13 @@ import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patt
 export const DropdownPrimaryToggle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-secondary');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownSplitButton.tsx

@@ -10,13 +10,13 @@ import {
 export const DropdownSplitButton: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-split-button');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownSplitButtonAction.tsx

@@ -8,10 +8,10 @@ export const DropdownSplitButtonAction: React.FunctionComponent = () => {
   const [isActionOpen, setIsActionOpen] = React.useState(false);
   const [isCogOpen, setIsCogOpen] = React.useState(false);
 
-  const onActionToggle = (isActionOpen: boolean) => {
+  const onActionToggle = (_event: any, isActionOpen: boolean) => {
     setIsActionOpen(isActionOpen);
   };
-  const onCogToggle = (isCogOpen: boolean) => {
+  const onCogToggle = (_event: any, isCogOpen: boolean) => {
     setIsCogOpen(isCogOpen);
   };
 
@@ -24,11 +24,11 @@ export const DropdownSplitButtonAction: React.FunctionComponent = () => {
 
   const onActionFocus = () => {
     const element = document.getElementById('toggle-split-button-action');
-    element.focus();
+    element?.focus();
   };
   const onCogFocus = () => {
     const element = document.getElementById('toggle-split-button-cog');
-    element.focus();
+    element?.focus();
   };
 
   const onActionSelect = () => {

package/src/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx

@@ -8,10 +8,10 @@ export const DropdownSplitButtonActionPrimary: React.FunctionComponent = () => {
   const [isActionOpen, setIsActionOpen] = React.useState(false);
   const [isCogOpen, setIsCogOpen] = React.useState(false);
 
-  const onActionToggle = (isActionOpen: boolean) => {
+  const onActionToggle = (_event: any, isActionOpen: boolean) => {
     setIsActionOpen(isActionOpen);
   };
-  const onCogToggle = (isCogOpen: boolean) => {
+  const onCogToggle = (_event: any, isCogOpen: boolean) => {
     setIsCogOpen(isCogOpen);
   };
 
@@ -24,11 +24,11 @@ export const DropdownSplitButtonActionPrimary: React.FunctionComponent = () => {
 
   const onActionFocus = () => {
     const element = document.getElementById('toggle-split-button-action-primary');
-    element.focus();
+    element?.focus();
   };
   const onCogFocus = () => {
     const element = document.getElementById('toggle-split-button-cog-primary');
-    element.focus();
+    element?.focus();
   };
 
   const onActionSelect = () => {

package/src/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx

@@ -8,10 +8,10 @@ export const DropdownSplitButtonActionSecondary: React.FunctionComponent = () =>
   const [isActionOpen, setIsActionOpen] = React.useState(false);
   const [isCogOpen, setIsCogOpen] = React.useState(false);
 
-  const onActionToggle = (isActionOpen: boolean) => {
+  const onActionToggle = (_event: any, isActionOpen: boolean) => {
     setIsActionOpen(isActionOpen);
   };
-  const onCogToggle = (isCogOpen: boolean) => {
+  const onCogToggle = (_event: any, isCogOpen: boolean) => {
     setIsCogOpen(isCogOpen);
   };
 
@@ -24,11 +24,11 @@ export const DropdownSplitButtonActionSecondary: React.FunctionComponent = () =>
 
   const onActionFocus = () => {
     const element = document.getElementById('toggle-split-button-action-secondary');
-    element.focus();
+    element?.focus();
   };
   const onCogFocus = () => {
     const element = document.getElementById('toggle-split-button-cog-secondary');
-    element.focus();
+    element?.focus();
   };
 
   const onActionSelect = () => {

package/src/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx

@@ -10,13 +10,13 @@ import {
 export const DropdownSplitButtonDisabled: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-split-button');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx

@@ -17,11 +17,11 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
   const [isTimedOut1, setIsTimedOut1] = React.useState(true);
   const [isTimedOut2, setIsTimedOut2] = React.useState(true);
 
-  const onToggle1 = (isOpen: boolean) => {
+  const onToggle1 = (_event: any, isOpen: boolean) => {
     setIsOpen1(isOpen);
   };
 
-  const onToggle2 = (isOpen: boolean) => {
+  const onToggle2 = (_event: any, isOpen: boolean) => {
     setIsOpen2(isOpen);
   };
 
@@ -37,12 +37,12 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
 
   const onFocus1 = () => {
     const element = document.getElementById('toggle-split-button-progress');
-    element.focus();
+    element?.focus();
   };
 
   const onFocus2 = () => {
     const element = document.getElementById('toggle-split-button-progress-text');
-    element.focus();
+    element?.focus();
   };
 
   const onChange1 = (checked: boolean) => {

package/src/components/Dropdown/examples/DropdownSplitButtonText.tsx

@@ -10,13 +10,13 @@ import {
 export const DropdownSplitButtonText: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (isOpen: boolean) => {
+  const onToggle = (_event: any, isOpen: boolean) => {
     setIsOpen(isOpen);
   };
 
   const onFocus = () => {
     const element = document.getElementById('toggle-split-button-text');
-    element.focus();
+    element?.focus();
   };
 
   const onSelect = () => {

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -81,7 +81,7 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
       toggle={
         <KebabToggle
           isDisabled={isDisabled}
-          onToggle={isOpen => onToggle(isOpen, 'available')}
+          onToggle={(_event: any, isOpen: boolean) => onToggle(isOpen, 'available')}
           id="complex-available-toggle"
         />
       }
@@ -106,7 +106,7 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
       toggle={
         <KebabToggle
           isDisabled={isDisabled}
-          onToggle={isOpen => onToggle(isOpen, 'chosen')}
+          onToggle={(_event: any, isOpen: boolean) => onToggle(isOpen, 'chosen')}
           id="complex-chosen-toggle"
         />
       }

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);
   };