From 6f8e65fe729f4f31d319d370720fef74d1615c7b Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Fri, 27 Sep 2024 09:45:01 +0200
Subject: [PATCH] Remove useSliderContext from demos

---
 docs/data/components/slider/RtlSlider.js      | 21 ++++++++++--------
 docs/data/components/slider/RtlSlider.tsx     | 22 ++++++++++---------
 .../css-modules/index.js                      | 18 +++++++--------
 .../css-modules/index.tsx                     | 19 ++++++++--------
 .../css-modules/index.tsx.preview             | 16 --------------
 .../system/index.js                           | 16 ++++++--------
 .../system/index.tsx                          | 17 ++++++--------
 .../system/index.tsx.preview                  |  6 +++--
 .../tailwind/index.js                         | 19 +++++-----------
 .../tailwind/index.tsx                        | 20 +++++------------
 .../tailwind/index.tsx.preview                |  4 +++-
 docs/data/components/slider/VerticalSlider.js | 21 ++++++++++--------
 .../data/components/slider/VerticalSlider.tsx | 22 ++++++++++---------
 .../src/Slider/Thumb/useSliderThumb.ts        | 12 ++++------
 14 files changed, 103 insertions(+), 130 deletions(-)
 delete mode 100644 docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx.preview

diff --git a/docs/data/components/slider/RtlSlider.js b/docs/data/components/slider/RtlSlider.js
index 43a7ff6a6..8c6212ba4 100644
--- a/docs/data/components/slider/RtlSlider.js
+++ b/docs/data/components/slider/RtlSlider.js
@@ -16,14 +16,21 @@ export default function RtlSlider() {
         direction="rtl"
         className={classes.slider}
       >
-        <Label id="VolumeSliderLabel" className={classes.label}>
+        <Label
+          id="VolumeSliderLabel"
+          htmlFor=":slider-thumb-input-rtl:"
+          className={classes.label}
+        >
           Volume (RTL)
         </Label>
         <Slider.Output className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
-            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb
+              className={classes.thumb}
+              inputId=":slider-thumb-input-rtl:"
+            />
           </Slider.Track>
         </Slider.Control>
       </Slider.Root>
@@ -32,17 +39,13 @@ export default function RtlSlider() {
 }
 
 function Label(props) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = Slider.useSliderContext();
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 Label.propTypes = {
+  htmlFor: PropTypes.string,
   id: PropTypes.string,
 };
 
diff --git a/docs/data/components/slider/RtlSlider.tsx b/docs/data/components/slider/RtlSlider.tsx
index c0f646e12..6b9ae935e 100644
--- a/docs/data/components/slider/RtlSlider.tsx
+++ b/docs/data/components/slider/RtlSlider.tsx
@@ -15,14 +15,21 @@ export default function RtlSlider() {
         direction="rtl"
         className={classes.slider}
       >
-        <Label id="VolumeSliderLabel" className={classes.label}>
+        <Label
+          id="VolumeSliderLabel"
+          htmlFor=":slider-thumb-input-rtl:"
+          className={classes.label}
+        >
           Volume (RTL)
         </Label>
         <Slider.Output className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
-            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb
+              className={classes.thumb}
+              inputId=":slider-thumb-input-rtl:"
+            />
           </Slider.Track>
         </Slider.Control>
       </Slider.Root>
@@ -30,15 +37,10 @@ export default function RtlSlider() {
   );
 }
 
-function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = Slider.useSliderContext();
+function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 function useIsDarkMode() {
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
index d8442d2af..3f876164f 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
@@ -18,14 +18,18 @@ export default function UnstyledSliderIntroduction() {
         defaultValue={50}
         aria-labelledby="VolumeSliderLabel"
       >
-        <Label id="VolumeSliderLabel" className={classes.label}>
+        <Label
+          id="VolumeSliderLabel"
+          htmlFor=":slider-thumb-input:"
+          className={classes.label}
+        >
           Volume
         </Label>
         <Slider.Output className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
-            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb className={classes.thumb} inputId=":slider-thumb-input:" />
           </Slider.Track>
         </Slider.Control>
       </Slider.Root>
@@ -34,17 +38,13 @@ export default function UnstyledSliderIntroduction() {
 }
 
 function Label(props) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = Slider.useSliderContext();
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 Label.propTypes = {
+  htmlFor: PropTypes.string,
   id: PropTypes.string,
 };
 
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
index a1392d6b2..d03236419 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
@@ -17,14 +17,18 @@ export default function UnstyledSliderIntroduction() {
         defaultValue={50}
         aria-labelledby="VolumeSliderLabel"
       >
-        <Label id="VolumeSliderLabel" className={classes.label}>
+        <Label
+          id="VolumeSliderLabel"
+          htmlFor=":slider-thumb-input:"
+          className={classes.label}
+        >
           Volume
         </Label>
         <Slider.Output className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
-            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb className={classes.thumb} inputId=":slider-thumb-input:" />
           </Slider.Track>
         </Slider.Control>
       </Slider.Root>
@@ -32,15 +36,10 @@ export default function UnstyledSliderIntroduction() {
   );
 }
 
-function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = Slider.useSliderContext();
+function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 function useIsDarkMode() {
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx.preview b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx.preview
deleted file mode 100644
index e31ceef08..000000000
--- a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-<Slider.Root
-  className={classes.slider}
-  defaultValue={50}
-  aria-labelledby="VolumeSliderLabel"
->
-  <Label id="VolumeSliderLabel" className={classes.label}>
-    Volume
-  </Label>
-  <Slider.Output className={classes.output} />
-  <Slider.Control className={classes.control}>
-    <Slider.Track className={classes.track}>
-      <Slider.Indicator className={classes.indicator} />
-      <Slider.Thumb className={classes.thumb} />
-    </Slider.Track>
-  </Slider.Control>
-</Slider.Root>
\ No newline at end of file
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js
index 3d2bed51a..90a7a45aa 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js
@@ -13,12 +13,14 @@ export default function UnstyledSliderIntroduction() {
       sx={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
     >
       <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
-        <Label id="VolumeSliderLabel">Volume</Label>
+        <Label id="VolumeSliderLabel" htmlFor=":slider-thumb-input:">
+          Volume
+        </Label>
         <SliderOutput />
         <SliderControl>
           <SliderTrack>
             <SliderIndicator />
-            <SliderThumb />
+            <SliderThumb inputId=":slider-thumb-input:" />
           </SliderTrack>
         </SliderControl>
       </Slider>
@@ -27,17 +29,13 @@ export default function UnstyledSliderIntroduction() {
 }
 
 function BaseLabel(props) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = BaseSlider.useSliderContext();
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 BaseLabel.propTypes = {
+  htmlFor: PropTypes.string,
   id: PropTypes.string,
 };
 
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx
index e3e52e4c6..2a38bbf20 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx
@@ -12,12 +12,14 @@ export default function UnstyledSliderIntroduction() {
       sx={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
     >
       <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
-        <Label id="VolumeSliderLabel">Volume</Label>
+        <Label id="VolumeSliderLabel" htmlFor=":slider-thumb-input:">
+          Volume
+        </Label>
         <SliderOutput />
         <SliderControl>
           <SliderTrack>
             <SliderIndicator />
-            <SliderThumb />
+            <SliderThumb inputId=":slider-thumb-input:" />
           </SliderTrack>
         </SliderControl>
       </Slider>
@@ -25,15 +27,10 @@ export default function UnstyledSliderIntroduction() {
   );
 }
 
-function BaseLabel(props: React.HTMLAttributes<HTMLLabelElement>) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = BaseSlider.useSliderContext();
+function BaseLabel(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 const grey = {
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview
index 754a05be7..4a4e7cdbb 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview
@@ -1,10 +1,12 @@
 <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
-  <Label id="VolumeSliderLabel">Volume</Label>
+  <Label id="VolumeSliderLabel" htmlFor=":slider-thumb-input:">
+    Volume
+  </Label>
   <SliderOutput />
   <SliderControl>
     <SliderTrack>
       <SliderIndicator />
-      <SliderThumb />
+      <SliderThumb inputId=":slider-thumb-input:" />
     </SliderTrack>
   </SliderControl>
 </Slider>
\ No newline at end of file
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
index 10e7bdb4d..cbff89ca6 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
@@ -23,7 +23,9 @@ export default function UnstyledSliderIntroduction() {
       style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
     >
       <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
-        <Label id="VolumeSliderLabel">Volume</Label>
+        <Label id="VolumeSliderLabel" htmlFor=":slider-thumb-input:">
+          Volume
+        </Label>
         <SliderOutput />
         <SliderControl>
           <SliderTrack>
@@ -184,21 +186,12 @@ SliderIndicator.propTypes = {
 };
 
 function Label(props) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = BaseSlider.useSliderContext();
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label
-      id={id}
-      htmlFor={htmlFor}
-      className={classNames('font-bold', disabled && 'text-gray-500')}
-      {...otherProps}
-    />
-  );
+  return <label id={id} htmlFor={htmlFor} className="font-bold" {...otherProps} />;
 }
 
 Label.propTypes = {
+  htmlFor: PropTypes.string,
   id: PropTypes.string,
 };
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
index d1a01d8de..2caed4345 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
@@ -22,7 +22,9 @@ export default function UnstyledSliderIntroduction() {
       style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
     >
       <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
-        <Label id="VolumeSliderLabel">Volume</Label>
+        <Label id="VolumeSliderLabel" htmlFor=":slider-thumb-input:">
+          Volume
+        </Label>
         <SliderOutput />
         <SliderControl>
           <SliderTrack>
@@ -158,18 +160,8 @@ const SliderIndicator = React.forwardRef(function SliderIndicator(
   );
 });
 
-function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = BaseSlider.useSliderContext();
+function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label
-      id={id}
-      htmlFor={htmlFor}
-      className={classNames('font-bold', disabled && 'text-gray-500')}
-      {...otherProps}
-    />
-  );
+  return <label id={id} htmlFor={htmlFor} className="font-bold" {...otherProps} />;
 }
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview
index 754a05be7..497ae0f0b 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview
@@ -1,5 +1,7 @@
 <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
-  <Label id="VolumeSliderLabel">Volume</Label>
+  <Label id="VolumeSliderLabel" htmlFor=":slider-thumb-input:">
+    Volume
+  </Label>
   <SliderOutput />
   <SliderControl>
     <SliderTrack>
diff --git a/docs/data/components/slider/VerticalSlider.js b/docs/data/components/slider/VerticalSlider.js
index 41e957382..fb0a76d35 100644
--- a/docs/data/components/slider/VerticalSlider.js
+++ b/docs/data/components/slider/VerticalSlider.js
@@ -16,13 +16,20 @@ export default function VerticalSlider() {
         aria-labelledby="VolumeSliderLabel"
         className={classes.slider}
       >
-        <Label id="VolumeSliderLabel" className={classes.label}>
+        <Label
+          id="VolumeSliderLabel"
+          htmlFor=":slider-thumb-input-vertical:"
+          className={classes.label}
+        >
           Volume
         </Label>
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
-            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb
+              className={classes.thumb}
+              inputId=":slider-thumb-input-vertical:"
+            />
           </Slider.Track>
         </Slider.Control>
         <Slider.Output className={classes.output} />
@@ -32,17 +39,13 @@ export default function VerticalSlider() {
 }
 
 function Label(props) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = Slider.useSliderContext();
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 Label.propTypes = {
+  htmlFor: PropTypes.string,
   id: PropTypes.string,
 };
 
diff --git a/docs/data/components/slider/VerticalSlider.tsx b/docs/data/components/slider/VerticalSlider.tsx
index 059ef44a3..efdb05faa 100644
--- a/docs/data/components/slider/VerticalSlider.tsx
+++ b/docs/data/components/slider/VerticalSlider.tsx
@@ -15,13 +15,20 @@ export default function VerticalSlider() {
         aria-labelledby="VolumeSliderLabel"
         className={classes.slider}
       >
-        <Label id="VolumeSliderLabel" className={classes.label}>
+        <Label
+          id="VolumeSliderLabel"
+          htmlFor=":slider-thumb-input-vertical:"
+          className={classes.label}
+        >
           Volume
         </Label>
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
-            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb
+              className={classes.thumb}
+              inputId=":slider-thumb-input-vertical:"
+            />
           </Slider.Track>
         </Slider.Control>
         <Slider.Output className={classes.output} />
@@ -30,15 +37,10 @@ export default function VerticalSlider() {
   );
 }
 
-function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
-  const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = Slider.useSliderContext();
+function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  const { id, htmlFor, ...otherProps } = props;
 
-  const htmlFor = inputIdMap.get(0);
-
-  return (
-    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
-  );
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
 }
 
 function useIsDarkMode() {
diff --git a/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts b/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts
index 1caaf8d11..e1bc15ee4 100644
--- a/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts
+++ b/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts
@@ -51,6 +51,7 @@ export function useSliderThumb(parameters: useSliderThumb.Parameters): useSlider
     getAriaLabel,
     getAriaValueText,
     id: idParam,
+    inputId: inputIdParam,
     largeStep,
     max,
     min,
@@ -82,7 +83,7 @@ export function useSliderThumb(parameters: useSliderThumb.Parameters): useSlider
 
   const mergedThumbRef = useForkRef(externalRef, listItemRef, thumbRef);
 
-  const inputId = useId();
+  const inputId = useId(inputIdParam);
 
   useEnhancedEffect(() => {
     const { deregister } = registerInputId(index, inputId);
@@ -307,12 +308,6 @@ export function useSliderThumb(parameters: useSliderThumb.Parameters): useSlider
 }
 
 export namespace useSliderThumb {
-  export interface Metadata {
-    inputId: string;
-    ref: React.RefObject<HTMLElement>;
-    inputRef: React.RefObject<HTMLInputElement>;
-  }
-
   export interface Parameters
     extends Pick<
       useSliderRoot.ReturnValue,
@@ -355,7 +350,8 @@ export namespace useSliderThumb {
      * @returns {string}
      */
     getAriaValueText?: (value: number, index: number) => string;
-    id?: string;
+    id?: React.HTMLAttributes<Element>['id'];
+    inputId?: React.HTMLAttributes<Element>['id'];
     disabled: boolean;
     onBlur?: React.FocusEventHandler;
     onFocus?: React.FocusEventHandler;