@patternfly/react-core 5.0.0-alpha.17 → 5.0.0-alpha.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.17",
+  "version": "5.0.0-alpha.18",
   "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": "74884ce289eed041ecd7f28a0db5c73f5c616d34"
+  "gitHead": "9235609a8831e00cbe785e6a88ae42f587837f49"
 }

package/src/components/Accordion/examples/AccordionBordered.tsx

@@ -123,7 +123,7 @@ export const AccordionBordered: React.FunctionComponent = () => {
         <Checkbox
           label="Display size large"
           isChecked={isDisplayLarge}
-          onChange={setIsDisplayLarge}
+          onChange={(_event, checked) => setIsDisplayLarge(checked)}
           aria-label="show display large variation checkbox"
           id="toggle-display-lg"
           name="toggle-display-lg"

package/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -48,9 +48,9 @@ export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement
   /** ID list of favorited ApplicationLauncherItems */
   favorites?: string[];
   /** Enables favorites. Callback called when an ApplicationLauncherItem's favorite button is clicked */
-  onFavorite?: (itemId: string, isFavorite: boolean) => void;
+  onFavorite?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, itemId: string, isFavorite: boolean) => void;
   /** Enables search. Callback called when text input is entered into search box */
-  onSearch?: (textInput: string) => void;
+  onSearch?: (event: React.FormEvent<HTMLInputElement>, textInput: string) => void;
   /** Placeholder text for search input */
   searchPlaceholderText?: string;
   /** Text for search input when no results are found */
@@ -97,7 +97,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
           customChild={
             <SearchInput
               placeholder={searchPlaceholderText}
-              onChange={(_event, value) => onSearch(value)}
+              onChange={onSearch}
               {...searchProps}
             />
           }

package/src/components/ApplicationLauncher/ApplicationLauncherContext.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 
 export const ApplicationLauncherContext = React.createContext({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onFavorite: (itemId: string, isFavorite: boolean) => {}
+  onFavorite: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, itemId: string, isFavorite: boolean) => {}
 });

package/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx

@@ -75,8 +75,8 @@ export const ApplicationLauncherItem: React.FunctionComponent<ApplicationLaunche
               <button
                 className={css(styles.appLauncherMenuItem, styles.modifiers.action)}
                 aria-label={isFavorite ? ariaIsFavoriteLabel : ariaIsNotFavoriteLabel}
