Reorganize

mui · May 11, 2024 · 1c97949 · 1c97949
1 parent 61b9e2e
commit 1c97949
Show file tree

Hide file tree

Showing 22 changed files with 214 additions and 200 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/SliderOutput.tsx → ...-base/src/Slider2/Output/SliderOutput.tsx b/...ges/mui-base/src/Slider2/SliderOutput.tsx → ...-base/src/Slider2/Output/SliderOutput.tsx
@@ -1,17 +1,17 @@
 'use client';
 import * as React from 'react';
-import { evaluateRenderProp } from '../utils/evaluateRenderProp';
-import { resolveClassName } from '../utils/resolveClassName';
-import { useRenderPropForkRef } from '../utils/useRenderPropForkRef';
-import { useSliderContext } from './SliderContext';
-import { OutputProps } from './Slider.types';
+import { evaluateRenderProp } from '../../utils/evaluateRenderProp';
+import { resolveClassName } from '../../utils/resolveClassName';
+import { useRenderPropForkRef } from '../../utils/useRenderPropForkRef';
+import { useSliderContext } from '../Root/SliderContext';
+import { SliderOutputProps } from './SliderOutput.types';
 
 function defaultRender(props: React.ComponentPropsWithRef<'output'>) {
   return <output {...props} />;
 }
 
 const SliderOutput = React.forwardRef(function SliderOutput(
-  props: OutputProps,
+  props: SliderOutputProps,
   forwardedRef: React.ForwardedRef<HTMLOutputElement>,
 ) {
   const { render: renderProp, className, ...otherProps } = props;

diff --git a/packages/mui-base/src/Slider2/Output/SliderOutput.types.ts b/packages/mui-base/src/Slider2/Output/SliderOutput.types.ts
@@ -0,0 +1,4 @@
+import { BaseUIComponentProps } from '../../utils/BaseUI.types';
+import { SliderRootOwnerState } from '../Root/SliderRoot.types';
+
+export interface SliderOutputProps extends BaseUIComponentProps<'output', SliderRootOwnerState> {}
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,8 @@
 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;
+  ownerState: SliderRootOwnerState;
 };
 
 export const SliderContext = React.createContext<SliderContextValue | undefined>(undefined);

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,20 @@
 '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 { 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 './useSlider';
 import { SliderContext } from './SliderContext';
-import { RootProps, SliderOwnerState } from './Slider.types';
+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 {
@@ -40,7 +40,7 @@ const SliderRoot = React.forwardRef(function SliderRoot(
     ...otherProps,
   });
 
-  const ownerState: SliderOwnerState = React.useMemo(
+  const ownerState: SliderRootOwnerState = React.useMemo(
     () => ({
       disabled,
       dragging: slider.dragging,
@@ -79,4 +79,4 @@ const SliderRoot = React.forwardRef(function SliderRoot(
   );
 });
 
-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 '../Thumb/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 {
   /**
@@ -155,7 +189,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: {

diff --git a/...ges/mui-base/src/useSlider2/useSlider2.ts → ...es/mui-base/src/Slider2/Root/useSlider.ts b/...ges/mui-base/src/useSlider2/useSlider2.ts → ...es/mui-base/src/Slider2/Root/useSlider.ts
@@ -1,15 +1,15 @@
 'use client';
 import * as React from 'react';
-import { areArraysEqual } from '../utils/areArraysEqual';
-import { clamp } from '../utils/clamp';
-import { mergeReactProps } from '../utils/mergeReactProps';
-import { ownerDocument } from '../utils/owner';
-import { useControlled } from '../utils/useControlled';
-import { useForkRef } from '../utils/useForkRef';
-import { useCompoundParent } from '../useCompound';
-import { percentToValue, roundValueToStep, valueToPercent } from './utils';
-import { Mark, UseSliderParameters, UseSliderReturnValue } from './useSlider.types';
-import { ThumbMetadata } from './useSliderThumb.types';
+import { areArraysEqual } from '../../utils/areArraysEqual';
+import { clamp } from '../../utils/clamp';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import { ownerDocument } from '../../utils/owner';
+import { useControlled } from '../../utils/useControlled';
+import { useForkRef } from '../../utils/useForkRef';
+import { useCompoundParent } from '../../useCompound';
+import { percentToValue, roundValueToStep, valueToPercent } from '../utils';
+import { Mark, UseSliderParameters, UseSliderReturnValue } from './SliderRoot.types';
+import { SliderThumbMetadata } from '../Thumb/SliderThumb.types';
 
 export function areValuesEqual(
   newValue: number | ReadonlyArray<number>,
@@ -167,7 +167,7 @@ function useSlider(parameters: UseSliderParameters): UseSliderReturnValue {
 
   const { contextValue: compoundComponentContextValue, subitems } = useCompoundParent<
     string,
-    ThumbMetadata
+    SliderThumbMetadata
   >();
 
   const handleValueChange = React.useCallback(