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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.16",
+  "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": "ff72b0a89309c1b530671eebde61310f0adca298"
+  "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/DrawerPanelContent.tsx

@@ -17,7 +17,7 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
   /** Flag indicating that the drawer panel should be resizable. */
   isResizable?: boolean;
   /** Callback for resize end. */
-  onResize?: (width: number, id: string) => void;
+  onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
   /** The minimum size of a drawer, in either pixels or percentage. */
   minSize?: string;
   /** The starting size of a resizable drawer, in either pixels or percentage. */
@@ -60,9 +60,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const panel = React.useRef<HTMLDivElement>();
   const splitterRef = React.useRef<HTMLDivElement>();
   const [separatorValue, setSeparatorValue] = React.useState(0);
-  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline } = React.useContext(
-    DrawerContext
-  );
+  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline } =
+    React.useContext(DrawerContext);
   const hidden = isStatic ? false : !isExpanded;
   const [isExpandedInternal, setIsExpandedInternal] = React.useState(!hidden);
   let currWidth: number = 0;
@@ -169,13 +168,13 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     setSeparatorValue(calcValueNow());
   };
 
-  const handleMouseup = () => {
+  const handleMouseup = (e: MouseEvent) => {
     if (!isResizing) {
       return;
     }
     drawerRef.current.classList.remove(css(styles.modifiers.resizing));
     isResizing = false;
-    onResize && onResize(currWidth, id);
+    onResize && onResize(e, currWidth, id);
     setInitialVals = true;
     document.removeEventListener('mousemove', callbackMouseMove);
     document.removeEventListener('mouseup', callbackMouseUp);
@@ -187,7 +186,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
       return;
     }
     isResizing = false;
-    onResize && onResize(currWidth, id);
+    onResize && onResize(e, currWidth, id);
     document.removeEventListener('touchmove', callbackTouchMove);
     document.removeEventListener('touchend', callbackTouchEnd);
   };
@@ -215,7 +214,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     e.preventDefault();
 
     if (key === 'Escape' || key === 'Enter') {
-      onResize && onResize(currWidth, id);
+      onResize && onResize(e, currWidth, id);
     }
     const panelRect = panel.current.getBoundingClientRect();
     newSize = position === 'bottom' ? panelRect.height : panelRect.width;
@@ -249,7 +248,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   }
   return (
     <GenerateId prefix="pf-drawer-panel-">
-      {panelId => (
+      {(panelId) => (
         <div
           id={id || panelId}
           className={css(
@@ -261,7 +260,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
             className
           )}
           ref={panel}
-          onTransitionEnd={ev => {
+          onTransitionEnd={(ev) => {
             if (!hidden && ev.nativeEvent.propertyName === 'transform') {
               onExpand();
             }

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/Drawer/examples/DrawerResizableOnRight.tsx

@@ -26,7 +26,7 @@ export const DrawerResizableOnRight: React.FunctionComponent = () => {
     setIsExpanded(false);
   };
 
-  const onResize = (newWidth: number, id: string) => {
+  const onResize = (_event: MouseEvent | TouchEvent | React.KeyboardEvent, newWidth: number, id: string) => {
     // eslint-disable-next-line no-console
     console.log(`${id} has new width of: ${newWidth}`);
   };

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/MenuContent.tsx

@@ -6,7 +6,7 @@ import { MenuContext } from './MenuContext';
 export interface MenuContentProps extends React.HTMLProps<HTMLElement> {
   /** Items within group */
   children?: React.ReactNode;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Height of the menu content */
   menuHeight?: string;

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/Page/__tests__/__snapshots__/Page.test.tsx.snap

@@ -1225,12 +1225,20 @@ exports[`Page Check page to verify skip to content points to main content region
     data-testid="page-test-id"
     id="PageId"
   >
-    <a
-      class="pf-c-button pf-m-primary pf-c-skip-to-content"
-      href="#main-content-page-layout-test-nav"
+    <div
+      class="pf-c-skip-to-content"
     >
-      Skip to Content
-    </a>
+      <a
+        aria-disabled="false"
+        class="pf-c-button pf-m-primary"
+        data-ouia-component-id="OUIA-Generated-Button-primary-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        href="#main-content-page-layout-test-nav"
+      >
+        Skip to Content
+      </a>
+    </div>
     <header
       class="pf-c-page__header"
     >

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"