From 03024f79a1e455784531c390966f80996c8b419c Mon Sep 17 00:00:00 2001
From: good-jinu <gooday6983@gmail.com>
Date: Sun, 15 Dec 2024 16:34:15 +0900
Subject: [PATCH] [Slider] Narrow onChange value type

- Change value and onChange value param type from `number | number[]` to generic `Value`
---
 docs/pages/material-ui/api/slider.json       |  4 +-
 packages/mui-material/src/Slider/Slider.d.ts | 48 ++++++++++++++++----
 packages/mui-material/src/Slider/Slider.js   |  4 +-
 3 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/docs/pages/material-ui/api/slider.json b/docs/pages/material-ui/api/slider.json
index d6af2d7107e76d..c96c075bd567b5 100644
--- a/docs/pages/material-ui/api/slider.json
+++ b/docs/pages/material-ui/api/slider.json
@@ -58,14 +58,14 @@
     "onChange": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(event: Event, value: number | Array<number>, activeThumb: number) => void",
+        "type": "function(event: Event, value: Value, activeThumb: number) => void",
         "describedArgs": ["event", "value", "activeThumb"]
       }
     },
     "onChangeCommitted": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(event: React.SyntheticEvent | Event, value: number | Array<number>) => void",
+        "type": "function(event: React.SyntheticEvent | Event, value: Value) => void",
         "describedArgs": ["event", "value"]
       }
     },
diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts
index 907d40a5e039c3..fc5863f79e5cc9 100644
--- a/packages/mui-material/src/Slider/Slider.d.ts
+++ b/packages/mui-material/src/Slider/Slider.d.ts
@@ -4,7 +4,7 @@ import { OverridableStringUnion } from '@mui/types';
 import { Mark } from './useSlider.types';
 import { SlotComponentProps } from '../utils/types';
 import { Theme } from '../styles';
-import { OverrideProps, OverridableComponent } from '../OverridableComponent';
+import { OverrideProps, DefaultComponentProps } from '../OverridableComponent';
 import SliderValueLabelComponent from './SliderValueLabel';
 import { SliderClasses } from './sliderClasses';
 
@@ -20,7 +20,7 @@ export interface SliderOwnerState extends SliderProps {
   focusedThumbIndex: number;
 }
 
-export interface SliderOwnProps {
+export interface SliderOwnProps<Value extends number | number[]> {
   /**
    * The label of the slider.
    */
@@ -93,7 +93,7 @@ export interface SliderOwnProps {
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue?: number | number[];
+  defaultValue?: Value;
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -148,17 +148,17 @@ export interface SliderOwnProps {
    * @param {Event} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
    * **Warning**: This is a generic event not a change event.
-   * @param {number | number[]} value The new value.
+   * @param {Value} value The new value.
    * @param {number} activeThumb Index of the currently moved thumb.
    */
-  onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
+  onChange?: (event: Event, value: Value, activeThumb: number) => void;
   /**
    * Callback function that is fired when the `mouseup` is triggered.
    *
    * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
-   * @param {number | number[]} value The new value.
+   * @param {Value} value The new value.
    */
-  onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void;
+  onChangeCommitted?: (event: React.SyntheticEvent | Event, value: Value) => void;
   /**
    * The component orientation.
    * @default 'horizontal'
@@ -246,7 +246,7 @@ export interface SliderOwnProps {
    * The value of the slider.
    * For ranged sliders, provide an array with two values.
    */
-  value?: number | number[];
+  value?: Value;
   /**
    * Controls when the value label is displayed:
    *
@@ -275,11 +275,39 @@ export interface SliderOwnProps {
 export interface SliderTypeMap<
   RootComponent extends React.ElementType = 'span',
   AdditionalProps = {},
+  Value extends number | number[] = number | number[],
 > {
-  props: AdditionalProps & SliderOwnProps;
+  props: AdditionalProps & SliderOwnProps<Value>;
   defaultComponent: RootComponent;
 }
 
+type SliderTypeMapNumber<
+  RootComponent extends React.ElementType = 'span',
+  AdditionalProps = {},
+> = SliderTypeMap<RootComponent, AdditionalProps, number>;
+
+type SliderTypeMapNumberArray<
+  RootComponent extends React.ElementType = 'span',
+  AdditionalProps = {},
+> = SliderTypeMap<RootComponent, AdditionalProps, number[]>;
+
+interface SliderType {
+  <RootComponent extends React.ElementType>(
+    props: OverrideProps<SliderTypeMapNumber, RootComponent>,
+  ): React.JSX.Element | null;
+  (props: DefaultComponentProps<SliderTypeMapNumber>): React.JSX.Element | null;
+
+  <RootComponent extends React.ElementType>(
+    props: OverrideProps<SliderTypeMapNumberArray, RootComponent>,
+  ): React.JSX.Element | null;
+  (props: DefaultComponentProps<SliderTypeMapNumberArray>): React.JSX.Element | null;
+
+  <RootComponent extends React.ElementType>(
+    props: OverrideProps<SliderTypeMap, RootComponent>,
+  ): React.JSX.Element | null;
+  (props: DefaultComponentProps<SliderTypeMap>): React.JSX.Element | null;
+}
+
 export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
   children: React.ReactElement<unknown>;
   index: number;
@@ -312,7 +340,7 @@ export declare const SliderValueLabel: React.FC<SliderValueLabelProps>;
  *
  * - [Slider API](https://mui.com/material-ui/api/slider/)
  */
-declare const Slider: OverridableComponent<SliderTypeMap>;
+declare const Slider: SliderType;
 
 export type SliderProps<
   RootComponent extends React.ElementType = SliderTypeMap['defaultComponent'],
diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index 44ca12235bb555..12b0760cc64f05 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -1037,7 +1037,7 @@ Slider.propTypes /* remove-proptypes */ = {
    * @param {Event} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
    * **Warning**: This is a generic event not a change event.
-   * @param {number | number[]} value The new value.
+   * @param {Value} value The new value.
    * @param {number} activeThumb Index of the currently moved thumb.
    */
   onChange: PropTypes.func,
@@ -1045,7 +1045,7 @@ Slider.propTypes /* remove-proptypes */ = {
    * Callback function that is fired when the `mouseup` is triggered.
    *
    * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
-   * @param {number | number[]} value The new value.
+   * @param {Value} value The new value.
    */
   onChangeCommitted: PropTypes.func,
   /**