@patternfly/react-core 4.271.2 → 4.273.0

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Checkbox, Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const SliderContinuous: React.FunctionComponent = () => {
+  const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false);
+  const [value, setValue] = React.useState(50);
+  const [valueCustom, setValueCustom] = React.useState(50);
+
+  return (
+    <>
+      <Checkbox
+        id="thumb-has-tooltip"
+        label="hasTooltipOverThumb"
+        isChecked={hasTooltipOverThumb}
+        onChange={setHasTooltipOverThumb}
+        style={{ marginBottom: 20 }}
+      />
+      <Text component={TextVariants.h3}>Slider Value is: {value}</Text>
+      <Slider hasTooltipOverThumb={hasTooltipOverThumb} value={value} onChange={setValue} />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {valueCustom}</Text>
+      <Slider
+        onChange={setValueCustom}
+        value={valueCustom}
+        areCustomStepsContinuous
+        hasTooltipOverThumb={hasTooltipOverThumb}
+        customSteps={[
+          { value: 0, label: '0%' },
+          { value: 100, label: '100%' }
+        ]}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const SliderDisabled: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(50);
+  const steps = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+
+  const displayValue = () => {
+    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} />
+    </>
+  );
+};

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const SliderDiscrete: React.FunctionComponent = () => {
+  const initialValues = {
+    value1: 50,
+    value2: 50,
+    value3: 25,
+    value4: 50,
+    value5: 50,
+    value6: 3,
+    value7: 25
+  };
+
+  const [numValue, setNumValue] = React.useState(initialValues);
+
+  const handleChange = (value: number, name: string) => {
+    setNumValue({ ...numValue, [name]: value });
+  };
+
+  const steps = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+
+  const stepsDiscreteWithMax = [
+    { value: 0, label: 'A' },
+    { value: 1, label: 'B' },
+    { value: 2, label: 'C' },
+    { value: 3, label: 'D' },
+    { value: 4, label: 'E' },
+    { value: 5, label: 'F' }
+  ];
+
+  const stepsDiscreteNoLinearWithMaxMin = [
+    { value: 12, label: '12' },
+    { value: 15, label: '15' },
+    { value: 25, label: '25' },
+    { value: 54, label: '54' },
+    { value: 67, label: '67' },
+    { value: 86, label: '86' }
+  ];
+
+  return (
+    <>
+      <Text component={TextVariants.h3}>Slider value is: {numValue.value1}</Text>
+      <Slider
+        value={initialValues.value1}
+        onChange={(value: number) => handleChange(value, 'value1')}
+        customSteps={steps}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {numValue.value2}</Text>
+      <Text component={TextVariants.small}>(min = 0, max = 200, step = 50) </Text>
+      <Slider
+        value={initialValues.value2}
+        onChange={(value: number) => handleChange(value, 'value2')}
+        max={200}
+        step={50}
+        showTicks
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value3)}</Text>
+      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries not shown) </Text>
+      <Slider
+        value={initialValues.value3}
+        onChange={(value: number) => handleChange(value, 'value3')}
+        min={-25}
+        max={75}
+        step={10}
+        showTicks
+        showBoundaries={false}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value4)}</Text>
+      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown) </Text>
+      <Slider
+        value={initialValues.value4}
+        onChange={(value: number) => handleChange(value, 'value4')}
+        min={-25}
+        max={75}
+        step={10}
+        showTicks
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value5)}</Text>
+      <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')}
+        min={-25}
+        max={75}
+        step={10}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value6)}</Text>
+      <Text component={TextVariants.small}>(max = 5, custom steps) </Text>
+      <Slider
+        value={initialValues.value6}
+        showTicks
+        max={5}
+        customSteps={stepsDiscreteWithMax}
+        onChange={(value: number) => handleChange(value, 'value6')}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value7)}</Text>
+      <Text component={TextVariants.small}>(min = 12, max = 86, custom steps with non linear data) </Text>
+      <Slider
+        value={initialValues.value7}
+        showTicks
+        customSteps={stepsDiscreteNoLinearWithMaxMin}
+        onChange={(value: number) => handleChange(value, 'value7')}
+        min={12}
+        max={86}
+      />
+      <br />
+    </>
+  );
+};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Slider } from '@patternfly/react-core';
+
+export const SliderThumbValueInput: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(50);
+  const [inputValue, setInputValue] = React.useState(50);
+
+  const onChange = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    if (inputValue === undefined) {
+      newValue = Number(value);
+    } else {
+      if (inputValue > 100) {
+        newValue = 100;
+        setLocalInputValue(100);
+      } else if (inputValue < 0) {
+        newValue = 0;
+        setLocalInputValue(0);
+      } else {
+        newValue = Math.floor(inputValue);
+      }
+    }
+    setValue(newValue);
+    setInputValue(newValue);
+  };
+
+  return (
+    <Slider
+      value={value}
+      isInputVisible
+      inputValue={inputValue}
+      inputLabel="%"
+      inputPosition="aboveThumb"
+      onChange={onChange}
+    />
+  );
+};

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

