[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)

after-fix-thumbs.json

@@ -0,0 +1 @@
+"{\n  \"firstThumb\": {\n    \"rect\": {\n      \"x\": 62,\n      \"y\": 1392.7,\n      \"width\": 15,\n      \"height\": 15\n    },\n    \"style\": {\n      \"margin-left\": \"1.5px\",\n      \"margin-top\": \"0px\",\n      \"top\": \"0.5px\",\n      \"left\": \"0px\",\n      \"translate\": \"-50% -50%\",\n      \"transform\": \"none\",\n      \"width\": \"15px\",\n      \"height\": \"15px\",\n      \"position\": \"absolute\",\n      \"inset-inline-start\": \"0px\"\n    }\n  },\n  \"firstThumbClassName\": \"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 ml-[1.5px] [&_input]:!top-auto [&_input]:!left-auto [&_input]:![clip-path:none] [&_input]:[clip:rect(0,0,0,0)]\",\n  \"fiveThumbsRects\": [\n    {\n      \"x\": 62,\n      \"y\": 1392.7,\n      \"width\": 15,\n      \"height\": 15\n    },\n    {\n      \"x\": 147.12,\n      \"y\": 1612.7,\n      \"width\": 15,\n      \"height\": 15\n    },\n    {\n      \"x\": 192.81,\n      \"y\": 1839.26,\n      \"width\": 15,\n      \"height\": 15\n    },\n    {\n      \"x\": 62,\n      \"y\": 2070.83,\n      \"width\": 15,\n      \"height\": 15\n    },\n    {\n      \"x\": 102.57,\n      \"y\": 2300.83,\n      \"width\": 15,\n      \"height\": 15\n    }\n  ]\n}"

baseline-tooltip-computed.json

