More PR fixes

mj12albert · Oct 13, 2024 · 491175e · 491175e
1 parent cbe23cd
commit 491175e
Show file tree

Hide file tree

Showing 21 changed files with 86 additions and 83 deletions.
diff --git a/docs/app/experiments/slider-marks.tsx b/docs/app/experiments/slider-marks.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import * as Slider from '@base_ui/react/Slider';
-import { useSliderContext } from '../../../packages/mui-base/src/Slider/Root/SliderContext';
+import { useSliderRootContext } from '../../../packages/mui-base/src/Slider/Root/SliderRootContext';
 
 const STOPS = [
   {
@@ -33,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 } = useSliderContext();
+  const { direction, values } = useSliderRootContext();
   const isRtl = direction === 'rtl';
   const isFilled = inverted ? value >= values[0] : values[0] >= value;
   return (

diff --git a/docs/app/experiments/slider-tooltip.tsx b/docs/app/experiments/slider-tooltip.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useTheme } from '@mui/system';
 import * as Slider from '@base_ui/react/Slider';
 import * as Tooltip from '@base_ui/react/Tooltip';
-import { useSliderContext } from '../../../packages/mui-base/src/Slider/Root/SliderContext';
+import { useSliderRootContext } from '../../../packages/mui-base/src/Slider/Root/SliderRootContext';
 
 function useIsDarkMode() {
   const theme = useTheme();
@@ -74,7 +74,7 @@ export default function App() {
 
 const SliderMark = React.forwardRef(function SliderMark(props: any, ref: React.ForwardedRef<any>) {
   const { index, style, ...otherProps } = props;
-  const { percentageValues } = useSliderContext();
+  const { percentageValues } = useSliderRootContext();
   const isFilled = percentageValues[0] >= index * 10;
   return (
     <span

diff --git a/docs/data/api/slider-thumb.json b/docs/data/api/slider-thumb.json
@@ -14,6 +14,7 @@
         "describedArgs": ["value", "index"]
       }
     },
+    "inputId": { "type": { "name": "string" } },
     "render": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;node" } }
   },
   "name": "SliderThumb",

diff --git a/docs/data/components/slider/styles.module.css b/docs/data/components/slider/styles.module.css
@@ -12,8 +12,8 @@
   gap: 1rem;
 }
 
-.output {
-  text-align: right;
+[dir='rtl'] .output {
+  text-align: left;
 }
 
 .control {

diff --git a/docs/data/translations/api-docs/slider-thumb/slider-thumb.json b/docs/data/translations/api-docs/slider-thumb/slider-thumb.json
@@ -19,6 +19,9 @@
         "index": "The thumb label&#39;s index to format."
       }
     },
+    "inputId": {
+      "description": "An optional <code>id</code> attribute for the underlying <code>&lt;input&gt;</code> element that can be used together with the <code>for</code>/<code>htmlFor</code> attribute of a custom label"
+    },
     "render": { "description": "A function to customize rendering of the component." }
   },
   "classDescriptions": {}

diff --git a/packages/mui-base/src/Slider/Control/SliderControl.test.tsx b/packages/mui-base/src/Slider/Control/SliderControl.test.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import * as Slider from '@base_ui/react/Slider';
 import { createRenderer, describeConformance } from '#test-utils';
-import { SliderContext } from '../Root/SliderContext';
-import type { SliderRoot } from '../Root/SliderRoot';
+import { SliderRootContext } from '../Root/SliderRootContext';
 import { NOOP } from '../../utils/noop';
 
-const testRootContext: SliderRoot.Context = {
+const testRootContext: SliderRootContext = {
   active: -1,
   areValuesEqual: () => true,
   axis: 'horizontal',
@@ -59,7 +58,7 @@ describe('<Slider.Control />', () => {
   describeConformance(<Slider.Control />, () => ({
     render: (node) => {
       return render(
-        <SliderContext.Provider value={testRootContext}>{node}</SliderContext.Provider>,
+        <SliderRootContext.Provider value={testRootContext}>{node}</SliderRootContext.Provider>,
       );
     },
     refInstanceof: window.HTMLSpanElement,

diff --git a/packages/mui-base/src/Slider/Control/SliderControl.tsx b/packages/mui-base/src/Slider/Control/SliderControl.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import type { BaseUIComponentProps } from '../../utils/types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useSliderContext } from '../Root/SliderContext';
+import { useSliderRootContext } from '../Root/SliderRootContext';
 import { sliderStyleHookMapping } from '../Root/styleHooks';
 import type { SliderRoot } from '../Root/SliderRoot';
 import { useSliderControl } from './useSliderControl';
@@ -39,7 +39,7 @@ const SliderControl = React.forwardRef(function SliderControl(
     setValueState,
     step,
     thumbRefs,
-  } = useSliderContext();
+  } = useSliderRootContext();
 
   const { getRootProps } = useSliderControl({
     areValuesEqual,
@@ -72,7 +72,9 @@ const SliderControl = React.forwardRef(function SliderControl(
 });
 
 export namespace SliderControl {
-  export interface Props extends BaseUIComponentProps<'span', SliderRoot.OwnerState> {}
+  export interface OwnerState extends SliderRoot.OwnerState {}
+
+  export interface Props extends BaseUIComponentProps<'span', OwnerState> {}
 }
 
 export { SliderControl };

diff --git a/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx b/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import * as Slider from '@base_ui/react/Slider';
 import { createRenderer, describeConformance } from '#test-utils';
-import { SliderContext } from '../Root/SliderContext';
-import type { SliderRoot } from '../Root/SliderRoot';
+import { SliderRootContext } from '../Root/SliderRootContext';
 import { NOOP } from '../../utils/noop';
 
-const testRootContext: SliderRoot.Context = {
+const testRootContext: SliderRootContext = {
   active: -1,
   areValuesEqual: () => true,
   axis: 'horizontal',
@@ -59,7 +58,7 @@ describe('<Slider.Indicator />', () => {
   describeConformance(<Slider.Indicator />, () => ({
     render: (node) => {
       return render(
-        <SliderContext.Provider value={testRootContext}>{node}</SliderContext.Provider>,
+        <SliderRootContext.Provider value={testRootContext}>{node}</SliderRootContext.Provider>,
       );
     },
     refInstanceof: window.HTMLSpanElement,

diff --git a/packages/mui-base/src/Slider/Indicator/SliderIndicator.tsx b/packages/mui-base/src/Slider/Indicator/SliderIndicator.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import type { BaseUIComponentProps } from '../../utils/types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useSliderContext } from '../Root/SliderContext';
+import { useSliderRootContext } from '../Root/SliderRootContext';
 import { sliderStyleHookMapping } from '../Root/styleHooks';
 import type { SliderRoot } from '../Root/SliderRoot';
 import { useSliderIndicator } from './useSliderIndicator';
@@ -24,7 +24,7 @@ const SliderIndicator = React.forwardRef(function SliderIndicator(
   const { render, className, ...otherProps } = props;
 
   const { axis, direction, disabled, orientation, ownerState, percentageValues } =
-    useSliderContext();
+    useSliderRootContext();
 
   const { getRootProps } = useSliderIndicator({
     axis,
@@ -48,7 +48,9 @@ const SliderIndicator = React.forwardRef(function SliderIndicator(
 });
 
 export namespace SliderIndicator {
-  export interface Props extends BaseUIComponentProps<'span', SliderRoot.OwnerState> {}
+  export interface OwnerState extends SliderRoot.OwnerState {}
+
+  export interface Props extends BaseUIComponentProps<'span', OwnerState> {}
 }
 
 export { SliderIndicator };

diff --git a/packages/mui-base/src/Slider/Indicator/useSliderIndicator.ts b/packages/mui-base/src/Slider/Indicator/useSliderIndicator.ts
@@ -19,16 +19,6 @@ const axisProps = {
   },
 };
 
-/**
- *
- * Demos:
- *
- * - [Slider](https://mui.com/base-ui/react-slider/#hooks)
- *
- * API:
- *
- * - [useSliderIndicator API](https://mui.com/base-ui/react-slider/hooks-api/#use-slider-indicator)
- */
 export function useSliderIndicator(
   parameters: useSliderIndicator.Parameters,
 ): useSliderIndicator.ReturnValue {

diff --git a/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx b/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx
@@ -2,11 +2,10 @@ import * as React from 'react';
 import { expect } from 'chai';
 import * as Slider from '@base_ui/react/Slider';
 import { createRenderer, describeConformance } from '#test-utils';
-import { SliderContext } from '../Root/SliderContext';
+import { SliderRootContext } from '../Root/SliderRootContext';
 import { NOOP } from '../../utils/noop';
-import type { SliderRoot } from '../Root/SliderRoot';
 
-const testRootContext: SliderRoot.Context = {
+const testRootContext: SliderRootContext = {
   active: -1,
   areValuesEqual: () => true,
   axis: 'horizontal',
@@ -60,7 +59,7 @@ describe('<Slider.Output />', () => {
   describeConformance(<Slider.Output />, () => ({
     render: (node) => {
       return render(
-        <SliderContext.Provider value={testRootContext}>{node}</SliderContext.Provider>,
+        <SliderRootContext.Provider value={testRootContext}>{node}</SliderRootContext.Provider>,
       );
     },
     refInstanceof: window.HTMLOutputElement,

diff --git a/packages/mui-base/src/Slider/Output/SliderOutput.tsx b/packages/mui-base/src/Slider/Output/SliderOutput.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import type { BaseUIComponentProps } from '../../utils/types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useSliderContext } from '../Root/SliderContext';
+import { useSliderRootContext } from '../Root/SliderRootContext';
 import { sliderStyleHookMapping } from '../Root/styleHooks';
 import type { SliderRoot } from '../Root/SliderRoot';
 import { useSliderOutput } from './useSliderOutput';
@@ -23,7 +23,7 @@ const SliderOutput = React.forwardRef(function SliderOutput(
 ) {
   const { render, className, ...otherProps } = props;
 
-  const { inputIdMap, ownerState, values } = useSliderContext();
+  const { inputIdMap, ownerState, values } = useSliderRootContext();
 
   const { getRootProps } = useSliderOutput({
     inputIdMap,
@@ -46,7 +46,9 @@ const SliderOutput = React.forwardRef(function SliderOutput(
 });
 
 export namespace SliderOutput {
-  export interface Props extends BaseUIComponentProps<'output', SliderRoot.OwnerState> {}
+  export interface OwnerState extends SliderRoot.OwnerState {}
+
+  export interface Props extends BaseUIComponentProps<'output', OwnerState> {}
 }
 
 export { SliderOutput };

diff --git a/packages/mui-base/src/Slider/Root/SliderContext.tsx b/packages/mui-base/src/Slider/Root/SliderContext.tsx
diff --git a/packages/mui-base/src/Slider/Root/SliderRoot.tsx b/packages/mui-base/src/Slider/Root/SliderRoot.tsx
@@ -7,7 +7,7 @@ import type { FieldRoot } from '../../Field/Root/FieldRoot';
 import { CompositeList } from '../../Composite/List/CompositeList';
 import { sliderStyleHookMapping } from './styleHooks';
 import { useSliderRoot } from './useSliderRoot';
-import { SliderContext } from './SliderContext';
+import { SliderRootContext } from './SliderRootContext';
 import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
 /**
  *
@@ -104,9 +104,9 @@ const SliderRoot = React.forwardRef(function SliderRoot(
   });
 
   return (
-    <SliderContext.Provider value={contextValue}>
+    <SliderRootContext.Provider value={contextValue}>
       <CompositeList elementsRef={slider.thumbRefs}>{renderElement()}</CompositeList>
-    </SliderContext.Provider>
+    </SliderRootContext.Provider>
   );
 });
 

diff --git a/packages/mui-base/src/Slider/Root/SliderRootContext.tsx b/packages/mui-base/src/Slider/Root/SliderRootContext.tsx
@@ -0,0 +1,25 @@
+'use client';
+import * as React from 'react';
+import type { SliderRoot } from './SliderRoot';
+import type { useSliderRoot } from './useSliderRoot';
+
+export interface SliderRootContext extends Omit<useSliderRoot.ReturnValue, 'getRootProps'> {
+  ownerState: SliderRoot.OwnerState;
+}
+
+/**
+ * @ignore - internal component.
+ */
+export const SliderRootContext = React.createContext<SliderRootContext | undefined>(undefined);
+
+if (process.env.NODE_ENV !== 'production') {
+  SliderRootContext.displayName = 'SliderRootContext';
+}
+
+export function useSliderRootContext() {
+  const context = React.useContext(SliderRootContext);
+  if (context === undefined) {
+    throw new Error('useSliderRootContext must be used inside a Slider component');
+  }
+  return context;
+}
diff --git a/packages/mui-base/src/Slider/Root/useSliderRoot.ts b/packages/mui-base/src/Slider/Root/useSliderRoot.ts
@@ -108,16 +108,6 @@ export function trackFinger(
   };
 }
 
-/**
- *
- * Demos:
- *
- * - [Slider](https://mui.com/base-ui/react-slider/#hooks)
- *
- * API:
- *
- * - [useSliderRoot API](https://mui.com/base-ui/react-slider/hooks-api/#use-slider-root)
- */
 export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRoot.ReturnValue {
   const {
     'aria-labelledby': ariaLabelledby,

diff --git a/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx b/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import * as Slider from '@base_ui/react/Slider';
 import { createRenderer, describeConformance } from '#test-utils';
-import { SliderContext } from '../Root/SliderContext';
+import { SliderRootContext } from '../Root/SliderRootContext';
 import { NOOP } from '../../utils/noop';
-import type { SliderRoot } from '../Root/SliderRoot';
 
-const testRootContext: SliderRoot.Context = {
+const testRootContext: SliderRootContext = {
   active: -1,
   areValuesEqual: () => true,
   axis: 'horizontal',
@@ -59,7 +58,7 @@ describe('<Slider.Thumb />', () => {
   describeConformance(<Slider.Thumb />, () => ({
     render: (node) => {
       return render(
-        <SliderContext.Provider value={testRootContext}>{node}</SliderContext.Provider>,
+        <SliderRootContext.Provider value={testRootContext}>{node}</SliderRootContext.Provider>,
       );
     },
     refInstanceof: window.HTMLSpanElement,

diff --git a/packages/mui-base/src/Slider/Thumb/SliderThumb.tsx b/packages/mui-base/src/Slider/Thumb/SliderThumb.tsx
@@ -7,7 +7,7 @@ import { resolveClassName } from '../../utils/resolveClassName';
 import { BaseUIComponentProps } from '../../utils/types';
 import { useForkRef } from '../../utils/useForkRef';
 import type { SliderRoot } from '../Root/SliderRoot';
-import { useSliderContext } from '../Root/SliderContext';
+import { useSliderRootContext } from '../Root/SliderRootContext';
 import { useSliderThumb } from './useSliderThumb';
 import { isReactVersionAtLeast } from '../../utils/reactVersion';
 
@@ -46,6 +46,7 @@ const SliderThumb = React.forwardRef(function SliderThumb(
     getAriaLabel,
     getAriaValueText,
     id,
+    inputId,
     ...otherProps
   } = props;
 
@@ -70,7 +71,7 @@ const SliderThumb = React.forwardRef(function SliderThumb(
     step,
     tabIndex,
     values,
-  } = useSliderContext();
+  } = useSliderRootContext();
 
   let renderPropRef = null;
   if (typeof render !== 'function') {
@@ -91,6 +92,7 @@ const SliderThumb = React.forwardRef(function SliderThumb(
     getAriaLabel,
     getAriaValueText,
     id,
+    inputId,
     largeStep,
     max,
     min,
@@ -212,6 +214,11 @@ SliderThumb.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   id: PropTypes.string,
+  /**
+   * An optional `id` attribute for the underlying `<input>` element that
+   * can be used together with the `for`/`htmlFor` attribute of a custom label
+   */
+  inputId: PropTypes.string,
   /**
    * @ignore
    */