-                onClick={() => {
-                  onFavorite((id || getUniqueId('app-launcher-option')).replace('favorite-', ''), isFavorite);
+                onClick={(event) => {
+                  onFavorite(event, (id || getUniqueId('app-launcher-option')).replace('favorite-', ''), isFavorite);
                 }}
               >
                 <StarIcon />

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

@@ -45,7 +45,7 @@ export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = ()
     setFilteredItems(null);
   };
 
-  const onFavorite = (itemId: string, isFavorite: boolean) => {
+  const onFavorite = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, itemId: string, isFavorite: boolean) => {
     let updatedFavorites: string[] = [...favorites, itemId];
 
     if (isFavorite) {
@@ -55,7 +55,7 @@ export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = ()
     setFavorites(updatedFavorites);
   };
 
-  const onSearch = (textInput: string) => {
+  const onSearch = (_event: React.FormEvent<HTMLInputElement>, textInput: string) => {
     if (textInput === '') {
       setFilteredItems(null);
     } else {

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

@@ -89,7 +89,7 @@ export const CardExpandable: React.FunctionComponent = () => {
             />
             <Checkbox
               isChecked={isChecked}
-              onChange={onClick}
+              onChange={(_event, checked) => onClick(checked)}
               aria-label="card checkbox example"
               id="check-4"
               name="check4"

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

@@ -73,7 +73,7 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
           />
           <Checkbox
             isChecked={isChecked}
-            onChange={onClick}
+            onChange={(_event, checked) => onClick(checked)}
             aria-label="card checkbox example"
             id="check-5"
             name="check5"

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

@@ -56,7 +56,7 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
           />
           <Checkbox
             isChecked={isChecked}
-            onChange={onClick}
+            onChange={(_event, checked) => onClick(checked)}
             aria-label="card checkbox example"
             id="check-2"
             name="check2"

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

@@ -54,7 +54,7 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
           />
           <Checkbox
             isChecked={isChecked}
-            onChange={onClick}
+            onChange={(_event, checked) => onClick(checked)}
             aria-label="card checkbox example"
             id="check-3"
             name="check3"

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

@@ -67,7 +67,7 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
             />
             <Checkbox
               isChecked={isChecked}
-              onChange={onClick}
+              onChange={(_event, checked) => onClick(checked)}
               aria-label="card checkbox example"
               id="check-1"
               name="check1"
@@ -82,7 +82,7 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
         <Checkbox
           label="actions hasNoOffset"
           isChecked={hasNoOffset}
-          onChange={toggleOffset}
+          onChange={(_event, checked) => toggleOffset(checked)}
           aria-label="remove actions offset"
           id="toggle-actions-offset"
           name="toggle-actions-offset"

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

@@ -14,7 +14,7 @@ export const CardWithModifiers: React.FunctionComponent = () => {
             key={mod}
             label={mod}
             isChecked={modifiers[mod]}
-            onChange={checked => {
+            onChange={(_event, checked) =>  {
               modifiers[mod] = checked;
               setModifiers({ ...modifiers });
             }}

package/src/components/Checkbox/Checkbox.tsx

@@ -20,7 +20,7 @@ export interface CheckboxProps
   isChecked?: boolean | null;
   checked?: boolean;
   /** A callback for when the checkbox selection changes. */
-  onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
   /** Label text of the checkbox. */
   label?: React.ReactNode;
   /** Id of the checkbox. */
@@ -67,7 +67,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   }
 
   private handleChange = (event: React.FormEvent<HTMLInputElement>): void => {
-    this.props.onChange(event.currentTarget.checked, event);
+    this.props.onChange(event, event.currentTarget.checked);
   };
 
   render() {

package/src/components/Checkbox/examples/CheckboxControlled.tsx

@@ -7,7 +7,7 @@ export const CheckboxControlled: React.FunctionComponent = () => {
   const [isChecked3, setIsChecked3] = React.useState<boolean>(false);
   const [isChecked4, setIsChecked4] = React.useState<boolean>(false);
 
-  const handleChange = (checked: boolean, event: React.FormEvent<HTMLInputElement>) => {
+  const handleChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     const target = event.currentTarget;
     const name = target.name;
 

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -72,7 +72,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   /** A function that is triggered on clicking the copy button. */
   onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
   /** A function that is triggered on changing the text. */
-  onChange?: (text?: string | number) => void;
+  onChange?: (event: React.FormEvent, text?: string | number) => void;
   /** The text which is copied. */
   children: React.ReactNode;
   /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
@@ -119,7 +119,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   componentDidUpdate = (prevProps: ClipboardCopyProps, prevState: ClipboardCopyState) => {
     if (prevProps.children !== this.props.children) {
-      this.updateText(this.props.children as string | number);
+      this.setState({ text: this.props.children as string | number });
     }
   };
 
@@ -136,9 +136,9 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
     }));
   };
 
-  updateText = (text: string | number) => {
+  updateText = (text: string | number, event: React.FormEvent) => {
     this.setState({ text });
-    this.props.onChange(text);
+    this.props.onChange(event, text);
   };
 
   render = () => {
@@ -265,7 +265,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
                     isReadOnly={isReadOnly}
                     isCode={isCode}
                     id={`content-${id}`}
-                    onChange={this.updateText}
+                    onChange={(event, text) => this.updateText(text, event)}
                   >
                     {this.state.text}
                   </ClipboardCopyExpanded>

package/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx

@@ -7,7 +7,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 export interface ClipboardCopyExpandedProps extends Omit<ClipboardCopyProps, 'onChange'> {
   className?: string;
   children: React.ReactNode;
-  onChange?: (text: string, e: React.FormEvent<HTMLDivElement>) => void;
+  onChange?: (e: React.FormEvent<HTMLDivElement>, text: string) => void;
   isReadOnly?: boolean;
   isCode?: boolean;
 }
@@ -32,7 +32,7 @@ export class ClipboardCopyExpanded extends React.Component<ClipboardCopyExpanded
       <div
         suppressContentEditableWarning
         className={css(styles.clipboardCopyExpandableContent, className)}
-        onInput={(e: any) => onChange(e.target.innerText, e)}
+        onInput={(e: any) => onChange(e, e.target.innerText)}
         contentEditable={!isReadOnly}
         {...props}
       >

package/src/components/DescriptionList/examples/DescriptionListWithCard.tsx

@@ -23,7 +23,7 @@ export const DescriptionListWithCard: React.FunctionComponent = () => {
         <Checkbox
           label="isSelectable"
           isChecked={isChecked}
-          onChange={toggleSelectable}
+          onChange={(_event, checked) => toggleSelectable(checked)}
           aria-label="set isSelectable"
           id="toggle-isSelectable"
           name="toggle-isSelectable"

package/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx

@@ -24,7 +24,7 @@ export const DescriptionListWithLargeDisplaySize: React.FunctionComponent = () =
         <Checkbox
           label="displaySize 2xl"
           isChecked={isChecked}
-          onChange={toggleDisplaySize}
+          onChange={(_event, checked) => toggleDisplaySize(checked)}
           aria-label="set display size 2xl"
           id="toggle-display-size"
           name="toggle-display-size"

package/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx

@@ -24,7 +24,7 @@ export const DescriptionListWithLargeDisplaySizeAndCard: React.FunctionComponent
         <Checkbox
           label="displaySize 2xl"
           isChecked={isChecked}
-          onChange={toggleDisplaySize}
+          onChange={(_event, checked) => toggleDisplaySize(checked)}
           aria-label="set display size 2xl"
           id="toggle-display-size-with-card"
           name="toggle-display-size-with-card"

package/src/components/Drawer/examples/DrawerLightGray.tsx

@@ -66,7 +66,7 @@ export const DrawerLightGray: React.FunctionComponent = () => {
       <Checkbox
         label="Gray panel"
         isChecked={panelGray}
-        onChange={togglePanelGray}
+        onChange={(_event, checked) => togglePanelGray(checked)}
         aria-label="Gray panel checkbox"
         id="toggle-gray-panel"
         name="toggle-gray-panel"
@@ -74,7 +74,7 @@ export const DrawerLightGray: React.FunctionComponent = () => {
       <Checkbox
         label="Gray content"
         isChecked={contentGray}
-        onChange={toggleContentGray}
+        onChange={(_event, checked) => toggleContentGray(checked)}
         aria-label="Gray content checkbox"
         id="toggle-gray-content"
         name="toggle-gray-content"
@@ -82,7 +82,7 @@ export const DrawerLightGray: React.FunctionComponent = () => {
       <Checkbox
         label="Gray section"
         isChecked={sectionGray}
-        onChange={toggleSectionGray}
+        onChange={(_event, checked) => toggleSectionGray(checked)}
         aria-label="Gray section checkbox"
         id="toggle-gray-section"
         name="toggle-gray-section"

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -89,7 +89,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
           label={stateKey}
           aria-label={stateKey}
           isChecked={checkedState[index]}
-          onChange={checked => handleOnChange(checked, stateKey, index)}
+          onChange={(_event, checked) => handleOnChange(checked, stateKey, index)}
         />
       ))}
       <br />

package/src/components/Icon/examples/IconCustomProgress.tsx

@@ -10,7 +10,7 @@ export const IconProgress: React.FunctionComponent = () => {
         <Checkbox
           label="Toggle in progress state"
           isChecked={isInProgress}
-          onChange={checked => setIsInProgress(checked)}
+          onChange={(_event, checked) => setIsInProgress(checked)}
           aria-label="Set icon progress state"
           id="toggle-icon-progress-custom"
           name="toggle-icon-progress-custom"

package/src/components/Icon/examples/IconProgress.tsx

@@ -10,7 +10,7 @@ export const IconProgress: React.FunctionComponent = () => {
         <Checkbox
           label="Toggle in progress state"
           isChecked={isInProgress}
-          onChange={checked => setIsInProgress(checked)}
+          onChange={(_event, checked) => setIsInProgress(checked)}
           aria-label="Set icon progress state"
           id="toggle-icon-progress"
           name="toggle-icon-progress"

package/src/components/LoginPage/LoginForm.tsx

@@ -142,7 +142,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
             id="pf-login-remember-me-id"
             label={rememberMeLabel}
             isChecked={isRememberMeChecked}
-            onChange={onChangeRememberMe}
+            onChange={(event, checked) => onChangeRememberMe(checked, event)}
           />
         </FormGroup>
       )}

package/src/components/Menu/MenuItem.tsx

@@ -350,7 +350,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
                     id={randomId}
                     component="span"
                     isChecked={isSelected || false}
-                    onChange={event => onItemSelect(event, onSelect)}
+                    onChange={(event) => onItemSelect(event, onSelect)}
                     isDisabled={isDisabled}
                   />
                 </span>

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

@@ -40,7 +40,7 @@ export const MenuBasic: React.FunctionComponent = () => {
         <Checkbox
           label="Plain menu"
           isChecked={isPlain}
-          onChange={togglePlain}
+          onChange={(_event, checked) => togglePlain(checked)}
           aria-label="plain menu checkbox"
           id="toggle-plain"
           name="toggle-plain"

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

@@ -264,7 +264,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
       <Checkbox
         label="Set max menu height"
         isChecked={withMaxMenuHeight}
-        onChange={onToggleMaxMenuHeight}
+        onChange={(_event, checked) => onToggleMaxMenuHeight(checked)}
         aria-label="Set max menu height checkbox"
         id="toggle-max-menu-height"
         name="toggle-max-menu-height"

package/src/components/Popover/examples/PopoverAdvanced.tsx

@@ -41,14 +41,14 @@ export const PopoverAdvanced: React.FunctionComponent = () => {
         <Checkbox
           label="Flip popover if the position falls outside the view"
           isChecked={keepInViewChecked}
-          onChange={handleKeepInViewChange}
+          onChange={(_event, checked) => handleKeepInViewChange(checked)}
           aria-label="Keep in view"
           id="popover-advanced-check-1"
         />
         <Checkbox
           label="Toggle popover from outside"
           isChecked={show}
-          onChange={handleProgrammaticChange}
+          onChange={(_event, checked) => handleProgrammaticChange(checked)}
           aria-label="Toggle popover from outside"
           id="popover-advanced-check-2"
         />

package/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx

@@ -10,7 +10,7 @@ export const ProgressStepperBasicWithAlignment: React.FunctionComponent = () =>
       <Checkbox
         label="Vertical alignment"
         isChecked={isVertical}
-        onChange={setIsVertical}
+        onChange={(_event, checked) => setIsVertical(checked)}
         aria-label="Toggle vertical alignment"
         id="toggle-vertical"
         name="toggle-vertical"
@@ -18,7 +18,7 @@ export const ProgressStepperBasicWithAlignment: React.FunctionComponent = () =>
       <Checkbox
         label="Center alignment"
         isChecked={isCenterAligned}
-        onChange={setIsCenterAligned}
+        onChange={(_event, checked) => setIsCenterAligned(checked)}
         aria-label="Toggle center alignment"
         id="toggle-center"
         name="toggle-center"

package/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx

@@ -10,7 +10,7 @@ export const ProgressStepperCompact: React.FunctionComponent = () => {
       <Checkbox
         label="Vertical alignment"
         isChecked={isVertical}
-        onChange={setIsVertical}
+        onChange={(_event, checked) => setIsVertical(checked)}
         aria-label="Toggle compact vertical alignment"
         id="toggle-compact-vertical"
         name="toggle-compact-vertical"
@@ -18,7 +18,7 @@ export const ProgressStepperCompact: React.FunctionComponent = () => {
       <Checkbox
         label="Center alignment"
         isChecked={isCenterAligned}
-        onChange={setIsCenterAligned}
+        onChange={(_event, checked) => setIsCenterAligned(checked)}
         aria-label="Toggle compact center alignment"
         id="toggle-compact-center"
         name="toggle-compact-center"

package/src/components/SearchInput/examples/SearchInputAdvanced.tsx

@@ -17,7 +17,7 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
       <Checkbox
         label="Use equal sign as search attribute delimiter"
         isChecked={useEqualsAsDelimiter}
-        onChange={toggleDelimiter}
+        onChange={(_event, checked) => toggleDelimiter(checked)}
         aria-label="change delimiter checkbox"
         id="toggle-delimiter"
         name="toggle-delimiter"
@@ -25,7 +25,7 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
       <Checkbox
         label="Add custom footer element after the attributes in the menu"
         isChecked={useCustomFooter}
-        onChange={value => setUseCustomFooter(value)}
+        onChange={(_event, checked) => setUseCustomFooter(checked)}
         aria-label="change use custom footer checkbox"
         id="toggle-custom-footer"
         name="toggle-custom-footer"

package/src/components/Select/examples/Select.md

@@ -117,7 +117,7 @@ class SingleSelectInput extends React.Component {
         <Checkbox
           label="isDisabled"
           isChecked={this.state.isDisabled}
-          onChange={this.toggleDisabled}
+          onChange={(_event, checked) => this.toggleDisabled(checked)} 
           aria-label="disabled checkbox"
           id="toggle-disabled"
           name="toggle-disabled"
@@ -133,7 +133,7 @@ class SingleSelectInput extends React.Component {
         <Checkbox
           label="Show icon"
           isChecked={isToggleIcon}
-          onChange={this.setIcon}
+          onChange={(_event, checked) => this.setIcon(checked)} 
           aria-label="show icon checkbox"
           id="toggle-icon"
           name="toggle-icon"
@@ -843,7 +843,7 @@ class FilteringSingleSelectInput extends React.Component {
         <Checkbox
           label="isInputValuePersisted"
           isChecked={isInputValuePersisted}
-          onChange={this.toggleInputValuePersisted}
+          onChange={(_event, checked) => this.toggleInputValuePersisted(checked)} 
           aria-label="toggle input value persisted"
           id="toggle-inline-filter-input-value-persisted"
           name="toggle-inline-filter-input-value-persisted"
@@ -851,7 +851,7 @@ class FilteringSingleSelectInput extends React.Component {
         <Checkbox
           label="isInputFilterPersisted"
           isChecked={isInputFilterPersisted}
-          onChange={this.toggleInputFilterPersisted}
+          onChange={(_event, checked) => this.toggleInputFilterPersisted(checked)} 
           aria-label="toggle input filter persisted"
           id="toggle-inline-filter-input-filter-persisted"
           name="toggle-inline-filter-input-filter-persisted"
@@ -859,7 +859,7 @@ class FilteringSingleSelectInput extends React.Component {
         <Checkbox
           label="isCreatable"
           isChecked={this.state.isCreatable}
-          onChange={this.toggleCreatable}
+          onChange={(_event, checked) => this.toggleCreatable(checked)} 
           aria-label="toggle creatable checkbox"
           id="toggle-inline-filter-creatable-typeahead"
           name="toggle-inline-filter-creatable-typeahead"
@@ -1359,7 +1359,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isDisabled"
           isChecked={this.state.isDisabled}
-          onChange={this.toggleDisabled}
+          onChange={(_event, checked) => this.toggleDisabled(checked)} 
           aria-label="toggle disabled checkbox"
           id="toggle-disabled-typeahead"
           name="toggle-disabled-typeahead"
@@ -1367,7 +1367,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isCreatable"
           isChecked={this.state.isCreatable}
-          onChange={this.toggleCreatable}
+          onChange={(_event, checked) => this.toggleCreatable(checked)} 
           aria-label="toggle creatable checkbox"
           id="toggle-creatable-typeahead"
           name="toggle-creatable-typeahead"
@@ -1375,7 +1375,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isCreateOptionOnTop"
           isChecked={this.state.isCreateOptionOnTop}
-          onChange={this.toggleCreateOptionOnTop}
+          onChange={(_event, checked) => this.toggleCreateOptionOnTop(checked)} 
           aria-label="toggle createOptionOnTop checkbox"
           id="toggle-create-option-on-top-typeahead"
           name="toggle-create-option-on-top-typeahead"
@@ -1383,7 +1383,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}
-          onChange={this.toggleCreateNew}
+          onChange={(_event, checked) => this.toggleCreateNew(checked)} 
           aria-label="toggle new checkbox"
           id="toggle-new-typeahead"
           name="toggle-new-typeahead"
@@ -1391,7 +1391,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isInputValuePersisted"
           isChecked={isInputValuePersisted}
-          onChange={this.toggleInputValuePersisted}
+          onChange={(_event, checked) => this.toggleInputValuePersisted(checked)} 
           aria-label="toggle input value persisted"
           id="toggle-input-value-persisted"
           name="toggle-input-value-persisted"
@@ -1399,7 +1399,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isInputFilterPersisted"
           isChecked={isInputFilterPersisted}
-          onChange={this.toggleInputFilterPersisted}
+          onChange={(_event, checked) => this.toggleInputFilterPersisted(checked)} 
           aria-label="toggle input filter persisted"
           id="toggle-input-filter-persisted"
           name="toggle-input-filter-persisted"
@@ -1407,7 +1407,7 @@ class TypeaheadSelectInput extends React.Component {
         <Checkbox
           label="shouldResetOnSelect"
           isChecked={this.state.resetOnSelect}
-          onChange={this.toggleResetOnSelect}
+          onChange={(_event, checked) => this.toggleResetOnSelect(checked)} 
           aria-label="toggle reset checkbox"
           id="toggle-reset-typeahead"
           name="toggle-reset-typeahead"
@@ -1529,7 +1529,7 @@ class GroupedTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isCreatable"
           isChecked={this.state.isCreatable}
-          onChange={this.toggleCreatable}
+          onChange={(_event, checked) => this.toggleCreatable(checked)} 
           aria-label="toggle creatable checkbox"
           id="toggle-creatable-grouped-typeahead"
           name="toggle-creatable-grouped-typeahead"
@@ -1537,7 +1537,7 @@ class GroupedTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}
-          onChange={this.toggleCreateNew}
+          onChange={(_event, checked) => this.toggleCreateNew(checked)} 
           aria-label="toggle new checkbox"
           id="toggle-new-grouped-typeahead"
           name="toggle-new-grouped-typeahead"
@@ -1756,7 +1756,7 @@ class MultiTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="isCreatable"
           isChecked={this.state.isCreatable}
-          onChange={this.toggleCreatable}
+          onChange={(_event, checked) => this.toggleCreatable(checked)} 
           aria-label="toggle creatable checkbox"
           id="toggle-creatable-typeahead-multi"
           name="toggle-creatable-typeahead-multi"
@@ -1764,7 +1764,7 @@ class MultiTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}
-          onChange={this.toggleCreateNew}
+          onChange={(_event, checked) => this.toggleCreateNew(checked)} 
           aria-label="toggle new checkbox"
           id="toggle-new-typeahead-multi"
           name="toggle-new-typeahead-multi"
@@ -1780,7 +1780,7 @@ class MultiTypeaheadSelectInput extends React.Component {
         <Checkbox
           label="shouldResetOnSelect"
           isChecked={this.state.resetOnSelect}
-          onChange={this.toggleResetOnSelect}
+          onChange={(_event, checked) => this.toggleResetOnSelect(checked)} 
           aria-label="toggle multi reset checkbox"
           id="toggle-reset-multi-typeahead"
           name="toggle-reset-multi-typeahead"
@@ -2228,7 +2228,7 @@ class SingleSelectInput extends React.Component {
         <Checkbox
           label="isDisabled"
           isChecked={this.state.isDisabled}
-          onChange={this.toggleDisabled}
+          onChange={(_event, checked) => this.toggleDisabled(checked)} 
           aria-label="disabled checkbox panel"
           id="toggle-disabled-panel"
           name="toggle-disabled-panel"

package/src/components/Slider/examples/SliderContinuous.tsx

@@ -12,7 +12,7 @@ export const SliderContinuous: React.FunctionComponent = () => {
         id="thumb-has-tooltip"
         label="hasTooltipOverThumb"
         isChecked={hasTooltipOverThumb}
-        onChange={setHasTooltipOverThumb}
+        onChange={(_event, checked) => setHasTooltipOverThumb(checked)}
         style={{ marginBottom: 20 }}
       />
       <Text component={TextVariants.h3}>Slider Value is: {value}</Text>

package/src/components/Tabs/examples/TabsBoxLight.tsx

@@ -52,7 +52,7 @@ export const TabsBoxLight: React.FunctionComponent = () => {
         <Checkbox
           label="Tabs light variation"
           isChecked={isTabsLightScheme}
-          onChange={toggleScheme}
+          onChange={(_event, checked) => toggleScheme(checked)}
           aria-label="show light scheme variation checkbox"
           id="toggle-scheme"
           name="toggle-scheme"

package/src/components/Tabs/examples/TabsDefault.tsx

@@ -51,7 +51,7 @@ export const TabsDefault: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox"
           id="toggle-box-default"
           name="toggle-box-default"