@@ -0,0 +1 @@
+"{\n  \"thumb\": {\n    \"rect\": {\n      \"x\": 62,\n      \"y\": 1392.7,\n      \"width\": 15,\n      \"height\": 15\n    },\n    \"style\": {\n      \"margin-left\": \"-6px\",\n      \"margin-top\": \"-7px\",\n      \"padding-left\": \"0px\",\n      \"padding-top\": \"0px\",\n      \"left\": \"0px\",\n      \"top\": \"6px\",\n      \"right\": \"1055px\",\n      \"bottom\": \"-2px\",\n      \"transform\": \"none\",\n      \"translate\": \"none\",\n      \"transform-origin\": \"7.5px 7.5px\",\n      \"width\": \"15px\",\n      \"height\": \"15px\",\n      \"box-sizing\": \"border-box\",\n      \"position\": \"absolute\",\n      \"inset-inline-start\": \"0px\",\n      \"inset-block-start\": \"6px\",\n      \"background-color\": \"rgb(32, 78, 207)\",\n      \"border-left-width\": \"2px\",\n      \"border-top-width\": \"2px\",\n      \"border-radius\": \"50%\",\n      \"box-shadow\": \"none\",\n      \"filter\": \"none\",\n      \"will-change\": \"auto\",\n      \"isolation\": \"auto\",\n      \"contain\": \"none\",\n      \"opacity\": \"1\"\n    }\n  },\n  \"thumbClassName\": \"base-Slider-thumb  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\",\n  \"outerTooltip\": {\n    \"rect\": {\n      \"x\": 0,\n      \"y\": 0,\n      \"width\": 0,\n      \"height\": 0\n    },\n    \"style\": {\n      \"margin-left\": \"0px\",\n      \"margin-top\": \"0px\",\n      \"padding-left\": \"0px\",\n      \"padding-top\": \"0px\",\n      \"left\": \"calc(100% - 13px)\",\n      \"top\": \"calc(100% + 2px)\",\n      \"right\": \"auto\",\n      \"bottom\": \"auto\",\n      \"transform\": \"none\",\n      \"translate\": \"none\",\n      \"transform-origin\": \"50% 50%\",\n      \"width\": \"auto\",\n      \"height\": \"auto\",\n      \"box-sizing\": \"border-box\",\n      \"position\": \"absolute\",\n      \"inset-inline-start\": \"calc(100% - 13px)\",\n      \"inset-block-start\": \"calc(100% + 2px)\",\n      \"background-color\": \"rgba(0, 0, 0, 0)\",\n      \"border-left-width\": \"0px\",\n      \"border-top-width\": \"0px\",\n      \"border-radius\": \"0px\",\n      \"box-shadow\": \"none\",\n      \"filter\": \"none\",\n      \"will-change\": \"transform\",\n      \"isolation\": \"auto\",\n      \"contain\": \"none\",\n      \"opacity\": \"1\"\n    }\n  },\n  \"outerTooltipClassName\": \"absolute will-change-transform transition-transform hidden top-[calc(100%+2px)] left-[calc(100%-13px)]\",\n  \"innerTooltip\": {\n    \"rect\": {\n      \"x\": 0,\n      \"y\": 0,\n      \"width\": 0,\n      \"height\": 0\n    },\n    \"style\": {\n      \"margin-left\": \"4px\",\n      \"margin-top\": \"4px\",\n      \"padding-left\": \"8px\",\n      \"padding-top\": \"2px\",\n      \"left\": \"auto\",\n      \"top\": \"auto\",\n      \"right\": \"auto\",\n      \"bottom\": \"auto\",\n      \"transform\": \"none\",\n      \"translate\": \"none\",\n      \"transform-origin\": \"50% 50%\",\n      \"width\": \"auto\",\n      \"height\": \"auto\",\n      \"box-sizing\": \"border-box\",\n      \"position\": \"static\",\n      \"inset-inline-start\": \"auto\",\n      \"inset-block-start\": \"auto\",\n      \"background-color\": \"rgb(38, 45, 61)\",\n      \"border-left-width\": \"0px\",\n      \"border-top-width\": \"0px\",\n      \"border-radius\": \"4px\",\n      \"box-shadow\": \"rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.24) 0px 0px 4px 0px, rgba(0, 0, 0, 0.12) 0px 0px 32px 0px\",\n      \"filter\": \"none\",\n      \"will-change\": \"auto\",\n      \"isolation\": \"auto\",\n      \"contain\": \"none\",\n      \"opacity\": \"1\"\n    }\n  },\n  \"innerTooltipClassName\": \"shadow-4 text-sm text-white bg-graphite-800 m-1 rounded-sm py-[2px] px-2 max-w-[300px] break-words\"\n}"

local-thumb-computed.json

@@ -0,0 +1 @@
+"{\n  \"Default\": [],\n  \"Initial value\": [],\n  \"Tooltip\": [],\n  \"Range\": [],\n  \"Marks\": [],\n  \"Disable track highlight\": []\n}"

local-tooltip-computed.json

