[EuiRange] Fix onChange typing

src/plugins/es_ui_shared/static/forms/components/fields/range_field.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiFormRow, EuiRange } from '@elastic/eui';
+import { EuiFormRow, EuiRange, EuiRangeProps } from '@elastic/eui';
 
 import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
@@ -22,11 +22,9 @@ export const RangeField = ({ field, euiFieldProps = {}, idAria, ...rest }: Props
   const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
   const { onChange: onFieldChange } = field;
 
-  const onChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => {
-      const event = { ...e, value: `${e.currentTarget.value}` } as unknown as React.ChangeEvent<{
-        value: string;
-      }>;
+  const onChange: EuiRangeProps['onChange'] = useCallback(
+    (e) => {
+      const event = { ...e, value: `${e.currentTarget.value}` };
       onFieldChange(event);
     },
     [onFieldChange]

src/plugins/vis_default_editor/public/components/controls/precision.tsx

@@ -31,9 +31,7 @@ function PrecisionParamEditor({ agg, value, setValue }: AggParamEditorProps<numb
         min={1}
         max={services.uiSettings.get('visualization:tileMap:maxPrecision')}
         value={value || ''}
-        onChange={(ev: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
-          setValue(Number(ev.currentTarget.value))
-        }
+        onChange={(ev) => setValue(Number(ev.currentTarget.value))}
         data-test-subj={`visEditorMapPrecision${agg.id}`}
         showValue
         compressed

src/plugins/vis_default_editor/public/components/controls/radius_ratio_option.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiFormRow, EuiIconTip, EuiRange, EuiSpacer } from '@elastic/eui';
+import { EuiFormRow, EuiIconTip, EuiRange, EuiRangeProps, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import useMount from 'react-use/lib/useMount';
@@ -40,9 +40,8 @@ function RadiusRatioOptionControl({ editorStateParams, setStateParamValue }: Agg
     }
   });
 
-  const onChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
-      setStateParamValue(PARAM_NAME, parseFloat(e.currentTarget.value)),
+  const onChange: EuiRangeProps['onChange'] = useCallback(
+    (e) => setStateParamValue(PARAM_NAME, parseFloat(e.currentTarget.value)),
     [setStateParamValue]
   );
 

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/extended_template.tsx

@@ -5,7 +5,14 @@
  * 2.0.
  */
 
-import React, { ChangeEvent, MouseEvent, FunctionComponent, useCallback, useEffect } from 'react';
+import React, {
+  ChangeEvent,
+  MouseEvent,
+  KeyboardEvent,
+  FunctionComponent,
+  useCallback,
+  useEffect,
+} from 'react';
 import PropTypes from 'prop-types';
 import {
   EuiFormRow,
@@ -80,7 +87,10 @@ export const ExtendedTemplate: FunctionComponent<Props> = ({ onValueChange, argV
   const onCommonFieldChange = useCallback(
     (field: Fields) =>
       (
-        event: ChangeEvent<HTMLInputElement | HTMLSelectElement> | MouseEvent<HTMLButtonElement>
+        event:
+          | ChangeEvent<HTMLInputElement | HTMLSelectElement>
+          | KeyboardEvent<HTMLInputElement>
+          | MouseEvent<HTMLButtonElement>
       ) => {
         onChangeField(field, event.currentTarget.value);
       },

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { ChangeEvent, MouseEvent } from 'react';
+import React from 'react';
 
 import { useActions, useValues } from 'kea';
 
@@ -24,6 +24,7 @@ import {
   EuiTableRow,
   EuiTableRowCell,
 } from '@elastic/eui';
+import { _SingleRangeChangeEvent } from '@elastic/eui/src/components/form/range/types';
 import { i18n } from '@kbn/i18n';
 
 import { SAVE_BUTTON_LABEL } from '../../../../shared/constants';
@@ -91,10 +92,8 @@ export const GroupSourcePrioritization: React.FC = () => {
       {SAVE_BUTTON_LABEL}
     </EuiButton>
   );
-  const handleSliderChange = (
-    id: string,
-    e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>
-  ) => updatePriority(id, Number((e.target as HTMLInputElement).value));
+  const handleSliderChange = (id: string, e: _SingleRangeChangeEvent) =>
+    updatePriority(id, Number(e.currentTarget.value));
   const hasSources = contentSources.length > 0;
 
   const zeroState = (
@@ -150,9 +149,7 @@ export const GroupSourcePrioritization: React.FC = () => {
                     step={1}
                     showInput
                     value={activeSourcePriorities[id]}
-                    onChange={(e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>) =>
-                      handleSliderChange(id, e)
-                    }
+                    onChange={(e) => handleSliderChange(id, e)}
                   />
                 </EuiFlexItem>
               </EuiFlexGroup>

x-pack/plugins/infra/public/pages/metrics/settings/input_fields.tsx

@@ -56,7 +56,10 @@ export interface InputRangeFieldProps<
   isInvalid: boolean;
   name: string;
   onChange?: (
-    evt: React.ChangeEvent<FieldElement> | React.MouseEvent<ButtonElement>,
+    evt:
+      | React.ChangeEvent<FieldElement>
+      | React.KeyboardEvent<FieldElement>
+      | React.MouseEvent<ButtonElement>,
     isValid: boolean
   ) => void;
   value: Value;
@@ -81,7 +84,10 @@ export const createInputRangeFieldProps = <
   isInvalid: errors.length > 0,
   name,
   onChange: (
-    evt: React.ChangeEvent<FieldElement> | React.MouseEvent<ButtonElement>,
+    evt:
+      | React.ChangeEvent<FieldElement>
+      | React.KeyboardEvent<FieldElement>
+      | React.MouseEvent<ButtonElement>,
     isValid: boolean
   ) => onChange(+evt.currentTarget.value, isValid),
   value,

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/resolution_editor.tsx

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import React, { ChangeEvent, Component, MouseEvent } from 'react';
-import { EuiConfirmModal, EuiFormRow, EuiRange } from '@elastic/eui';
+import React, { Component } from 'react';
+import { EuiConfirmModal, EuiFormRow, EuiRange, EuiRangeProps } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { AggDescriptor } from '../../../../common/descriptor_types';
@@ -94,7 +94,7 @@ export class ResolutionEditor extends Component<Props, State> {
     return resolution ? (resolution as GRID_RESOLUTION) : GRID_RESOLUTION.COARSE;
   }
 
-  _onResolutionChange = (event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>) => {
+  _onResolutionChange: EuiRangeProps['onChange'] = (event) => {
     const resolution = this._sliderValueToResolution(parseInt(event.currentTarget.value, 10));
     if (isMvt(this.props.renderAs, resolution)) {
       const hasUnsupportedMetrics = this.props.metrics.find(isUnsupportedVectorTileMetric);

x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/ordinal_data_mapping_popover.tsx

@@ -6,7 +6,7 @@
  */
 
 import _ from 'lodash';
-import React, { ChangeEvent, Fragment, MouseEvent } from 'react';
+import React, { Fragment } from 'react';
 import {
   EuiFormRow,
   EuiHorizontalRule,
@@ -18,6 +18,7 @@ import {
   EuiText,
   EuiToolTip,
 } from '@elastic/eui';
+import type { _SingleRangeChangeEvent } from '@elastic/eui/src/components/form/range/types';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { DEFAULT_SIGMA } from '../../vector_style_defaults';
@@ -95,7 +96,7 @@ export function OrdinalDataMappingPopover<DynamicOptions>(props: Props<DynamicOp
     });
   }
 
-  function onSigmaChange(event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>) {
+  function onSigmaChange(event: _SingleRangeChangeEvent) {
     // @ts-expect-error
     props.onChange({
       fieldMetaOptions: {

x-pack/plugins/ml/public/application/components/severity_control/severity_control.tsx

@@ -54,13 +54,6 @@ export const SeverityControl: FC<SeveritySelectorProps> = React.memo(({ value, o
 
   const resultValue = value ?? ANOMALY_THRESHOLD.LOW;
 
-  const onChangeCallback = (
-    e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>
-  ) => {
-    // @ts-ignore Property 'value' does not exist on type 'EventTarget' | (EventTarget & HTMLInputElement)
-    onChange(Number(e.target.value));
-  };
-
   const ticks = new Array(5).fill(null).map((x, i) => {
     const v = i * 25;
     return { value: v, label: v };
@@ -76,7 +69,7 @@ export const SeverityControl: FC<SeveritySelectorProps> = React.memo(({ value, o
             compressed
             prepend={label}
             value={resultValue}
-            onChange={onChangeCallback}
+            onChange={(e) => onChange(Number(e.target.value))}
             min={ANOMALY_THRESHOLD.LOW}
             max={MAX_ANOMALY_SCORE}
           />
@@ -88,7 +81,7 @@ export const SeverityControl: FC<SeveritySelectorProps> = React.memo(({ value, o
             min={ANOMALY_THRESHOLD.LOW}
             max={MAX_ANOMALY_SCORE}
             value={resultValue}
-            onChange={onChangeCallback}
+            onChange={(e) => onChange(Number(e.currentTarget.value))}
             aria-label={i18n.translate('xpack.ml.severitySelector.formControlAriaLabel', {
               defaultMessage: 'Select severity threshold',
             })}

x-pack/plugins/osquery/public/packs/form/shards/shards_percentage_field.tsx

@@ -7,6 +7,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { useController } from 'react-hook-form';
 import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiRange } from '@elastic/eui';
+import type { EuiRangeProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { ShardsFormReturn } from './shards_form';
 
@@ -32,8 +33,8 @@ const ShardsPercentageFieldComponent = ({
     defaultValue: 100,
   });
 
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const handleChange: EuiRangeProps['onChange'] = useCallback(
+    (e) => {
       const numberValue = (e.target as { valueAsNumber: number }).valueAsNumber
         ? (e.target as { valueAsNumber: number }).valueAsNumber
         : 0;

x-pack/plugins/security_solution/public/detections/components/rules/anomaly_threshold_slider/index.tsx

@@ -7,24 +7,23 @@
 
 import React, { useCallback } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiRange, EuiFormRow } from '@elastic/eui';
+import type { EuiRangeProps } from '@elastic/eui';
 
 import type { FieldHook } from '../../../../shared_imports';
 
 interface AnomalyThresholdSliderProps {
   describedByIds: string[];
   field: FieldHook;
 }
-type Event = React.ChangeEvent<HTMLInputElement>;
-type EventArg = Event | React.MouseEvent<HTMLButtonElement>;
 
 export const AnomalyThresholdSlider = ({
   describedByIds = [],
   field,
 }: AnomalyThresholdSliderProps) => {
   const threshold = field.value as number;
-  const onThresholdChange = useCallback(
-    (event: EventArg) => {
-      const thresholdValue = Number((event as Event).target.value);
+  const onThresholdChange: EuiRangeProps['onChange'] = useCallback(
+    (event) => {
+      const thresholdValue = Number(event.currentTarget.value);
       field.setValue(thresholdValue);
     },
     [field]

x-pack/plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx

@@ -19,6 +19,7 @@ import {
   EuiSpacer,
   EuiRange,
 } from '@elastic/eui';
+import type { EuiRangeProps } from '@elastic/eui';
 
 import type { DataViewBase, DataViewFieldBase } from '@kbn/es-query';
 import type { FieldHook } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
@@ -67,8 +68,8 @@ export const RiskScoreField = ({
   const fieldTypeFilter = useMemo(() => ['number'], []);
   const selectedField = useMemo(() => getFieldTypeByMapping(mapping, indices), [mapping, indices]);
 
-  const handleDefaultRiskScoreChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>): void => {
+  const handleDefaultRiskScoreChange: EuiRangeProps['onChange'] = useCallback(
+    (e) => {
       const range = (e.target as HTMLInputElement).value;
       setValue({
         value: Number(range.trim()),

x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx

@@ -144,8 +144,8 @@ export const GraphControls = React.memo(
 
     const closePopover = useCallback(() => setPopover(null), []);
 
-    const handleZoomAmountChange = useCallback(
-      (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => {
+    const handleZoomAmountChange: EuiRangeProps['onChange'] = useCallback(
+      (event) => {
         const valueAsNumber = parseFloat(
           (event as React.ChangeEvent<HTMLInputElement>).target.value
         );

x-pack/plugins/session_view/public/components/tty_player_controls/index.tsx

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useCallback, ChangeEvent, MouseEvent } from 'react';
+import React, { useCallback } from 'react';
 import {
   EuiButtonEmpty,
   EuiPanel,
@@ -13,6 +13,7 @@ import {
   EuiButtonIcon,
   EuiToolTip,
   EuiButtonIconProps,
+  EuiRangeProps,
 } from '@elastic/eui';
 import { findIndex } from 'lodash';
 import { ProcessStartMarker, ProcessEvent } from '../../../common/types/process_tree';
@@ -62,9 +63,9 @@ export const TTYPlayerControls = ({
     css: styles.controlButton,
   };
 
-  const onLineChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>) => {
-      const line = parseInt((event?.target as HTMLInputElement).value || '0', 10);
+  const onLineChange: EuiRangeProps['onChange'] = useCallback(
+    (event) => {
+      const line = parseInt(event.currentTarget.value || '0', 10);
       onSeekLine(line);
     },
     [onSeekLine]

x-pack/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/index.tsx

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import React, { ChangeEvent, MouseEvent, useMemo } from 'react';
-import { EuiRange, EuiToolTip } from '@elastic/eui';
+import React, { useMemo } from 'react';
+import { EuiRange, EuiRangeProps, EuiToolTip } from '@elastic/eui';
 import type { ProcessStartMarker } from '../../../../common/types/process_tree';
 import { useStyles } from './styles';
 import { PlayHead } from './play_head';
@@ -15,7 +15,7 @@ type Props = {
   processStartMarkers: ProcessStartMarker[];
   linesLength: number;
   currentLine: number;
-  onChange: (e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>) => void;
+  onChange: EuiRangeProps['onChange'];
   onSeekLine(line: number): void;
 };