Reorganize

Standalone useSliderOutput Reorganize again
mj12albert · May 12, 2024 · cbd1ac6 · cbd1ac6
1 parent 61b9e2e
commit cbd1ac6
Show file tree

Hide file tree

Showing 25 changed files with 357 additions and 275 deletions.
diff --git a/docs/pages/experiments/slider-controlled.tsx b/docs/pages/experiments/slider-controlled.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { alpha, useTheme } from '@mui/system';
 import * as Slider from '@base_ui/react/Slider2';
-import { valueToPercent } from '@base_ui/react/useSlider2/utils';
-import { useSliderContext } from '@base_ui/react/Slider2/SliderContext';
+import { valueToPercent } from '@base_ui/react/Slider2/utils';
+import { useSliderContext } from '@base_ui/react/Slider2';
 
 function TrackFillSingleThumb(props: any) {
   const { value: values, min, max } = useSliderContext('Track');

diff --git a/docs/pages/experiments/slider-gradient.tsx b/docs/pages/experiments/slider-gradient.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { alpha, hexToRgb, decomposeColor, recomposeColor, rgbToHex } from '@mui/system';
 import * as Slider from '@base_ui/react/Slider2';
-import { percentToValue, roundValueToStep } from '@base_ui/react/useSlider2/utils';
+import { percentToValue, roundValueToStep } from '@base_ui/react/Slider2/utils';
 import { clamp } from '@base_ui/react/utils/clamp';
 import { BaseUIEvent } from '@base_ui/react/utils/BaseUI.types';
 
@@ -34,7 +34,9 @@ export default function App() {
   const insertNewValue = (newPosition: number) => {
     // console.log('insertNewValue position:', newPosition)
 
-    const newIndex = [...values.map(val => val.position), newPosition].sort((a, b) => a - b).indexOf(newPosition);
+    const newIndex = [...values.map((val) => val.position), newPosition]
+      .sort((a, b) => a - b)
+      .indexOf(newPosition);
     // console.log('newIndex:', newIndex)
 
     const newValue = { color: null, position: newPosition };
@@ -43,28 +45,34 @@ export default function App() {
     const floor = newValues[newIndex - 1];
     const ceiling = newValues[newIndex + 1];
 
-    const distance = Math.abs(ceiling.position - floor.position)
+    const distance = Math.abs(ceiling.position - floor.position);
 
     const percentage = (newPosition - floor.position) / distance;
 
-    const { values: floorColor } = decomposeColor(hexToRgb((floor as Stop).color))
-    const { values: ceilingColor } = decomposeColor(hexToRgb((ceiling as Stop).color))
+    const { values: floorColor } = decomposeColor(hexToRgb((floor as Stop).color));
+    const { values: ceilingColor } = decomposeColor(hexToRgb((ceiling as Stop).color));
 
     // console.log('floor color', floorColor);
     // console.log('ceiling color', ceilingColor);
     // console.log('percentage', percentage);
 
-    const newColor = recomposeColor({ type: 'rgb', values: [
-      floorColor[0] * (1 - percentage) + ceilingColor[0] * percentage,
-      floorColor[1] * (1 - percentage) + ceilingColor[1] * percentage,
-      floorColor[2] * (1 - percentage) + ceilingColor[2] * percentage,
-      ] })
+    const newColor = recomposeColor({
+      type: 'rgb',
+      values: [
+        floorColor[0] * (1 - percentage) + ceilingColor[0] * percentage,
+        floorColor[1] * (1 - percentage) + ceilingColor[1] * percentage,
+        floorColor[2] * (1 - percentage) + ceilingColor[2] * percentage,
+      ],
+    });
     // console.log('newColor', rgbToHex(newColor))
 
-    const finalValues = [...values, {
-      color: rgbToHex(newColor),
-      position: newPosition,
-    }].sort((a, b) => a.position - b.position);
+    const finalValues = [
+      ...values,
+      {
+        color: rgbToHex(newColor),
+        position: newPosition,
+      },
+    ].sort((a, b) => a.position - b.position);
 
     setValues(finalValues);
   };
@@ -84,28 +92,28 @@ export default function App() {
 
   const handleValueChange = (newValue: number | number[], activeThumbIndex: number) => {
     if (!Array.isArray(newValue)) {
-      console.error('array only!')
+      console.error('array only!');
       return;
     }
 
     const activeStopColor = activeStopRef.current?.color ?? null;
     // FIXME: bug happens if activeStopColor appears twice or more
-    const valuesWithoutActiveStop = values.filter(val => val.color !== activeStopColor);
+    const valuesWithoutActiveStop = values.filter((val) => val.color !== activeStopColor);
     // console.log('valuesWithoutActiveStop', JSON.stringify(valuesWithoutActiveStop))
     // console.log('newThumbIndex', activeThumbIndex);
 
     const newValues = [
       ...valuesWithoutActiveStop,
       {
         ...activeStopRef.current,
-        position: newValue[activeThumbIndex]
+        position: newValue[activeThumbIndex],
       },
     ].sort((a, b) => a.position - b.position);
 
     // console.log('handleValueChange', newValues);
     // @ts-ignore
     setValues(newValues);
-  }
+  };
 
   const handlePointerDown = (event: BaseUIEvent<React.PointerEvent>) => {
     if (event.target === trackRef.current) {
@@ -144,7 +152,9 @@ export default function App() {
         value={values.map(({ position }) => position)}
         onValueChange={handleValueChange}
       >
-        <Slider.Output className="MySlider-output"><pre>background: {gradient}</pre></Slider.Output>
+        <Slider.Output className="MySlider-output">
+          <pre>background: {gradient}</pre>
+        </Slider.Output>
         <Slider.Track
           className="MySlider-track"
           render={<span />}
@@ -158,7 +168,7 @@ export default function App() {
           {values.map(({ color }, index) => (
             <Slider.Thumb
               key={`slider-thumb-${index}`}
-              className={classNames('MySlider-thumb', openThumbIndex === index && 'active' )}
+              className={classNames('MySlider-thumb', openThumbIndex === index && 'active')}
               onFocus={(event: BaseUIEvent<React.FocusEvent<HTMLInputElement>>) => {
                 const currentIndex = Number(event.target.dataset.index);
                 if (Number.isInteger(currentIndex)) {
@@ -173,7 +183,7 @@ export default function App() {
                   activeStopRef.current = null;
                 }
               }}
-              onPointerDown={event => {
+              onPointerDown={(event) => {
                 isDraggingRef.current = true;
                 const currentIndex = Number(event.currentTarget.dataset.index);
                 // console.log('currentStop', values[currentIndex])
@@ -223,27 +233,15 @@ export default function App() {
                         return {
                           ...val,
                           color: event.target.value,
-                        }
+                        };
                       }
                       return val;
-                    })
-                    setValues(newValues)
+                    });
+                    setValues(newValues);
                   }}
                 />
-                <input
-                  type="text"
-                  value={color}
-                  readOnly
-                  disabled
-                  className="Stop-color"
-                />
-                <input
-                  type="text"
-                  value={position}
-                  readOnly
-                  disabled
-                  className="Stop-position"
-                />
+                <input type="text" value={color} readOnly disabled className="Stop-color" />
+                <input type="text" value={position} readOnly disabled className="Stop-position" />
                 <button
                   type="button"
                   onClick={() => removeValueByIndex(index)}

diff --git a/docs/pages/experiments/slider-vertical.tsx b/docs/pages/experiments/slider-vertical.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as Slider from '@base_ui/react/Slider2';
-import { valueToPercent } from '@base_ui/react/useSlider2/utils';
-import { useSliderContext } from '@base_ui/react/Slider2/SliderContext';
+import { valueToPercent } from '@base_ui/react/Slider2/utils';
+import { useSliderContext } from '@base_ui/react/Slider2';
 
 function TrackFillSingleThumb(props: any) {
   const { value: values, min, max } = useSliderContext('Track');

diff --git a/docs/pages/experiments/slider.tsx b/docs/pages/experiments/slider.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useTheme } from '@mui/system';
 import * as Slider from '@base_ui/react/Slider2';
-import { valueToPercent } from '@base_ui/react/useSlider2/utils';
-import { useSliderContext } from '@base_ui/react/Slider2/SliderContext';
+import { valueToPercent } from '@base_ui/react/Slider2/utils';
+import { useSliderContext } from '@base_ui/react/Slider2';
 
 function TrackFillSingleThumb(props: any) {
   const { value: values, min, max } = useSliderContext('Track');

diff --git a/...ges/mui-base/src/Slider2/SliderContext.ts → ...ui-base/src/Slider2/Root/SliderContext.ts b/...ges/mui-base/src/Slider2/SliderContext.ts → ...ui-base/src/Slider2/Root/SliderContext.ts
@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { UseSliderReturnValue } from '../useSlider2/useSlider.types';
-import { SliderOwnerState } from './Slider.types';
+import { UseSliderReturnValue, SliderRootOwnerState } from './SliderRoot.types';
 
-export type SliderContextValue = Omit<UseSliderReturnValue, 'compoundComponentContextValue'> & {
-  ownerState: SliderOwnerState;
+export type SliderContextValue = Omit<
+  UseSliderReturnValue,
+  'compoundComponentContextValue' | 'getRootProps'
+> & {
+  ownerState: SliderRootOwnerState;
 };
 
 export const SliderContext = React.createContext<SliderContextValue | undefined>(undefined);
@@ -12,9 +14,7 @@ if (process.env.NODE_ENV !== 'production') {
   SliderContext.displayName = 'SliderContext';
 }
 
-type Part = 'Track' | 'Thumb' | 'Output';
-
-export function useSliderContext(part: Part) {
+export function useSliderContext(part: string) {
   const context = React.useContext(SliderContext);
   if (context === undefined) {
     throw new Error(`Base UI: Slider${part} is not placed inside the Slider component.`);

diff --git a/packages/mui-base/src/Slider2/Root/SliderProvider.tsx b/packages/mui-base/src/Slider2/Root/SliderProvider.tsx
@@ -0,0 +1,33 @@
+'use client';
+import * as React from 'react';
+import { CompoundComponentContext, CompoundComponentContextValue } from '../../useCompound';
+import { SliderThumbMetadata } from '../SliderThumb/SliderThumb.types';
+import { SliderContext, type SliderContextValue } from './SliderContext';
+
+export type SliderProviderValue = SliderContextValue & {
+  compoundComponentContextValue: CompoundComponentContextValue<any, SliderThumbMetadata>;
+};
+
+export interface SliderProviderProps {
+  value: SliderProviderValue;
+  children: React.ReactNode;
+}
+
+/**
+ * Sets up contexts for the Slider and its subcomponents.
+ *
+ * @ignore - do not document.
+ */
+function SliderProvider(props: SliderProviderProps) {
+  const { value: valueProp, children } = props;
+
+  const { compoundComponentContextValue, ...contextValue } = valueProp;
+
+  return (
+    <CompoundComponentContext.Provider value={compoundComponentContextValue}>
+      <SliderContext.Provider value={contextValue}>{children}</SliderContext.Provider>
+    </CompoundComponentContext.Provider>
+  );
+}
+
+export { SliderProvider };
diff --git a/packages/mui-base/src/Slider2/SliderRoot.tsx → .../mui-base/src/Slider2/Root/SliderRoot.tsx b/packages/mui-base/src/Slider2/SliderRoot.tsx → .../mui-base/src/Slider2/Root/SliderRoot.tsx
@@ -1,20 +1,19 @@
 'use client';
 import * as React from 'react';
-import { evaluateRenderProp } from '../utils/evaluateRenderProp';
-import { getStyleHookProps } from '../utils/getStyleHookProps';
-import { resolveClassName } from '../utils/resolveClassName';
-import { useRenderPropForkRef } from '../utils/useRenderPropForkRef';
-import { CompoundComponentContext } from '../useCompound';
-import { useSlider } from '../useSlider2';
-import { SliderContext } from './SliderContext';
-import { RootProps, SliderOwnerState } from './Slider.types';
+import { evaluateRenderProp } from '../../utils/evaluateRenderProp';
+import { getStyleHookProps } from '../../utils/getStyleHookProps';
+import { resolveClassName } from '../../utils/resolveClassName';
+import { useRenderPropForkRef } from '../../utils/useRenderPropForkRef';
+import { useSlider } from './useSliderRoot';
+import { SliderProvider } from './SliderProvider';
+import { SliderRootProps, SliderRootOwnerState } from './SliderRoot.types';
 
 function defaultRender(props: React.ComponentPropsWithRef<'div'>) {
   return <div {...props} />;
 }
 
 const SliderRoot = React.forwardRef(function SliderRoot(
-  props: RootProps,
+  props: SliderRootProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -31,7 +30,7 @@ const SliderRoot = React.forwardRef(function SliderRoot(
 
   const mergedRef = useRenderPropForkRef(render, forwardedRef);
 
-  const { compoundComponentContextValue, ...slider } = useSlider({
+  const { getRootProps, ...slider } = useSlider({
     defaultValue,
     disabled,
     onValueChange,
@@ -40,7 +39,7 @@ const SliderRoot = React.forwardRef(function SliderRoot(
     ...otherProps,
   });
 
-  const ownerState: SliderOwnerState = React.useMemo(
+  const ownerState: SliderRootOwnerState = React.useMemo(
     () => ({
       disabled,
       dragging: slider.dragging,
@@ -56,7 +55,7 @@ const SliderRoot = React.forwardRef(function SliderRoot(
     [disabled, slider.dragging],
   );
 
-  const rootProps = slider.getRootProps({
+  const rootProps = getRootProps({
     ...styleHooks,
     ...otherProps,
     className: resolveClassName(className, ownerState),
@@ -71,12 +70,10 @@ const SliderRoot = React.forwardRef(function SliderRoot(
   );
 
   return (
-    <CompoundComponentContext.Provider value={compoundComponentContextValue}>
-      <SliderContext.Provider value={contextValue}>
-        {evaluateRenderProp(render, rootProps, ownerState)}
-      </SliderContext.Provider>
-    </CompoundComponentContext.Provider>
+    <SliderProvider value={contextValue}>
+      {evaluateRenderProp(render, rootProps, ownerState)}
+    </SliderProvider>
   );
 });
 
-export { SliderRoot };
+export { SliderRoot as Slider };
diff --git a/...ui-base/src/useSlider2/useSlider.types.ts → ...base/src/Slider2/Root/SliderRoot.types.ts b/...ui-base/src/useSlider2/useSlider.types.ts → ...base/src/Slider2/Root/SliderRoot.types.ts
@@ -1,5 +1,39 @@
-import { CompoundComponentContextValue } from '../useCompound';
-import { ThumbMetadata } from './useSliderThumb.types';
+import { SliderThumbMetadata } from '../SliderThumb/SliderThumb.types';
+import type { BaseUIComponentProps } from '../../utils/BaseUI.types';
+import { CompoundComponentContextValue } from '../../useCompound';
+
+export interface SliderRootOwnerState {
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: boolean;
+  min: number;
+  max: number;
+  /**
+   * The raw number value of the slider.
+   */
+  value: number | ReadonlyArray<number>;
+}
+
+export interface SliderRootProps
+  extends UseSliderParameters,
+    Omit<BaseUIComponentProps<'div', SliderRootOwnerState>, 'defaultValue' | 'onChange' | 'value'> {
+  /**
+   * The default value of the slider. Use when the component is not controlled.
+   */
+  defaultValue?: number | ReadonlyArray<number>;
+  /**
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The value of the slider.
+   * For ranged sliders, provide an array with two values.
+   */
+  value?: number | ReadonlyArray<number>;
+}
 
 export interface UseSliderParameters {
   /**
@@ -134,9 +168,6 @@ export interface UseSliderReturnValue {
   getRootProps: (
     externalProps?: React.ComponentPropsWithRef<'div'>,
   ) => React.ComponentPropsWithRef<'div'>;
-  getOutputProps: (
-    externalProps?: React.ComponentPropsWithRef<'output'>,
-  ) => React.ComponentPropsWithRef<'output'>;
   /**
    * The index of the active thumb.
    */
@@ -155,7 +186,7 @@ export interface UseSliderReturnValue {
     index: number,
     event: React.KeyboardEvent | React.ChangeEvent,
   ) => void;
-  compoundComponentContextValue: CompoundComponentContextValue<any, ThumbMetadata>;
+  compoundComponentContextValue: CompoundComponentContextValue<any, SliderThumbMetadata>;
   dragging: boolean;
   disabled: boolean;
   getFingerNewValue: (args: {
@@ -192,8 +223,8 @@ export interface UseSliderReturnValue {
   setOpen: (index: number) => void;
   setValueState: (newValue: number | number[]) => void;
   step?: number | null;
+  subitems: Map<any, SliderThumbMetadata>;
   tabIndex?: number;
-  thumbRefs: (HTMLElement | null)[];
   valueState: number | readonly number[];
   value: ReadonlyArray<number>;
 }