@@ -0,0 +1 @@
+"{\n  \"thumb\": {\n    \"rect\": {\n      \"x\": 62,\n      \"y\": 1392.7,\n      \"width\": 15,\n      \"height\": 15\n    },\n    \"style\": {\n      \"margin-left\": \"1.5px\",\n      \"margin-top\": \"0px\",\n      \"padding-left\": \"0px\",\n      \"padding-top\": \"0px\",\n      \"left\": \"0px\",\n      \"top\": \"0.5px\",\n      \"right\": \"1047.5px\",\n      \"bottom\": \"-14.5px\",\n      \"transform\": \"none\",\n      \"translate\": \"-50% -50%\",\n      \"transform-origin\": \"7.5px 7.5px\",\n      \"width\": \"15px\",\n      \"height\": \"15px\",\n      \"box-sizing\": \"border-box\",\n      \"position\": \"absolute\",\n      \"inset-inline-start\": \"0px\",\n      \"inset-block-start\": \"0.5px\",\n      \"background-color\": \"rgb(32, 78, 207)\",\n      \"border-left-width\": \"2px\",\n      \"border-top-width\": \"2px\",\n      \"border-radius\": \"50%\",\n      \"box-shadow\": \"none\",\n      \"filter\": \"none\",\n      \"will-change\": \"auto\",\n      \"isolation\": \"auto\",\n      \"contain\": \"none\",\n      \"opacity\": \"1\"\n    }\n  },\n  \"thumbClassName\": \"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 ml-[1.5px] [&_input]:!top-auto [&_input]:!left-auto [&_input]:![clip-path:none] [&_input]:[clip:rect(0,0,0,0)]\",\n  \"outerTooltip\": {\n    \"rect\": {\n      \"x\": 0,\n      \"y\": 0,\n      \"width\": 0,\n      \"height\": 0\n    },\n    \"style\": {\n      \"margin-left\": \"0px\",\n      \"margin-top\": \"0px\",\n      \"padding-left\": \"0px\",\n      \"padding-top\": \"0px\",\n      \"left\": \"calc(100% - 13px)\",\n      \"top\": \"calc(100% + 2px)\",\n      \"right\": \"auto\",\n      \"bottom\": \"auto\",\n      \"transform\": \"none\",\n      \"translate\": \"none\",\n      \"transform-origin\": \"50% 50%\",\n      \"width\": \"auto\",\n      \"height\": \"auto\",\n      \"box-sizing\": \"border-box\",\n      \"position\": \"absolute\",\n      \"inset-inline-start\": \"calc(100% - 13px)\",\n      \"inset-block-start\": \"calc(100% + 2px)\",\n      \"background-color\": \"rgba(0, 0, 0, 0)\",\n      \"border-left-width\": \"0px\",\n      \"border-top-width\": \"0px\",\n      \"border-radius\": \"0px\",\n      \"box-shadow\": \"none\",\n      \"filter\": \"none\",\n      \"will-change\": \"transform\",\n      \"isolation\": \"auto\",\n      \"contain\": \"none\",\n      \"opacity\": \"1\"\n    }\n  },\n  \"outerTooltipClassName\": \"absolute will-change-transform transition-transform hidden top-[calc(100%+2px)] left-[calc(100%-13px)]\",\n  \"innerTooltip\": {\n    \"rect\": {\n      \"x\": 0,\n      \"y\": 0,\n      \"width\": 0,\n      \"height\": 0\n    },\n    \"style\": {\n      \"margin-left\": \"4px\",\n      \"margin-top\": \"4px\",\n      \"padding-left\": \"8px\",\n      \"padding-top\": \"2px\",\n      \"left\": \"auto\",\n      \"top\": \"auto\",\n      \"right\": \"auto\",\n      \"bottom\": \"auto\",\n      \"transform\": \"none\",\n      \"translate\": \"none\",\n      \"transform-origin\": \"50% 50%\",\n      \"width\": \"auto\",\n      \"height\": \"auto\",\n      \"box-sizing\": \"border-box\",\n      \"position\": \"static\",\n      \"inset-inline-start\": \"auto\",\n      \"inset-block-start\": \"auto\",\n      \"background-color\": \"rgb(38, 45, 61)\",\n      \"border-left-width\": \"0px\",\n      \"border-top-width\": \"0px\",\n      \"border-radius\": \"4px\",\n      \"box-shadow\": \"rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.24) 0px 0px 4px 0px, rgba(0, 0, 0, 0.12) 0px 0px 32px 0px\",\n      \"filter\": \"none\",\n      \"will-change\": \"auto\",\n      \"isolation\": \"auto\",\n      \"contain\": \"none\",\n      \"opacity\": \"1\"\n    }\n  },\n  \"innerTooltipClassName\": \"shadow-4 text-sm text-white bg-graphite-800 m-1 rounded-sm py-[2px] px-2 max-w-[300px] break-words\"\n}"

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>
   )
 })