@@ -0,0 +1,180 @@
+import React from 'react';
+import { Slider } from '@patternfly/react-core';
+
+export const SliderValueInput: React.FunctionComponent = () => {
+  const [valueDiscrete, setValueDiscrete] = React.useState(62.5);
+  const [inputValueDiscrete, setInputValueDiscrete] = React.useState(5);
+  const [valuePercent, setValuePercent] = React.useState(50);
+  const [inputValuePercent, setInputValuePercent] = React.useState(50);
+  const [valueContinuous, setValueContinuous] = React.useState(50);
+  const [inputValueContinuous, setInputValueContinuous] = React.useState(50);
+
+  const stepsDiscrete = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+  const stepsPercent = [
+    { value: 0, label: '0%' },
+    { value: 25, label: '25%', isLabelHidden: true },
+    { value: 50, label: '50%' },
+    { value: 75, label: '75%', isLabelHidden: true },
+    { value: 100, label: '100%' }
+  ];
+
+  const onChangeDiscrete = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    let newInputValue;
+
+    if (inputValue === undefined) {
+      const step = stepsDiscrete.find(step => step.value === value);
+      newInputValue = step ? step.label : 0;
+      newInputValue = Number(newInputValue);
+      newValue = value;
+    } else {
+      const maxValue = Number(stepsDiscrete[stepsDiscrete.length - 1].label);
+      if (inputValue > maxValue) {
+        newValue = Number(stepsDiscrete[stepsDiscrete.length - 1].value);
+        newInputValue = maxValue;
+        setLocalInputValue(maxValue);
+      } else {
+        const minValue = Number(stepsDiscrete[0].label);
+        if (inputValue < minValue) {
+          newValue = Number(stepsDiscrete[0].value);
+          newInputValue = minValue;
+          setLocalInputValue(minValue);
+        } else {
+          const stepIndex = stepsDiscrete.findIndex(step => Number(step.label) >= inputValue);
+          if (Number(stepsDiscrete[stepIndex].label) === inputValue) {
+            newValue = stepsDiscrete[stepIndex].value;
+            newInputValue = inputValue;
+          } else {
+            const midpoint = (Number(stepsDiscrete[stepIndex].label) + Number(stepsDiscrete[stepIndex - 1].label)) / 2;
+            if (midpoint > inputValue) {
+              newValue = stepsDiscrete[stepIndex - 1].value;
+              newInputValue = Number(stepsDiscrete[stepIndex - 1].label);
+            } else {
+              newValue = stepsDiscrete[stepIndex].value;
+              newInputValue = Number(stepsDiscrete[stepIndex].label);
+            }
+          }
+        }
+      }
+    }
+
+    setInputValueDiscrete(newInputValue);
+    setValueDiscrete(newValue);
+  };
+
+  const onChangePercent = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    let newInputValue;
+
+    if (inputValue === undefined) {
+      const step = stepsPercent.find(step => step.value === value);
+      newInputValue = step ? step.label.slice(0, -1) : 0;
+      newInputValue = Number(newInputValue);
+      newValue = value;
+    } else {
+      const maxValue = Number(stepsPercent[stepsPercent.length - 1].label.slice(0, -1));
+      if (inputValue > maxValue) {
+        newValue = Number(stepsPercent[stepsPercent.length - 1].value);
+        newInputValue = maxValue;
+        setLocalInputValue(maxValue);
+      } else {
+        const minValue = Number(stepsPercent[0].label.slice(0, -1));
+        if (inputValue < minValue) {
+          newValue = minValue;
+          setLocalInputValue(minValue);
+        } else {
+          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;
+          } else {
+            const midpoint =
+              (Number(stepsPercent[stepIndex].label.slice(0, -1)) +
+                Number(stepsPercent[stepIndex - 1].label.slice(0, -1))) /
+              2;
+            if (midpoint > inputValue) {
+              newValue = stepsPercent[stepIndex - 1].value;
+              newInputValue = Number(stepsPercent[stepIndex - 1].label.slice(0, -1));
+            } else {
+              newValue = stepsPercent[stepIndex].value;
+              newInputValue = Number(stepsPercent[stepIndex].label.slice(0, -1));
+            }
+          }
+        }
+      }
+    }
+
+    setInputValuePercent(newInputValue);
+    setValuePercent(newValue);
+  };
+
+  const onChangeContinuous = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    if (inputValue === undefined) {
+      newValue = Math.floor(value);
+    } else {
+      if (inputValue > 100) {
+        newValue = 100;
+        setLocalInputValue(100);
+      } else if (inputValue < 0) {
+        newValue = 0;
+        setLocalInputValue(0);
+      } else {
+        newValue = Math.floor(inputValue);
+      }
+    }
+    setInputValueContinuous(newValue);
+    setValueContinuous(newValue);
+  };
+
+  return (
+    <>
+      <Slider
+        value={valueDiscrete}
+        isInputVisible
+        inputValue={inputValueDiscrete}
+        customSteps={stepsDiscrete}
+        onChange={onChangeDiscrete}
+      />
+      <br />
+      <Slider
+        value={valuePercent}
+        isInputVisible
+        inputValue={inputValuePercent}
+        inputLabel="%"
+        onChange={onChangePercent}
+        customSteps={stepsPercent}
+      />
+      <br />
+      <Slider
+        value={valueContinuous}
+        isInputVisible
+        inputValue={inputValueContinuous}
+        inputLabel="%"
+        onChange={onChangeContinuous}
+      />
+    </>
+  );
+};

