diff --git a/docs/app/experiments/slider-change-committed-lag.tsx b/docs/app/experiments/slider-change-committed-lag.tsx
index 673b39ad78..885b3e9597 100644
--- a/docs/app/experiments/slider-change-committed-lag.tsx
+++ b/docs/app/experiments/slider-change-committed-lag.tsx
@@ -3,7 +3,7 @@
// to cross check whether this issue would still occur in the new API
import * as React from 'react';
import { Slider } from '@base_ui/react/Slider';
-import { Styles } from './slider';
+import classes from './slider.module.css';
export default function App() {
const [val1, setVal1] = React.useState(80);
@@ -17,23 +17,22 @@ export default function App() {
}}
>
setVal1(newValue as number)}
onValueCommitted={(newValue) => setVal2(newValue as number)}
>
-
-
-
-
-
+
+
+
+
+
onValueChange value: {val1}
onValueCommitted value: {val2}
-
);
}
diff --git a/docs/app/experiments/slider-marks.tsx b/docs/app/experiments/slider-marks.tsx
index 04194347ca..3aca9f1326 100644
--- a/docs/app/experiments/slider-marks.tsx
+++ b/docs/app/experiments/slider-marks.tsx
@@ -1,6 +1,7 @@
'use client';
import * as React from 'react';
import { Slider } from '@base_ui/react/Slider';
+import { useSliderContext } from '../../../packages/mui-base/src/Slider/Root/SliderContext';
const STOPS = [
{
@@ -32,7 +33,7 @@ function getSliderThumbAriaValueText(value: number) {
// for "inverted track", the track/rail can be styled with CSS but a prop is needed to flip the "mark active" state
function MarkWithLabel(props: { index: number; value: number; label: string; inverted?: boolean }) {
const { index, value, label, inverted = false } = props;
- const { direction, values } = Slider.useSliderContext();
+ const { direction, values } = useSliderContext();
const isRtl = direction === 'rtl';
const isFilled = inverted ? value >= values[0] : values[0] >= value;
return (
diff --git a/docs/app/experiments/slider-template.tsx b/docs/app/experiments/slider-template.tsx
deleted file mode 100644
index 7472d3a329..0000000000
--- a/docs/app/experiments/slider-template.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-import * as React from 'react';
-import { Slider } from '@base_ui/react/Slider';
-import { Styles } from './slider';
-
-export default function App() {
- return (
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/docs/app/experiments/slider-tooltip.tsx b/docs/app/experiments/slider-tooltip.tsx
index 2d8b140855..28d89d6855 100644
--- a/docs/app/experiments/slider-tooltip.tsx
+++ b/docs/app/experiments/slider-tooltip.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
import { useTheme } from '@mui/system';
import { Slider } from '@base_ui/react/Slider';
import { Tooltip } from '@base_ui/react/Tooltip';
+import { useSliderContext } from '../../../packages/mui-base/src/Slider/Root/SliderContext';
function useIsDarkMode() {
const theme = useTheme();
@@ -73,7 +74,7 @@ export default function App() {
const SliderMark = React.forwardRef(function SliderMark(props: any, ref: React.ForwardedRef) {
const { index, style, ...otherProps } = props;
- const { percentageValues } = Slider.useSliderContext();
+ const { percentageValues } = useSliderContext();
const isFilled = percentageValues[0] >= index * 10;
return (
- Uncontrolled
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Controlled
-
- {
- setVal1(newValue as number);
- }}
- >
-
-
-
-
-
-
-
-
-
- {
- setVal2(newValue as number[]);
- }}
- >
-
-
-
-
-
-
-
-
-
-
- {
- setVal3(newValue as number[]);
- }}
- >
-
-
-
- {val3.map((_val, idx) => (
-
- ))}
-
-
-
-
-
- With custom labels
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Volume Range
-
-
-
-
-
-
-
-
-
-
-
-
- Vertical
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- RTL
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Price Range
-
-
-
-
- );
-}
-
-function Label(props: any) {
- const { id: idProp, ...otherProps } = props;
- const defaultId = React.useId();
- const labelId = idProp ?? defaultId;
-
- const { subitems } = Slider.useSliderContext();
-
- const htmlFor = Array.from(subitems.values())
- .reduce((acc, item) => {
- return `${acc} ${item.inputId}`;
- }, '')
- .trim();
-
- return ;
-}
-
-function LabelRange(props: any) {
- const { id: idProp, ...otherProps } = props;
-
- const defaultId = React.useId();
- const labelId = idProp ?? defaultId;
-
- return ;
-}
-
-const grey = {
- 50: '#F3F6F9',
- 100: '#E5EAF2',
- 200: '#DAE2ED',
- 300: '#C7D0DD',
- 400: '#B0B8C4',
- 500: '#9DA8B7',
- 600: '#6B7A90',
- 700: '#434D5B',
- 800: '#303740',
- 900: '#1C2025',
-};
-
-function useIsDarkMode() {
- const theme = useTheme();
- return theme.palette.mode === 'dark';
-}
-
-export function Styles() {
- const isDarkMode = useIsDarkMode();
- return (
-
- );
-}
diff --git a/docs/data/api/slider-root.json b/docs/data/api/slider-root.json
index 9bf64ced01..077f5d8052 100644
--- a/docs/data/api/slider-root.json
+++ b/docs/data/api/slider-root.json
@@ -10,12 +10,8 @@
"default": "'ltr'"
},
"disabled": { "type": { "name": "bool" }, "default": "false" },
- "id": { "type": { "name": "string" } },
"largeStep": { "type": { "name": "number" }, "default": "10" },
- "max": { "type": { "name": "number" }, "default": "100" },
- "min": { "type": { "name": "number" }, "default": "0" },
"minStepsBetweenValues": { "type": { "name": "number" }, "default": "0" },
- "name": { "type": { "name": "string" } },
"onValueChange": {
"type": { "name": "func" },
"signature": {
@@ -35,8 +31,6 @@
"default": "'horizontal'"
},
"render": { "type": { "name": "union", "description": "element
| func" } },
- "step": { "type": { "name": "number" }, "default": "1" },
- "tabIndex": { "type": { "name": "number" } },
"value": {
"type": { "name": "union", "description": "Array<number>
| number" }
}
diff --git a/docs/data/components/slider/RangeSlider.js b/docs/data/components/slider/RangeSlider.js
index 43c1a01582..d464db388e 100644
--- a/docs/data/components/slider/RangeSlider.js
+++ b/docs/data/components/slider/RangeSlider.js
@@ -1,7 +1,8 @@
'use client';
import * as React from 'react';
-import { styled, useTheme, Box } from '@mui/system';
-import { Slider as BaseSlider } from '@base_ui/react/Slider';
+import { useTheme } from '@mui/system';
+import { Slider } from '@base_ui/react/Slider';
+import classes from './styles.module.css';
export default function RangeSlider() {
// Replace this with your app logic for determining dark mode
@@ -9,160 +10,59 @@ export default function RangeSlider() {
const [value, setValue] = React.useState([20, 37]);
return (
-
{/* controlled: */}
-
-
-
-
-
-
-
-
-
-
-
+ {/*
+ we can't use a
+
+
+ Uncontrolled Range
+
+
+
+
+
+
+
+
+
+
+
);
}
-const grey = {
- 50: '#F3F6F9',
- 100: '#E5EAF2',
- 200: '#DAE2ED',
- 300: '#C7D0DD',
- 400: '#B0B8C4',
- 500: '#9DA8B7',
- 600: '#6B7A90',
- 700: '#434D5B',
- 800: '#303740',
- 900: '#1C2025',
-};
-
function useIsDarkMode() {
const theme = useTheme();
return theme.palette.mode === 'dark';
}
-
-const Slider = styled(BaseSlider.Root)`
- font-family: 'IBM Plex Sans', sans-serif;
- font-size: 1rem;
- width: 100%;
- align-items: center;
- position: relative;
- -webkit-tap-highlight-color: transparent;
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 1rem;
-`;
-
-const SliderOutput = styled(BaseSlider.Output)`
- text-align: right;
-`;
-
-const SliderControl = styled(BaseSlider.Control)`
- grid-column: 1/3;
- display: flex;
- align-items: center;
- position: relative;
- width: 100%;
- height: 16px;
- border-radius: 9999px;
- touch-action: none;
-
- &[data-disabled] {
- cursor: not-allowed;
- }
-`;
-
-const SliderTrack = styled(BaseSlider.Track)`
- width: 100%;
- height: 2px;
- border-radius: 9999px;
- background-color: ${grey[400]};
- touch-action: none;
-
- .dark & {
- background-color: ${grey[700]};
- }
-`;
-
-const SliderIndicator = styled(BaseSlider.Indicator)`
- border-radius: 9999px;
- background-color: black;
-
- .dark & {
- background-color: ${grey[100]};
- }
-`;
-
-const SliderThumb = styled(BaseSlider.Thumb)`
- position: absolute;
- width: 16px;
- height: 16px;
- box-sizing: border-box;
- border-radius: 50%;
- background-color: black;
- transform: translateX(-50%);
- touch-action: none;
-
- &:focus-visible {
- outline: 2px solid black;
- outline-offset: 2px;
- }
-
- .dark & {
- background-color: ${grey[300]};
- }
-
- .dark &:focus-visible {
- outline-color: ${grey[300]};
- outline-width: 1px;
- outline-offset: 3px;
- }
-
- &[data-dragging='true'] {
- background-color: pink;
- }
-
- &[data-disabled],
- .dark &[data-disabled] {
- background-color: ${grey[600]};
- }
-
- .dark &[data-dragging='true'] {
- background-color: pink;
- }
-`;
-
-// we can't use a
);
}
-
/**
*
* Demos:
@@ -34,7 +34,7 @@ function defaultRender(
* - [SliderThumb API](https://base-ui.netlify.app/components/react-slider/#api-reference-SliderThumb)
*/
const SliderThumb = React.forwardRef(function SliderThumb(
- props: SliderThumbProps,
+ props: SliderThumb.Props,
forwardedRef: React.ForwardedRef,
) {
const {
@@ -66,6 +66,7 @@ const SliderThumb = React.forwardRef(function SliderThumb(
orientation,
ownerState,
percentageValues,
+ registerInputId,
step,
tabIndex,
values,
@@ -97,6 +98,7 @@ const SliderThumb = React.forwardRef(function SliderThumb(
name,
orientation,
percentageValues,
+ registerInputId,
rootRef: mergedRef,
step,
tabIndex,
@@ -130,6 +132,7 @@ const SliderThumb = React.forwardRef(function SliderThumb(
...thumbProps,
children: (
+ {/* @ts-ignore */}
{typeof children === 'function' ? children() : children}
@@ -140,6 +143,32 @@ const SliderThumb = React.forwardRef(function SliderThumb(
});
});
+export namespace SliderThumb {
+ export interface OwnerState extends SliderRoot.OwnerState {}
+
+ export interface Props
+ extends Partial>,
+ Omit, 'render'> {
+ onPointerLeave?: React.PointerEventHandler;
+ onPointerOver?: React.PointerEventHandler;
+ onBlur?: React.FocusEventHandler;
+ onFocus?: React.FocusEventHandler;
+ onKeyDown?: React.KeyboardEventHandler;
+ /**
+ * A function to customize rendering of the component.
+ */
+ render?:
+ | ((
+ props: React.ComponentPropsWithRef<'span'>,
+ inputProps: React.ComponentPropsWithRef<'input'>,
+ state: OwnerState,
+ ) => React.ReactElement)
+ | (React.ReactElement & { ref: React.Ref });
+ }
+}
+
+export { SliderThumb };
+
SliderThumb.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
@@ -211,5 +240,3 @@ SliderThumb.propTypes /* remove-proptypes */ = {
PropTypes.node,
]),
} as any;
-
-export { SliderThumb };
diff --git a/packages/mui-base/src/Slider/Thumb/SliderThumb.types.ts b/packages/mui-base/src/Slider/Thumb/SliderThumb.types.ts
deleted file mode 100644
index 4511630217..0000000000
--- a/packages/mui-base/src/Slider/Thumb/SliderThumb.types.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { BaseUIComponentProps } from '../../utils/types';
-import { SliderRootOwnerState, UseSliderReturnValue } from '../Root/SliderRoot.types';
-
-export interface SliderThumbOwnerState extends SliderRootOwnerState {}
-
-export interface SliderThumbProps
- extends Partial>,
- Omit, 'render'> {
- onPointerLeave?: React.PointerEventHandler;
- onPointerOver?: React.PointerEventHandler;
- onBlur?: React.FocusEventHandler;
- onFocus?: React.FocusEventHandler;
- onKeyDown?: React.KeyboardEventHandler;
- /**
- * A function to customize rendering of the component.
- */
- render?:
- | ((
- props: React.ComponentPropsWithRef<'span'>,
- inputProps: React.ComponentPropsWithRef<'input'>,
- state: SliderThumbOwnerState,
- ) => React.ReactElement>)
- | (React.ReactElement> & { ref: React.Ref });
-}
-
-export interface UseSliderThumbParameters
- extends Pick<
- UseSliderReturnValue,
- | 'active'
- | 'aria-labelledby'
- | 'axis'
- | 'changeValue'
- | 'direction'
- | 'largeStep'
- | 'max'
- | 'min'
- | 'minStepsBetweenValues'
- | 'name'
- | 'orientation'
- | 'percentageValues'
- | 'step'
- | 'tabIndex'
- | 'values'
- > {
- /**
- * The label for the input element.
- */
- 'aria-label'?: string;
- /**
- * A string value that provides a user-friendly name for the current value of the slider.
- */
- 'aria-valuetext'?: string;
- /**
- * Accepts a function which returns a string value that provides a user-friendly name for the input associated with the thumb
- * @param {number} index The index of the input
- * @returns {string}
- */
- getAriaLabel?: (index: number) => string;
- /**
- * 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.
- * @param {number} value The thumb label's value to format.
- * @param {number} index The thumb label's index to format.
- * @returns {string}
- */
- getAriaValueText?: (value: number, index: number) => string;
- id?: string;
- disabled?: boolean;
- onBlur?: React.FocusEventHandler;
- onFocus?: React.FocusEventHandler;
- onKeyDown?: React.KeyboardEventHandler;
- rootRef?: React.Ref;
-}
-
-export interface UseSliderThumbReturnValue {
- getRootProps: (
- externalProps?: React.ComponentPropsWithRef,
- ) => React.ComponentPropsWithRef;
- getThumbInputProps: (
- externalProps?: React.ComponentPropsWithRef<'input'>,
- ) => React.ComponentPropsWithRef<'input'>;
- /**
- * Resolver for the thumb slot's style prop.
- * @param index of the currently moved thumb
- * @returns props that should be spread on the style prop of thumb slot
- */
- getThumbStyle: (index: number) => Record;
- index: number;
-}
diff --git a/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts b/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts
index a14a728403..e1bc15ee48 100644
--- a/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts
+++ b/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts
@@ -1,19 +1,16 @@
'use client';
import * as React from 'react';
import { mergeReactProps } from '../../utils/mergeReactProps';
+import { GenericHTMLProps } from '../../utils/types';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
import { useForkRef } from '../../utils/useForkRef';
import { useId } from '../../utils/useId';
import { visuallyHidden } from '../../utils/visuallyHidden';
-import { useCompoundItem } from '../../useCompound';
-import { SliderThumbMetadata } from '../Root/SliderRoot.types';
-import { UseSliderThumbParameters, UseSliderThumbReturnValue } from './SliderThumb.types';
+import { useCompositeListItem } from '../../Composite/List/useCompositeListItem';
import { useFieldControlValidation } from '../../Field/Control/useFieldControlValidation';
import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
import { getSliderValue } from '../utils/getSliderValue';
-
-function idGenerator(existingKeys: Set) {
- return `thumb-${existingKeys.size}`;
-}
+import type { useSliderRoot } from '../Root/useSliderRoot';
function getNewValue(
thumbValue: number,
@@ -41,7 +38,7 @@ function getDefaultAriaValueText(values: readonly number[], index: number): stri
return undefined;
}
-export function useSliderThumb(parameters: UseSliderThumbParameters) {
+export function useSliderThumb(parameters: useSliderThumb.Parameters): useSliderThumb.ReturnValue {
const {
active: activeIndex,
'aria-label': ariaLabel,
@@ -54,16 +51,18 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
getAriaLabel,
getAriaValueText,
id: idParam,
+ inputId: inputIdParam,
largeStep,
max,
min,
minStepsBetweenValues,
name,
orientation,
+ percentageValues,
+ registerInputId,
rootRef: externalRef,
step,
tabIndex,
- percentageValues,
values: sliderValues,
} = parameters;
@@ -79,17 +78,20 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
const inputRef = React.useRef(null);
const mergedInputRef = useForkRef(inputRef, inputValidationRef);
- const handleRef = useForkRef(externalRef, thumbRef);
- const thumbMetadata: SliderThumbMetadata = React.useMemo(
- () => ({ inputId: thumbId ? `${thumbId}-input` : '', ref: thumbRef, inputRef }),
- [thumbId],
- );
+ const { ref: listItemRef, index } = useCompositeListItem();
- const { id: compoundItemId, index } = useCompoundItem(
- (thumbId ? `${thumbId}-input` : thumbId) ?? idGenerator,
- thumbMetadata,
- );
+ const mergedThumbRef = useForkRef(externalRef, listItemRef, thumbRef);
+
+ const inputId = useId(inputIdParam);
+
+ useEnhancedEffect(() => {
+ const { deregister } = registerInputId(index, inputId);
+
+ return () => {
+ deregister(index);
+ };
+ }, [index, inputId, registerInputId]);
const thumbValue = sliderValues[index];
@@ -120,11 +122,11 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
};
}, [activeIndex, axis, isRtl, orientation, percent, index]);
- const getRootProps: UseSliderThumbReturnValue['getRootProps'] = React.useCallback(
+ const getRootProps: useSliderThumb.ReturnValue['getRootProps'] = React.useCallback(
(externalProps = {}) => {
return mergeReactProps(externalProps, {
'data-index': index,
- id: idParam,
+ id: thumbId,
onBlur() {
if (!thumbRef.current) {
return;
@@ -202,7 +204,7 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
event.preventDefault();
}
},
- ref: handleRef,
+ ref: mergedThumbRef,
style: {
...getThumbStyle(),
},
@@ -210,28 +212,32 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
});
},
[
- index,
- idParam,
- handleRef,
- getThumbStyle,
- tabIndex,
- disabled,
- setTouched,
+ changeValue,
commitValidation,
- thumbValue,
- sliderValues,
+ disabled,
+ getThumbStyle,
+ index,
+ isRtl,
largeStep,
- step,
- min,
max,
- isRtl,
+ mergedThumbRef,
+ min,
minStepsBetweenValues,
- changeValue,
+ setTouched,
+ sliderValues,
+ step,
+ tabIndex,
+ thumbId,
+ thumbValue,
],
);
- const getThumbInputProps: UseSliderThumbReturnValue['getThumbInputProps'] = React.useCallback(
+ const getThumbInputProps: useSliderThumb.ReturnValue['getThumbInputProps'] = React.useCallback(
(externalProps = {}) => {
+ let cssWritingMode;
+ if (orientation === 'vertical') {
+ cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr';
+ }
return mergeReactProps(getInputValidationProps(externalProps), {
'aria-label': getAriaLabel ? getAriaLabel(index) : ariaLabel,
'aria-labelledby': ariaLabelledby,
@@ -244,7 +250,7 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
: ariaValuetext ?? getDefaultAriaValueText(sliderValues, index),
'data-index': index,
disabled,
- id: compoundItemId,
+ id: inputId,
max,
min,
name,
@@ -260,6 +266,7 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
// So that VoiceOver's focus indicator matches the thumb's dimensions
width: '100%',
height: '100%',
+ writingMode: cssWritingMode,
},
tabIndex: -1,
type: 'range',
@@ -271,21 +278,21 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
ariaLabelledby,
ariaValuetext,
changeValue,
- compoundItemId,
disabled,
getAriaLabel,
getAriaValueText,
+ getInputValidationProps,
index,
isRtl,
max,
+ mergedInputRef,
min,
name,
orientation,
sliderValues,
step,
+ inputId,
thumbValue,
- getInputValidationProps,
- mergedInputRef,
],
);
@@ -293,9 +300,71 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
() => ({
getRootProps,
getThumbInputProps,
- index,
disabled,
+ index,
}),
- [getRootProps, getThumbInputProps, index, disabled],
+ [getRootProps, getThumbInputProps, disabled, index],
);
}
+
+export namespace useSliderThumb {
+ export interface Parameters
+ extends Pick<
+ useSliderRoot.ReturnValue,
+ | 'active'
+ | 'aria-labelledby'
+ | 'axis'
+ | 'changeValue'
+ | 'direction'
+ | 'largeStep'
+ | 'max'
+ | 'min'
+ | 'minStepsBetweenValues'
+ | 'name'
+ | 'orientation'
+ | 'percentageValues'
+ | 'registerInputId'
+ | 'step'
+ | 'tabIndex'
+ | 'values'
+ > {
+ /**
+ * The label for the input element.
+ */
+ 'aria-label'?: string;
+ /**
+ * A string value that provides a user-friendly name for the current value of the slider.
+ */
+ 'aria-valuetext'?: string;
+ /**
+ * Accepts a function which returns a string value that provides a user-friendly name for the input associated with the thumb
+ * @param {number} index The index of the input
+ * @returns {string}
+ */
+ getAriaLabel?: (index: number) => string;
+ /**
+ * 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.
+ * @param {number} value The thumb label's value to format.
+ * @param {number} index The thumb label's index to format.
+ * @returns {string}
+ */
+ getAriaValueText?: (value: number, index: number) => string;
+ id?: React.HTMLAttributes['id'];
+ inputId?: React.HTMLAttributes['id'];
+ disabled: boolean;
+ onBlur?: React.FocusEventHandler;
+ onFocus?: React.FocusEventHandler;
+ onKeyDown?: React.KeyboardEventHandler;
+ rootRef?: React.Ref;
+ }
+
+ export interface ReturnValue {
+ getRootProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
+ getThumbInputProps: (
+ externalProps?: React.ComponentPropsWithRef<'input'>,
+ ) => React.ComponentPropsWithRef<'input'>;
+ index: number;
+ disabled: boolean;
+ }
+}
diff --git a/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx b/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx
index 382583c216..88165fc91d 100644
--- a/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx
+++ b/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx
@@ -1,65 +1,66 @@
import * as React from 'react';
import { Slider } from '@base_ui/react/Slider';
-import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider/index.parts';
import { createRenderer, describeConformance } from '#test-utils';
+import { SliderContext } from '../Root/SliderContext';
+import { NOOP } from '../../utils/noop';
+import type { SliderRoot } from '../Root/SliderRoot';
-const NOOP = () => {};
-
-describe('', () => {
- const { render } = createRenderer();
-
- const testProviderValue: SliderProviderValue = {
- active: -1,
- areValuesEqual: () => true,
- axis: 'horizontal',
- changeValue: NOOP,
- compoundComponentContextValue: {
- registerItem: () => ({ id: 0, deregister: () => {} }),
- getItemIndex: () => 0,
- totalSubitemCount: 1,
- },
- dragging: false,
+const testRootContext: SliderRoot.Context = {
+ active: -1,
+ areValuesEqual: () => true,
+ axis: 'horizontal',
+ changeValue: NOOP,
+ direction: 'ltr',
+ dragging: false,
+ disabled: false,
+ getFingerNewValue: () => ({
+ newValue: 0,
+ activeIndex: 0,
+ newPercentageValue: 0,
+ }),
+ handleValueChange: NOOP,
+ largeStep: 10,
+ inputIdMap: new Map(),
+ max: 100,
+ min: 0,
+ minStepsBetweenValues: 0,
+ orientation: 'horizontal',
+ ownerState: {
+ activeThumbIndex: -1,
disabled: false,
- getFingerNewValue: () => ({
- newValue: 0,
- activeIndex: 0,
- newPercentageValue: 0,
- }),
- handleValueChange: NOOP,
+ dragging: false,
direction: 'ltr',
- largeStep: 10,
max: 100,
min: 0,
minStepsBetweenValues: 0,
orientation: 'horizontal',
- ownerState: {
- activeThumbIndex: -1,
- disabled: false,
- dragging: false,
- direction: 'ltr',
- max: 100,
- min: 0,
- minStepsBetweenValues: 0,
- orientation: 'horizontal',
- step: 1,
- values: [0],
- valid: null,
- dirty: false,
- touched: false,
- },
- percentageValues: [0],
- registerSliderControl: NOOP,
- setActive: NOOP,
- setDragging: NOOP,
- setValueState: NOOP,
step: 1,
- subitems: new Map(),
values: [0],
- };
+ valid: null,
+ dirty: false,
+ touched: false,
+ },
+ percentageValues: [0],
+ registerInputId: () => ({
+ deregister: NOOP,
+ }),
+ registerSliderControl: NOOP,
+ setActive: NOOP,
+ setDragging: NOOP,
+ setValueState: NOOP,
+ step: 1,
+ thumbRefs: { current: [] },
+ values: [0],
+};
+
+describe('', () => {
+ const { render } = createRenderer();
describeConformance(, () => ({
render: (node) => {
- return render({node});
+ return render(
+ {node},
+ );
},
refInstanceof: window.HTMLSpanElement,
}));
diff --git a/packages/mui-base/src/Slider/Track/SliderTrack.tsx b/packages/mui-base/src/Slider/Track/SliderTrack.tsx
index 33726a84a3..7fa0de2216 100644
--- a/packages/mui-base/src/Slider/Track/SliderTrack.tsx
+++ b/packages/mui-base/src/Slider/Track/SliderTrack.tsx
@@ -1,11 +1,11 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
+import { BaseUIComponentProps } from '../../utils/types';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useSliderContext } from '../Root/SliderProvider';
+import { useSliderContext } from '../Root/SliderContext';
+import type { SliderRoot } from '../Root/SliderRoot';
import { sliderStyleHookMapping } from '../Root/styleHooks';
-import { SliderTrackProps } from './SliderTrack.types';
-
/**
*
* Demos:
@@ -17,8 +17,8 @@ import { SliderTrackProps } from './SliderTrack.types';
* - [SliderTrack API](https://base-ui.netlify.app/components/react-slider/#api-reference-SliderTrack)
*/
const SliderTrack = React.forwardRef(function SliderTrack(
- props: SliderTrackProps,
- forwardedRef: React.ForwardedRef,
+ props: SliderTrack.Props,
+ forwardedRef: React.ForwardedRef,
) {
const { render, className, ...otherProps } = props;
@@ -36,6 +36,12 @@ const SliderTrack = React.forwardRef(function SliderTrack(
return renderElement();
});
+export namespace SliderTrack {
+ export interface Props extends BaseUIComponentProps<'span', SliderRoot.OwnerState> {}
+}
+
+export { SliderTrack };
+
SliderTrack.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
@@ -54,5 +60,3 @@ SliderTrack.propTypes /* remove-proptypes */ = {
*/
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
} as any;
-
-export { SliderTrack };
diff --git a/packages/mui-base/src/Slider/Track/SliderTrack.types.ts b/packages/mui-base/src/Slider/Track/SliderTrack.types.ts
deleted file mode 100644
index edda2fcbf6..0000000000
--- a/packages/mui-base/src/Slider/Track/SliderTrack.types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { BaseUIComponentProps } from '../../utils/types';
-import { SliderRootOwnerState } from '../Root/SliderRoot.types';
-
-export interface SliderTrackProps extends BaseUIComponentProps<'span', SliderRootOwnerState> {}
diff --git a/packages/mui-base/src/Slider/index.parts.ts b/packages/mui-base/src/Slider/index.parts.ts
index be5d9c2dc2..fc64fa908e 100644
--- a/packages/mui-base/src/Slider/index.parts.ts
+++ b/packages/mui-base/src/Slider/index.parts.ts
@@ -1,49 +1,6 @@
export { SliderRoot as Root } from './Root/SliderRoot';
-export type {
- SliderRootOwnerState as SliderOwnerState,
- SliderRootProps as RootProps,
- UseSliderParameters,
- UseSliderReturnValue,
- SliderContextValue,
- SliderProviderValue,
- SliderThumbMetadata,
- Axis,
-} from './Root/SliderRoot.types';
-export { useSliderRoot } from './Root/useSliderRoot';
-export * from './Root/SliderProvider';
-
export { SliderOutput as Output } from './Output/SliderOutput';
-export type {
- SliderOutputProps as OutputProps,
- UseSliderOutputParameters,
- UseSliderOutputReturnValue,
-} from './Output/SliderOutput.types';
-export { useSliderOutput } from './Output/useSliderOutput';
-
export { SliderControl as Control } from './Control/SliderControl';
-export type {
- SliderControlProps as ControlProps,
- UseSliderControlParameters,
- UseSliderControlReturnValue,
-} from './Control/SliderControl.types';
-export { useSliderControl } from './Control/useSliderControl';
-
export { SliderTrack as Track } from './Track/SliderTrack';
-export type { SliderTrackProps as TrackProps } from './Track/SliderTrack.types';
-
export { SliderThumb as Thumb } from './Thumb/SliderThumb';
-export type {
- SliderThumbOwnerState as ThumbOwnerState,
- SliderThumbProps as ThumbProps,
- UseSliderThumbParameters,
- UseSliderThumbReturnValue,
-} from './Thumb/SliderThumb.types';
-export { useSliderThumb } from './Thumb/useSliderThumb';
-
export { SliderIndicator as Indicator } from './Indicator/SliderIndicator';
-export type {
- SliderIndicatorProps as IndicatorProps,
- UseSliderIndicatorParameters,
- UseSliderIndicatorReturnValue,
-} from './Indicator/SliderIndicator.types';
-export { useSliderIndicator } from './Indicator/useSliderIndicator';