[PF-1994] Migrate Slider to @base-ui/react + Tailwind

.changeset/slider-migration.md

@@ -0,0 +1,8 @@
+---
+'@toptal/picasso-slider': major
+---
+
+### Slider
+
+- Migrate internals from @mui/base to @base-ui/react (behavioral parity)
+- Rebuild marks and value-label rendering on top of @base-ui/react's compound parts (Slider.Root + Slider.Control + Slider.Track + Slider.Indicator + Slider.Thumb)

.gitignore

@@ -40,3 +40,9 @@ migration-runs
 # debris example.
 .playwright-mcp
 
+# Per-sweep temp files the review-response agent writes for `gh pr comment
+# --body-file` (sandbox blocks shell-redirection to outside the worktree
+# and blocks rm/mv, so the file is written here, consumed by gh, and left
+# behind). Same rationale as .playwright-mcp.
+*.tmp.md
+

packages/base/Slider/package.json

@@ -22,7 +22,7 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@mui/base": "5.0.0-beta.58",
+    "@base-ui/react": "^1.4.1",
     "@toptal/picasso-shared": "15.0.0",
     "@toptal/picasso-tooltip": "2.0.5",
     "@toptal/picasso-utils": "4.0.0"
@@ -32,7 +32,7 @@
     "@toptal/picasso-tailwind-merge": "^2.0.0",
     "@toptal/picasso-provider": "*",
     "@toptal/picasso-tailwind": ">2.1.0",
-    "react": ">=16.12.0 < 19.0.0"
+    "react": ">=16.12.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"

packages/base/Slider/src/Slider/Slider.tsx

@@ -1,7 +1,7 @@
-// import type { ComponentProps } from 'react'
 import React, { forwardRef, useRef } from 'react'
-import { Slider as MUIBaseSlider } from '@mui/base/Slider'
-import { useCombinedRefs, useOnScreen } from '@toptal/picasso-utils'
+import { Slider as BaseUISlider } from '@base-ui/react/slider'
+import type { SliderRootChangeEventDetails } from '@base-ui/react/slider'
+import { useOnScreen } from '@toptal/picasso-utils'
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 import type { BaseProps } from '@toptal/picasso-shared'
 
@@ -56,6 +56,61 @@ export interface Props extends BaseProps {
   id?: string
 }
 
