@tremolo-ui/react 0.2.0 → 0.2.1

package/src/components/XYPad/Area.tsx

@@ -1,7 +1,6 @@
 import clsx from 'clsx'
 import { ComponentPropsWithoutRef, CSSProperties, ReactElement } from 'react'
 
-/** @category XYPad */
 export interface XYPadAreaProps {
   width?: number | string
   height?: number | string
@@ -14,7 +13,6 @@ export interface XYPadAreaProps {
   __thumb?: ReactElement
 }
 
-/** @category XYPad */
 export function Area({
   width = 120,
   height = 120,

package/src/components/XYPad/Thumb.tsx

@@ -8,7 +8,6 @@ import {
   useRef,
 } from 'react'
 
-/** @category XYPad */
 export interface XYPadThumbProps {
   size?: number | string
   width?: number | string
@@ -29,7 +28,6 @@ export interface XYPadThumbProps {
   __css?: CSSProperties
 }
 
-/** @category XYPad */
 export interface XYPadThumbMethods {
   focus: () => void
   blur: () => void
@@ -38,7 +36,6 @@ export interface XYPadThumbMethods {
 type Props = XYPadThumbProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadThumbProps>
 
-/** @category XYPad */
 export const Thumb = forwardRef<XYPadThumbMethods, Props>(
   (
     {

package/src/components/XYPad/index.tsx

@@ -3,6 +3,7 @@ import React, {
   ComponentPropsWithoutRef,
   forwardRef,
   ReactElement,
+  Ref,
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -21,14 +22,33 @@ import {
 
 import { useDragWithElement } from '../../hooks/useDragWithElement'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import { addNoSelect, removeNoSelect } from '../_util'
+import {
+  addUserSelectNone,
+  Cursor,
+  removeUserSelectNone,
+  resetCursorStyle,
+  setCursorStyle,
+} from '../_util'
+import { composeRefs } from '../_util/composeRefs'
 
 import { Area, XYPadAreaProps } from './Area'
 import { Thumb, XYPadThumbMethods, XYPadThumbProps } from './Thumb'
 
+const defaultValueOptions = {
+  skew: 1,
+  step: 1,
+  reverse: false,
+  wheel: ['raw', 1] as InputEventOption,
+  keyboard: ['raw', 1] as InputEventOption,
+}
+
+const defaultExternalStyles: XYPadProps['externalStyles'] = {
+  userSelectNone: true,
+  cursor: 'pointer',
+}
+
 /**
  * Two-dimensional slider component.
- * @category XYPad
  */
 export interface ValueOptions {
   // required
@@ -50,14 +70,18 @@ export interface ValueOptions {
   keyboard?: InputEventOption | null
 }
 
-/** @category XYPad */
 export interface XYPadProps {
   x: ValueOptions
   y: ValueOptions
 
-  bodyNoSelect?: boolean
+  externalStyles?: {
+    userSelectNone?: boolean
+    cursor?: Cursor
+  }
+
   disabled?: boolean
   readonly?: boolean
+
   onChange?: (valueX: number, valueY: number) => void
   onDragStart?: (valueX: number, valueY: number) => void
   onDragEnd?: (valueX: number, valueY: number) => void
@@ -65,31 +89,23 @@ export interface XYPadProps {
   children?: ReactElement | ReactElement[]
 }
 
-/** @category XYPad */
 export interface XYPadMethods {
   focus: () => void
   blur: () => void
-}
-
-const defaultValueOptions = {
-  skew: 1,
-  step: 1,
-  reverse: false,
-  wheel: ['raw', 1] as InputEventOption,
-  keyboard: ['raw', 1] as InputEventOption,
+  original: Ref<HTMLDivElement>
 }
 
 type Props = XYPadProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadProps>
 
-export const XYPadImpl = forwardRef<XYPadMethods, Props>(
+export const Root = forwardRef<XYPadMethods, Props>(
   (
     {
       x: _x,
       y: _y,
       className,
       style,
-      bodyNoSelect = true,
+      externalStyles: _externalStyles,
       disabled = false,
       readonly = false,
       onChange,
@@ -112,10 +128,13 @@ export const XYPadImpl = forwardRef<XYPadMethods, Props>(
     }, [_y])
 
     // -- state and ref ---
+    const rootRef = useRef<HTMLDivElement>(null)
     const areaElementRef = useRef<HTMLDivElement>(null)
     const thumbRef = useRef<XYPadThumbMethods>(null)
 
     // --- interpret props ---
+    const externalStyles = { ...defaultExternalStyles, ..._externalStyles }
+
     const nx = normalizeValue(x.value, x.min, x.max, x.skew)
     const ny = normalizeValue(y.value, y.min, y.max, y.skew)
     const percentX = toFixed((x.reverse ? 1 - nx : nx) * 100)
@@ -212,14 +231,18 @@ export const XYPadImpl = forwardRef<XYPadMethods, Props>(
     )
 
     // --- hooks ---
-    const [touchMoveRefCallback, pointerDownHandler] =
+    const { refHandler: touchMoveRefCallback, pointerDownHandler } =
       useDragWithElement<HTMLDivElement>({
         baseElementRef: areaElementRef,
         onDrag: onDrag,
         onDragStart: (nx, ny) => {
           if (readonly) return
-          if (bodyNoSelect) addNoSelect()
+
+          if (externalStyles.userSelectNone) addUserSelectNone()
+          if (externalStyles.cursor) setCursorStyle(externalStyles.cursor)
+
           thumbRef.current?.focus()
+
           const valueX = clamp(
             stepValue(rawValue(nx, x.min, x.max, x.skew), x.step),
             x.min,
@@ -230,11 +253,17 @@ export const XYPadImpl = forwardRef<XYPadMethods, Props>(
             y.min,
             y.max,
           )
+
+          // TODO: ドラッグせず、pointer downだけの場合でも、onChange を発火させるべき
+          // onChange()
           onDragStart?.(valueX, valueY)
         },
         onDragEnd: (nx, ny) => {
           if (readonly) return
-          if (bodyNoSelect) removeNoSelect()
+
+          if (externalStyles.userSelectNone) removeUserSelectNone()
+          if (externalStyles.cursor) resetCursorStyle()
+
           const valueX = clamp(
             stepValue(rawValue(nx, x.min, x.max, x.skew), x.step),
             x.min,
@@ -280,6 +309,7 @@ export const XYPadImpl = forwardRef<XYPadMethods, Props>(
         blur() {
           thumbRef.current?.blur()
         },
+        original: rootRef,
       }
     }, [])
 
@@ -287,10 +317,7 @@ export const XYPadImpl = forwardRef<XYPadMethods, Props>(
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
         className={clsx('tremolo-xy-pad', className)}
-        ref={(div) => {
-          wheelRefCallback(div)
-          touchMoveRefCallback(div)
-        }}
+        ref={composeRefs(rootRef, wheelRefCallback, touchMoveRefCallback)}
         tabIndex={-1}
         aria-disabled={disabled}
         aria-readonly={readonly}
@@ -342,12 +369,12 @@ export const XYPadImpl = forwardRef<XYPadMethods, Props>(
 
 /**
  * Simple XYPad
- * @category XYPad
  */
-export const XYPad = Object.assign(XYPadImpl, {
+export const XYPad = {
+  Root,
   Thumb,
   Area,
-})
+}
 
 export { type XYPadThumbProps, type XYPadThumbMethods } from './Thumb'
 export { type XYPadAreaProps } from './Area'

package/src/components/_util/composeRefs.tsx

@@ -0,0 +1,63 @@
+// ref:
+// https://github.com/radix-ui/primitives/blob/2bab24a811e45c7a83198659272097f6cfa5a165/packages/react/compose-refs/src/compose-refs.tsx
+
+import { useCallback } from 'react'
+
+type PossibleRef<T> = React.Ref<T> | undefined
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === 'function') {
+    return ref(value)
+  } else if (ref !== null && ref !== undefined) {
+    ref.current = value
+  }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  return (node) => {
+    let hasCleanup = false
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node)
+      if (!hasCleanup && typeof cleanup == 'function') {
+        hasCleanup = true
+      }
+      return cleanup
+    })
+
+    // React <19 will log an error to the console if a callback ref returns a
+    // value. We don't use ref cleanups internally so this will only happen if a
+    // user's ref callback returns a value, which we only expect if they are
+    // using the cleanup functionality added in React 19.
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i]
+          if (typeof cleanup == 'function') {
+            cleanup()
+          } else {
+            setRef(refs[i], null)
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(composeRefs(...refs), refs)
+}
+
+export { composeRefs, useComposedRefs }

package/src/components/_util/index.ts

@@ -1,11 +1,28 @@
-export function addNoSelect() {
-  document.body.classList.add('tremolo-no-select')
+export function addUserSelectNone() {
+  window.document.body.classList.add('tremolo-user-select-none')
 }
 
-export function removeNoSelect() {
-  document.body.classList.remove('tremolo-no-select')
+export function removeUserSelectNone() {
+  window.document.body.classList.remove('tremolo-user-select-none')
 }
 
-export function toggleNoSelect() {
-  document.body.classList.toggle('tremolo-no-select')
+const cursorStyles = {
+  grabbing: 'tremolo-cursor-grabbing',
+  grab: 'tremolo-cursor-grab',
+  pointer: 'tremolo-cursor-pointer',
+  move: 'tremolo-cursor-move',
+  none: 'tremolo-cursor-none',
+}
+
+export type Cursor = keyof typeof cursorStyles
+
+export function setCursorStyle(type: Cursor) {
+  resetCursorStyle()
+  window.document.body.classList.add(cursorStyles[type])
+}
+
+export function resetCursorStyle() {
+  Object.values(cursorStyles).forEach((s) => {
+    window.document.body.classList.remove(s)
+  })
 }

package/src/components/_util/type.ts

@@ -0,0 +1 @@
+export type Override<T, U> = T & Omit<U, keyof T>

package/src/hooks/useAnimationFrame.ts

@@ -1,8 +1,5 @@
 import { DependencyList, useCallback, useEffect, useRef } from 'react'
 
-/**
- * @category hooks
- */
 export function useAnimationFrame(
   callback = () => {},
   deps: DependencyList = [],

package/src/hooks/useCallbackRef.ts

@@ -1,4 +1,4 @@
-import { useCallback, useInsertionEffect, useRef } from 'react'
+import { DependencyList, useCallback, useInsertionEffect, useRef } from 'react'
 
 /**
  * Internal
@@ -6,7 +6,7 @@ import { useCallback, useInsertionEffect, useRef } from 'react'
  */
 export function useCallbackRef<Args extends unknown[], Return>(
   callback: ((...args: Args) => Return) | undefined,
-  deps: React.DependencyList = [],
+  deps: DependencyList = [],
 ) {
   const callbackRef = useRef<typeof callback>(() => {
     throw new Error('Cannot call an event handler while rendering.')

package/src/hooks/useDrag.ts

@@ -6,17 +6,16 @@ import { useRefCallbackEvent } from './useRefCallbackEvent'
 interface UseDragProps {
   threshold?: number
 
-  onDrag: (x: number, y: number, deltaX: number, deltaY: number) => void
+  onDrag?: (x: number, y: number, deltaX: number, deltaY: number) => void
   onDragStart?: () => void
   onDragEnd?: () => void
 }
 
 /**
- * @category hooks
  * @returns [refCallback, pointerDownHandler]
  */
 export function useDrag<T extends Element>({
-  threshold = 1,
+  threshold: _threshold = 1,
   onDrag,
   onDragStart,
   onDragEnd,
@@ -29,6 +28,8 @@ export function useDrag<T extends Element>({
   const dragStartX = useRef(0)
   const dragStartY = useRef(0)
 
+  const threshold = Math.max(_threshold, 1)
+
   const handleDrag = useCallback(
     (
       event: MouseEvent | React.MouseEvent<T, MouseEvent> | TouchEvent,
@@ -53,7 +54,7 @@ export function useDrag<T extends Element>({
         dragOffsetY.current = screenY
       }
       if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return
-      onDrag(
+      onDrag?.(
         screenX - dragStartX.current,
         screenY - dragStartY.current,
         deltaX,
@@ -63,13 +64,6 @@ export function useDrag<T extends Element>({
     [threshold, onDrag],
   )
 
-  const refHandler = useRefCallbackEvent(
-    'touchmove',
-    handleDrag,
-    { passive: false },
-    [onDrag],
-  )
-
   const pointerDownHandler = useCallback(
     (event: React.PointerEvent<T>) => {
       dragOffsetX.current = event.screenX
@@ -80,6 +74,13 @@ export function useDrag<T extends Element>({
     [handleDrag, onDragStart],
   )
 
+  const refHandler = useRefCallbackEvent(
+    'touchmove',
+    handleDrag,
+    { passive: false },
+    [onDrag],
+  )
+
   useEventListener(globalThis.window, 'mousemove', handleDrag)
 
   useEventListener(globalThis.window, 'pointerup', () => {

package/src/hooks/useDragWithElement.ts

@@ -1,37 +1,30 @@
-import { useRef, useCallback, RefObject } from 'react'
+import { useRef, useCallback, RefObject, useState } from 'react'
 
 import { normalizeValue } from '@tremolo-ui/functions'
 
 import { useEventListener } from './useEventListener'
 import { useRefCallbackEvent } from './useRefCallbackEvent'
 
-interface UseDragWithElementProps<T extends Element> {
+interface UseDragWithElement<T extends Element> {
   baseElementRef: RefObject<T | null>
   onDrag: (normalizedX: number, normalizedY: number) => void
   onDragStart?: (normalizedX: number, normalizedY: number) => void
   onDragEnd?: (normalizedX: number, normalizedY: number) => void
 }
 
-/**
- * @category hooks
- * @returns [refCallback, pointerDownHandler]
- */
 export function useDragWithElement<T extends Element>({
   baseElementRef,
   onDrag,
   onDragStart,
   onDragEnd,
-}: UseDragWithElementProps<T>): [
-  (div: EventTarget | null) => void,
-  (event: React.PointerEvent<T>) => void,
-] {
-  const dragged = useRef(false)
+}: UseDragWithElement<T>) {
+  const [dragging, setDragging] = useState(false)
   const normalizedX = useRef(0)
   const normalizedY = useRef(0)
 
   const handleDrag = useCallback(
     (event: MouseEvent | React.PointerEvent<T> | TouchEvent) => {
-      if (!baseElementRef.current || !dragged.current) {
+      if (!baseElementRef.current || !dragging) {
         return
       }
       const isTouch = event instanceof TouchEvent
@@ -46,7 +39,7 @@ export function useDragWithElement<T extends Element>({
       normalizedY.current = ny
       onDrag(nx, ny)
     },
-    [onDrag, baseElementRef],
+    [onDrag, baseElementRef, dragging],
   )
 
   const refHandler = useRefCallbackEvent(
@@ -58,7 +51,8 @@ export function useDragWithElement<T extends Element>({
 
   const pointerDownHandler = useCallback(
     (event: React.PointerEvent<T>) => {
-      dragged.current = true
+      // dragging.current = true
+      setDragging(true)
       handleDrag(event)
       onDragStart?.(normalizedX.current, normalizedY.current)
     },
@@ -68,10 +62,11 @@ export function useDragWithElement<T extends Element>({
   useEventListener(globalThis.window, 'pointermove', handleDrag)
 
   useEventListener(globalThis.window, 'pointerup', () => {
-    if (!dragged.current) return
-    dragged.current = false
+    if (!dragging) return
+    // dragging.current = false
+    setDragging(false)
     onDragEnd?.(normalizedX.current, normalizedY.current)
   })
 
-  return [refHandler, pointerDownHandler]
+  return { refHandler, pointerDownHandler, dragging }
 }

package/src/hooks/useEventListener.ts

@@ -5,31 +5,28 @@ import { useCallbackRef } from './useCallbackRef'
 type Target = EventTarget | null | (() => EventTarget | null)
 type Options = boolean | AddEventListenerOptions
 
-/**
- * @category hooks
- */
 export function useEventListener<K extends keyof DocumentEventMap>(
   target: Target,
   event: K,
-  handler?: (event: DocumentEventMap[K]) => void,
+  handler: (event: DocumentEventMap[K]) => void,
   options?: Options,
 ): VoidFunction
 export function useEventListener<K extends keyof WindowEventMap>(
   target: Target,
   event: K,
-  handler?: (event: WindowEventMap[K]) => void,
+  handler: (event: WindowEventMap[K]) => void,
   options?: Options,
 ): VoidFunction
 export function useEventListener<K extends keyof GlobalEventHandlersEventMap>(
   target: Target,
   event: K,
-  handler?: (event: GlobalEventHandlersEventMap[K]) => void,
+  handler: (event: GlobalEventHandlersEventMap[K]) => void,
   options?: Options,
 ): VoidFunction
 export function useEventListener(
   target: Target,
   event: string,
-  handler: ((event: Event) => void) | undefined,
+  handler: (event: Event) => void,
   options?: Options,
 ) {
   const listener = useCallbackRef(handler)
@@ -37,13 +34,13 @@ export function useEventListener(
   useEffect(() => {
     const node = typeof target === 'function' ? target() : (target ?? document)
 
-    if (!handler || !node) return
+    if (!node) return
 
     node.addEventListener(event, listener, options)
     return () => {
       node.removeEventListener(event, listener, options)
     }
-  }, [event, target, options, listener, handler])
+  }, [event, target, options, listener])
 
   return () => {
     const node = typeof target === 'function' ? target() : (target ?? document)

package/src/hooks/useInterval.ts

@@ -1,8 +1,5 @@
 import { useEffect, useRef } from 'react'
 
-/**
- * @category hooks
- */
 export function useInterval(callback: () => void, delay: number | null) {
   const savedCallback = useRef(callback)
 

package/src/hooks/useLongPress.ts

@@ -3,9 +3,6 @@ import { useCallback, useState } from 'react'
 import { useEventListener } from './useEventListener'
 import { useInterval } from './useInterval'
 
-/**
- * @category hooks
- */
 export function useLongPress(
   callback: () => void,
   initialDelay = 500,

package/src/hooks/useMIDIAccess.ts

@@ -10,7 +10,6 @@ export type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED
 
 /**
  * Hooks for requesting MIDI access in the browser. The first argument allows you to choose whether to request access on mount.
- * @category hooks
  */
 export function useMIDIAccess(requestOnMount = true) {
   const [midiAccess, setMidiAccess] = useState<MIDIAccess | null>(null)

package/src/hooks/useMIDIInput.ts

@@ -16,7 +16,6 @@ const MIDI_EVENT_TO_NUMBER = {
 
 /**
  * Hooks for handling note on/off events. To be used with useMIDIAccess. Internally uses useMIDIMessage.
- * @category hooks
  */
 export function useMIDIInput(
   midiAccess: MIDIAccess | null,

package/src/hooks/useMIDIMessage.ts

@@ -2,7 +2,6 @@ import { useEffect } from 'react'
 
 /**
  * Hooks for when you want to process MIDI events in more detail than useMIDIInput.
- * @category hooks
  */
 export function useMIDIMessage(
   midiAccess: MIDIAccess | null,

package/src/hooks/usePianoDrag.ts

@@ -0,0 +1,75 @@
+import { useRef, useCallback, RefObject } from 'react'
+
+import { normalizeValue } from '@tremolo-ui/functions'
+
+import { useEventListener } from './useEventListener'
+import { useRefCallbackEvent } from './useRefCallbackEvent'
+
+interface UsePianoDrag<T extends Element> {
+  baseElementRef: RefObject<T | null>
+  onDrag: (normalizedX: number, normalizedY: number) => void
+  onDragStart?: (normalizedX: number, normalizedY: number) => void
+  onDragEnd?: (normalizedX: number, normalizedY: number) => void
+}
+
+/**
+ * Internal
+ * @returns [refCallback, pointerDownHandler]
+ * @private
+ */
+export function usePianoDrag<T extends Element>({
+  baseElementRef,
+  onDrag,
+  onDragStart,
+  onDragEnd,
+}: UsePianoDrag<T>) {
+  const dragged = useRef(false)
+  const normalizedX = useRef(0)
+  const normalizedY = useRef(0)
+
+  const handleDrag = useCallback(
+    (event: MouseEvent | React.PointerEvent<T> | TouchEvent) => {
+      if (!baseElementRef.current || !dragged.current) {
+        return
+      }
+      const isTouch = event instanceof TouchEvent
+      if (isTouch && event.cancelable) event.preventDefault()
+      const { left, top, right, bottom } =
+        baseElementRef.current.getBoundingClientRect()
+      const mouseX = isTouch ? event.touches[0].clientX : event.clientX
+      const mouseY = isTouch ? event.touches[0].clientY : event.clientY
+      const nx = normalizeValue(mouseX, left, right)
+      const ny = normalizeValue(mouseY, top, bottom)
+      normalizedX.current = nx
+      normalizedY.current = ny
+      onDrag(nx, ny)
+    },
+    [onDrag, baseElementRef],
+  )
+
+  const refHandler = useRefCallbackEvent(
+    'touchmove',
+    handleDrag,
+    { passive: false },
+    [onDrag],
+  )
+
+  const pointerDownHandler = useCallback(
+    (event: React.PointerEvent<T>) => {
+      dragged.current = true
+      handleDrag(event)
+      onDragStart?.(normalizedX.current, normalizedY.current)
+    },
+    [handleDrag, onDragStart],
+  )
+
+  useEventListener(globalThis.window, 'pointermove', handleDrag)
+
+  useEventListener(globalThis.window, 'pointerup', () => {
+    if (!dragged.current) return
+    dragged.current = false
+    onDragEnd?.(normalizedX.current, normalizedY.current)
+  })
+
+  return { refHandler, pointerDownHandler }
+}