WIP refactor 2 - add sort prop

mui · May 31, 2024 · d770922 · d770922
1 parent 4da80a7
commit d770922
Show file tree

Hide file tree

Showing 20 changed files with 217 additions and 67 deletions.
diff --git a/docs/pages/base-ui/api/use-slider-thumb.json b/docs/pages/base-ui/api/use-slider-thumb.json
@@ -25,10 +25,6 @@
       "default": "'horizontal'",
       "required": true
     },
-    "percentageValues": {
-      "type": { "name": "readonly number[]", "description": "readonly number[]" },
-      "required": true
-    },
     "scale": {
       "type": {
         "name": "(value: number) =&gt; number",
@@ -45,7 +41,11 @@
       "default": "1",
       "required": true
     },
-    "values": {
+    "unsortedPercentageValues": {
+      "type": { "name": "readonly number[]", "description": "readonly number[]" },
+      "required": true
+    },
+    "unsortedValues": {
       "type": { "name": "readonly number[]", "description": "readonly number[]" },
       "required": true
     },

diff --git a/docs/pages/base-ui/api/use-slider.json b/docs/pages/base-ui/api/use-slider.json
@@ -50,6 +50,13 @@
       },
       "default": "function Identity(x) {\nreturn x;\n}"
     },
+    "sort": {
+      "type": {
+        "name": "&#39;asc&#39; | &#39;off&#39;",
+        "description": "&#39;asc&#39; | &#39;off&#39;"
+      },
+      "default": "'asc'"
+    },
     "step": { "type": { "name": "number", "description": "number" }, "default": "1" },
     "tabIndex": { "type": { "name": "number", "description": "number" } },
     "value": {
@@ -123,10 +130,6 @@
       "default": "'horizontal'",
       "required": true
     },
-    "percentageValues": {
-      "type": { "name": "readonly number[]", "description": "readonly number[]" },
-      "required": true
-    },
     "scale": {
       "type": {
         "name": "(value: number) =&gt; number",
@@ -171,6 +174,14 @@
       },
       "required": true
     },
