@tremolo-ui/react 0.4.0 → 0.6.0

package/src/components/Slider/MarksOption.tsx

@@ -0,0 +1,115 @@
+import { ComponentPropsWithoutRef, CSSProperties, useCallback } from 'react'
+
+import { toFixed, xor } from '@tremolo-ui/functions'
+
+import { cssLength } from '../_util/css-length'
+import { useCheckPlacement } from '../_util/Placement'
+
+import { useSliderContext } from './context'
+
+export interface SliderMarksOptionProps {
+  /** Where the mark sits, on the same scale as the thumb. */
+  value: number
+
+  /**
+   * Draw the mark itself. Turn it off to show the label alone.
+   * @default true
+   */
+  mark?: boolean
+  /**
+   * Text shown next to the mark. Leave it out to show the value; `null` leaves
+   * the label out, and an empty string draws an empty one.
+   */
+  label?: number | string | null
+  /** Thickness of the mark. Sets `--thickness`. */
+  thickness?: number | string
+  /** Length of the mark. Sets `--length`. */
+  length?: number | string
+  /** Space between the mark and the label. Sets `--gap`. */
+  gap?: number | string
+  /** Width of the label. Sets `--label-width`. */
+  labelWidth?: number | string
+  /** Classes for the mark and the label inside the option. */
+  classes?: {
+    mark?: string
+    label?: string
+  }
+  /** Styles for the mark and the label inside the option. */
+  styles?: {
+    mark?: CSSProperties
+    label?: CSSProperties
+  }
+}
+
+export function MarksOption({
+  value,
+  mark = true,
+  label,
+  thickness,
+  length,
+  gap,
+  labelWidth,
+  classes,
+  styles,
+  className,
+  style,
+  ...props
+}: SliderMarksOptionProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof SliderMarksOptionProps>) {
+  useCheckPlacement('Slider.MarksOption', 'Slider.Marks')
+
+  const min = useSliderContext((s) => s.min)
+  const max = useSliderContext((s) => s.max)
+  const scale = useSliderContext((s) => s.scale)
+  const vertical = useSliderContext((s) => s.vertical)
+  const reverse = useSliderContext((s) => s.reverse)
+
+  const calcPercent = useCallback(
+    (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, scale],
+  )
+
+  return (
+    <div
+      className={className}
+      style={
+        {
+          // The mark and the label read these, so they are set once here.
+          '--thickness': cssLength(thickness),
+          '--length': cssLength(length),
+          '--gap': cssLength(gap),
+          '--label-width': cssLength(labelWidth),
+          // The mechanics of the position below, as on the thumb.
+          position: 'absolute',
+          translate: vertical
+            ? 'var(--translate, 0 -50%)'
+            : 'var(--translate, -50% 0)',
+          zIndex: 10,
+          ...style,
+          // Where the mark belongs on the track: the value, not a style.
+          left: !vertical ? `${calcPercent(value)}%` : undefined,
+          top: vertical ? `${calcPercent(value)}%` : undefined,
+        } as CSSProperties
+      }
+      data-orientation={vertical ? 'vertical' : 'horizontal'}
+      {...props}
+    >
+      {mark && (
+        <div
+          className={classes?.mark}
+          style={styles?.mark}
+          data-orientation={vertical ? 'vertical' : 'horizontal'}
+        ></div>
+      )}
+      {label !== null && (
+        <div className={classes?.label} style={styles?.label}>
+          {label ?? value}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/Slider/Thumb.tsx

@@ -1,5 +1,6 @@
-import clsx from 'clsx'
 import {
+  AriaAttributes,
+  ComponentPropsWithoutRef,
   CSSProperties,
   forwardRef,
   ReactNode,
@@ -7,21 +8,31 @@ import {
   useRef,
 } from 'react'
 
+import { useCheckPlacement } from '../_util/Placement'
+import { VisuallyHiddenRangeInput } from '../_util/VisuallyHiddenRangeInput'
+
 import { useSliderContext } from './context'
 
 export interface SliderThumbProps {
-  size?: number | string
-  width?: number | string
-  height?: number | string
-
+  /**
+   * Sets `--color`, for the theme to colour the thumb with. The size is not
+   * set here but by `--thumb-size` on `Slider.Root`, so that the root can
+   * leave the matching room around the track.
+   */
   color?: string
 
   className?: string
   style?: CSSProperties
+  /**
+   * Rendered inside the thumb. The thumb is one element either way, so what
+   * is passed here is decoration on top of it rather than a replacement for
+   * it — `className` and `style` are how its own appearance is changed.
+   */
   children?: ReactNode
-
-  /** @internal */
-  __percent?: number
+  'aria-label'?: AriaAttributes['aria-label']
+  'aria-labelledby'?: AriaAttributes['aria-labelledby']
+  'aria-describedby'?: AriaAttributes['aria-describedby']
+  'aria-valuetext'?: AriaAttributes['aria-valuetext']
 }
 
 export interface SliderThumbMethods {
@@ -29,65 +40,99 @@ export interface SliderThumbMethods {
   blur: () => void
 }
 
-export const defaultThumbSize = 22
+type Props = SliderThumbProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof SliderThumbProps>
 
-export const Thumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
-  (
+export const Thumb = /* @__PURE__ */ forwardRef<SliderThumbMethods, Props>(
+  function Thumb(
     {
-      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)
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      'aria-describedby': ariaDescribedby,
+      'aria-valuetext': ariaValuetext,
+      ...props
+    },
+    forwardedRef,
+  ) {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const {
+      value,
+      min,
+      max,
+      step,
+      vertical,
+      disabled,
+      readonly,
+      onChange,
+      percent,
+      thumbRef,
+    } = useSliderContext()
+
+    // The thumb is positioned against the track.
+    useCheckPlacement('Slider.Thumb', 'Slider.Track')
+
+    const methods = () => ({
+      focus() {
+        if (!disabled) inputRef.current?.focus()
+      },
+      blur() {
+        inputRef.current?.blur()
+      },
+    })
 
-    useImperativeHandle(ref, () => {
-      return {
-        focus() {
-          wrapperRef.current?.focus()
-        },
-        blur() {
-          wrapperRef.current?.blur()
-        },
-      }
-    }, [])
+    useImperativeHandle(forwardedRef, methods, [disabled])
+    // Root focuses the thumb when a drag starts, wherever the user placed it.
+    useImperativeHandle(thumbRef, methods, [disabled])
 
     return (
       <div
-        className="tremolo-slider-thumb-wrapper"
+        className={className}
+        data-disabled={disabled ? '' : undefined}
+        data-readonly={readonly ? '' : undefined}
+        {...props}
         style={{
-          top: vertical ? `${__percent}%` : '50%',
-          left: !vertical ? `${__percent}%` : '50%',
+          ...{ '--color': color },
+          // Not a style but the mechanics of the position below: the thumb is
+          // placed by a percentage of the track, which needs it out of flow
+          // and measured from its own centre. `--translate` is there for a
+          // thumb that should hang off its edge instead.
+          position: 'absolute',
+          translate: 'var(--translate, -50% -50%)',
+          zIndex: 100,
+          ...style,
+          // Where the thumb sits is the component's decision, not a style: a
+          // `left` from the caller would take it off the track, so it is
+          // written after theirs.
+          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>
-        )}
+        <VisuallyHiddenRangeInput
+          ref={inputRef}
+          value={value}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          aria-readonly={readonly}
+          aria-orientation={vertical ? 'vertical' : 'horizontal'}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          aria-describedby={ariaDescribedby}
+          aria-valuetext={ariaValuetext}
+          onChange={(event) => {
+            if (readonly) {
+              event.currentTarget.value = String(value)
+              return
+            }
+            onChange?.(event.currentTarget.valueAsNumber)
+          }}
+        />
+        {children}
       </div>
     )
   },

package/src/components/Slider/Track.tsx

@@ -1,79 +1,90 @@
-import clsx from 'clsx'
-import { ComponentPropsWithoutRef, CSSProperties, ReactElement } from 'react'
+import {
+  ComponentPropsWithoutRef,
+  CSSProperties,
+  forwardRef,
+  ReactNode,
+} from 'react'
 
-import { styleHelper, xor } from '@tremolo-ui/functions'
+import { xor } from '@tremolo-ui/functions'
 
-import { useSliderContext } from './context'
+import { useComposedRefs } from '../../compose-refs'
+import { cssLength } from '../_util/css-length'
+import { Placement } from '../_util/Placement'
 
-export const defaultLength = 140
-export const defaultThickness = 10
+import { useSliderContext } from './context'
 
 export interface SliderTrackProps {
+  /**
+   * How long the track is along the axis the slider runs. Sets `--length`;
+   * the size the theme gives it stands when this is omitted.
+   */
   length?: number | string
+  /** How thick the track is across that axis. Sets `--thickness`. */
   thickness?: number | string
 
+  /** Colour of the part from `min` to the value. Sets `--active`. */
   active?: string
+  /** Colour of the rest of the track. Sets `--inactive`. */
   inactive?: string
 
-  defaultStyle?: boolean
-
   className?: string
   style?: CSSProperties
-  children?: ReactElement
-
-  /** @internal */
-  __thumb?: ReactElement
-  /** @internal */
-  __percent?: number
+  /** `<Slider.Thumb />` goes here. */
+  children?: ReactNode
 }
 
-export function Track({
-  length = defaultLength,
-  thickness = defaultThickness,
-  active,
-  inactive,
-  children,
-  className,
-  style,
-  defaultStyle = true,
-  __thumb,
-  __percent = 0,
-  ...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)
+type Props = SliderTrackProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>
 
-  const direction = vertical ? 'bottom' : 'right'
-  const colors = {
-    '--active': active,
-    '--inactive': inactive,
-  }
+export const Track = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
+  function Track(
+    {
+      length,
+      thickness,
+      active,
+      inactive,
+      children,
+      className,
+      style,
+      ...props
+    },
+    forwardedRef,
+  ) {
+    const { vertical, reverse, disabled, percent, trackRef } =
+      useSliderContext()
 
-  return (
-    <div
-      className={clsx('tremolo-slider-track', className)}
-      aria-disabled={disabled}
-      data-vertical={vertical}
-      style={
-        !defaultStyle
-          ? style
-          : {
-              ...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}%)`,
-              borderRadius: styleHelper(thickness!, '/', 2),
-              width: !vertical ? length : thickness,
-              height: vertical ? length : thickness,
-              ...style,
-            }
-      }
-      {...props}
-    >
-      {children}
-      {__thumb}
-    </div>
-  )
-}
+    // 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>(forwardedRef, trackRef)
+
+    return (
+      <div
+        ref={composedRef}
+        className={className}
+        data-disabled={disabled ? '' : undefined}
+        data-orientation={vertical ? 'vertical' : 'horizontal'}
+        // Which end the value grows from. `percent` is already the position on
+        // screen, so this only says which side of it is the filled one.
+        data-flipped={xor(vertical, reverse) ? '' : undefined}
+        style={
+          {
+            '--active': active,
+            '--inactive': inactive,
+            '--length': cssLength(length),
+            '--thickness': cssLength(thickness),
+            // Where the value sits, for the theme to paint the fill with. The
+            // component draws nothing itself: this is the one number CSS cannot
+            // work out on its own.
+            '--percent': `${percent}%`,
+            // The thumb inside is placed against this box.
+            position: 'relative',
+            ...style,
+          } as CSSProperties
+        }
+        {...props}
+      >
+        <Placement name="Slider.Track">{children}</Placement>
+      </div>
+    )
+  },
+)

package/src/components/Slider/context.tsx

@@ -1,64 +1,51 @@
-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
+  onChange?: (value: number) => void
+  /**
+   * Position of the thumb, 0-100, already accounting for the display direction
+   * implied by `vertical` and `reverse`.
+   */
+  percent: number
+
+  /** `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>
 }
 
-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])
-
-  return (
-    <SliderContext.Provider value={storeRef.current}>
-      {children}
-    </SliderContext.Provider>
-  )
-}
-
-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 = /* @__PURE__ */ 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
 }