Merge remote-tracking branch 'upstream/master' into docs/select-props…

…-override
mui · Dec 12, 2024 · 5b94f19 · 5b94f19
2 parents 38a9cd9 + 4087bb1
commit 5b94f19
Show file tree

Hide file tree

Showing 49 changed files with 377 additions and 173 deletions.
diff --git a/docs/data/components/slider/RangeSlider.js b/docs/data/components/slider/RangeSlider.js
@@ -31,7 +31,7 @@ export default function RangeSlider() {
         <span id="ControlledRangeLabel" className={classes.label}>
           Controlled Range
         </span>
-        <Slider.Output className={classes.output} />
+        <Slider.Value className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
@@ -49,7 +49,7 @@ export default function RangeSlider() {
         <span id="UncontrolledRangeLabel" className={classes.label}>
           Uncontrolled Range
         </span>
-        <Slider.Output className={classes.output} />
+        <Slider.Value className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />

diff --git a/docs/data/components/slider/RangeSlider.tsx b/docs/data/components/slider/RangeSlider.tsx
@@ -31,7 +31,7 @@ export default function RangeSlider() {
         <span id="ControlledRangeLabel" className={classes.label}>
           Controlled Range
         </span>
-        <Slider.Output className={classes.output} />
+        <Slider.Value className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />
@@ -49,7 +49,7 @@ export default function RangeSlider() {
         <span id="UncontrolledRangeLabel" className={classes.label}>
           Uncontrolled Range
         </span>
-        <Slider.Output className={classes.output} />
+        <Slider.Value className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />

diff --git a/docs/data/components/slider/RtlSlider.js b/docs/data/components/slider/RtlSlider.js
@@ -28,7 +28,7 @@ export default function RtlSlider() {
           >
             Volume (RTL)
           </Label>
-          <Slider.Output className={classes.output} />
+          <Slider.Value className={classes.output} />
           <Slider.Control className={classes.control}>
             <Slider.Track className={classes.track}>
               <Slider.Indicator className={classes.indicator} />

diff --git a/docs/data/components/slider/RtlSlider.tsx b/docs/data/components/slider/RtlSlider.tsx
@@ -27,7 +27,7 @@ export default function RtlSlider() {
           >
             Volume (RTL)
           </Label>
-          <Slider.Output className={classes.output} />
+          <Slider.Value className={classes.output} />
           <Slider.Control className={classes.control}>
             <Slider.Track className={classes.track}>
               <Slider.Indicator className={classes.indicator} />

diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
@@ -25,7 +25,7 @@ export default function UnstyledSliderIntroduction() {
         >
           Volume
         </Label>
-        <Slider.Output className={classes.output} />
+        <Slider.Value className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />

diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
@@ -24,7 +24,7 @@ export default function UnstyledSliderIntroduction() {
         >
           Volume
         </Label>
-        <Slider.Output className={classes.output} />
+        <Slider.Value className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />

diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js
@@ -69,7 +69,7 @@ const Slider = styled(BaseSlider.Root)`
   gap: 1rem;
 `;
 
-const SliderOutput = styled(BaseSlider.Output)`
+const SliderOutput = styled(BaseSlider.Value)`
   text-align: right;
 `;
 

diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx
@@ -63,7 +63,7 @@ const Slider = styled(BaseSlider.Root)`
   gap: 1rem;
 `;
 
-const SliderOutput = styled(BaseSlider.Output)`
+const SliderOutput = styled(BaseSlider.Value)`
   text-align: right;
 `;
 

diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
@@ -65,7 +65,7 @@ Slider.propTypes = {
 
 const SliderOutput = React.forwardRef(function SliderOutput(props, ref) {
   return (
-    <BaseSlider.Output
+    <BaseSlider.Value
       {...props}
       ref={ref}
       className={(state) =>

diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
@@ -58,11 +58,11 @@ const Slider = React.forwardRef(function Slider(
 });
 
 const SliderOutput = React.forwardRef(function SliderOutput(
-  props: BaseSlider.Output.Props,
+  props: BaseSlider.Value.Props,
   ref: React.ForwardedRef<HTMLOutputElement>,
 ) {
   return (
-    <BaseSlider.Output
+    <BaseSlider.Value
       {...props}
       ref={ref}
       className={(state) =>

diff --git a/docs/data/components/slider/VerticalSlider.js b/docs/data/components/slider/VerticalSlider.js
@@ -32,7 +32,7 @@ export default function VerticalSlider() {
             />
           </Slider.Track>
         </Slider.Control>
-        <Slider.Output className={classes.output} />
+        <Slider.Value className={classes.output} />
       </Slider.Root>
     </div>
   );

diff --git a/docs/data/components/slider/VerticalSlider.tsx b/docs/data/components/slider/VerticalSlider.tsx
@@ -31,7 +31,7 @@ export default function VerticalSlider() {
             />
           </Slider.Track>
         </Slider.Control>
-        <Slider.Output className={classes.output} />
+        <Slider.Value className={classes.output} />
       </Slider.Root>
     </div>
   );

diff --git a/docs/data/components/slider/slider.mdx b/docs/data/components/slider/slider.mdx
@@ -2,8 +2,8 @@
 productId: base-ui
 title: React Slider components
 description: The Slider component provides users with an input for a one or more numerical values within a given range.
-components: SliderRoot, SliderOutput, SliderControl, SliderTrack, SliderThumb, SliderIndicator
-hooks: useSliderRoot, useSliderOutput, useSliderControl, useSliderThumb, useSliderIndicator
+components: SliderRoot, SliderValue, SliderControl, SliderTrack, SliderThumb, SliderIndicator
+hooks: useSliderRoot, useSliderValue, useSliderControl, useSliderThumb, useSliderIndicator
 githubLabel: 'component: slider'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
 packageName: '@base-ui-components/react'
@@ -26,15 +26,15 @@ packageName: '@base-ui-components/react'
 Sliders are implemented using a collection of related components:
 
 - `<Slider.Root />` is a top-level component that wraps the other components.
-- `<Slider.Output />` renders the value of the slider.
+- `<Slider.Value />` renders the value of the slider.
 - `<Slider.Control />` renders the click/touch area that contains the track and thumb.
 - `<Slider.Track />` renders the visible rail on the `Control` along which the thumb(s) can be moved.
 - `<Slider.Indicator />` renders the filled portion of the track which represents the value(s).
 - `<Slider.Thumb />` renders the element that can be moved along the track to change the value.
 
 ```tsx
 <Slider.Root>
-  <Slider.Output />
+  <Slider.Value />
   <Slider.Control>
     <Slider.Track>
       <Slider.Indicator />
@@ -54,7 +54,7 @@ When Slider is uncontrolled, the `defaultValue` prop sets the initial value of t
 function App() {
   return (
     <Slider.Root defaultValue={50}>
-      <Slider.Output />
+      <Slider.Value />
       <Slider.Control>
         <Slider.Track>
           <Slider.Indicator />
@@ -78,7 +78,7 @@ function App() {
   const [value, setValue] = useState(50);
   return (
     <Slider.Root value={value} onValueChange={setValue}>
-      <Slider.Output />
+      <Slider.Value />
       <Slider.Control>
         <Slider.Track>
           <Slider.Indicator />
@@ -98,7 +98,7 @@ The `min` and `max` props can be used to restrict the value(s) within a range.
 
 ```tsx
 <Slider.Root min={1} max={9}>
-  <Slider.Output />
+  <Slider.Value />
   <Slider.Control>
     <Slider.Track>
       <Slider.Indicator />
@@ -114,7 +114,7 @@ The `step` prop snaps each value to multiples of the given number. In the below
 
 ```tsx
 <Slider.Root step={4} defaultValue={3}>
-  <Slider.Output />
+  <Slider.Value />
   <Slider.Control>
     <Slider.Track>
       <Slider.Indicator />
@@ -132,7 +132,7 @@ To let users set the start and end of a range on a Slider, provide an array of v
 
 ```tsx
 <Slider.Root defaultValue={[45, 70]}>
-  <Slider.Output />
+  <Slider.Value />
   <Slider.Control>
     <Slider.Track>
       <Slider.Indicator />

diff --git a/docs/reference/generated/slider-root.json b/docs/reference/generated/slider-root.json
@@ -19,6 +19,10 @@
       "default": "false",
       "description": "Whether the component should ignore user interaction."
     },
+    "format": {
+      "type": "Intl.NumberFormatOptions",
+      "description": "Options to format the input value."
+    },
     "largeStep": {
       "type": "number",
       "default": "10",

diff --git a/docs/reference/generated/slider-thumb.json b/docs/reference/generated/slider-thumb.json
@@ -19,7 +19,7 @@
       "description": "Accepts a function which returns a string value that provides a user-friendly name for the input associated with the thumb"
     },
     "getAriaValueText": {
-      "type": "function(value: number, index: number) => string",
+      "type": "function(formattedValue: string, value: number, index: number) => string",
       "description": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.\nThis is important for screen reader users."
     },
     "render": {

diff --git a/docs/reference/generated/slider-output.json → docs/reference/generated/slider-value.json b/docs/reference/generated/slider-output.json → docs/reference/generated/slider-value.json
@@ -1,5 +1,5 @@
 {
-  "name": "SliderOutput",
+  "name": "SliderValue",
   "description": "Displays the current value of the slider as text.\nRenders an `<output>` element.",
   "props": {
     "className": {

diff --git a/docs/reference/overrides/slider-root.json b/docs/reference/overrides/slider-root.json
@@ -1,6 +1,9 @@
 {
   "name": "SliderRoot",
   "props": {
+    "format": {
+      "type": "Intl.NumberFormatOptions"
+    },
     "onValueChange": {
       "type": "(value, event, activeThumbIndex) => void"
     },

diff --git a/docs/src/app/(private)/experiments/slider-change-committed-lag.tsx b/docs/src/app/(private)/experiments/slider-change-committed-lag.tsx
@@ -22,7 +22,7 @@ export default function App() {
         onValueChange={(newValue) => setVal1(newValue as number)}
         onValueCommitted={(newValue) => setVal2(newValue as number)}
       >
-        <Slider.Output className={classes.output} />
+        <Slider.Value className={classes.output} />
         <Slider.Control className={classes.control}>
           <Slider.Track className={classes.track}>
             <Slider.Indicator className={classes.indicator} />

diff --git a/docs/src/app/(private)/experiments/slider-format.tsx b/docs/src/app/(private)/experiments/slider-format.tsx
@@ -0,0 +1,56 @@
+'use client';
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import { Slider } from '@base-ui-components/react/slider';
+import c from './slider.module.css';
+
+export default function UnstyledSliderIntroduction() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <div
+      className={isDarkMode ? 'dark' : ''}
+      style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
+    >
+      <Slider.Root
+        className={c.slider}
+        defaultValue={[50, 75]}
+        aria-labelledby="BudgetSliderLabel"
+        format={{
+          style: 'currency',
+          currency: 'USD',
+          currencyDisplay: 'name',
+        }}
+      >
+        <Label
+          id="BudgetSliderLabel"
+          htmlFor=":slider-thumb-input:"
+          className={c.label}
+        >
+          Budget
+        </Label>
+        <Slider.Value className={c.output}>
+          {(_, values) => `$${values[0].toFixed(2)} - ${values[1].toFixed(2)} USD`}
+        </Slider.Value>
+        <Slider.Control className={c.control}>
+          <Slider.Track className={c.track}>
+            <Slider.Indicator className={c.indicator} />
+            <Slider.Thumb className={c.thumb} inputId="thumb1" />
+            <Slider.Thumb className={c.thumb} inputId="thumb2" />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>
+    </div>
+  );
+}
+
+function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  const { id, htmlFor, ...otherProps } = props;
+
+  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
+}
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
diff --git a/docs/src/app/(private)/experiments/slider.module.css b/docs/src/app/(private)/experiments/slider.module.css
@@ -8,7 +8,7 @@
   position: relative;
   -webkit-tap-highlight-color: transparent;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr auto;
   gap: 1rem;
 }
 

diff --git a/docs/src/app/(public)/(content)/react/components/slider/page.mdx b/docs/src/app/(public)/(content)/react/components/slider/page.mdx
@@ -16,7 +16,7 @@ Import the component and place its parts the following way:
 import { Slider } from '@base-ui-components/react/slider';
 
 <Slider.Root>
-  <Slider.Output />
+  <Slider.Value />
   <Slider.Control>
     <Slider.Track>
       <Slider.Indicator />
@@ -26,4 +26,4 @@ import { Slider } from '@base-ui-components/react/slider';
 </Slider.Root>;
 ```
 
-<Reference component="Slider" parts="Root, Output, Control, Track, Indicator, Thumb" />
+<Reference component="Slider" parts="Root, Value, Control, Track, Indicator, Thumb" />
diff --git a/...rc/app/(public)/(content)/react/components/switch/demos/hero/css-modules/index.module.css b/...rc/app/(public)/(content)/react/components/switch/demos/hero/css-modules/index.module.css
@@ -1,4 +1,5 @@
 .Switch {
+  position: relative;
   display: flex;
   appearance: none;
   border: 0;
@@ -48,6 +49,17 @@
       box-shadow: none;
     }
   }
+
+  &:focus-visible {
+    &::before {
+      content: '';
+      inset: 0;
+      position: absolute;
+      border-radius: inherit;
+      outline: 2px solid var(--color-blue);
+      outline-offset: 2px;
+    }
+  }
 }
 
 .Thumb {
@@ -57,10 +69,6 @@
   background-color: white;
   transition: translate 150ms ease;
 
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-  }
-
   &[data-checked] {
     translate: 1rem 0;
   }

diff --git a/docs/src/app/(public)/(content)/react/components/switch/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/switch/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ export default function ExampleSwitch() {
   return (
     <Switch.Root
       defaultChecked
-      className="flex h-6 w-10 rounded-full bg-gradient-to-r from-gray-700 from-35% to-gray-200 to-65% bg-[length:6.5rem_100%] bg-[100%_0%] bg-no-repeat p-px shadow-[inset_0_1.5px_2px] shadow-gray-200 outline -outline-offset-1 outline-gray-200 transition-[background-position,box-shadow] duration-[125ms] ease-[cubic-bezier(0.26,0.75,0.38,0.45)] active:bg-gray-100 data-[checked]:bg-[0%_0%] data-[checked]:active:bg-gray-500 dark:from-gray-500 dark:shadow-black/75 dark:outline-white/15 dark:data-[checked]:shadow-none"
+      className="relative flex h-6 w-10 rounded-full bg-gradient-to-r from-gray-700 from-35% to-gray-200 to-65% bg-[length:6.5rem_100%] bg-[100%_0%] bg-no-repeat p-px shadow-[inset_0_1.5px_2px] shadow-gray-200 outline -outline-offset-1 outline-gray-200 transition-[background-position,box-shadow] duration-[125ms] ease-[cubic-bezier(0.26,0.75,0.38,0.45)] before:absolute before:rounded-full before:outline-offset-2 before:outline-blue-800 focus-visible:before:inset-0 focus-visible:before:outline-2 active:bg-gray-100 data-[checked]:bg-[0%_0%] data-[checked]:active:bg-gray-500 dark:from-gray-500 dark:shadow-black/75 dark:outline-white/15 dark:data-[checked]:shadow-none"
     >
       <Switch.Thumb className="aspect-square h-full rounded-full bg-white shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-gray-100 transition-transform duration-150 data-[checked]:translate-x-4 dark:shadow-black/25" />
     </Switch.Root>

diff --git a/docs/src/app/(public)/layout.css b/docs/src/app/(public)/layout.css
@@ -9,7 +9,7 @@
   }
 
   body {
-    min-width: 360px;
+    min-width: 320px;
     line-height: 1.5;
     background-color: var(--color-background);
     color: var(--color-foreground);

diff --git a/docs/src/components/Header.css b/docs/src/components/Header.css
@@ -2,6 +2,7 @@
   .Header {
     @apply text-sm;
     position: absolute;
+    left: 0;
     top: 0;
     height: var(--header-height);
     width: 100%;