@tremolo-ui/react 0.7.0 → 0.9.0

package/src/components/PointsEditor/index.tsx

@@ -3,8 +3,6 @@ import {
   CSSProperties,
   forwardRef,
   ReactNode,
-  RefObject,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -12,89 +10,27 @@ import {
 } from 'react'
 
 import {
-  applyDelta,
-  createSelectionBox,
+  createPointsEditor,
+  DEFAULT_DRAG_SENSITIVITY,
   type InputEventOption,
-  type ModifierState,
   type ModifierValue,
-  type SelectionBoxInstance,
   type SelectionBoxRect,
-  type XY,
 } from '@tremolo-ui/dom'
-import { clamp, toPrecision } from '@tremolo-ui/functions'
-
-import { DEFAULT_DRAG_SENSITIVITY } from '../../input-event'
-import { cssLength } from '../_util/css-length'
+import {
+  POINTS_EDITOR_DEFAULT_KEYBOARD,
+  POINTS_EDITOR_DEFAULT_WHEEL,
+} from '@tremolo-ui/dom/internal'
 
 import { Background } from './Background'
 import { Container } from './Container'
-import { type PointRegistration, PointsEditorProvider } from './context'
-import { AXIS, Point, type PointBaseType } from './Point'
+import { PointsEditorProvider } from './context'
+import { Point } from './Point'
 import { SelectionBox } from './SelectionBox'
 
-import type { CSSVariables } from '../../css-variables'
-
 /** One array for every editor with selection turned off, so memos hold still. */
 const EMPTY: readonly string[] = []
 
-/**
- * How far a point may move before something in the selection leaves its range.
- *
- * Clamping each point on its own would break the shape of the selection: the
- * one that reached the edge would stop while the rest carried on. One amount
- * for all of them means the whole selection stops together.
- */
-function allowedDelta(
-  delta: PointBaseType,
-  entries: { start: PointBaseType; registration: PointRegistration }[],
-): PointBaseType {
-  let loX = -Infinity
-  let hiX = Infinity
-  let loY = -Infinity
-  let hiY = Infinity
-
-  for (const { start, registration } of entries) {
-    loX = Math.max(loX, (registration.min?.x ?? 0) - start.x)
-    hiX = Math.min(hiX, (registration.max?.x ?? 1) - start.x)
-    loY = Math.max(loY, (registration.min?.y ?? 0) - start.y)
-    hiY = Math.min(hiY, (registration.max?.y ?? 1) - start.y)
-  }
-
-  // A point that started outside its own range leaves nothing to move within.
-  return {
-    x: hiX < loX ? 0 : clamp(delta.x, loX, hiX),
-    y: hiY < loY ? 0 : clamp(delta.y, loY, hiY),
-  }
-}
-
-/*
-TODO:
-
-- grid
-*/
-
-/**
- * A point moves over 0..1 in both axes, so a nudge of 0.01 crosses the editor
- * in a hundred steps whatever its pixel size.
- */
-const DEFAULT_WHEEL: ModifierValue<InputEventOption> = ['normalized', 0.01]
-
-/**
- * Shift is the fine-adjustment key everywhere else, so it is bound here too
- * — but only on the keyboard. On the wheel it already means the x axis, and
- * browsers hand shift+wheel over as horizontal scrolling anyway.
- */
-const DEFAULT_KEYBOARD: ModifierValue<InputEventOption> = {
-  default: ['normalized', 0.01],
-  shift: ['normalized', 0.001],
-}
-
 export interface PointsEditorProps {
-  /** Sets `--width`; the size the theme gives it stands when omitted. */
-  width?: number | string
-  /** Sets `--height`; the size the theme gives it stands when omitted. */
-  height?: number | string
-
   /**
    * Make the points unchangeable and remove them from the tab order.
    * The parts carry `data-disabled` while it is set.
@@ -104,17 +40,15 @@ export interface PointsEditorProps {
    * Make the points unmovable.
    * The parts carry `data-readonly` while it is set.
    */
-  readonly?: boolean
+  readOnly?: boolean
 
   /**
    * The cursor to show while dragging a point. It is set on the dragged
    * point, so it stays while the pointer is outside it.
    *
-   * @default { cursor: 'grabbing' }
+   * @default 'grabbing'
    */
-  externalStyles?: {
-    cursor?: CSSProperties['cursor']
-  }
+  dragCursor?: CSSProperties['cursor']
 
   /**
    * How much one notch of the wheel moves the focused `Point`. Scrolling
@@ -212,8 +146,6 @@ export interface PointsEditorProps {
    * </PointsEditor.Root>
    */
   children: ReactNode
-
-  style?: CSSProperties & CSSVariables<'width' | 'height'>
 }
 
 type Props = PointsEditorProps &
@@ -222,18 +154,16 @@ type Props = PointsEditorProps &
 export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
   (
     {
-      width,
-      height,
       disabled = false,
-      readonly = false,
-      wheel = DEFAULT_WHEEL,
-      keyboard = DEFAULT_KEYBOARD,
+      readOnly = false,
+      wheel = POINTS_EDITOR_DEFAULT_WHEEL,
+      keyboard = POINTS_EDITOR_DEFAULT_KEYBOARD,
       dragSensitivity = DEFAULT_DRAG_SENSITIVITY,
       selectable = false,
       selection: selectionProp,
       defaultSelection,
       onSelectionChange,
-      externalStyles,
+      dragCursor = 'grabbing',
       style,
       className,
       children,
@@ -242,12 +172,12 @@ export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
     forwardedRef,
   ) => {
     const containerRef = useRef<HTMLDivElement>(null)
-
     // Picked apart so that the memo below depends on values rather than on the
     // object literal a caller writes inline, which is new on every render.
-    const { cursor = 'grabbing' } = externalStyles ?? {}
 
     // --- selection ---
+    // The selection lives here, where React state can hold it; which points a
+    // press or a box selects, and how a selection moves, is the core's.
     const controlled = selectionProp !== undefined
     const [ownSelection, setOwnSelection] = useState<string[]>(
       defaultSelection ?? [],
@@ -256,262 +186,55 @@ export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
     // point it started on and `data-selected` never turns on.
     const selection = selectable ? (selectionProp ?? ownSelection) : EMPTY
 
-    // Drags read the selection from a native event handler, which runs after
-    // the commit, so a ref is current by the time it matters.
-    const selectionRef = useRef(selection)
-    const changeHandlerRef = useRef(onSelectionChange)
-    useEffect(() => {
-      selectionRef.current = selection
-      changeHandlerRef.current = onSelectionChange
-    })
-
-    const changeSelection = useCallback(
-      (next: string[]) => {
-        selectionRef.current = next
-        if (!controlled) setOwnSelection(next)
-        changeHandlerRef.current?.(next)
-      },
-      [controlled],
-    )
-
-    /**
-     * Every mounted point, by id. A registration is a ref rather than a value:
-     * the value inside changes on every frame of a drag, and a registry keyed
-     * on it would be rebuilt just as often.
-     */
-    const points = useRef(new Map<string, RefObject<PointRegistration>>())
-
-    const registerPoint = useCallback(
-      (id: string, entry: RefObject<PointRegistration>) => {
-        points.current.set(id, entry)
-        return () => {
-          points.current.delete(id)
-        }
-      },
-      [],
-    )
-
-    /** What the current drag picked up, and where those points started. */
-    const dragRef = useRef<{ id: string; start: PointBaseType }[]>([])
-
-    const snapshot = useCallback((ids: readonly string[]) => {
-      return ids.flatMap((id) => {
-        const registration = points.current.get(id)?.current
-        return registration ? [{ id, start: { ...registration.value } }] : []
-      })
-    }, [])
-
-    const applyDeltaTo = useCallback(
-      (
-        entries: { id: string; start: PointBaseType }[],
-        delta: PointBaseType,
-      ) => {
-        const withRegistration = entries.flatMap((entry) => {
-          const registration = points.current.get(entry.id)?.current
-          return registration ? [{ ...entry, registration }] : []
-        })
-        const allowed = allowedDelta(delta, withRegistration)
-        for (const { start, registration } of withRegistration) {
-          if (registration.readonly) continue
-          // Rounded here as well as in the pipeline: a move is a subtraction
-          // and an addition of its own, and that is enough to put the binary
-          // artefact back (0.2 + 0.1 lands on 0.30000000000000004).
-          registration.onChange?.({
-            x: toPrecision(start.x + allowed.x),
-            y: toPrecision(start.y + allowed.y),
-          })
-        }
-      },
-      [],
-    )
-
-    const beginPointDrag = useCallback(
-      (id: string, modifiers: ModifierState) => {
-        if (!selectable) {
-          dragRef.current = snapshot([id])
-          return
-        }
-        const current = selectionRef.current
-        // Ctrl / meta rather than shift: shift is the fine-adjustment key on
-        // every control here, and it cannot be both.
-        const additive = modifiers.ctrlKey || modifiers.metaKey
-        let next: readonly string[]
-        if (additive) {
-          next = current.includes(id)
-            ? current.filter((x) => x !== id)
-            : [...current, id]
-        } else if (current.includes(id)) {
-          // Already part of a group: keep it, so the group can be dragged.
-          next = current
-        } else {
-          next = [id]
-        }
-        changeSelection([...next])
-        // A press that took the point out of the selection was a deselect, not
-        // the start of a move, so there is nothing to drag.
-        dragRef.current = next.includes(id) ? snapshot(next) : []
-      },
-      [selectable, changeSelection, snapshot],
-    )
-
-    const movePointDrag = useCallback(
-      (delta: PointBaseType) => applyDeltaTo(dragRef.current, delta),
-      [applyDeltaTo],
-    )
-
-    const nudgeSelection = useCallback(
-      (id: string, delta: PointBaseType) => {
-        // From wherever the points are now: a key press is not a drag, so
-        // there is no earlier position to measure against.
-        const ids = selectionRef.current.includes(id)
-          ? selectionRef.current
-          : [id]
-        applyDeltaTo(snapshot(ids), delta)
-      },
-      [applyDeltaTo, snapshot],
-    )
-
-    const isPointElement = useCallback(
-      (element: Element | null | undefined) => {
-        if (!element) return false
-        for (const [, entry] of points.current) {
-          if (entry.current.element?.contains(element)) return true
-        }
-        return false
-      },
-      [],
-    )
-
-    const nudgeFocusedPoint = useCallback(
-      (axis: 'x' | 'y', direction: number, modifiers: ModifierState) => {
-        const container = containerRef.current
-        const active = container?.ownerDocument.activeElement
-        if (!container || !active || !container.contains(active)) return false
-        for (const [id, entry] of points.current) {
-          const { element, wheel, readonly, onChange, value } = entry.current
-          // A point answers only for the focus inside its own inputs, so both
-          // axes stay part of the same interaction.
-          if (!element?.contains(active)) continue
-          if (!wheel || readonly || !onChange) return false
-          const next = applyDelta(
-            value[axis],
-            direction,
-            wheel,
-            AXIS,
-            modifiers,
-          )
-          // As a move, so that the rest of the selection comes along and the
-          // whole group stops together at the edge.
-          nudgeSelection(id, {
-            x: axis === 'x' ? next - value.x : 0,
-            y: axis === 'y' ? next - value.y : 0,
-          })
-          return true
-        }
-        return false
-      },
-      [nudgeSelection],
-    )
-
-    // --- selection box ---
-    // The box itself lives in the core: which items a rectangle covers, and
-    // what a press adds to or replaces, are not React's to decide. What is
-    // left here is the registry it reads and the state the box is drawn from.
     const [selectionBox, setSelectionBox] = useState<SelectionBoxRect | null>(
       null,
     )
-    const selectionBoxRef = useRef<SelectionBoxInstance<string> | null>(null)
-    selectionBoxRef.current ??= createSelectionBox<string>({
-      *items(): Generator<readonly [string, XY<number>]> {
-        for (const [id, entry] of points.current) {
-          const { x, y } = entry.current.value
-          yield [id, [x, y]]
-        }
-      },
-      onBoxChange: setSelectionBox,
-    })
-
-    // The selection is reported to whoever owns it, and that handler is a new
-    // function whenever the caller's is, so it is handed over rather than
-    // closed over.
-    useEffect(() => {
-      selectionBoxRef.current?.update({ onSelectionChange: changeSelection })
-    }, [changeSelection])
-
-    useEffect(() => {
-      const box = selectionBoxRef.current
-      return () => box?.destroy()
-    }, [])
 
-    const beginSelectionBox = useCallback(
-      (at: PointBaseType, modifiers: ModifierState) => {
-        if (!selectable) return
-        selectionBoxRef.current?.begin([at.x, at.y], {
-          // Ctrl / meta rather than shift: shift is the fine-adjustment key on
-          // every control here, and it cannot be both.
-          additive: modifiers.ctrlKey || modifiers.metaKey,
-          selection: selectionRef.current,
-        })
-      },
-      [selectable],
+    const [editor] = useState(() =>
+      createPointsEditor({ onSelectionBoxChange: setSelectionBox }),
     )
 
-    const moveSelectionBox = useCallback((to: PointBaseType) => {
-      selectionBoxRef.current?.move([to.x, to.y])
-    }, [])
+    // Drags read the selection from a native event handler, which runs after
+    // the commit, so pushing it from an effect is current by the time it
+    // matters. The handler goes the same way: it closes over this render.
+    useEffect(() => {
+      editor.update({
+        selectable,
+        selection,
+        onSelectionChange: (next) => {
+          if (!controlled) setOwnSelection(next)
+          onSelectionChange?.(next)
+        },
+      })
+    })
 
-    const endSelectionBox = useCallback(() => {
-      if (!selectionBoxRef.current?.end()) return
-      // A selection box is drawn on the container, which is not a control and
-      // cannot hold focus, so the press that started it left the focus on
-      // nothing. The arrow keys and the wheel reach a point only through the
-      // focus, so it is handed to one of the points the box selected —
-      // whichever point takes it moves the whole selection.
-      const [first] = selectionRef.current
-      if (first) points.current.get(first)?.current.element?.focus()
-    }, [])
+    useEffect(() => () => editor.destroy(), [editor])
 
     const context = useMemo(
       () => ({
         disabled,
-        readonly,
+        readOnly,
         wheel,
         keyboard,
         dragSensitivity,
-        externalStyles: { cursor },
+        dragCursor,
         containerRef,
         selectable,
         selection,
-        registerPoint,
-        isPointElement,
-        beginPointDrag,
-        movePointDrag,
-        nudgeSelection,
-        nudgeFocusedPoint,
+        editor,
         selectionBox,
-        beginSelectionBox,
-        moveSelectionBox,
-        endSelectionBox,
       }),
       [
         disabled,
-        readonly,
+        readOnly,
         wheel,
         keyboard,
         dragSensitivity,
-        cursor,
+        dragCursor,
         selectable,
         selection,
-        registerPoint,
-        isPointElement,
-        beginPointDrag,
-        movePointDrag,
-        nudgeSelection,
-        nudgeFocusedPoint,
+        editor,
         selectionBox,
-        beginSelectionBox,
-        moveSelectionBox,
-        endSelectionBox,
       ],
     )
 
@@ -521,11 +244,9 @@ export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
           ref={forwardedRef}
           className={className}
           data-disabled={disabled ? '' : undefined}
-          data-readonly={readonly ? '' : undefined}
+          data-readonly={readOnly ? '' : undefined}
           style={
             {
-              '--width': cssLength(width),
-              '--height': cssLength(height),
               // The layers inside are placed against this box.
               position: 'relative',
               ...style,
@@ -555,8 +276,4 @@ export {
   usePointsEditorContext,
   type PointsEditorContextValue,
 } from './context'
-export {
-  clampPoint,
-  type PointBaseType,
-  type PointsEditorPointProps,
-} from './Point'
+export { type PointsEditorPointProps } from './Point'

package/src/components/Slider/Marks.tsx

@@ -1,11 +1,12 @@
 import { ComponentPropsWithoutRef, CSSProperties } from 'react'
 
-import { cssLength } from '../_util/css-length'
+import { type MarksOptions } from '@tremolo-ui/dom'
+import { cssLength, sliderMarks } from '@tremolo-ui/dom/internal'
+
 import { Placement } from '../_util/Placement'
 
 import { useSliderContext } from './context'
 import { MarksOption } from './MarksOption'
-import { generateOptionsList, MarksOptions } from './type'
 
 import type { CSSVariables } from '../../css-variables'
 
@@ -40,12 +41,10 @@ export function Marks({
   const min = useSliderContext((s) => s.min)
   const max = useSliderContext((s) => s.max)
   const step = useSliderContext((s) => s.step)
-  const vertical = useSliderContext((s) => s.vertical)
+  const vertical = useSliderContext((s) => s.orientation === 'vertical')
   const reverse = useSliderContext((s) => s.reverse)
 
-  const optionsList = options
-    ? generateOptionsList(options, min, max, step)
-    : []
+  const optionsList = options ? sliderMarks(options, min, max, step) : []
   if (vertical !== reverse) optionsList.reverse()
 
   return (

package/src/components/Slider/MarksOption.tsx

@@ -1,8 +1,8 @@
-import { ComponentPropsWithoutRef, CSSProperties, useCallback } from 'react'
+import { ComponentPropsWithoutRef, CSSProperties } from 'react'
 
-import { toFixed } from '@tremolo-ui/functions'
+import { valuePercent } from '@tremolo-ui/dom'
+import { cssLength } from '@tremolo-ui/dom/internal'
 
-import { cssLength } from '../_util/css-length'
 import { useCheckPlacement } from '../_util/Placement'
 
 import { useSliderContext } from './context'
@@ -29,8 +29,6 @@ export interface SliderMarksOptionProps {
   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
@@ -43,7 +41,7 @@ export interface SliderMarksOptionProps {
   }
 
   style?: CSSProperties &
-    CSSVariables<'thickness' | 'length' | 'gap' | 'label-width' | 'translate'>
+    CSSVariables<'thickness' | 'length' | 'gap' | 'translate'>
 }
 
 export function MarksOption({
@@ -53,7 +51,6 @@ export function MarksOption({
   thickness,
   length,
   gap,
-  labelWidth,
   classes,
   styles,
   className,
@@ -66,17 +63,11 @@ export function MarksOption({
   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 vertical = useSliderContext((s) => s.orientation === '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(vertical !== reverse ? 100 - percent : percent)
-    },
-    [vertical, reverse, max, min, scale],
-  )
+  // The marks have to sit on the same curve the thumb runs along.
+  const percent = valuePercent(value, { min, max, scale }, vertical !== reverse)
 
   return (
     <div
@@ -87,7 +78,6 @@ export function MarksOption({
           '--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
@@ -96,8 +86,8 @@ export function MarksOption({
           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,
+          left: !vertical ? `${percent}%` : undefined,
+          top: vertical ? `${percent}%` : undefined,
         } as CSSProperties
       }
       data-orientation={vertical ? 'vertical' : 'horizontal'}

package/src/components/Slider/Thumb.tsx

@@ -1,9 +1,10 @@
 import {
   ComponentPropsWithoutRef,
+  CSSProperties,
   forwardRef,
+  Ref,
   useImperativeHandle,
   useRef,
-  CSSProperties,
 } from 'react'
 
 import { useCheckPlacement } from '../_util/Placement'
@@ -22,6 +23,12 @@ export interface SliderThumbProps {
   color?: string
 
   style?: CSSProperties & CSSVariables<'color' | 'translate'>
+
+  /**
+   * Receives `focus` and `blur` for the range input inside, which do nothing
+   * while the slider is disabled. `ref` reaches the thumb element itself.
+   */
+  actionsRef?: Ref<SliderThumbMethods>
 }
 
 export interface SliderThumbMethods {
@@ -32,7 +39,7 @@ export interface SliderThumbMethods {
 type Props = SliderThumbProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof SliderThumbProps>
 
-export const Thumb = /* @__PURE__ */ forwardRef<SliderThumbMethods, Props>(
+export const Thumb = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
   function Thumb(
     {
       color,
@@ -48,6 +55,7 @@ export const Thumb = /* @__PURE__ */ forwardRef<SliderThumbMethods, Props>(
       'aria-labelledby': ariaLabelledby,
       'aria-describedby': ariaDescribedby,
       'aria-valuetext': ariaValuetext,
+      actionsRef,
       ...props
     },
     forwardedRef,
@@ -58,9 +66,9 @@ export const Thumb = /* @__PURE__ */ forwardRef<SliderThumbMethods, Props>(
       min,
       max,
       step,
-      vertical,
+      orientation,
       disabled,
-      readonly,
+      readOnly,
       onChange,
       percent,
       thumbRef,
@@ -78,15 +86,16 @@ export const Thumb = /* @__PURE__ */ forwardRef<SliderThumbMethods, Props>(
       },
     })
 
-    useImperativeHandle(forwardedRef, methods, [disabled])
+    useImperativeHandle(actionsRef, methods, [disabled])
     // Root focuses the thumb when a drag starts, wherever the user placed it.
     useImperativeHandle(thumbRef, methods, [disabled])
 
     return (
       <div
+        ref={forwardedRef}
         className={className}
         data-disabled={disabled ? '' : undefined}
-        data-readonly={readonly ? '' : undefined}
+        data-readonly={readOnly ? '' : undefined}
         {...props}
         style={{
           ...{ '--color': color },
@@ -101,8 +110,8 @@ export const Thumb = /* @__PURE__ */ forwardRef<SliderThumbMethods, Props>(
           // 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%',
+          top: orientation === 'vertical' ? `${percent}%` : '50%',
+          left: orientation === 'vertical' ? '50%' : `${percent}%`,
         }}
       >
         <VisuallyHiddenRangeInput
@@ -112,14 +121,14 @@ export const Thumb = /* @__PURE__ */ forwardRef<SliderThumbMethods, Props>(
           max={max}
           step={step}
           disabled={disabled}
-          aria-readonly={readonly}
-          aria-orientation={vertical ? 'vertical' : 'horizontal'}
+          aria-readonly={readOnly}
+          aria-orientation={orientation}
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledby}
           aria-describedby={ariaDescribedby}
           aria-valuetext={ariaValuetext}
           onChange={(event) => {
-            if (readonly) {
+            if (readOnly) {
               event.currentTarget.value = String(value)
               return
             }