[Slider][base] Convert code to TypeScript

docs/pages/base/api/slider-unstyled.json

@@ -29,7 +29,10 @@
       "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
       "default": "'horizontal'"
     },
-    "scale": { "type": { "name": "func" }, "default": "(x) => x" },
+    "scale": {
+      "type": { "name": "func" },
+      "default": "function Identity(x: any) {\n  return x;\n}"
+    },
     "slotProps": {
       "type": {
         "name": "shape",
@@ -62,7 +65,7 @@
     },
     "valueLabelFormat": {
       "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" },
-      "default": "(x) => x"
+      "default": "function Identity(x: any) {\n  return x;\n}"
     }
   },
   "name": "SliderUnstyled",
@@ -115,7 +118,7 @@
   },
   "spread": true,
   "forwardsRefTo": "HTMLSpanElement",
-  "filename": "/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js",
+  "filename": "/packages/mui-base/src/SliderUnstyled/SliderUnstyled.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base/react-slider/\">Unstyled Slider</a></li></ul>",
   "cssComponent": false

docs/pages/material-ui/api/slider.json

@@ -48,7 +48,10 @@
       "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
       "default": "'horizontal'"
     },
-    "scale": { "type": { "name": "func" }, "default": "(x) => x" },
+    "scale": {
+      "type": { "name": "func" },
+      "default": "function Identity(x: any) {\n  return x;\n}"
+    },
     "size": {
       "type": {
         "name": "union",
@@ -94,7 +97,7 @@
     },
     "valueLabelFormat": {
       "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" },
-      "default": "(x) => x"
+      "default": "function Identity(x: any) {\n  return x;\n}"
     }
   },
   "name": "Slider",

docs/translations/api-docs/slider-unstyled/slider-unstyled.json

@@ -19,7 +19,7 @@
     "onChange": "Callback function that is fired when the slider&#39;s value changed.<br><br><strong>Signature:</strong><br><code>function(event: Event, value: number | Array&lt;number&gt;, activeThumb: number) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any). <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.<br><em>activeThumb:</em> Index of the currently moved thumb.",
     "onChangeCommitted": "Callback function that is fired when the <code>mouseup</code> is triggered.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent | Event, value: number | Array&lt;number&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
     "orientation": "The component orientation.",
-    "scale": "A transformation function, to change the scale of the slider.",
+    "scale": "A transformation function, to change the scale of the slider.<br><br><strong>Signature:</strong><br><code>function(x: any) =&gt; any</code><br>",
     "slotProps": "The props used for each slot inside the Slider.",
     "slots": "The components used for each slot inside the Slider. Either a string to use a HTML element or a component.",
     "step": "The granularity with which the slider can step through values. (A &quot;discrete&quot; slider.) The <code>min</code> prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is <code>null</code>, the thumb can only be slid onto marks provided with the <code>marks</code> prop.",

docs/translations/api-docs/slider/slider.json

@@ -20,7 +20,7 @@
     "onChange": "Callback function that is fired when the slider&#39;s value changed.<br><br><strong>Signature:</strong><br><code>function(event: Event, value: number | Array&lt;number&gt;, activeThumb: number) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any). <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.<br><em>activeThumb:</em> Index of the currently moved thumb.",
     "onChangeCommitted": "Callback function that is fired when the <code>mouseup</code> is triggered.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent | Event, value: number | Array&lt;number&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
     "orientation": "The component orientation.",
-    "scale": "A transformation function, to change the scale of the slider.",
+    "scale": "A transformation function, to change the scale of the slider.<br><br><strong>Signature:</strong><br><code>function(x: any) =&gt; any</code><br>",
     "size": "The size of the slider.",
     "slotProps": "The props used for each slot inside the Slider.",
     "slots": "The components used for each slot inside the Slider. Either a string to use a HTML element or a component.",

packages/mui-base/src/SliderUnstyled/SliderUnstyled.test.js → packages/mui-base/src/SliderUnstyled/SliderUnstyled.test.tsx

@@ -1,4 +1,7 @@
-import SliderUnstyled, { sliderUnstyledClasses as classes } from '@mui/base/SliderUnstyled';
+import SliderUnstyled, {
+  sliderUnstyledClasses as classes,
+  SliderUnstyledRootSlotProps,
+} from '@mui/base/SliderUnstyled';
 import { expect } from 'chai';
 import * as React from 'react';
 import { spy, stub } from 'sinon';
@@ -10,7 +13,9 @@ import {
   screen,
 } from 'test/utils';
 
