@tremolo-ui/react 0.4.0 → 0.6.0

package/src/components/NumberInput/InputField.tsx

@@ -0,0 +1,206 @@
+import {
+  ComponentPropsWithoutRef,
+  CSSProperties,
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
+
+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 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 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()
+          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,25 +1,154 @@
-import clsx from 'clsx'
-import { ComponentPropsWithoutRef, ReactNode } from 'react'
+import {
+  ComponentPropsWithoutRef,
+  CSSProperties,
+  forwardRef,
+  ReactNode,
+  useMemo,
+  useRef,
+} from 'react'
 
-export interface StepperProps {
-  /** Display only when hovering. */
-  dynamic?: boolean
+import {
+  applyDelta,
+  mapModifier,
+  selectModifier,
+  type InputEventOption,
+} from '@tremolo-ui/functions'
+
+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
 }
 
-export function Stepper({
-  dynamic = true,
-  children,
-  className,
-  ...props
-}: StepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof StepperProps>) {
-  return (
-    <div
-      className={clsx('tremolo-number-input-stepper', className)}
-      data-dynamic={dynamic}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
+type Props = NumberInputStepperProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof NumberInputStepperProps>
+
+/**
+ * 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.
+ *
+ * The drag lives here rather than on `InputField` because `createDrag` turns
+ * off text selection on whatever element it is attached to.
+ */
+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
+        }
+
+        // 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
+
+        // 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,
+      drag !== null && !inactive ? dragRefCallback : undefined,
+    )
+
+    const context = useMemo(() => ({ draggingRef }), [])
+
+    return (
+      <StepperProvider value={context}>
+        <div ref={composedRef} className={className} style={style} {...props}>
+          {children}
+        </div>
+      </StepperProvider>
+    )
+  },
+)

package/src/components/NumberInput/StepperButton.tsx

@@ -0,0 +1,95 @@
+import { ComponentPropsWithoutRef, CSSProperties, ReactNode } 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
+}
+
+type Props = StepperButtonProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof 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>
+  )
+}