package/src/components/TimePicker/TimePicker.tsx

@@ -42,7 +42,14 @@ export interface TimePickerProps
   /** True if the time is 24 hour time. False if the time is 12 hour time */
   is24Hour?: boolean;
   /** Optional event handler called each time the value in the time picker input changes. */
-  onChange?: (time: string, hour?: number, minute?: number, seconds?: number, isValid?: boolean) => void;
+  onChange?: (
+    event: React.FormEvent<HTMLInputElement>,
+    time: string,
+    hour?: number,
+    minute?: number,
+    seconds?: number,
+    isValid?: boolean
+  ) => void;
   /** Optional validator can be provided to override the internal time validator. */
   validateTime?: (time: string) => boolean;
   /** Id of the time picker */
@@ -389,7 +396,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     const { delimiter, is24Hour, includeSeconds, setIsOpen } = this.props;
     const time = parseTime(e.target.textContent, timeRegex, delimiter, !is24Hour, includeSeconds);
     if (time !== timeState) {
-      this.onInputChange(time);
+      this.onInputChange(time, e);
     }
 
     this.inputRef.current.focus();
@@ -407,12 +414,13 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     e.stopPropagation();
   };
 
-  onInputChange = (newTime: string) => {
+  onInputChange = (newTime: string, event: React.FormEvent<HTMLInputElement>) => {
     const { onChange } = this.props;
     const { timeRegex } = this.state;
 
     if (onChange) {
       onChange(
+        event,
         newTime,
         getHours(newTime, timeRegex),
         getMinutes(newTime, timeRegex),

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

@@ -35,7 +35,14 @@ describe('TimePicker', () => {
       render(<TimePicker onChange={onChange} {...inputProps} aria-label="time picker" />);
 
       await user.type(screen.getByLabelText('time picker'), String(inputProps.value));
-      expect(onChange).toHaveBeenCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true);
+      expect(onChange).toHaveBeenCalledWith(
+        expect.any(Object),
+        inputProps.value,
+        expects.hour,
+        expects.minutes,
+        expects.seconds,
+        true
+      );
     };
 
     test('should return the correct value using the AM/PM pattern - midnight', async () => {

package/src/components/TimePicker/examples/TimePicker.md

@@ -19,7 +19,7 @@ import React from 'react';
 import { TimePicker } from '@patternfly/react-core';
 
 SimpleTimePicker = () => {
-  const onChange = (time, hour, minute, seconds, isValid) => {
+  const onChange = (_event, time, hour, minute, seconds, isValid) => {
     console.log('time', time);
     console.log('hour', hour);
     console.log('minute', minute);

package/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx

@@ -83,7 +83,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
       <ToolbarItem variant="search-filter">
         <SearchInput
           aria-label="Component toggle groups example search input"
-          onChange={onInputChange}
+          onChange={(_event, value) => onInputChange(value)}
           value={inputValue}
           onClear={() => {
             onInputChange('');

package/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx

@@ -88,7 +88,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
       <ToolbarItem variant="search-filter">
         <SearchInput
           aria-label="Consumer toggle groups example search input"
-          onChange={onInputChange}
+          onChange={(_event, value) => onInputChange(value)}
           value={inputValue}
           onClear={() => {
             onInputChange('');

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -110,7 +110,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
       <ToolbarItem variant="search-filter">
         <SearchInput
           aria-label="With filters example search input"
-          onChange={onInputChange}
+          onChange={(_event, value) => onInputChange(value)}
           value={inputValue}
           onClear={() => {
             onInputChange('');

package/src/components/Wizard/Wizard.tsx

@@ -112,6 +112,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   hasDrawer?: boolean;
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
+  /** Callback function for when the drawer is toggled. Can be used to set browser focus in the drawer. */
+  onExpandDrawer?: () => void;
 }
 
 interface WizardState {
@@ -149,7 +151,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     isOpen: undefined,
     isNavExpandable: false,
     hasDrawer: false,
-    isDrawerExpanded: false
+    isDrawerExpanded: false,
+    onExpandDrawer: () => undefined as any
   };
   private titleId: string;
   private descriptionId: string;
@@ -408,6 +411,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       onCurrentStepChanged,
       hasDrawer,
       isDrawerExpanded,
+      onExpandDrawer,
       ...rest
       /* eslint-enable @typescript-eslint/no-unused-vars */
     } = this.props;
@@ -539,6 +543,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
           <WizardToggle
             hasDrawer={hasDrawer}
             isDrawerExpanded={isDrawerExpanded}
+            onExpandDrawer={onExpandDrawer}
             mainAriaLabel={mainAriaLabel}
             isInPage={isOpen === undefined}
             mainAriaLabelledBy={(title || mainAriaLabelledBy) && (mainAriaLabelledBy || this.titleId)}

package/src/components/Wizard/WizardBody.tsx

@@ -22,6 +22,7 @@ export interface WizardBodyProps {
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
   /** Callback function for when the drawer is toggled */
+  onExpandDrawer?: () => void;
 }
 
 export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
@@ -32,6 +33,7 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
   mainComponent = 'div',
   hasDrawer,
   isDrawerExpanded,
+  onExpandDrawer,
   activeStep
 }: WizardBodyProps) => {
   const MainComponent = mainComponent;
@@ -40,7 +42,7 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
       <WizardDrawerWrapper
         hasDrawer={hasDrawer && activeStep.drawerPanelContent}
         wrapper={(children: React.ReactNode) => (
-          <Drawer isInline isExpanded={isDrawerExpanded}>
+          <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpandDrawer}>
             <DrawerContent panelContent={activeStep.drawerPanelContent}>{children}</DrawerContent>
           </Drawer>
         )}

package/src/components/Wizard/WizardToggle.tsx

@@ -33,6 +33,8 @@ export interface WizardToggleProps {
   hasDrawer?: boolean;
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
+  /** Callback function for when the drawer is toggled */
+  onExpandDrawer?: () => void;
 }
 
 export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
@@ -48,7 +50,8 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
   mainAriaLabel = null,
   isInPage = true,
   hasDrawer,
-  isDrawerExpanded
+  isDrawerExpanded,
+  onExpandDrawer
 }: WizardToggleProps) => {
   let activeStepIndex;
   let activeStepName;
@@ -99,6 +102,7 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
             hasNoBodyPadding={hasNoBodyPadding}
             activeStep={activeStep}
             isDrawerExpanded={isDrawerExpanded}
+            onExpandDrawer={onExpandDrawer}
             hasDrawer={hasDrawer}
           >
             {hasDrawer && !isDrawerExpanded && activeStep.drawerToggleButton}

package/src/components/Wizard/examples/WizardWithDrawer.tsx

@@ -14,6 +14,10 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
 
   const drawerRef = React.useRef<HTMLSpanElement>(null);
 
+  const onExpandDrawer = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
   const onOpenClick = () => {
     setIsDrawerExpanded(true);
   };
@@ -117,6 +121,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
       <Wizard
         height={400}
         isDrawerExpanded={isDrawerExpanded}
+        onExpandDrawer={onExpandDrawer}
         hasDrawer
         navAriaLabel={`${title} steps`}
         steps={steps}

package/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx

@@ -250,7 +250,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     // eslint-disable-next-line no-console
     <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
       <MenuInput>
-        <SearchInput aria-label="Filter menu items" type="search" onChange={value => onTextChange(value)} />
+        <SearchInput aria-label="Filter menu items" type="search" onChange={(_event, value) => onTextChange(value)} />
       </MenuInput>
       <Divider />
       <MenuContent>

package/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx

@@ -164,7 +164,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
             value={searchInputValue}
             type="search"
             placeholder="Search"
-            onChange={onSearchInputChange}
+            onChange={(_event, value) => onSearchInputChange(value)}
             onKeyPress={onEnterPressed}
             aria-labelledby="pf-context-selector-search-button-id-1"
           />

package/src/demos/DatePicker/DatePicker.md

@@ -80,7 +80,7 @@ DateTimeRangePicker = () => {
     }
   };
   
-  const onFromTimeChange = (time, hour, minute) => {
+  const onFromTimeChange = (_event, time, hour, minute) => {
     if (isValidDate(from)) {
       const updatedFromDate = new Date(from);
       updatedFromDate.setHours(hour);
@@ -99,7 +99,7 @@ DateTimeRangePicker = () => {
     }
   };
   
-  const onToTimeChange = (time, hour, minute) => {
+  const onToTimeChange = (_event, time, hour, minute) => {
     if (isValidDate(to)) {
       const updatedToDate = new Date(to);
       updatedToDate.setHours(hour);

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -263,7 +263,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Filter by server name"
       value={searchValue}
-      onChange={onSearchChange}
+      onChange={(_event, value) => onSearchChange(value)}
       onClear={() => onSearchChange('')}
     />
   );

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -246,7 +246,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     <SearchInput
       placeholder="Filter by server name"
       value={searchValue}
-      onChange={onSearchChange}
+      onChange={(_event, value) => onSearchChange(value)}
       onClear={() => onSearchChange('')}
     />
   );