@tremolo-ui/react 0.5.0 → 0.7.0

package/src/components/NumberInput/InputField.tsx

@@ -1,123 +1,200 @@
-import clsx from 'clsx'
-import { ComponentPropsWithoutRef, CSSProperties, Ref } from 'react'
+import {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
 
-import { useComposedRefs } from '../_util/composeRefs'
+import { useComposedRefs } from '../../compose-refs'
 
 import { useNumberInputContext } from './context'
 
-export interface NumberInputFieldProps {
-  /**
-   * Select the text when the input takes focus. `'number'` selects the leading
-   * number, leaving whatever the format appended to it.
-   * @default 'none'
-   */
-  selectOnFocus?: 'all' | 'number' | 'none'
-  /**
-   * Commit and leave the input when Enter is pressed. Enter commits either way.
-   * @default true
-   */
-  blurOnEnter?: boolean
-
-  className?: string
-  style?: CSSProperties
-  ref?: Ref<HTMLInputElement>
-}
+// The value belongs to `NumberInput.Root`, and the field is always text.
+type Props = Omit<
+  ComponentPropsWithoutRef<'input'>,
+  '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 text field of a `NumberInput`, and the only place the value can be typed.
  *
  * While the user types, their own text stands rather than `format(value)`, so
  * that a half-finished entry is not rewritten under the caret.
+ *
+ * How it behaves on focus, Enter and the arrow keys is set on `Root`
+ * (`selectOnFocus`, `unformatOnFocus`, `keepCaretOnStep`, `blurOnEnter`).
  */
-export function InputField({
-  selectOnFocus = 'none',
-  blurOnEnter = true,
-  className,
-  style,
-  ref,
-  onFocus,
-  onBlur,
-  onKeyDown,
-  ...props
-}: NumberInputFieldProps &
-  Omit<
-    ComponentPropsWithoutRef<'input'>,
-    keyof NumberInputFieldProps | 'type' | 'value' | 'defaultValue'
-  >) {
-  const {
-    value,
-    min,
-    max,
-    step,
-    disabled,
-    readonly,
-    keyboard,
-    text,
-    outOfRange,
-    setDraft,
-    commitDraft,
-    nudge,
-    inputRef,
-  } = useNumberInputContext()
-
-  const composedRef = useComposedRefs<HTMLInputElement>(ref, inputRef)
-
-  return (
-    <input
-      ref={composedRef}
-      className={clsx('tremolo-number-input-field', className)}
-      // Not type="number": that brings native spinners and a value the browser
-      // parses itself, neither of which survives a unit suffix.
-      type="text"
-      inputMode="decimal"
-      role="spinbutton"
-      value={text}
-      readOnly={readonly}
-      aria-disabled={disabled}
-      aria-readonly={readonly}
-      aria-valuenow={value}
-      aria-valuemin={min}
-      aria-valuemax={max}
-      aria-valuetext={text}
-      step={step}
-      data-out-of-range={outOfRange}
-      style={style}
-      onChange={(event) => setDraft(event.currentTarget.value)}
-      onFocus={(event) => {
-        const input = event.currentTarget
-        if (selectOnFocus == 'all') {
-          input.setSelectionRange(0, input.value.length)
-        } else if (selectOnFocus == 'number') {
-          input.setSelectionRange(
-            0,
-            input.value.match(NUMBER_PREFIX)?.[0].length ?? 0,
-          )
-        }
-        onFocus?.(event)
-      }}
-      onBlur={(event) => {
-        commitDraft()
-        onBlur?.(event)
-      }}
-      onKeyDown={(event) => {
-        const key = event.key
-        if (key == 'Enter') {
+export const InputField = /* @__PURE__ */ forwardRef<HTMLInputElement, Props>(
+  function InputField(
+    { className, style, onFocus, onBlur, onKeyDown, ...props },
+    forwardedRef,
+  ) {
+    const {
+      value,
+      min,
+      max,
+      step,
+      disabled,
+      readonly,
+      keyboard,
+      selectOnFocus,
+      unformatOnFocus,
+      keepCaretOnStep,
+      blurOnEnter,
+      text,
+      editing,
+      outOfRange,
+      setDraft,
+      commitDraft,
+      nudge,
+      inputRef,
+    } = useNumberInputContext()
+
+    const [focused, setFocused] = useState(false)
+
+    // Only until the first keystroke: from then on the draft is the user's own
+    // text and stands on its own, formatted or not.
+    const shown = unformatOnFocus && focused && !editing ? String(value) : text
+
+    // Selecting has to wait for that swap. Called from the focus handler it
+    // would run against the formatted text still in the input and cover the
+    // wrong characters.
+    useEffect(() => {
+      if (!focused || selectOnFocus === 'none') return
+      const input = inputRef.current
+      if (!input) return
+      if (selectOnFocus === 'all') {
+        input.setSelectionRange(0, input.value.length)
+      } else {
+        input.setSelectionRange(
+          0,
+          input.value.match(NUMBER_PREFIX)?.[0].length ?? 0,
+        )
+      }
+      // Deliberately not re-run as the text changes: that would drag the
+      // selection back over what the user is typing.
+    }, [focused, selectOnFocus, inputRef])
+
+    /**
+     * Where to put the caret once the stepped value has been rendered, and the
+     * text it was measured against.
+     */
+    const caretAfterStep = useRef<{ offset: number; from: string } | null>(null)
+
+    // A layout effect rather than a plain one: the caret is moved before the
+    // browser paints, so it is never seen at the end of the text first.
+    useLayoutEffect(() => {
+      const pending = caretAfterStep.current
+      if (!pending) return
+      caretAfterStep.current = null
+
+      const input = inputRef.current
+      // The step may have been clamped away, leaving the text as it was. The
+      // 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)))
+      input.setSelectionRange(caret, caret)
+    })
+
+    const composedRef = useComposedRefs<HTMLInputElement>(
+      forwardedRef,
+      inputRef,
+    )
+
+    return (
+      <input
+        ref={composedRef}
+        className={className}
+        // Not type="number": that brings native spinners and a value the browser
+        // parses itself, neither of which survives a unit suffix.
+        type="text"
+        inputMode="decimal"
+        role="spinbutton"
+        value={shown}
+        disabled={disabled}
+        readOnly={readonly}
+        aria-disabled={disabled}
+        aria-readonly={readonly}
+        data-disabled={disabled ? '' : undefined}
+        data-readonly={readonly ? '' : undefined}
+        aria-valuenow={value}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        // The formatted text, even while the field shows the plain number: it is
+        // the one that says what the value means.
+        aria-valuetext={text}
+        step={step}
+        data-out-of-range={outOfRange ? '' : undefined}
+        style={style}
+        onChange={(event) => {
+          // The text is the user's own now, so a caret measured against the
+          // stepped one no longer means anything.
+          caretAfterStep.current = null
+          setDraft(event.currentTarget.value)
+        }}
+        onFocus={(event) => {
+          setFocused(true)
+          onFocus?.(event)
+        }}
+        onBlur={(event) => {
+          setFocused(false)
+          // Nothing was typed, so there is no draft and this returns at once —
+          // taking focus and leaving again never commits anything.
           commitDraft()
-          if (blurOnEnter) event.currentTarget.blur()
-        } else if (
-          keyboard &&
-          !readonly &&
-          (key == 'ArrowUp' || key == 'ArrowDown')
-        ) {
-          event.preventDefault()
-          nudge(key == 'ArrowUp' ? 1 : -1, keyboard)
-        }
-        onKeyDown?.(event)
-      }}
-      {...props}
-    />
-  )
-}
+          onBlur?.(event)
+        }}
+        onKeyDown={(event) => {
+          const key = event.key
+          if (key === 'Enter') {
+            commitDraft()
+            if (blurOnEnter) event.currentTarget.blur()
+          } else if (
+            keyboard &&
+            !disabled &&
+            !readonly &&
+            (key === 'ArrowUp' || key === 'ArrowDown') &&
+            // Arrow keys pick a candidate while an IME is converting. Stepping
+            // the value there would fight the conversion, and moving the caret
+            // would break it outright.
+            !event.nativeEvent.isComposing
+          ) {
+            event.preventDefault()
+            const input = event.currentTarget
+            if (keepCaretOnStep && input.selectionStart !== null) {
+              caretAfterStep.current = {
+                offset: input.selectionStart - decimalAnchor(input.value),
+                from: input.value,
+              }
+            }
+            nudge(key === 'ArrowUp' ? 1 : -1, keyboard, event)
+          }
+          onKeyDown?.(event)
+        }}
+        {...props}
+      />
+    )
+  },
+)

package/src/components/NumberInput/Stepper.tsx

@@ -1,27 +1,18 @@
-import clsx from 'clsx'
-import {
-  ComponentPropsWithoutRef,
-  CSSProperties,
-  ReactNode,
-  Ref,
-  useMemo,
-  useRef,
-} from 'react'
+import { ComponentPropsWithoutRef, forwardRef, useMemo, useRef } from 'react'
 
-import { applyDelta } from '@tremolo-ui/functions'
+import {
+  applyDelta,
+  type InputEventOption,
+  mapModifier,
+  selectModifier,
+} from '@tremolo-ui/dom'
 
+import { useComposedRefs } from '../../compose-refs'
 import { useDrag } from '../../hooks/useDrag'
-import { useComposedRefs } from '../_util/composeRefs'
 
 import { StepperProvider, useNumberInputContext } from './context'
 
-export interface StepperProps {
-  className?: string
-  style?: CSSProperties
-  /** `<NumberInput.IncrementStepper />` and `<NumberInput.DecrementStepper />` go here. */
-  children?: ReactNode
-  ref?: Ref<HTMLDivElement>
-}
+type Props = ComponentPropsWithoutRef<'div'>
 
 /**
  * The area the steppers sit in, and a drag handle in its own right: dragging it
@@ -30,74 +21,119 @@ export interface StepperProps {
  * The drag lives here rather than on `InputField` because `createDrag` turns
  * off text selection on whatever element it is attached to.
  */
-export function Stepper({
-  className,
-  style,
-  children,
-  ref,
-  ...props
-}: StepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof StepperProps>) {
-  const { value, step, readonly, drag, range, changeValue } =
-    useNumberInputContext()
+export const Stepper = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
+  function Stepper({ className, style, children, ...props }, forwardedRef) {
+    const {
+      value,
+      step,
+      disabled,
+      readonly,
+      drag,
+      dragSensitivity,
+      pointerLock,
+      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],
+    )
+
+    /**
+     * 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)
+
+    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
+        }
 
-  /**
-   * 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)
+        // 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
 
-  const dragRefCallback = useDrag<HTMLDivElement>({
-    threshold: 1,
-    cursor: readonly ? undefined : 'ns-resize',
-    onDragStart: () => {
-      originRef.current = null
-      draggingRef.current = false
-    },
-    onDrag: (_x, y) => {
-      if (readonly || drag == null) return
-      if (!originRef.current) {
-        originRef.current = { y, value }
-        return
-      }
-      // 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, ['raw', step], range),
-      )
-    },
-    onDragEnd: () => {
-      draggingRef.current = false
-    },
-  })
+        // 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>(
-    ref,
-    drag != null && !readonly ? dragRefCallback : undefined,
-  )
+    const composedRef = useComposedRefs<HTMLDivElement>(
+      forwardedRef,
+      drag !== null && !inactive ? dragRefCallback : undefined,
+    )
 
-  const context = useMemo(() => ({ draggingRef }), [])
+    const context = useMemo(() => ({ draggingRef }), [])
 
-  return (
-    <StepperProvider value={context}>
-      <div
-        ref={composedRef}
-        className={clsx('tremolo-number-input-stepper', className)}
-        style={style}
-        {...props}
-      >
-        {children}
-      </div>
-    </StepperProvider>
-  )
-}
+    return (
+      <StepperProvider value={context}>
+        <div ref={composedRef} className={className} style={style} {...props}>
+          {children}
+        </div>
+      </StepperProvider>
+    )
+  },
+)

package/src/components/NumberInput/StepperButton.tsx

@@ -0,0 +1,100 @@
+import { ComponentPropsWithoutRef, ReactNode, CSSProperties } from 'react'
+
+import { useLongPress } from '../../hooks/useLongPress'
+
+import { useNumberInputContext, useStepperContext } from './context'
+
+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
+
+/**
+ * Shared body of `IncrementStepper` and `DecrementStepper`: the two differ only
+ * in which way they move the value and which arrow they draw.
+ */
+export function StepperButton({
+  direction,
+  variant,
+  icon,
+  className,
+  style,
+  children,
+  onPointerDown,
+  ...props
+}: Props & {
+  direction: 1 | -1
+  variant: 'increment' | 'decrement'
+  icon: ReactNode
+}) {
+  const { step, disabled, readonly, atMin, atMax, nudge } =
+    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.
+  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
+    nudge(direction, ['raw', step])
+  })
+
+  return (
+    <div
+      className={className}
+      role="button"
+      tabIndex={-1}
+      // A bare arrow has no accessible name of its own. Overridable, since a
+      // caller may need it in their own language.
+      aria-label={direction > 0 ? 'Increment' : 'Decrement'}
+      aria-disabled={disabled || (direction > 0 ? atMax : atMin)}
+      // `role="button"` does not take aria-readonly, so the state reaches the
+      // styles through the data attribute alone.
+      data-disabled={
+        disabled || (direction > 0 ? atMax : atMin) ? '' : undefined
+      }
+      data-readonly={readonly ? '' : undefined}
+      style={style}
+      onPointerDown={(event) => {
+        if (!disabled && !readonly) press(event)
+        onPointerDown?.(event)
+      }}
+      {...props}
+    >
+      {children ?? icon}
+    </div>
+  )
+}
+
+export function StepperArrow({ up }: { up: boolean }) {
+  return (
+    <svg
+      // The arrow the component draws when no children are given, so it sizes
+      // itself rather than asking a stylesheet to.
+      style={{
+        width: 'var(--stepper-icon-size)',
+        height: 'var(--stepper-icon-size)',
+      }}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points={up ? '18 15 12 9 6 15' : '6 9 12 15 18 9'} />
+    </svg>
+  )
+}