WIP ssr improvements

mj12albert · Jun 18, 2024 · f6f37a2 · f6f37a2
1 parent 14de73a
commit f6f37a2
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -22,13 +22,18 @@ 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]}`;
     }
 
     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',
       [{