+const formatValueLabel = (
+  value: number,
+  index: number,
+  format?: string | ((value: number, index: number) => React.ReactNode)
+): React.ReactNode => {
+  if (typeof format === 'function') {
+    return format(value, index)
+  }
+
+  if (typeof format === 'string') {
+    return format
+  }
+
+  return value
+}
+
+const generateMarkPositions = (
+  min: number,
+  max: number,
+  step: number
+): number[] => {
+  const positions: number[] = []
+  const range = max - min
+
+  if (range <= 0 || step <= 0) {
+    return positions
+  }
+
+  for (let mark = min; mark <= max; mark += step) {
+    positions.push(mark)
+  }
+
+  return positions
+}
+
+const resolveThumbValues = (
+  value: number | number[] | undefined,
+  defaultValue: number | number[],
+  min: number
+): number[] => {
+  if (Array.isArray(value)) {
+    return value
+  }
+
+  if (typeof value === 'number') {
+    return [value]
+  }
+
+  if (Array.isArray(defaultValue)) {
+    return defaultValue
+  }
+
+  return [typeof defaultValue === 'number' ? defaultValue : min]
+}
+
 export const Slider = forwardRef<HTMLElement, Props>(function Slider(
   { defaultValue = 0, min = 0, max = 100, tooltip = 'off', ...props },
   ref
@@ -64,7 +119,7 @@ export const Slider = forwardRef<HTMLElement, Props>(function Slider(
     marks,
     value,
     tooltipFormat,
-    step,
+    step = 1,
     disabled,
     onChange,
     onBlur,
@@ -79,7 +134,6 @@ export const Slider = forwardRef<HTMLElement, Props>(function Slider(
     'data-testid': dataTestid,
   } = props
   const containerRef = useRef<HTMLDivElement>(null)
-  const sliderRef = useCombinedRefs<HTMLElement>(ref, useRef<HTMLElement>(null))
 
   // The rootMargin is not working correctly in the storybooks iframe
   // To test properly we can open the iframe in new window
@@ -98,69 +152,119 @@ export const Slider = forwardRef<HTMLElement, Props>(function Slider(
   const isThumbHidden =
     hideThumbOnEmpty && (typeof value === 'undefined' || value === null)
 
+  const isRange = Array.isArray(value) || Array.isArray(defaultValue)
+  const thumbValues = resolveThumbValues(value, defaultValue, min)
+
+  const handleValueChange = (
+    newValue: number | readonly number[],
+    eventDetails: SliderRootChangeEventDetails
+  ) => {
+    if (!onChange) {
+      return
+    }
+
+    const normalizedValue: number | number[] = Array.isArray(newValue)
+      ? [...newValue]
+      : (newValue as number)
+
+    onChange(eventDetails.event, normalizedValue, eventDetails.activeThumbIndex)
+  }
+
+  // Override base-ui's inline `translate: -50% -50%` + `top: 50%` (creates a
+  // transform stacking context that affects descendant tooltip box-shadow
+  // rasterization) and mirror baseline's margin-based positioning so the
+  // thumb renders without a transform — keeps tooltip shadow pixel-identical
+  // to pre-migration baseline.
+  const thumbClassName = twJoin(
+    'group/thumb flex justify-center items-center w-[15px] h-[15px]',
+    'rounded-[50%] bg-blue-500 border-[2px] border-solid border-white',
+    'outline-0 absolute transition-shadow cursor-pointer',
+    '![translate:none] ![top:-7px] -ml-[6px]',
+    '[&_input]:!top-auto [&_input]:!left-auto [&_input]:![clip-path:none] [&_input]:[clip:rect(0,0,0,0)]',
+    isThumbHidden && 'hidden'
+  )
+
+  const indicatorClassName = twJoin(
+    'block !absolute h-[1px]',
+    disableTrackHighlight ? 'bg-gray-200' : 'bg-blue-500'
+  )
+
+  const markPositions = marks ? generateMarkPositions(min, max, step) : []
+
   return (
     <div
       ref={containerRef}
       className={twMerge('my-[6px] mx-0', className)}
       style={style}
     >
-      <MUIBaseSlider
-        ref={sliderRef}
+      <BaseUISlider.Root
+        ref={ref as React.Ref<HTMLDivElement>}
         defaultValue={defaultValue}
         value={value}
         min={min}
         max={max}
         step={step}
-        marks={marks}
         disabled={disabled}
+        name={name}
         data-testid={dataTestid}
         data-private={dataPrivate}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        name={name}
-        id={id}
-        slots={{
-          mark: SliderMark,
-          valueLabel: SliderValueLabel,
-        }}
-        slotProps={{
-          mark: {
-            // @ts-expect-error we have custom Mark component, where we extend props and MUI does not understand it
-            forceInactive: disableTrackHighlight,
-          },
-          root: {
-            className:
-              'block cursor-pointer width-full relative py-[6px] -my-[6px]',
-          },
-          rail: {
-            className:
-              'block absolute w-full h-[1px] opacity-[0.24] rounded-none bg-gray-500',
-          },
-          thumb: {
-            className: twJoin(
-              'group/thumb flex justify-center items-center w-[15px] h-[15px]',
-              'rounded-[50%] bg-blue-500 border-[2px] border-solid border-white',
-              '-mt-[7px] -ml-[6px] outline-0 absolute  transition-shadow cursor-pointer',
-              isThumbHidden && 'hidden'
-            ),
-            role: 'slider',
-          },
-          track: {
-            className: twJoin(
-              'block absolute h-[1px]',
-              disableTrackHighlight ? 'bg-gray-200' : 'bg-blue-500'
-            ),
-          },
-          valueLabel: {
-            tooltip: isObserved ? tooltip : 'off',
-            onRender: handleValueLabelOnRender,
-            yPlacement: isOnScreen ? 'top' : 'bottom',
-            isOverlaped: isPartiallyOverlapped,
-          },
-        }}
-        valueLabelFormat={tooltipFormat}
-        onChange={onChange}
-      />
+        onValueChange={handleValueChange}
+        className='block cursor-pointer w-full relative py-[6px] -my-[6px]'
+      >
+        <BaseUISlider.Control className='block w-full relative h-[1px] -mb-[1px]'>
+          <BaseUISlider.Track className='block !absolute w-full h-[1px] opacity-[0.24] rounded-none bg-gray-500' />
+          <BaseUISlider.Indicator className={indicatorClassName} />
+          {marks &&
+            markPositions.map((markValue, index) => (
+              <SliderMark
+                key={`mark-${markValue}`}
+                index={index}
+                markValue={markValue}
+                sliderValue={value}
+                positionPercent={
+                  max === min ? 0 : ((markValue - min) / (max - min)) * 100
+                }
+                forceInactive={Boolean(disableTrackHighlight)}
+              />
+            ))}
+          {thumbValues.map((thumbValue, index) => {
+            const thumbId = index === 0 ? id : undefined
+            const label = formatValueLabel(thumbValue, index, tooltipFormat)
+
+            return (
+              <BaseUISlider.Thumb
+                // eslint-disable-next-line react/no-array-index-key
+                key={`thumb-${index}`}
+                index={index}
+                id={thumbId}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                className={thumbClassName}
+              >
+                <SliderValueLabel
+                  index={index}
+                  value={thumbValue}
+                  tooltip={isObserved ? tooltip : 'off'}
+                  onRender={handleValueLabelOnRender}
+                  yPlacement={isOnScreen ? 'top' : 'bottom'}
+                  isOverlaped={isPartiallyOverlapped}
+                >
+                  {label}
+                </SliderValueLabel>
+              </BaseUISlider.Thumb>
+            )
+          })}
+          {!isRange && thumbValues.length === 0 && (
+            <BaseUISlider.Thumb
+              index={0}
+              id={id}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              className={thumbClassName}
+            />
+          )}
+        </BaseUISlider.Control>
+      </BaseUISlider.Root>
     </div>
   )
 })