@patternfly/react-core 5.0.0-alpha.84 → 5.0.0-alpha.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.84",
+  "version": "5.0.0-alpha.86",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ccc411cf45e6becc43211d3aad5e6da4062b14c5"
+  "gitHead": "ba1717602667f1cba6fe191e752264c78327ae4b"
 }

package/src/components/{ChipGroup → Chip}/ChipGroup.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ChipGroup/chip-group';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
-import { Chip } from '../Chip';
+import { Chip } from './Chip';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import { fillTemplate } from '../../helpers';

package/src/components/Chip/examples/Chip.md

@@ -2,13 +2,31 @@
 id: Chip
 section: components
 cssPrefix: pf-c-chip
-propComponents: ['Chip']
+propComponents: ['Chip', 'ChipGroup']
 ouia: true
 ---
 
 ## Examples
 
-### Default
+### Chip variants
+Chips can be removable or read-only. The Overflow chip is a special chip that is used to expand or collapse the content of a chip group.
 
 ```ts file='./ChipDefault.tsx'
 ```
+
+### Chip groups
+
+A chip group is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When the value of `numChips` is exceeded, additional chips will be hidden using an overflow chip.
+
+```ts file='./ChipGroupInline.tsx'
+```
+
+### Chip groups with categories
+
+```ts file='./ChipGroupWithCategories.tsx'
+```
+
+### Chip groups with removable categories
+
+```ts file='./ChipGroupRemovableCategories.tsx'
+```

package/src/components/Chip/index.ts

@@ -1 +1,2 @@
 export * from './Chip';
+export * from './ChipGroup';

package/src/components/Drawer/Drawer.tsx

@@ -21,13 +21,13 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   /** Position of the drawer panel */
   position?: 'left' | 'right' | 'bottom';
   /** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */
