@tremolo-ui/react 0.4.0 → 0.5.0

package/src/components/Slider/{ScaleOption.tsx → MarksOption.tsx}

@@ -1,17 +1,17 @@
 import clsx from 'clsx'
 import { ComponentPropsWithoutRef, CSSProperties, useCallback } from 'react'
 
-import { toFixed, xor, normalizeValue } from '@tremolo-ui/functions'
+import { toFixed, xor } from '@tremolo-ui/functions'
 
 import { useSliderContext } from './context'
-import { ScaleType } from './type'
+import { MarksType } from './type'
 
-export interface ScaleOptionProps {
+export interface MarksOptionProps {
   // required
   value: number
 
   // optional
-  type?: ScaleType
+  type?: MarksType
   /** Display text instead of value. */
   label?: string
   /** mark thickness */
@@ -31,7 +31,7 @@ export interface ScaleOptionProps {
   }
 }
 
-export function ScaleOption({
+export function MarksOption({
   value,
   type = 'mark-number',
   label,
@@ -44,28 +44,26 @@ export function ScaleOption({
   className,
   style,
   ...props
-}: ScaleOptionProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleOptionProps>) {
+}: MarksOptionProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof MarksOptionProps>) {
   const min = useSliderContext((s) => s.min)
   const max = useSliderContext((s) => s.max)
-  const skew = useSliderContext((s) => s.skew)
+  const scale = useSliderContext((s) => s.scale)
   const vertical = useSliderContext((s) => s.vertical)
   const reverse = useSliderContext((s) => s.reverse)
 
   const calcPercent = useCallback(
-    (rawValue: number) => {
-      return toFixed(
-        xor(vertical, reverse)
-          ? 100 - normalizeValue(rawValue, min, max, skew) * 100
-          : normalizeValue(rawValue, min, max, skew) * 100,
-      )
+    (value: number) => {
+      // The marks have to sit on the same curve the thumb runs along.
+      const percent = scale.normalize(value, min, max) * 100
+      return toFixed(xor(vertical, reverse) ? 100 - percent : percent)
     },
-    [vertical, reverse, max, min, skew],
+    [vertical, reverse, max, min, scale],
   )
 
   return (
     <div
-      className={clsx('tremolo-slider-scale-option', className)}
+      className={clsx('tremolo-slider-marks-option', className)}
       style={{
         left: !vertical ? `${calcPercent(value)}%` : undefined,
         top: vertical ? `${calcPercent(value)}%` : undefined,
@@ -76,7 +74,7 @@ export function ScaleOption({
     >
       {type != 'number' && (
         <div
-          className={clsx('tremolo-slider-scale-option-mark', classes?.mark)}
+          className={clsx('tremolo-slider-marks-option-mark', classes?.mark)}
           style={{
             width: !vertical ? thickness : length,
             height: vertical ? thickness : length,
@@ -89,7 +87,7 @@ export function ScaleOption({
       )}
       {type != 'mark' && (
         <div
-          className={clsx('tremolo-slider-scale-option-label', classes?.label)}
+          className={clsx('tremolo-slider-marks-option-label', classes?.label)}
           style={{
             width: labelWidth,
             ...styles?.label,

package/src/components/Slider/Thumb.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx'
 import {
   CSSProperties,
-  forwardRef,
   ReactNode,
+  Ref,
   useImperativeHandle,
   useRef,
 } from 'react'
@@ -10,18 +10,16 @@ import {
 import { useSliderContext } from './context'
 
 export interface SliderThumbProps {
-  size?: number | string
-  width?: number | string
-  height?: number | string
-
+  /**
+   * Size comes from the `--thumb-size` CSS variable on `Slider.Root`, so that
+   * the root can reserve the matching amount of space around the track.
+   */
   color?: string
 
   className?: string
   style?: CSSProperties
   children?: ReactNode
-
-  /** @internal */
-  __percent?: number
+  ref?: Ref<SliderThumbMethods>
 }
 
 export interface SliderThumbMethods {
@@ -29,66 +27,55 @@ export interface SliderThumbMethods {
   blur: () => void
 }
 
-export const defaultThumbSize = 22
+export function Thumb({
+  color,
+  children,
+  className,
+  style,
+  ref,
+}: SliderThumbProps) {
+  const elementRef = useRef<HTMLDivElement>(null)
+  const { vertical, disabled, readonly, percent, thumbRef } = useSliderContext()
 
-export const Thumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
-  (
-    {
-      size,
-      width = defaultThumbSize,
-      height = defaultThumbSize,
-      color,
-      children,
-      className,
-      style,
-      __percent,
-    }: SliderThumbProps,
-    ref,
-  ) => {
-    const wrapperRef = useRef<HTMLDivElement>(null)
-    const vertical = useSliderContext((s) => s.vertical)
-    const disabled = useSliderContext((s) => s.disabled)
-    const readonly = useSliderContext((s) => s.readonly)
+  const methods = () => ({
+    focus() {
+      elementRef.current?.focus()
+    },
+    blur() {
+      elementRef.current?.blur()
+    },
+  })
 
-    useImperativeHandle(ref, () => {
-      return {
-        focus() {
-          wrapperRef.current?.focus()
-        },
-        blur() {
-          wrapperRef.current?.blur()
-        },
-      }
-    }, [])
+  useImperativeHandle(ref, methods, [])
+  // Root focuses the thumb when a drag starts, wherever the user placed it.
 
-    return (
-      <div
-        className="tremolo-slider-thumb-wrapper"
-        style={{
-          top: vertical ? `${__percent}%` : '50%',
-          left: !vertical ? `${__percent}%` : '50%',
-        }}
-      >
-        {children ? (
-          children
-        ) : (
-          // default slider thumb
-          <div
-            ref={wrapperRef}
-            className={clsx('tremolo-slider-thumb', className)}
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex={0}
-            aria-disabled={disabled}
-            aria-readonly={readonly}
-            style={{
-              ...{ '--color': color },
-              width: size ?? width,
-              height: size ?? height,
-              ...style,
-            }}
-          ></div>
-        )}
-      </div>
-    )
-  },
-)
+  useImperativeHandle(thumbRef, methods, [])
+
+  return (
+    <div
+      className="tremolo-slider-thumb-wrapper"
+      style={{
+        top: vertical ? `${percent}%` : '50%',
+        left: !vertical ? `${percent}%` : '50%',
+      }}
+    >
+      {children ? (
+        children
+      ) : (
+        // default slider thumb
+        <div
+          ref={elementRef}
+          className={clsx('tremolo-slider-thumb', className)}
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+          tabIndex={0}
+          aria-disabled={disabled}
+          aria-readonly={readonly}
+          style={{
+            ...{ '--color': color },
+            ...style,
+          }}
+        ></div>
+      )}
+    </div>
+  )
+}

package/src/components/Slider/Track.tsx

@@ -1,8 +1,10 @@
 import clsx from 'clsx'
-import { ComponentPropsWithoutRef, CSSProperties, ReactElement } from 'react'
+import { ComponentPropsWithoutRef, CSSProperties, ReactNode, Ref } from 'react'
 
 import { styleHelper, xor } from '@tremolo-ui/functions'
 
+import { useComposedRefs } from '../_util/composeRefs'
+
 import { useSliderContext } from './context'
 
 export const defaultLength = 140
@@ -19,12 +21,9 @@ export interface SliderTrackProps {
 
   className?: string
   style?: CSSProperties
-  children?: ReactElement
-
-  /** @internal */
-  __thumb?: ReactElement
-  /** @internal */
-  __percent?: number
+  /** `<Slider.Thumb />` goes here. */
+  children?: ReactNode
+  ref?: Ref<HTMLDivElement>
 }
 
 export function Track({
@@ -36,14 +35,15 @@ export function Track({
   className,
   style,
   defaultStyle = true,
-  __thumb,
-  __percent = 0,
+  ref,
   ...props
 }: SliderTrackProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>) {
-  const vertical = useSliderContext((s) => s.vertical)
-  const reverse = useSliderContext((s) => s.reverse)
-  const disabled = useSliderContext((s) => s.disabled)
+  const { vertical, reverse, disabled, percent, trackRef } = useSliderContext()
+
+  // The track is what the pointer position is normalized against, so the
+  // context ref is composed with any ref the caller passed.
+  const composedRef = useComposedRefs<HTMLDivElement>(ref, trackRef)
 
   const direction = vertical ? 'bottom' : 'right'
   const colors = {
@@ -53,6 +53,7 @@ export function Track({
 
   return (
     <div
+      ref={composedRef}
       className={clsx('tremolo-slider-track', className)}
       aria-disabled={disabled}
       data-vertical={vertical}
@@ -62,8 +63,8 @@ export function Track({
           : {
               ...colors,
               background: xor(vertical, reverse)
-                ? `linear-gradient(to ${direction}, var(--inactive) ${__percent}%, var(--active) ${__percent}%)`
-                : `linear-gradient(to ${direction}, var(--active) ${__percent}%, var(--inactive) ${__percent}%)`,
+                ? `linear-gradient(to ${direction}, var(--inactive) ${percent}%, var(--active) ${percent}%)`
+                : `linear-gradient(to ${direction}, var(--active) ${percent}%, var(--inactive) ${percent}%)`,
               borderRadius: styleHelper(thickness!, '/', 2),
               width: !vertical ? length : thickness,
               height: vertical ? length : thickness,
@@ -73,7 +74,6 @@ export function Track({
       {...props}
     >
       {children}
-      {__thumb}
     </div>
   )
 }

package/src/components/Slider/context.tsx

@@ -1,64 +1,49 @@
-import { createContext, useContext, useEffect, useRef } from 'react'
-import { createStore, useStore } from 'zustand'
+import { createContext, RefObject, useContext } from 'react'
 
-type State = {
+import type { Scale } from '@tremolo-ui/functions'
+
+import type { SliderThumbMethods } from './Thumb'
+
+export type SliderContextValue = {
+  value: number
   min: number
   max: number
   step: number
-  skew: number
+  /** How the value is distributed across the travel. */
+  scale: Scale
   vertical: boolean
   reverse: boolean
   disabled: boolean
   readonly: boolean
-}
-
-type SliderStore = ReturnType<typeof createSliderStore>
-
-const createSliderStore = (initProps?: Partial<State>) => {
-  const DEFAULT_PROPS: State = {
-    min: 0,
-    max: 0,
-    step: 0,
-    skew: 0,
-    vertical: false,
-    reverse: false,
-    disabled: false,
-    readonly: false,
-  }
-
-  return createStore<State>()(() => ({
-    ...DEFAULT_PROPS,
-    ...initProps,
-  }))
-}
-
-const SliderContext = createContext<SliderStore | null>(null)
-
-type SliderProviderProps = React.PropsWithChildren<Partial<State>>
-
-export function SliderProvider({ children, ...props }: SliderProviderProps) {
-  const storeRef = useRef<SliderStore>(null)
-  if (!storeRef.current) {
-    storeRef.current = createSliderStore(props)
-  }
 
-  useEffect(() => {
-    if (storeRef.current) {
-      storeRef.current.setState(props)
-    } else {
-      storeRef.current = createSliderStore(props)
-    }
-  }, [props])
+  /**
+   * Position of the thumb, 0-100, already accounting for the display direction
+   * implied by `vertical` and `reverse`.
+   */
+  percent: number
 
-  return (
-    <SliderContext.Provider value={storeRef.current}>
-      {children}
-    </SliderContext.Provider>
-  )
+  /** `Track` registers its element here; `Root` normalizes the pointer against it. */
+  trackRef: RefObject<HTMLDivElement | null>
+  /** `Thumb` registers itself here; `Root` focuses it when a drag starts. */
+  thumbRef: RefObject<SliderThumbMethods | null>
 }
 
-export function useSliderContext<T>(selector: (state: State) => T): T {
-  const store = useContext(SliderContext)
-  if (!store) throw new Error('Missing SliderContext.Provider in the tree')
-  return useStore(store, selector)
+const SliderContext = createContext<SliderContextValue | null>(null)
+
+export const SliderProvider = SliderContext.Provider
+
+/**
+ * Everything here is derived during render, so there is no state to keep in
+ * sync: `value` comes from the props of `Root` and the rest follows from it.
+ */
+export function useSliderContext(): SliderContextValue
+export function useSliderContext<T>(
+  selector: (state: SliderContextValue) => T,
+): T
+export function useSliderContext<T>(
+  selector?: (state: SliderContextValue) => T,
+) {
+  const context = useContext(SliderContext)
+  if (!context) throw new Error('Missing SliderContext.Provider in the tree')
+  return selector ? selector(context) : context
 }

package/src/components/Slider/index.css

@@ -1,9 +1,19 @@
 .tremolo-slider {
-  display: inline-block;
+  /* Half the thumb size. The thumb overhangs the ends of the track, so the
+     slider reserves room for it. Override this when using a different size. */
+  --thumb-size: 22px;
+
+  display: inline-flex;
+  flex-direction: column;
+  margin: calc(var(--thumb-size) / 2);
   cursor: pointer;
   outline: 0;
   -webkit-tap-highlight-color: transparent;
 
+  &[data-vertical='true'] {
+    flex-direction: row;
+  }
+
   &[aria-readonly='true'] {
     cursor: not-allowed;
   }
@@ -18,6 +28,9 @@
 .tremolo-slider-thumb {
   --color: oklch(59.5% 0.17548 266.373);
 
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+
   background: var(--color);
   border-radius: 50%;
   outline: none;
@@ -57,12 +70,12 @@
   }
 }
 
-.tremolo-slider-scale {
+.tremolo-slider-marks {
   display: block;
   position: relative;
 }
 
-.tremolo-slider-scale-option {
+.tremolo-slider-marks-option {
   display: flex;
   color: oklch(25.197% 0.00003 271.152);
   flex-direction: column;
@@ -78,11 +91,11 @@
   }
 }
 
-.tremolo-slider-scale-option-mark {
+.tremolo-slider-marks-option-mark {
   background-color: currentColor;
 }
 
-.tremolo-slider-scale-option-label {
+.tremolo-slider-marks-option-label {
   text-align: right;
 }