@tremolo-ui/react 0.6.0 → 0.8.0

package/src/components/NumberInput/InputField.tsx

@@ -1,6 +1,5 @@
 import {
   ComponentPropsWithoutRef,
-  CSSProperties,
   forwardRef,
   useEffect,
   useLayoutEffect,
@@ -8,39 +7,21 @@ import {
   useState,
 } from 'react'
 
+import {
+  caretAtDecimalOffset,
+  caretDecimalOffset,
+  numberSpan,
+} from '@tremolo-ui/dom'
+
 import { useComposedRefs } from '../../compose-refs'
 
 import { useNumberInputContext } from './context'
 
-export interface NumberInputInputFieldProps {
-  className?: string
-  style?: CSSProperties
-}
-
-type Props = NumberInputInputFieldProps &
-  Omit<
-    ComponentPropsWithoutRef<'input'>,
-    keyof NumberInputInputFieldProps | 'type' | 'value' | 'defaultValue'
-  >
-
-/** The leading number of the displayed text, whatever the format put around it. */
-const NUMBER_PREFIX = /^\s*-?[\d.,]*/
-
-const numberEnd = (text: string) =>
-  text.match(NUMBER_PREFIX)?.[0].length ?? text.length
-
-/**
- * The index the caret is measured against: the decimal point, or where one
- * would go if the number has none.
- *
- * Measuring from an end instead would slide the caret across a digit whenever
- * the number changed length — `9.9` to `10.0` gains a character in front, `10`
- * to `9` loses one — which is exactly what stepping does.
- */
-const decimalAnchor = (text: string) => {
-  const dot = text.indexOf('.')
-  return dot === -1 ? numberEnd(text) : dot
-}
+// The value belongs to `NumberInput.Root`, and the field is always text.
+type Props = Omit<
+  ComponentPropsWithoutRef<'input'>,
+  'type' | 'value' | 'defaultValue'
+>
 
 /**
  * The text field of a `NumberInput`, and the only place the value can be typed.
@@ -53,7 +34,7 @@ const decimalAnchor = (text: string) => {
  */
 export const InputField = /* @__PURE__ */ forwardRef<HTMLInputElement, Props>(
   function InputField(
-    { className, style, onFocus, onBlur, onKeyDown, ...props },
+    { className, style, onChange, onFocus, onBlur, onKeyDown, ...props },
     forwardedRef,
   ) {
     const {
@@ -93,10 +74,8 @@ export const InputField = /* @__PURE__ */ forwardRef<HTMLInputElement, Props>(
       if (selectOnFocus === 'all') {
         input.setSelectionRange(0, input.value.length)
       } else {
-        input.setSelectionRange(
-          0,
-          input.value.match(NUMBER_PREFIX)?.[0].length ?? 0,
-        )
+        const span = numberSpan(input.value)
+        if (span) input.setSelectionRange(span.start, span.end)
       }
       // Deliberately not re-run as the text changes: that would drag the
       // selection back over what the user is typing.
@@ -120,8 +99,7 @@ export const InputField = /* @__PURE__ */ forwardRef<HTMLInputElement, Props>(
       // caret has not moved either, since the key press was prevented.
       if (!input || input.value === pending.from) return
 
-      const place = decimalAnchor(input.value) + pending.offset
-      const caret = Math.max(0, Math.min(place, numberEnd(input.value)))
+      const caret = caretAtDecimalOffset(input.value, pending.offset)
       input.setSelectionRange(caret, caret)
     })
 
@@ -160,6 +138,7 @@ export const InputField = /* @__PURE__ */ forwardRef<HTMLInputElement, Props>(
           // stepped one no longer means anything.
           caretAfterStep.current = null
           setDraft(event.currentTarget.value)
+          onChange?.(event)
         }}
         onFocus={(event) => {
           setFocused(true)
@@ -191,7 +170,7 @@ export const InputField = /* @__PURE__ */ forwardRef<HTMLInputElement, Props>(
             const input = event.currentTarget
             if (keepCaretOnStep && input.selectionStart !== null) {
               caretAfterStep.current = {
-                offset: input.selectionStart - decimalAnchor(input.value),
+                offset: caretDecimalOffset(input.value, input.selectionStart),
                 from: input.value,
               }
             }

package/src/components/NumberInput/Stepper.tsx

@@ -1,37 +1,24 @@
 import {
   ComponentPropsWithoutRef,
-  CSSProperties,
   forwardRef,
-  ReactNode,
+  useEffect,
   useMemo,
   useRef,
+  useState,
 } from 'react'
 
-import {
-  applyDelta,
-  mapModifier,
-  selectModifier,
-  type InputEventOption,
-} from '@tremolo-ui/functions'
+import { createStepperDrag, type StepperDragInstance } from '@tremolo-ui/dom'
 
 import { useComposedRefs } from '../../compose-refs'
-import { useDrag } from '../../hooks/useDrag'
 
 import { StepperProvider, useNumberInputContext } from './context'
 
-export interface NumberInputStepperProps {
-  className?: string
-  style?: CSSProperties
-  /** `<NumberInput.IncrementStepper />` and `<NumberInput.DecrementStepper />` go here. */
-  children?: ReactNode
-}
-
-type Props = NumberInputStepperProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof NumberInputStepperProps>
+type Props = ComponentPropsWithoutRef<'div'>
 
 /**
  * The area the steppers sit in, and a drag handle in its own right: dragging it
- * up and down moves the value one `step` every `drag` pixels.
+ * up and down moves the value one `step` every `drag` pixels. The counting is
+ * `createStepperDrag` in the core.
  *
  * The drag lives here rather than on `InputField` because `createDrag` turns
  * off text selection on whatever element it is attached to.
@@ -40,7 +27,6 @@ export const Stepper = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
   function Stepper({ className, style, children, ...props }, forwardedRef) {
     const {
       value,
-      step,
       disabled,
       readonly,
       drag,
@@ -49,100 +35,51 @@ export const Stepper = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
       rawRange,
       changeValue,
     } = useNumberInputContext()
-    const inactive = disabled || readonly
-
-    /**
-     * The sensitivity as an amount per `drag` pixels, so that the drag goes
-     * through the same `applyDelta` the wheel and the arrow keys do. Carrying
-     * the modifier map over rather than resolving it here is what keeps `step`
-     * out of the pipeline for a modifier entry — naming one is a request to move
-     * off the grid.
-     */
-    const dragOptions = useMemo(
-      () =>
-        mapModifier(dragSensitivity, (factor): InputEventOption => [
-          'raw',
-          step * factor,
-        ]),
-      [dragSensitivity, step],
-    )
+    // Only attached while it can do something: `createDrag` puts
+    // `touch-action: none` on the element, and a stepper that cannot be
+    // dragged has no reason to stop the page scrolling under a finger.
+    const enabled = drag !== null && !disabled && !readonly
 
-    /**
-     * Set once the drag has actually moved the value, so that the press-and-hold
-     * repeat of a stepper stands down and leaves the value to the drag. A ref,
-     * because it is read from inside the repeat rather than rendered.
-     */
-    const draggingRef = useRef(false)
-    /**
-     * Where the drag started, taken on the first move rather than on pointer
-     * down: the steppers act on pointer down, so by then the value may already
-     * have been nudged once, and the drag should carry on from there.
-     */
-    const originRef = useRef<{ y: number; value: number } | null>(null)
-    /**
-     * Which modifier the drag is currently counting at, and where the previous
-     * event was — a key produces no pointer event of its own, so a change is
-     * only seen on the next move and has to be dated back to the one before it.
-     */
-    const factorRef = useRef<number>(1)
-    const previousYRef = useRef(0)
+    // See useDrag for why the node is held in state rather than a ref.
+    const [node, setNode] = useState<HTMLDivElement | null>(null)
+    const instanceRef = useRef<StepperDragInstance | null>(null)
+    const latest = useRef({ value, changeValue })
+    const options = {
+      range: rawRange,
+      pixels: drag ?? 1,
+      sensitivity: dragSensitivity,
+      pointerLock,
+    }
+    const optionsRef = useRef(options)
 
-    const dragRefCallback = useDrag<HTMLDivElement>({
-      threshold: 1,
-      cursor: inactive ? undefined : 'ns-resize',
-      pointerLock: inactive ? false : pointerLock,
-      onDragStart: (state) => {
-        originRef.current = null
-        draggingRef.current = false
-        factorRef.current = selectModifier(dragSensitivity, state.event).value
-      },
-      onDrag: (_x, y, _dx, _dy, state) => {
-        if (inactive || drag === null) return
-        if (!originRef.current) {
-          originRef.current = { y, value }
-          previousYRef.current = y
-          return
-        }
+    // Runs after every render.
+    useEffect(() => {
+      latest.current = { value, changeValue }
+      optionsRef.current = options
+      instanceRef.current?.update(options)
+    })
 
-        // Pressing or releasing the key mid-drag must not move the value, so the
-        // travel so far is folded into the origin and measuring starts again
-        // from the previous event: that event's own distance belongs to the new
-        // sensitivity.
-        const factor = selectModifier(dragSensitivity, state.event).value
-        if (factor !== factorRef.current) {
-          originRef.current = { y: previousYRef.current, value }
-          factorRef.current = factor
-        }
-        previousYRef.current = y
+    useEffect(() => {
+      if (!node || !enabled) return
+      const instance = createStepperDrag(node, {
+        ...optionsRef.current,
+        getValue: () => latest.current.value,
+        onChange: (next) => latest.current.changeValue(next),
+      })
+      instanceRef.current = instance
+      return () => {
+        instanceRef.current = null
+        instance.destroy()
+      }
+    }, [node, enabled])
 
-        // Dragging up raises the value, as on a knob.
-        const steps = Math.round(-(y - originRef.current.y) / drag)
-        if (steps === 0) return
-        draggingRef.current = true
-        // The same pipeline the wheel and the arrow keys use. Counting from where
-        // the drag started keeps it from accumulating a rounding error.
-        changeValue(
-          applyDelta(
-            originRef.current.value,
-            steps,
-            dragOptions,
-            rawRange,
-            state.event,
-          ),
-        )
-      },
-      onDragEnd: () => {
-        draggingRef.current = false
-      },
-    })
+    const composedRef = useComposedRefs<HTMLDivElement>(forwardedRef, setNode)
 
-    const composedRef = useComposedRefs<HTMLDivElement>(
-      forwardedRef,
-      drag !== null && !inactive ? dragRefCallback : undefined,
+    const context = useMemo(
+      () => ({ moved: () => instanceRef.current?.moved() ?? false }),
+      [],
     )
 
-    const context = useMemo(() => ({ draggingRef }), [])
-
     return (
       <StepperProvider value={context}>
         <div ref={composedRef} className={className} style={style} {...props}>

package/src/components/NumberInput/StepperButton.tsx

@@ -1,18 +1,23 @@
-import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'
+import { ComponentPropsWithoutRef, ReactNode, CSSProperties } from 'react'
 
 import { useLongPress } from '../../hooks/useLongPress'
 
 import { useNumberInputContext, useStepperContext } from './context'
 
-export interface StepperButtonProps {
-  className?: string
-  style?: CSSProperties
-  /** Replaces the default arrow. Size it with the `--stepper-icon-size` variable. */
-  children?: ReactNode
+import type { CSSVariables } from '../../css-variables'
+
+/**
+ * `--stepper-icon-size` is read by the default arrow inside, and set on the
+ * button so that it inherits there.
+ */
+export type StepperButtonProps = Omit<
+  ComponentPropsWithoutRef<'div'>,
+  'style'
+> & {
+  style?: CSSProperties & CSSVariables<'stepper-icon-size'>
 }
 
-type Props = StepperButtonProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof StepperButtonProps>
+type Props = StepperButtonProps
 
 /**
  * Shared body of `IncrementStepper` and `DecrementStepper`: the two differ only
@@ -36,13 +41,12 @@ export function StepperButton({
     useNumberInputContext()
   const stepper = useStepperContext()
 
-  // Not memoized: the callback reads `draggingRef.current`, which the compiler
-  // cannot line up with a manual dependency list. `useLongPress` only ever
-  // calls it through a ref, so a fresh identity per render costs nothing.
+  // Not memoized: `useLongPress` only ever calls it through a ref, so a fresh
+  // identity per render costs nothing.
   const press = useLongPress(() => {
     // Once the pointer has actually travelled, the drag on `Stepper` owns the
     // value; repeating on top of it would move it twice.
-    if (stepper?.draggingRef.current) return
+    if (stepper?.moved()) return
     nudge(direction, ['raw', step])
   })
 

package/src/components/NumberInput/context.tsx

@@ -1,12 +1,11 @@
 import { createContext, RefObject, useContext } from 'react'
 
-import type {
-  InputEventOption,
-  ModifierState,
-  ModifierValue,
-  Scale,
-  ValueRange,
-} from '@tremolo-ui/functions'
+import {
+  type InputEventOption,
+  type ModifierState,
+  type ModifierValue,
+} from '@tremolo-ui/dom'
+import { type Scale, type ValueRange } from '@tremolo-ui/functions'
 
 export type NumberInputContextValue = {
   value: number
@@ -104,7 +103,8 @@ export function useNumberInputContext<T>(
 
 /** Set by `Stepper` once a drag has actually moved, so the steppers stand down. */
 export type StepperContextValue = {
-  draggingRef: RefObject<boolean>
+  /** Whether the drag in progress has moved the value. */
+  moved: () => boolean
 }
 
 const StepperContext =

package/src/components/NumberInput/index.tsx

@@ -1,6 +1,5 @@
 import {
   ComponentPropsWithoutRef,
-  CSSProperties,
   forwardRef,
   ReactNode,
   useCallback,
@@ -11,23 +10,23 @@ import {
 } from 'react'
 
 import {
-  applyDelta,
+  DEFAULT_DRAG_SENSITIVITY,
+  DEFAULT_KEYBOARD_OPTIONS,
+  DEFAULT_WHEEL_OPTIONS,
+  commitNumberInputText,
   InputEventOption,
   ModifierState,
   type ModifierValue,
-  linearScale,
-  selectInputEvent,
-  type Scale,
-  type ValueRange,
-} from '@tremolo-ui/functions'
+  numberInputBounds,
+  numberInputRanges,
+  nudgeNumberInput,
+  parseNumberText,
+  wheelDirection,
+} from '@tremolo-ui/dom'
+import { linearScale, type Scale } from '@tremolo-ui/functions'
 
 import { useCheckSteps } from '../../hooks/_internal/useCheckSteps'
 import { useWheel } from '../../hooks/useWheel'
-import {
-  DEFAULT_DRAG_SENSITIVITY,
-  DEFAULT_KEYBOARD_OPTIONS,
-  DEFAULT_WHEEL_OPTIONS,
-} from '../../input-event'
 
 import { NumberInputProvider } from './context'
 import { DecrementStepper } from './DecrementStepper'
@@ -86,6 +85,9 @@ export interface NumberInputProps {
    * Read a value back out of the text. Has to undo `format`.
    *
    * Text with no number in it reads as `NaN`, which leaves the value alone.
+   * The default, `parseNumberText` from `@tremolo-ui/dom`, reads the number
+   * with the unit around it left out, and is `NaN` for one it cannot read
+   * whole: `1,000`, `1:30`, or a number with a unit in front, such as `L 30`.
    */
   parse?: (text: string) => number
 
@@ -163,7 +165,7 @@ export interface NumberInputProps {
 
   /**
    * Select the text when `InputField` takes focus: `'all'` selects all of it,
-   * `'number'` only the leading number, leaving whatever the format appended,
+   * `'number'` only the number, leaving the unit the format put around it,
    * and `'none'` leaves the caret where the click put it.
    * @default 'none'
    */
@@ -219,8 +221,6 @@ export interface NumberInputProps {
    */
   readonly?: boolean
 
-  className?: string
-  style?: CSSProperties
   /**
    * Called with the new value. While the user types, it is called for every
    * entry that reads as a number, unclamped; committing the entry calls it
@@ -249,20 +249,8 @@ export interface NumberInputMethods {
   blur: () => void
 }
 
-/**
- * A number at the start of the text, and nothing read after it. A half-typed
- * entry still yields the number in front of it, but text with no number is
- * `NaN` rather than 0, so that "unreadable" and "the user typed 0" stay apart.
- */
-const LEADING_NUMBER = /^\s*([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?)/
-
 const defaultFormat = (value: number) => String(value)
 
-const defaultParse = (text: string) => {
-  const match = text.match(LEADING_NUMBER)
-  return match ? Number(match[1]) : NaN
-}
-
 type Props = NumberInputProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof NumberInputProps>
 
@@ -307,32 +295,15 @@ export const Root = /* @__PURE__ */ forwardRef<NumberInputMethods, Props>(
 
     // --- interpret props ---
     const format = formatProp ?? defaultFormat
-    const parse = parseProp ?? defaultParse
+    const parse = parseProp ?? parseNumberText
 
-    // Normalized input needs a finite span even when an end is unbounded or
-    // the caller opted out of clamping. Safe integers provide one without
-    // overflowing the span calculation used by a scale.
-    const range: ValueRange = useMemo(
-      () => ({
-        min: (clampValue ? min : undefined) ?? Number.MIN_SAFE_INTEGER,
-        max: (clampValue ? max : undefined) ?? Number.MAX_SAFE_INTEGER,
-        step,
-        scale,
-      }),
+    const { normalized: range, raw: rawRange } = useMemo(
+      () => numberInputRanges({ min, max, step, scale, clampValue }),
       [clampValue, min, max, step, scale],
     )
-
-    // Raw input does not need a finite span for normalization, so its open
-    // ends can cover every finite JavaScript number instead of stopping at the
-    // safe-integer range.
-    const rawRange: ValueRange = useMemo(
-      () => ({
-        min: (clampValue ? min : undefined) ?? -Number.MAX_VALUE,
-        max: (clampValue ? max : undefined) ?? Number.MAX_VALUE,
-        step,
-        scale,
-      }),
-      [clampValue, min, max, step, scale],
+    const ranges = useMemo(
+      () => ({ normalized: range, raw: rawRange }),
+      [range, rawRange],
     )
 
     // The pipeline range stands in the safe-integer range when an end is
@@ -356,9 +327,9 @@ export const Root = /* @__PURE__ */ forwardRef<NumberInputMethods, Props>(
 
     const text = draft ?? format(value)
     const editing = draft !== null
-    const outOfRange =
-      !editing &&
-      ((min !== undefined && value < min) || (max !== undefined && value > max))
+    const bounds = numberInputBounds(value, { min, max, clampValue })
+    const { atMin, atMax } = bounds
+    const outOfRange = !editing && bounds.outOfRange
 
     // --- internal functions ---
     const handleDraft = useCallback(
@@ -384,18 +355,15 @@ export const Root = /* @__PURE__ */ forwardRef<NumberInputMethods, Props>(
 
     const commitDraft = useCallback(() => {
       if (draft === null || inactive) return
-      const parsed = parse(draft)
+      const committed = commitNumberInputText(draft, parse, {
+        min,
+        max,
+        clampValue,
+      })
       // Text with no number in it is not a value. Dropping the draft puts the
-      // input back to what it was showing, rather than committing a zero the
-      // user never typed.
-      if (!Number.isFinite(parsed)) {
-        setDraft(null)
-        return
-      }
-      let committed = parsed
-      if (clampValue && min !== undefined) committed = Math.max(committed, min)
-      if (clampValue && max !== undefined) committed = Math.min(committed, max)
-      changeValue(committed)
+      // input back to what it was showing.
+      if (committed === null) setDraft(null)
+      else changeValue(committed)
     }, [draft, inactive, parse, clampValue, min, max, changeValue])
 
     const nudge = useCallback(
@@ -404,26 +372,20 @@ export const Root = /* @__PURE__ */ forwardRef<NumberInputMethods, Props>(
         option: ModifierValue<InputEventOption>,
         modifiers?: ModifierState,
       ) => {
-        const [mode] = selectInputEvent(option, modifiers).option
         changeValue(
-          applyDelta(
-            value,
-            direction,
-            option,
-            mode === 'raw' ? rawRange : range,
-            modifiers,
-          ),
+          nudgeNumberInput(value, direction, option, ranges, modifiers),
         )
       },
-      [changeValue, value, rawRange, range],
+      [changeValue, value, ranges],
     )
 
     // --- hooks ---
     const wheelRefCallback = useWheel<HTMLDivElement>(
       (event) => {
-        if (!wheel || inactive || event.deltaY === 0) return
+        const direction = wheelDirection(event)
+        if (!wheel || inactive || direction === null) return
         event.preventDefault()
-        nudge(-Math.sign(event.deltaY), wheel, event)
+        nudge(direction, wheel, event)
       },
       { requireFocus: true },
     )
@@ -450,8 +412,8 @@ export const Root = /* @__PURE__ */ forwardRef<NumberInputMethods, Props>(
         unformatOnFocus,
         keepCaretOnStep,
         blurOnEnter,
-        atMin: clampValue && min !== undefined && value <= min,
-        atMax: clampValue && max !== undefined && value >= max,
+        atMin,
+        atMax,
         drag,
         format,
         parse,
@@ -476,6 +438,8 @@ export const Root = /* @__PURE__ */ forwardRef<NumberInputMethods, Props>(
         text,
         editing,
         outOfRange,
+        atMin,
+        atMax,
         drag,
         dragSensitivity,
         pointerLock,
@@ -532,7 +496,3 @@ export const NumberInput = {
 }
 
 export { useNumberInputContext, type NumberInputContextValue } from './context'
-export { type NumberInputInputFieldProps } from './InputField'
-export { type NumberInputStepperProps } from './Stepper'
-export { type NumberInputIncrementStepperProps } from './IncrementStepper'
-export { type NumberInputDecrementStepperProps } from './DecrementStepper'