From f6f37a2524a07ae6c8a1aa8a65816e429987bd6c Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Tue, 18 Jun 2024 13:52:32 +0800
Subject: [PATCH] WIP ssr improvements

---
 docs/data/base/components/slider/slider.md        |  1 -
 docs/pages/base-ui/api/use-slider-thumb.json      |  1 +
 docs/pages/experiments/slider.tsx                 |  6 +++---
 .../use-slider-thumb/use-slider-thumb.json        |  1 +
 .../src/Slider/SliderThumb/SliderThumb.tsx        |  2 +-
 .../src/Slider/SliderThumb/useSliderThumb.ts      | 15 ++++++++++++++-
 6 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md
index cd932dc58d..0ed9c4d26a 100644
--- a/docs/data/base/components/slider/slider.md
+++ b/docs/data/base/components/slider/slider.md
@@ -165,7 +165,6 @@ To let users set the start and end of a range on a Slider, provide an array of v
     <Slider.Track/>
   </Slider.Control>
 </Slider.Root>
-```
 
 {{"demo": "RangeSlider.js"}}
 
diff --git a/docs/pages/base-ui/api/use-slider-thumb.json b/docs/pages/base-ui/api/use-slider-thumb.json
index fcbf4d5727..0e45b0a7ad 100644
--- a/docs/pages/base-ui/api/use-slider-thumb.json
+++ b/docs/pages/base-ui/api/use-slider-thumb.json
@@ -73,6 +73,7 @@
       }
     },
     "id": { "type": { "name": "string", "description": "string" } },
+    "index": { "type": { "name": "number", "description": "number" } },
     "name": { "type": { "name": "string", "description": "string" } },
     "onBlur": {
       "type": { "name": "React.FocusEventHandler", "description": "React.FocusEventHandler" }
diff --git a/docs/pages/experiments/slider.tsx b/docs/pages/experiments/slider.tsx
index 1f6a63cfc2..cf99a31288 100644
--- a/docs/pages/experiments/slider.tsx
+++ b/docs/pages/experiments/slider.tsx
@@ -45,9 +45,9 @@ export default function App() {
         <Slider.Control className="MySlider-control">
           <Slider.Track className="MySlider-track">
             <Slider.Indicator className="MySlider-indicator" />
-            <Slider.Thumb className="MySlider-thumb one" />
-            <Slider.Thumb className="MySlider-thumb two" />
-            <Slider.Thumb className="MySlider-thumb three" />
+            <Slider.Thumb className="MySlider-thumb" />
+            <Slider.Thumb className="MySlider-thumb" />
+            <Slider.Thumb className="MySlider-thumb" />
           </Slider.Track>
         </Slider.Control>
       </Slider.Root>
diff --git a/docs/translations/api-docs/use-slider-thumb/use-slider-thumb.json b/docs/translations/api-docs/use-slider-thumb/use-slider-thumb.json
index dc299a5ed2..7bcd0bf487 100644
--- a/docs/translations/api-docs/use-slider-thumb/use-slider-thumb.json
+++ b/docs/translations/api-docs/use-slider-thumb/use-slider-thumb.json
@@ -13,6 +13,7 @@
     "getAriaValueText": {
       "description": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users."
     },
+    "index": { "description": "A unique index for each thumb to assist SSR (optional)" },
     "largeStep": {
       "description": "The large step value of the slider when incrementing or decrementing while the shift key is held, or when using Page-Up or Page-Down keys. Snaps to multiples of this value."
     },
diff --git a/packages/mui-base/src/Slider/SliderThumb/SliderThumb.tsx b/packages/mui-base/src/Slider/SliderThumb/SliderThumb.tsx
index 701aef8a27..8d1b7dfd19 100644
--- a/packages/mui-base/src/Slider/SliderThumb/SliderThumb.tsx
+++ b/packages/mui-base/src/Slider/SliderThumb/SliderThumb.tsx
@@ -96,7 +96,7 @@ const SliderThumb = React.forwardRef(function SliderThumb(
   });
 
   const styleHooks = React.useMemo(
-    () => getStyleHookProps({ disabled, dragging: activeIndex === index }),
+    () => getStyleHookProps({ disabled, dragging: index !== -1 && activeIndex === index }),
     [activeIndex, disabled, index],
   );
 
diff --git a/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts b/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts
index 4805d3db1e..56010f642e 100644
--- a/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts
+++ b/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts
@@ -22,6 +22,10 @@ function getNewValue(
 }
 
 function getDefaultAriaValueText(values: readonly number[], index: number): string | undefined {
+  if (index < 0) {
+    return undefined;
+  }
+
   if (values.length === 2) {
     if (index === 0) {
       return `start range ${values[index]}`;
@@ -29,6 +33,7 @@ function getDefaultAriaValueText(values: readonly number[], index: number): stri
 
     return `end range ${values[index]}`;
   }
+
   return undefined;
 }
 /**
@@ -87,12 +92,20 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
 
   const thumbValue = sliderValues[index];
 
-  const percent = percentageValues[index];
+  // for SSR, don't wait for the index if there's only one thumb
+  const percent = percentageValues.length === 1 ? percentageValues[0] : percentageValues[index];
 
   const isRtl = direction === 'rtl';
 
   const getThumbStyle = React.useCallback(() => {
     const isVertical = orientation === 'vertical';
+
+    if (!percent) {
+      return {
+        zIndex: -1,
+      };
+    }
+
     return {
       position: 'absolute',
       [{