-  onExpand?: () => void;
+  onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
 }
 
 export interface DrawerContextProps {
   isExpanded: boolean;
   isStatic: boolean;
-  onExpand?: () => void;
+  onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
   position?: string;
   drawerRef?: React.RefObject<HTMLDivElement>;
   drawerContentRef?: React.RefObject<HTMLDivElement>;

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -263,7 +263,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
           onTransitionEnd={(ev) => {
             if (ev.target as HTMLElement === panel.current) {
               if (!hidden && ev.nativeEvent.propertyName === 'transform') {
-                onExpand();
+                onExpand(ev);
               }
               setIsExpandedInternal(!hidden);
             }

package/src/components/MultipleFileUpload/MultipleFileUpload.tsx

@@ -18,7 +18,7 @@ export interface MultipleFileUploadProps extends Omit<React.HTMLProps<HTMLDivEle
   /** Flag setting the component to horizontal styling mode */
   isHorizontal?: boolean;
   /** When files are dropped or uploaded this callback will be called with all accepted files */
-  onFileDrop?: (data: File[]) => void;
+  onFileDrop?: (event: DropEvent, data: File[]) => void;
 }
 
 export const MultipleFileUploadContext = React.createContext({
@@ -34,7 +34,7 @@ export const MultipleFileUpload: React.FunctionComponent<MultipleFileUploadProps
   ...props
 }: MultipleFileUploadProps) => {
   const onDropAccepted = (acceptedFiles: File[], event: DropEvent) => {
-    onFileDrop(acceptedFiles);
+    onFileDrop(event, acceptedFiles);
     // allow users to set a custom drop accepted handler rather than using on data change
     dropzoneProps.onDropAccepted && dropzoneProps.onDropAccepted(acceptedFiles, event);
   };
@@ -47,7 +47,7 @@ export const MultipleFileUpload: React.FunctionComponent<MultipleFileUploadProps
 
   const rootProps = getRootProps({
     ...props,
-    onClick: event => event.preventDefault() // Prevents clicking TextArea from opening file dialog
+    onClick: (event) => event.preventDefault() // Prevents clicking TextArea from opening file dialog
   });
 
   return (

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -50,4 +50,18 @@ The "Show as horizontal" checkbox can be used to easily toggle the `isHorizontal
 The "Demonstrate error reporting by forcing uploads to fail" checkbox shows how our `progressHelperText` prop can be used to provide status messages to users, such as when a file fails to upload. While this checkbox is checked it will cause any file uploaded to automatically fail the file reading process, and helper text will be dynamically rendered which informs the user of that error.
 
 ```ts file="./MultipleFileUploadBasic.tsx"
+
 ```
+
+## Types
+
+Multiple file upload uses both the `DropEvent` and `DropzoneOptions` types from react-dropzone. The `DropEvent` type is a union comprised of the following types:
+
+```noLive
+ React.DragEvent<HTMLElement>
+ | React.ChangeEvent<HTMLInputElement>
+ | DragEvent
+ | Event
+```
+
+`DropzoneOptions` is comprised of additional props with their own types. For more information on using `DropzoneOptions` visit [react-dropzone props and methods](https://react-dropzone.js.org/#src).

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -8,6 +8,7 @@ import {
   HelperText,
   HelperTextItem
 } from '@patternfly/react-core';
+import { DropEvent } from 'react-dropzone';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {
@@ -68,7 +69,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   };
 
   // callback that will be called by the react dropzone with the newly dropped file objects
-  const handleFileDrop = (droppedFiles: File[]) => {
+  const handleFileDrop = (_event: DropEvent, droppedFiles: File[]) => {
     // identify what, if any, files are re-uploads of already uploaded files
     const currentFileNames = currentFiles.map((file) => file.name);
     const reUploads = droppedFiles.filter((droppedFile) => currentFileNames.includes(droppedFile.name));

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

@@ -8,6 +8,7 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Slider,
+  SliderOnChangeEvent,
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
@@ -26,7 +27,7 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
     setIsOpen(!isOpen);
   };
 
-  const onChange = (value: number) => {
+  const onChange = (_event: SliderOnChangeEvent, value: number) => {
     setContainerWidth(value);
   };
 

package/src/components/Page/Page.tsx

@@ -30,7 +30,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   /** Flag indicating if breadcrumb width should be limited */
   isBreadcrumbWidthLimited?: boolean;
   /** Callback when notification drawer panel is finished expanding. */
-  onNotificationDrawerExpand?: () => void;
+  onNotificationDrawerExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
   /** Skip to content component for the page */
   skipToContent?: React.ReactElement;
   /** Sets the value for role on the <main> element */
@@ -54,7 +54,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * Can add callback to be notified when resize occurs, for example to set the sidebar isSidebarOpen prop to false for a width < 768px
    * Returns object { mobileView: boolean, windowSize: number }
    */
-  onPageResize?: ((object: any) => void) | null;
+  onPageResize?: ((event: MouseEvent | TouchEvent | React.KeyboardEvent, object: any) => void) | null;
   /**
    * The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class
    * You can override the default getBreakpoint function to return breakpoints at different sizes than the default
@@ -163,11 +163,11 @@ export class Page extends React.Component<PageProps, PageState> {
     // eslint-disable-next-line radix
     this.getWindowWidth() < Number.parseInt(globalBreakpointXl.value, 10);
 
-  resize = () => {
+  resize = (_event?: MouseEvent | TouchEvent | React.KeyboardEvent<Element>) => {
     const { onPageResize } = this.props;
     const mobileView = this.isMobile();
     if (onPageResize) {
-      onPageResize({ mobileView, windowSize: this.getWindowWidth() });
+      onPageResize(_event, { mobileView, windowSize: this.getWindowWidth() });
     }
     if (mobileView !== this.state.mobileView) {
       this.setState({ mobileView });
@@ -324,7 +324,7 @@ export class Page extends React.Component<PageProps, PageState> {
           {sidebar}
           {notificationDrawer && (
             <div className={css(styles.pageDrawer)}>
-              <Drawer isExpanded={isNotificationDrawerExpanded} onExpand={onNotificationDrawerExpand}>
+              <Drawer isExpanded={isNotificationDrawerExpanded} onExpand={(event) => onNotificationDrawerExpand(event)}>
                 <DrawerContent panelContent={panelContent}>
                   <DrawerContentBody>{main}</DrawerContentBody>
                 </DrawerContent>

package/src/components/Slider/Slider.tsx

@@ -19,6 +19,13 @@ export interface SliderStepObject {
   value: number;
 }
 
+export type SliderOnChangeEvent =
+  | React.MouseEvent
+  | React.KeyboardEvent
+  | React.FormEvent<HTMLInputElement>
+  | React.TouchEvent
+  | React.FocusEvent<HTMLInputElement>;
+
 /** The main slider component. */
 export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** Flag indicating if the slider is discrete for custom steps. This will cause the slider
@@ -55,6 +62,7 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   min?: number;
   /** Value change callback. This is called when the slider value changes. */
   onChange?: (
+    event: SliderOnChangeEvent,
     value: number,
     inputValue?: number,
     setLocalInputValue?: React.Dispatch<React.SetStateAction<number>>
@@ -131,7 +139,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (event.key === 'Enter') {
       event.preventDefault();
       if (onChange) {
-        onChange(localValue, localInputValue, setLocalInputValue);
+        onChange(event, localValue, localInputValue, setLocalInputValue);
       }
     }
   };
@@ -144,9 +152,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     thumbRef.current.focus();
   };
 
-  const onBlur = () => {
+  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     if (onChange) {
-      onChange(localValue, localInputValue, setLocalInputValue);
+      onChange(event, localValue, localInputValue, setLocalInputValue);
     }
   };
 
@@ -196,7 +204,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       thumbRef.current.style.setProperty('--pf-c-slider--value', `${snapValue}%`);
       setValue(snapValue);
       if (onChange) {
-        onChange(snapValue);
+        onChange(e, snapValue);
       }
     }
   };
@@ -260,9 +268,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     // Call onchange callback
     if (onChange) {
       if (snapValue !== undefined) {
-        onChange(snapValue);
+        onChange(e, snapValue);
       } else {
-        onChange(newValue);
+        onChange(e, newValue);
       }
     }
   };
@@ -302,7 +310,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       thumbRef.current.style.setProperty('--pf-c-slider--value', `${newValue}%`);
       setValue(newValue);
       if (onChange) {
-        onChange(newValue);
+        onChange(e, newValue);
       }
     }
   };

package/src/components/Slider/examples/Slider.md

@@ -16,29 +16,55 @@ import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon'
 ### Discrete
 
 ```ts file="./SliderDiscrete.tsx"
+
 ```
 
 ### Continuous
 
 ```ts file="./SliderContinuous.tsx"
+
 ```
 
 ### Value input
 
 ```ts file="./SliderValueInput.tsx"
+
 ```
 
 ### Thumb value input
 
 ```ts file="./SliderThumbValueInput.tsx"
+
 ```
 
 ### Actions
 
 ```ts file="./SliderActions.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./SliderDisabled.tsx"
+
+```
+
+## Types
+
+### SliderOnChangeEvent
+
+The slider's `onChange` prop accepts an `event` parameter of the following types:
+
+- `React.MouseEvent`
+- `React.KeyboardEvent`
+- `React.FormEvent<HTMLInputElement>`
+- `React.TouchEvent`
+- `React.FocusEvent<HTMLInputElement>`
+
+The `SliderOnChangeEvent` type is a union of the above event types, and can be imported and used in your code like in the following code snippet:
+
+```noLive
+import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
+
+<Slider onChange={(event: SliderOnChangeEvent) => {}} />
 ```

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider, Button, Text, TextVariants } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent, Button, Text, TextVariants } from '@patternfly/react-core';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
@@ -11,11 +11,12 @@ export const SliderActions: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = React.useState(50);
   const [isDisabled, setIsDisabled] = React.useState(false);
 
-  const onChange1 = (value: number) => {
+  const onChange1 = (_event: SliderOnChangeEvent, value: number) => {
     setValue1(Math.floor(Number(value)));
   };
 
   const onChange2 = (
+    _event: SliderOnChangeEvent,
     value: number,
     inputValue: number,
     setLocalInputValue: React.Dispatch<React.SetStateAction<number>>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox, Slider, Text, TextVariants } from '@patternfly/react-core';
+import { Checkbox, Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';
 
 export const SliderContinuous: React.FunctionComponent = () => {
   const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false);
@@ -12,15 +12,19 @@ export const SliderContinuous: React.FunctionComponent = () => {
         id="thumb-has-tooltip"
         label="hasTooltipOverThumb"
         isChecked={hasTooltipOverThumb}
-        onChange={(_event, checked) => setHasTooltipOverThumb(checked)}
+        onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) => setHasTooltipOverThumb(checked)}
         style={{ marginBottom: 20 }}
       />
       <Text component={TextVariants.h3}>Slider Value is: {value}</Text>
-      <Slider hasTooltipOverThumb={hasTooltipOverThumb} value={value} onChange={setValue} />
+      <Slider
+        hasTooltipOverThumb={hasTooltipOverThumb}
+        value={value}
+        onChange={(_event: SliderOnChangeEvent, value: number) => setValue(value)}
+      />
       <br />
       <Text component={TextVariants.h3}>Slider value is: {valueCustom}</Text>
       <Slider
-        onChange={setValueCustom}
+        onChange={(_event: SliderOnChangeEvent, value: number) => setValueCustom(value)}
         value={valueCustom}
         areCustomStepsContinuous
         hasTooltipOverThumb={hasTooltipOverThumb}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider, Text, TextVariants } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';
 
 export const SliderDisabled: React.FunctionComponent = () => {
   const [value, setValue] = React.useState(50);
@@ -16,14 +16,19 @@ export const SliderDisabled: React.FunctionComponent = () => {
   ];
 
   const displayValue = () => {
-    const step = steps.find(step => step.value === value);
+    const step = steps.find((step) => step.value === value);
     return step ? step.label : 0;
   };
 
   return (
     <>
       <Text component={TextVariants.h3}>Slider value is: {displayValue()}</Text>
-      <Slider isDisabled value={value} onChange={setValue} customSteps={steps} />
+      <Slider
+        isDisabled
+        value={value}
+        onChange={(_event: SliderOnChangeEvent, value: number) => setValue(value)}
+        customSteps={steps}
+      />
     </>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider, Text, TextVariants } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';
 
 export const SliderDiscrete: React.FunctionComponent = () => {
   const initialValues = {
@@ -53,7 +53,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
       <Text component={TextVariants.h3}>Slider value is: {numValue.value1}</Text>
       <Slider
         value={initialValues.value1}
-        onChange={(value: number) => handleChange(value, 'value1')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value1')}
         customSteps={steps}
       />
       <br />
@@ -61,7 +61,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
       <Text component={TextVariants.small}>(min = 0, max = 200, step = 50) </Text>
       <Slider
         value={initialValues.value2}
-        onChange={(value: number) => handleChange(value, 'value2')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value2')}
         max={200}
         step={50}
         showTicks
@@ -71,7 +71,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
       <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries not shown) </Text>
       <Slider
         value={initialValues.value3}
-        onChange={(value: number) => handleChange(value, 'value3')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value3')}
         min={-25}
         max={75}
         step={10}
@@ -83,7 +83,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
       <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown) </Text>
       <Slider
         value={initialValues.value4}
-        onChange={(value: number) => handleChange(value, 'value4')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value4')}
         min={-25}
         max={75}
         step={10}
@@ -94,7 +94,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
       <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown, ticks not shown) </Text>
       <Slider
         value={initialValues.value5}
-        onChange={(value: number) => handleChange(value, 'value5')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value5')}
         min={-25}
         max={75}
         step={10}
@@ -107,7 +107,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         showTicks
         max={5}
         customSteps={stepsDiscreteWithMax}
-        onChange={(value: number) => handleChange(value, 'value6')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value6')}
       />
       <br />
       <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value7)}</Text>
@@ -116,7 +116,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         value={initialValues.value7}
         showTicks
         customSteps={stepsDiscreteNoLinearWithMaxMin}
-        onChange={(value: number) => handleChange(value, 'value7')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value7')}
         min={12}
         max={86}
       />

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

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Slider } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
 
 export const SliderThumbValueInput: React.FunctionComponent = () => {
   const [value, setValue] = React.useState(50);
   const [inputValue, setInputValue] = React.useState(50);
 
   const onChange = (
+    _event: SliderOnChangeEvent,
     value: number,
     inputValue: number,
     setLocalInputValue: React.Dispatch<React.SetStateAction<number>>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
 
 export const SliderValueInput: React.FunctionComponent = () => {
   const [valueDiscrete, setValueDiscrete] = React.useState(62.5);
@@ -29,6 +29,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
   ];
 
   const onChangeDiscrete = (
+    _event: SliderOnChangeEvent,
     value: number,
     inputValue: number,
     setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
@@ -37,7 +38,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
     let newInputValue;
 
     if (inputValue === undefined) {
-      const step = stepsDiscrete.find(step => step.value === value);
+      const step = stepsDiscrete.find((step) => step.value === value);
       newInputValue = step ? step.label : 0;
       newInputValue = Number(newInputValue);
       newValue = value;
@@ -54,7 +55,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
           newInputValue = minValue;
           setLocalInputValue(minValue);
         } else {
-          const stepIndex = stepsDiscrete.findIndex(step => Number(step.label) >= inputValue);
+          const stepIndex = stepsDiscrete.findIndex((step) => Number(step.label) >= inputValue);
           if (Number(stepsDiscrete[stepIndex].label) === inputValue) {
             newValue = stepsDiscrete[stepIndex].value;
             newInputValue = inputValue;
@@ -77,6 +78,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
   };
 
   const onChangePercent = (
+    _event: SliderOnChangeEvent,
     value: number,
     inputValue: number,
     setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
@@ -85,7 +87,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
     let newInputValue;
 
     if (inputValue === undefined) {
-      const step = stepsPercent.find(step => step.value === value);
+      const step = stepsPercent.find((step) => step.value === value);
       newInputValue = step ? step.label.slice(0, -1) : 0;
       newInputValue = Number(newInputValue);
       newValue = value;
@@ -101,7 +103,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
           newValue = minValue;
           setLocalInputValue(minValue);
         } else {
-          const stepIndex = stepsPercent.findIndex(step => Number(step.label.slice(0, -1)) >= inputValue);
+          const stepIndex = stepsPercent.findIndex((step) => Number(step.label.slice(0, -1)) >= inputValue);
           if (Number(stepsPercent[stepIndex].label.slice(0, -1)) === inputValue) {
             newValue = stepsPercent[stepIndex].value;
             newInputValue = inputValue;
@@ -127,6 +129,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
   };
 
   const onChangeContinuous = (
+    _event: SliderOnChangeEvent,
     value: number,
     inputValue: number,
     setLocalInputValue: React.Dispatch<React.SetStateAction<number>>

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { ToolbarItem, ToolbarItemProps } from './ToolbarItem';
-import { ChipGroup } from '../ChipGroup';
+import { ChipGroup } from '../Chip';
 import { Chip } from '../Chip';
 import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
 import { PickOptional } from '../../helpers/typeUtils';

package/src/components/index.ts

@@ -16,7 +16,6 @@ export * from './CalendarMonth';
 export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
-export * from './ChipGroup';
 export * from './ClipboardCopy';
 export * from './CodeBlock';
 export * from './DataList';

package/src/demos/Nav.md

@@ -1305,7 +1305,7 @@ class PageLayoutManualNav extends React.Component {
       });
     };
 
-    this.onPageResize = ({ mobileView, windowSize }) => {
+    this.onPageResize = (_event, { mobileView, windowSize }) => {
       this.setState({
         isMobileView: mobileView
       });
@@ -1428,7 +1428,7 @@ class PageLayoutManualNav extends React.Component {
         <Page
           header={Header}
           sidebar={Sidebar}
-          onPageResize={this.onPageResize}
+          onPageResize={(event) => this.onPageResize(event)}
           skipToContent={PageSkipToContent}
           mainContainerId={pageId}
         >

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -194,7 +194,7 @@ class BasicNotificationDrawer extends React.Component {
       });
     };
 
-    this.focusDrawer = () => {
+    this.focusDrawer = (_event) => {
       const firstTabbableItem = this.drawerRef.current.querySelector('a, button');
       firstTabbableItem.focus();
     };
@@ -549,7 +549,7 @@ class BasicNotificationDrawer extends React.Component {
           sidebar={Sidebar}
           isManagedSidebar
           notificationDrawer={notificationDrawer}
-          onNotificationDrawerExpand={this.focusDrawer}
+          onNotificationDrawerExpand={(event) => this.focusDrawer(event)}
           isNotificationDrawerExpanded={isDrawerExpanded}
           skipToContent={PageSkipToContent}
           breadcrumb={PageBreadcrumb}
@@ -790,7 +790,7 @@ class GroupedNotificationDrawer extends React.Component {
       });
     };
 
-    this.focusDrawer = () => {
+    this.focusDrawer = (_event) => {
       // Prevent the NotificationDrawer from receiving focus if a drawer group item is opened
       if (!document.activeElement.closest(`.${this.drawerRef.current.className}`)) {
         const firstTabbableItem = this.drawerRef.current.querySelector('a, button');
@@ -1313,7 +1313,7 @@ class GroupedNotificationDrawer extends React.Component {
           isManagedSidebar
           notificationDrawer={notificationDrawer}
           isNotificationDrawerExpanded={isDrawerExpanded}
-          onNotificationDrawerExpand={this.focusDrawer}
+          onNotificationDrawerExpand={(event) => this.focusDrawer(event)}
           skipToContent={PageSkipToContent}
           breadcrumb={PageBreadcrumb}
           mainContainerId={pageId}

package/src/demos/examples/DashboardWrapper.js

@@ -114,7 +114,7 @@ export default class DashboardWrapper extends React.Component {
         mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
         notificationDrawer={notificationDrawer}
         isNotificationDrawerExpanded={isNotificationDrawerExpanded}
-        onPageResize={onPageResize}
+        onPageResize={(event) => onPageResize(event)}
         {...pageProps}
       >
         {hasPageTemplateTitle && PageTemplateTitle}