-function createTouches(touches) {
+type Touches = Array<Pick<Touch, 'identifier' | 'clientX' | 'clientY'>>;
+
+function createTouches(touches: Touches) {
   return {
     changedTouches: touches.map(
       (touch) =>
@@ -61,10 +66,19 @@ describe('<SliderUnstyled />', () => {
     let theme = null;
 
     const Root = React.forwardRef(
-      ({ ownerState: ownerStateProp, theme: themeProp, ...other }, ref) => {
+      (
+        {
+          ownerState: ownerStateProp,
+          theme: themeProp,
+          ...other
+        }: SliderUnstyledRootSlotProps & {
+          theme: any;
+        },
+        ref: React.ForwardedRef<HTMLSpanElement>,
+      ) => {
         ownerState = ownerStateProp;
         theme = themeProp;
-        return <span ref={ref} {...other} />;
+        return <span {...other} ref={ref} />;
       },
     );
 
@@ -75,7 +89,7 @@ describe('<SliderUnstyled />', () => {
   });
 
   it('does not forward style props as DOM attributes if component slot is primitive', () => {
-    const elementRef = React.createRef();
+    const elementRef = React.createRef<HTMLSpanElement>();
     render(
       <SliderUnstyled
         slots={{
@@ -86,8 +100,10 @@ describe('<SliderUnstyled />', () => {
     );
 
     const { current: element } = elementRef;
-    expect(element.getAttribute('ownerState')).to.equal(null);
-    expect(element.getAttribute('theme')).to.equal(null);
+    if (element !== null) {
+      expect(element.getAttribute('ownerState')).to.equal(null);
+      expect(element.getAttribute('theme')).to.equal(null);
+    }
   });
 
   describe('prop: marks', () => {
@@ -136,31 +152,42 @@ describe('<SliderUnstyled />', () => {
     });
   });
 
-  [
+  type Values = Array<[string, number[]]>;
+
+  const values = [
     ['readonly range', Object.freeze([2, 1])],
     ['range', [2, 1]],
-  ].forEach(([valueLabel, value]) => {
+  ] as Values;
+  values.forEach(([valueLabel, value]) => {
     it(`calls onChange even if the ${valueLabel} did not change`, () => {
       const handleChange = spy();
+
       const { container } = render(
         <SliderUnstyled min={0} max={5} onChange={handleChange} value={value} />,
       );
-      stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
-        width: 100,
-        height: 10,
-        bottom: 10,
-        left: 0,
-      }));
+
+      if (container.firstChild !== null) {
+        // @ts-expect-error - container.firstChild doesn't have getBoundingClientRect method.
+        stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+          width: 100,
+          height: 10,
+          bottom: 10,
+          left: 0,
+        }));
+      }
 
       // pixel:  0   20  40  60  80  100
       // slider: |---|---|---|---|---|
       // values: 0   1   2   3   4   5
       // value:      ↑   ↑
       // mouse:           ↑
-      fireEvent.mouseDown(container.firstChild, {
-        buttons: 1,
-        clientX: 41,
-      });
+
+      if (container.firstChild !== null) {
+        fireEvent.mouseDown(container.firstChild, {
+          buttons: 1,
+          clientX: 41,
+        });
+      }
 
       expect(handleChange.callCount).to.equal(1);
       expect(handleChange.args[0][1]).not.to.equal(value);
@@ -183,17 +210,19 @@ describe('<SliderUnstyled />', () => {
 
       const { getByRole, setProps, container } = render(<SliderUnstyled defaultValue={0} />);
 
-      stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
-        width: 100,
-        height: 10,
-        bottom: 10,
-        left: 0,
-      }));
-
-      fireEvent.touchStart(
-        container.firstChild,
-        createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]),
-      );
+      if (container.firstChild !== null) {
+        // @ts-expect-error - container.firstChild doesn't have getBoundingClientRect method.
+        stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+          width: 100,
+          height: 10,
+          bottom: 10,
+          left: 0,
+        }));
+        fireEvent.touchStart(
+          container.firstChild,
+          createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]),
+        );
+      }
 
       const thumb = getByRole('slider');
 
@@ -204,10 +233,12 @@ describe('<SliderUnstyled />', () => {
       expect(thumb).not.toHaveFocus();
       expect(thumb).not.to.have.class(classes.active);
 
-      fireEvent.touchMove(
-        container.firstChild,
-        createTouches([{ identifier: 1, clientX: 30, clientY: 0 }]),
-      );
+      if (container.firstChild !== null) {
+        fireEvent.touchMove(
+          container.firstChild,
+          createTouches([{ identifier: 1, clientX: 30, clientY: 0 }]),
+        );
+      }
 
       expect(thumb).to.have.attribute('aria-valuenow', '21');
     });
@@ -220,18 +251,19 @@ describe('<SliderUnstyled />', () => {
 
       const { getByRole, container } = render(<SliderUnstyled disabled defaultValue={21} />);
       const thumb = getByRole('slider');
-
-      stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
-        width: 100,
-        height: 10,
-        bottom: 10,
-        left: 0,
-      }));
-
-      fireEvent.touchStart(
-        container.firstChild,
-        createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]),
-      );
+      if (container.firstChild) {
+        // @ts-expect-error - container.firstChild doesn't have getBoundingClientRect method.
+        stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+          width: 100,
+          height: 10,
+          bottom: 10,
+          left: 0,
+        }));
+        fireEvent.touchStart(
+          container.firstChild,
+          createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]),
+        );
+      }
 
       fireEvent.touchMove(
         document.body,