+    "unsortedPercentageValues": {
+      "type": { "name": "readonly number[]", "description": "readonly number[]" },
+      "required": true
+    },
+    "unsortedValues": {
+      "type": { "name": "readonly number[]", "description": "readonly number[]" },
+      "required": true
+    },
     "values": {
       "type": { "name": "readonly number[]", "description": "readonly number[]" },
       "required": true

diff --git a/docs/pages/experiments/slider-label.tsx b/docs/pages/experiments/slider-label.tsx
@@ -3,7 +3,7 @@ import * as Slider from '@base_ui/react/Slider';
 import { useSliderContext } from '@base_ui/react/Slider';
 import { Styles, TrackFill } from './slider';
 
-function Label(props: any) {
+export function Label(props: any) {
   const { id: idProp, ...otherProps } = props;
   const defaultId = React.useId();
   const labelId = idProp ?? defaultId;
@@ -19,7 +19,7 @@ function Label(props: any) {
   return <label id={labelId} htmlFor={htmlFor} {...otherProps} />;
 }
 
-function LabelRange(props: any) {
+export function LabelRange(props: any) {
   const { id: idProp, ...otherProps } = props;
 
   const defaultId = React.useId();

diff --git a/docs/pages/experiments/slider-sort-prop.tsx b/docs/pages/experiments/slider-sort-prop.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import * as Slider from '@base_ui/react/Slider';
+import { Styles, TrackFill } from './slider';
+import { Label, LabelRange } from './slider-label';
+
+export default function App() {
+  return (
+    <div className="App">
+      <pre>default behavior</pre>
+      <Slider.Root className="MySlider" defaultValue={[40, 50]} aria-labelledby="LabelId">
+        <Label id="LabelId" className="MySlider-label">
+          Label
+        </Label>
+        <Slider.Output className="MySlider-output" />
+        <Slider.Track className="MySlider-track">
+          <TrackFill className="MySlider-track-fill" />
+          <Slider.Thumb className="MySlider-thumb red" />
+          <Slider.Thumb className="MySlider-thumb blue" />
+        </Slider.Track>
+      </Slider.Root>
+
+      <pre>sort=&ldquo;off&rdquo;</pre>
+      <Slider.Root
+        className="MySlider"
+        defaultValue={[40, 50]}
+        sort="off"
+        aria-labelledby="LabelRangeId"
+      >
+        <LabelRange id="LabelRangeId" className="MySlider-label">
+          Range Label
+        </LabelRange>
+        <Slider.Output className="MySlider-output" />
+        <Slider.Track className="MySlider-track">
+          <TrackFill className="MySlider-track-fill" />
+          <Slider.Thumb className="MySlider-thumb red" />
+          <Slider.Thumb className="MySlider-thumb blue" />
+        </Slider.Track>
+      </Slider.Root>
+      <Styles />
+      <Styles2 />
+    </div>
+  );
+}
+
+function Styles2() {
+  return (
+    <style>
+      {`
+        .MySlider-thumb:focus-visible {
+          z-index: 1;
+        }
+
+        .MySlider {
+          grid-template-columns: 1fr 1fr;
+        }
+
+        .MySlider-label {
+          font-size: .875rem;
+        }
+
+        .MySlider-track {
+          grid-column: span 2;
+        }
+
+        .red,
+        .red[data-dragging] {
+          background-color: red;
+        }
+
+        .blue,
+        .blue[data-dragging] {
+          background-color: blue;
+        }
+
+        .green,
+        .green[data-dragging] {
+          background-color: green;
+        }
+
+        pre {
+          font-size: .5rem;
+          margin-bottom: 2rem;
+        }
+
+        pre:not(:first-of-type) {
+          margin-top: 8rem;
+        }
+      `}
+    </style>
+  );
+}
diff --git a/docs/pages/experiments/slider.tsx b/docs/pages/experiments/slider.tsx
@@ -22,9 +22,9 @@ export function TrackFill(props: any) {
   // does not support inverted range fill! (yet)
   const { inverted = false, style, ...otherProps } = props;
 
-  const { axis, disabled, isRtl, orientation, percentageValues } = useSliderContext();
+  const { axis, disabled, isRtl, orientation, unsortedPercentageValues } = useSliderContext();
 
-  const values = percentageValues.slice().sort((a, b) => a - b);
+  const values = unsortedPercentageValues.slice().sort((a, b) => a - b);
 
   const isRange = values.length > 1;
 

diff --git a/docs/src/modules/home/BaseUIThemesDemo.tsx b/docs/src/modules/home/BaseUIThemesDemo.tsx
@@ -411,15 +411,15 @@ const StyledSliderTrack = styled(Slider.Track)`
 function TrackFill(props: any) {
   const { inverted = false, style, ...otherProps } = props;
 
-  const { disabled, isRtl, percentageValues } = useSliderContext();
+  const { disabled, isRtl, unsortedPercentageValues } = useSliderContext();
 
   return (
     <span
       data-disabled={disabled}
       data-inverted={inverted}
       {...otherProps}
       style={{
-        width: `${inverted ? 100 - percentageValues[0] : percentageValues[0]}%`,
+        width: `${inverted ? 100 - unsortedPercentageValues[0] : unsortedPercentageValues[0]}%`,
         [(isRtl || inverted) && isRtl !== inverted ? 'right' : 'left']: 0,
         ...style,
       }}

diff --git a/docs/translations/api-docs/use-slider-thumb/use-slider-thumb.json b/docs/translations/api-docs/use-slider-thumb/use-slider-thumb.json
@@ -19,11 +19,13 @@
     "max": { "description": "The maximum allowed value of the slider." },
     "min": { "description": "The minimum allowed value of the slider." },
     "orientation": { "description": "The component orientation." },
-    "percentageValues": { "description": "The value(s) of the slider as percentages" },
     "step": {
       "description": "The step value of the slider when incrementing or decrementing. It will snap to multiples of this value. Decimal values are supported."
     },
-    "values": { "description": "The value(s) of the slider" }
+    "unsortedPercentageValues": {
+      "description": "The internal unsorted percentage value(s) of the slider"
+    },
+    "unsortedValues": { "description": "The internal unsorted value(s) of the slider." }
   },
   "returnValueDescriptions": {
     "getThumbStyle": { "description": "Resolver for the thumb slot&#39;s style prop." }

diff --git a/docs/translations/api-docs/use-slider/use-slider.json b/docs/translations/api-docs/use-slider/use-slider.json
@@ -43,7 +43,7 @@
       "description": "Tab index attribute of the Thumb component&#39;s <code>input</code> element."
     },
     "value": {
-      "description": "The value of the slider. For ranged sliders, provide an array with two values."
+      "description": "The value of the slider. For ranged sliders, provide an array with multiple values"
     }
   },
   "returnValueDescriptions": {
@@ -59,13 +59,16 @@
     "min": { "description": "The minimum allowed value of the slider." },
     "open": { "description": "The thumb index for the current value when in hover state." },
     "orientation": { "description": "The component orientation." },
-    "percentageValues": { "description": "The value(s) of the slider as percentages" },
     "step": {
       "description": "The step value of the slider when incrementing or decrementing. It will snap to multiples of this value. Decimal values are supported."
     },
     "subitems": {
       "description": "A map containing all the Thumb components registered to the slider"
     },
-    "values": { "description": "The value(s) of the slider" }
+    "unsortedPercentageValues": {
+      "description": "The internal unsorted percentage value(s) of the slider"
+    },
+    "unsortedValues": { "description": "The internal unsorted value(s) of the slider." },
+    "values": { "description": "The sorted values(s) of the slider." }
   }
 }
diff --git a/packages/mui-base/src/Slider/Root/SliderRoot.tsx b/packages/mui-base/src/Slider/Root/SliderRoot.tsx
@@ -211,6 +211,10 @@ SliderRoot.propTypes /* remove-proptypes */ = {
    * }
    */
   scale: PropTypes.func,
+  /**
+   * @default 'asc'
+   */
+  sort: PropTypes.oneOf(['asc', 'off']),
   /**
    * The granularity with which the slider can step through values. (A "discrete" slider.)
    * The `min` prop serves as the origin for the valid values.

diff --git a/packages/mui-base/src/Slider/Root/SliderRoot.types.ts b/packages/mui-base/src/Slider/Root/SliderRoot.types.ts
@@ -40,9 +40,9 @@ export interface SliderRootOwnerState {
   orientation: 'horizontal' | 'vertical';
   step: number;
   /**
-   * The raw number value of the slider.
+   * The sorted values(s) of the slider.
    */
-  values: ReadonlyArray<number>;
+  values: readonly number[];
 }
 
 export interface SliderRootProps
@@ -157,6 +157,10 @@ export interface UseSliderParameters {
    * @default 10
    */
   largeStep?: number;
+  /**
+   * @default 'asc'
+   */
+  sort?: 'asc' | 'off';
   /**
    * The granularity with which the slider can step through values. (A "discrete" slider.)
    * The `min` prop serves as the origin for the valid values.
@@ -170,7 +174,7 @@ export interface UseSliderParameters {
   tabIndex?: number;
   /**
    * The value of the slider.
-   * For ranged sliders, provide an array with two values.
+   * For ranged sliders, provide an array with multiple values
    */
   value?: number | ReadonlyArray<number>;
 }
@@ -260,9 +264,9 @@ export interface UseSliderReturnValue {
    */
   orientation: 'horizontal' | 'vertical';
   /**
-   * The value(s) of the slider as percentages
+   * The internal unsorted percentage value(s) of the slider
    */
-  percentageValues: readonly number[];
+  unsortedPercentageValues: readonly number[];
   scale: (value: number) => number;
   setActive: (activeIndex: number) => void;
   setDragging: (isDragging: boolean) => void;
@@ -280,7 +284,11 @@ export interface UseSliderReturnValue {
   subitems: Map<string, SliderThumbMetadata>;
   tabIndex?: number;
   /**
-   * The value(s) of the slider
+   * The internal unsorted value(s) of the slider.
+   */
+  unsortedValues: readonly number[];
+  /**
+   * The sorted values(s) of the slider.
    */
   values: readonly number[];
 }