@tremolo-ui/react 0.0.9 → 0.0.11

package/src/components/NumberInput/index.tsx

@@ -1,22 +1,35 @@
 import clsx from 'clsx'
-import { ChangeEvent, ComponentPropsWithoutRef, useState } from 'react'
+import { ComponentPropsWithoutRef, ReactNode, useMemo, useState } from 'react'
 
-import { clamp } from '@tremolo-ui/functions'
+import { InputEventOption } from '@tremolo-ui/functions'
 import { parseValue, Units } from '@tremolo-ui/functions/NumberInput'
 
+import {
+  NumberInputProvider,
+  safeClamp,
+  useNumberInputContext,
+} from './context'
+
+/*
+TODO
+- onBlurでは、parse + (clamp) + formatして返す
+- numberMode: focusが当たった時だけ、parse + type="number"にする
+*/
+
+/** @category NumberInput */
 export interface NumberInputProps {
   value: number | string
 
+  /**
+   * @default Number.MIN_SAFE_INTEGER
+   */
   min?: number
+  /**
+   * @default Number.MAX_SAFE_INTEGER
+   */
   max?: number
   step?: number
-  defaultValue?: number
-
-  // wrapping html input
-  disabled?: boolean
-  placeholder?: string
-  readOnly?: boolean
-  tabIndex?: number
+  defaultValue?: number | string
 
   /**
    * @example
@@ -26,11 +39,6 @@ export interface NumberInputProps {
    */
   units?: string | Units
 
-  /**
-   * NOTE: If units is specified, it is forced to `false`
-   */
-  typeNumber?: boolean
-
   /**
    * Digits for rounding numbers.
    * @example
@@ -41,76 +49,94 @@ export interface NumberInputProps {
    * value=100 -> 100Hz, value=1600 -> 1.60Hz
    */
   digit?: number
+
   selectWithFocus?: 'all' | 'number' | 'none'
-  blurWithEnter?: boolean
-  className?: string
-  onChange?: (value: number, event: ChangeEvent<HTMLInputElement>) => void
+  blurOnEnter?: boolean
+  keepWithinRange?: boolean
+  clampValueOnBlur?: boolean
+
+  // TODO
+  /**
+   * wheel control option
+   */
+  wheel?: InputEventOption | null
+  /**
+   * keyboard control option
+   */
+  keyboard?: InputEventOption | null
+
+  wrapperClassName?: string
+
+  onChange?: (value: number, text: string) => void
   onFocus?: (
     value: number,
+    text: string,
     event: React.FocusEvent<HTMLInputElement, Element>,
   ) => void
   onBlur?: (
     value: number,
+    text: string,
     event: React.FocusEvent<HTMLInputElement, Element>,
   ) => void
+
+  children?: ReactNode
 }
 
-/**
- * Input with some useful functions for entering numerical values.
- */
-export function NumberInput({
-  value,
+function InternalInput({
   min,
   max,
   step,
-  defaultValue = min,
+  defaultValue,
   units,
-  disabled = false,
-  placeholder,
-  readOnly,
-  tabIndex,
-  typeNumber = false,
+  disabled,
   digit,
-  selectWithFocus = 'none',
-  blurWithEnter = true,
+  selectWithFocus,
+  blurOnEnter,
+  keepWithinRange,
+  clampValueOnBlur,
+  wheel,
+  keyboard,
+  wrapperClassName,
   className,
   onChange,
   onFocus,
   onBlur,
+  children: _children,
   ...props
-}: NumberInputProps &
+}: Omit<NumberInputProps, 'value'> &
   Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps | 'type'>) {
-  const [showValue, setShowValue] = useState(
-    parseValue(String(value), units, digit, defaultValue).formatValue,
-  )
-  const calculatedTypeNumber = units ? false : typeNumber
+  const [editing, setEditing] = useState(false)
+  const value = useNumberInputContext((s) => s.value)
+  const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber)
+  const change = useNumberInputContext((s) => s.change)
+
+  const error = useMemo(() => {
+    if (editing) return false
+    const v = valueAsNumber
+    return (min ?? -Infinity) > v || v > (max ?? Infinity)
+  }, [editing, max, min, valueAsNumber])
 
   return (
     <input
       className={clsx('tremolo-number-input', className)}
-      value={showValue}
+      value={value}
       min={min}
       max={max}
       step={step}
-      type={calculatedTypeNumber ? 'number' : 'text'}
-      spellCheck={'false'}
+      type="text"
       disabled={disabled}
-      placeholder={placeholder}
-      readOnly={readOnly}
-      tabIndex={tabIndex}
+      tabIndex={-1}
+      data-error={error}
       onChange={(event) => {
         const v = event.currentTarget.value
-        setShowValue(v)
-        const newValue = clamp(
-          parseValue(v, units, digit, defaultValue).rawValue,
-          min ?? -Infinity,
-          max ?? Infinity,
-        )
-        if (onChange) onChange(newValue, event)
+        change(v)
+        const valueAsNumber = parseValue(v, units, digit).rawValue
+        onChange?.(valueAsNumber, v)
       }}
       onFocus={(event) => {
+        setEditing(true)
         const v = event.currentTarget.value
-        const parsed = parseValue(v, units, digit, defaultValue)
+        const parsed = parseValue(v, units, digit)
         if (selectWithFocus == 'all') {
           event.currentTarget.setSelectionRange(0, v.length)
         } else if (selectWithFocus == 'number') {
@@ -119,17 +145,24 @@ export function NumberInput({
             parsed.formatValue.length - parsed.unit.length,
           )
         }
-        if (onFocus) onFocus(parsed.rawValue, event)
+        onFocus?.(parsed.rawValue, parsed.formatValue, event)
       }}
       onBlur={(event) => {
+        setEditing(false)
         // update value
-        const v = event.currentTarget.value
-        const parsed = parseValue(v, units, digit, defaultValue)
-        setShowValue(parsed.formatValue)
-        if (onBlur) onBlur(parsed.rawValue, event)
+        let v = parseValue(event.currentTarget.value, units, digit).rawValue
+        if (clampValueOnBlur) {
+          v = safeClamp(v, min, max)
+        }
+        const parsed = parseValue(String(v), units, digit)
+        change(parsed.formatValue)
+        if (clampValueOnBlur) {
+          onChange?.(parsed.rawValue, parsed.formatValue)
+        }
+        onBlur?.(parsed.rawValue, parsed.formatValue, event)
       }}
       onKeyDown={(event) => {
-        if (blurWithEnter && event.key == 'Enter') {
+        if (blurOnEnter && event.key == 'Enter') {
           event.currentTarget.blur()
         }
       }}
@@ -137,3 +170,79 @@ export function NumberInput({
     />
   )
 }
+
+/**
+ * Input with some useful functions for entering numerical values.
+ * @category NumberInput
+ */
+export function NumberInput({
+  value,
+  min,
+  max,
+  step = 1,
+  defaultValue,
+  units,
+  disabled = false,
+  digit,
+  selectWithFocus = 'none',
+  blurOnEnter = true,
+  keepWithinRange = true,
+  clampValueOnBlur = true,
+  wheel = ['raw', 1],
+  keyboard = ['raw', 1],
+  wrapperClassName,
+  className,
+  onChange,
+  onFocus,
+  onBlur,
+  children,
+  ...props
+}: NumberInputProps &
+  Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps | 'type'>) {
+  return (
+    <NumberInputProvider
+      value={String(value)}
+      min={min}
+      max={max}
+      step={step}
+      units={units}
+      digit={digit}
+      keepWithinRange={keepWithinRange}
+      onChange={onChange}
+    >
+      <div
+        className={clsx('tremolo-number-input-wrapper', wrapperClassName)}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+        data-stepper={!!children}
+      >
+        <InternalInput
+          min={min}
+          max={max}
+          step={step}
+          defaultValue={defaultValue}
+          units={units}
+          disabled={disabled}
+          digit={digit}
+          selectWithFocus={selectWithFocus}
+          blurOnEnter={blurOnEnter}
+          keepWithinRange={keepWithinRange}
+          clampValueOnBlur={clampValueOnBlur}
+          wheel={wheel}
+          keyboard={keyboard}
+          wrapperClassName={wrapperClassName}
+          className={className}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          {...props}
+        />
+        {children}
+      </div>
+    </NumberInputProvider>
+  )
+}
+
+export * from './Stepper'
+export * from './IncrementStepper'
+export * from './DecrementStepper'

package/src/components/Piano/BlackKey.tsx

@@ -12,6 +12,7 @@ import { defaultWhiteKeyWidth } from './WhiteKey'
 
 type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
 
+/** @category Piano */
 export const BlackKey = forwardRef<KeyMethods, Props>(
   (
     {
@@ -27,8 +28,8 @@ export const BlackKey = forwardRef<KeyMethods, Props>(
       __index,
       __fill,
       __width,
-      __playNote,
-      __stopNote,
+      __onPlayNote,
+      __onStopNote,
       __label,
       ...props
     }: Props,
@@ -41,17 +42,17 @@ export const BlackKey = forwardRef<KeyMethods, Props>(
         play() {
           if (__disabled) return
           setPlayed(true)
-          if (__playNote) __playNote(__note!)
+          if (__onPlayNote) __onPlayNote(__note!)
         },
         stop() {
           setPlayed(false)
-          if (__stopNote) __stopNote(__note!)
+          if (__onStopNote) __onStopNote(__note!)
         },
         played() {
           return played
         },
       }
-    }, [__disabled, __note, __playNote, __stopNote, played])
+    }, [__disabled, __note, __onPlayNote, __onStopNote, played])
 
     let keyLabelProps: KeyLabelProps = {}
     if (children != undefined) {
@@ -82,24 +83,26 @@ export const BlackKey = forwardRef<KeyMethods, Props>(
         onPointerDown={() => {
           if (__disabled) return
           setPlayed(true)
-          if (__playNote) __playNote(__note!)
+          if (__onPlayNote) __onPlayNote(__note!)
         }}
         onPointerEnter={() => {
           if (__disabled) return
           if (__glissando) {
             setPlayed(true)
-            if (__playNote) __playNote(__note!)
+            if (__onPlayNote) __onPlayNote(__note!)
           }
         }}
         onPointerUp={() => {
           if (__disabled) return
           setPlayed(false)
-          if (__stopNote) __stopNote(__note!)
+          if (__onStopNote) __onStopNote(__note!)
         }}
         onPointerLeave={() => {
           if (__disabled) return
-          setPlayed(false)
-          if (__stopNote) __stopNote(__note!)
+          if (__glissando) {
+            setPlayed(false)
+            if (__onStopNote) __onStopNote(__note!)
+          }
         }}
         {...props}
       >

package/src/components/Piano/KeyLabel.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'
 
+/** @category Piano */
 export interface KeyLabelProps {
   /**
    * override Piano.label
@@ -18,6 +19,7 @@ export interface KeyLabelProps {
   __label?: (note: number, index: number) => ReactNode
 }
 
+/** @category Piano */
 export function KeyLabel({
   label,
   className,

package/src/components/Piano/WhiteKey.tsx

@@ -11,8 +11,10 @@ import { KeyLabel, KeyLabelProps } from './KeyLabel'
 
 type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
 
+/** @category Piano */
 export const defaultWhiteKeyWidth = 40
 
+/** @category Piano */
 export const WhiteKey = forwardRef<KeyMethods, Props>(
   (
     {
@@ -28,8 +30,8 @@ export const WhiteKey = forwardRef<KeyMethods, Props>(
       __index,
       __fill,
       __width,
-      __playNote,
-      __stopNote,
+      __onPlayNote,
+      __onStopNote,
       __label,
       ...props
     }: Props,
@@ -42,17 +44,17 @@ export const WhiteKey = forwardRef<KeyMethods, Props>(
         play() {
           if (__disabled) return
           setPlayed(true)
-          if (__playNote) __playNote(__note!)
+          if (__onPlayNote) __onPlayNote(__note!)
         },
         stop() {
           setPlayed(false)
-          if (__stopNote) __stopNote(__note!)
+          if (__onStopNote) __onStopNote(__note!)
         },
         played() {
           return played
         },
       }
-    }, [__disabled, __note, __playNote, __stopNote, played])
+    }, [__disabled, __note, __onPlayNote, __onStopNote, played])
 
     let keyLabelProps: KeyLabelProps = {}
     if (children != undefined) {
@@ -83,24 +85,26 @@ export const WhiteKey = forwardRef<KeyMethods, Props>(
         onPointerDown={() => {
           if (__disabled) return
           setPlayed(true)
-          if (__playNote) __playNote(__note!)
+          if (__onPlayNote) __onPlayNote(__note!)
         }}
         onPointerEnter={() => {
           if (__disabled) return
           if (__glissando) {
             setPlayed(true)
-            if (__playNote) __playNote(__note!)
+            if (__onPlayNote) __onPlayNote(__note!)
           }
         }}
         onPointerUp={() => {
           if (__disabled) return
           setPlayed(false)
-          if (__stopNote) __stopNote(__note!)
+          if (__onStopNote) __onStopNote(__note!)
         }}
         onPointerLeave={() => {
           if (__disabled) return
-          setPlayed(false)
-          if (__stopNote) __stopNote(__note!)
+          if (__glissando) {
+            setPlayed(false)
+            if (__onStopNote) __onStopNote(__note!)
+          }
         }}
         {...props}
       >

package/src/components/Piano/index.tsx

@@ -33,6 +33,7 @@ import { defaultWhiteKeyWidth, WhiteKey } from './WhiteKey'
  * - add scale highlight
  */
 
+/** @category Piano */
 export interface PianoProps {
   // required
   noteRange: { first: number; last: number }
@@ -47,8 +48,8 @@ export interface PianoProps {
 
   style?: CSSProperties
 
-  playNote?: (noteNumber: number) => void
-  stopNote?: (noteNumber: number) => void
+  onPlayNote?: (noteNumber: number) => void
+  onStopNote?: (noteNumber: number) => void
 
   label?: (note: number, index: number) => ReactNode
 
@@ -58,6 +59,7 @@ export interface PianoProps {
   children?: ReactElement | ReactElement[]
 }
 
+/** @category Piano */
 export function Piano({
   noteRange,
   glissando = true,
@@ -67,8 +69,8 @@ export function Piano({
   height = fill ? '100%' : 160,
   style,
   className,
-  playNote,
-  stopNote,
+  onPlayNote,
+  onStopNote,
   label,
   children,
   ...props
@@ -76,7 +78,7 @@ export function Piano({
   // -- state and ref ---
   const [pressed, setPressed] = useState(false)
   const [whiteNoteWidth, setWhiteNoteWidth] = useState(-1)
-  const keyRefs = useRef<RefObject<KeyMethods>[]>([])
+  const keyRefs = useRef<RefObject<KeyMethods | null>[]>([])
   for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) {
     keyRefs.current[i] = createRef<KeyMethods>()
   }
@@ -153,7 +155,7 @@ export function Piano({
     }
   }, [fill, whiteKeyProps?.width, whiteNoteCount])
 
-  useEventListener(window, 'keydown', (e) => {
+  useEventListener(globalThis.window, 'keydown', (e) => {
     if (e.repeat) return
     if (!keyboardShortcuts) return
     const index = keyboardShortcuts.keys.indexOf(e.key)
@@ -164,7 +166,7 @@ export function Piano({
     }
   })
 
-  useEventListener(window, 'keyup', (e) => {
+  useEventListener(globalThis.window, 'keyup', (e) => {
     if (e.repeat) return
     if (!keyboardShortcuts) return
     const index = keyboardShortcuts.keys.indexOf(e.key)
@@ -204,8 +206,8 @@ export function Piano({
             __index={index}
             __fill={fill}
             __width={whiteNoteWidth}
-            __playNote={playNote}
-            __stopNote={stopNote}
+            __onPlayNote={onPlayNote}
+            __onStopNote={onStopNote}
             __label={label}
             {...whiteKeyProps}
           />
@@ -220,8 +222,8 @@ export function Piano({
             __index={index}
             __fill={fill}
             __width={whiteNoteWidth * 0.65}
-            __playNote={playNote}
-            __stopNote={stopNote}
+            __onPlayNote={onPlayNote}
+            __onStopNote={onStopNote}
             __label={label}
             {...blackKeyProps}
           />
@@ -236,4 +238,4 @@ export * from './keyboardShortcuts'
 
 export { WhiteKey } from './WhiteKey'
 export { BlackKey } from './BlackKey'
-export { KeyLabel } from './KeyLabel'
+export { KeyLabel, type KeyLabelProps } from './KeyLabel'

package/src/components/Piano/key.ts

@@ -1,5 +1,8 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react'
 
+/**
+ * @category Piano
+ */
 export interface KeyProps {
   width?: number
   height?: number | `${number}%`
@@ -26,13 +29,16 @@ export interface KeyProps {
   /** @internal */
   __width?: number
   /** @internal */
-  __playNote?: (noteNumber: number) => void
+  __onPlayNote?: (noteNumber: number) => void
   /** @internal */
-  __stopNote?: (noteNumber: number) => void
+  __onStopNote?: (noteNumber: number) => void
   /** @internal */
   __label?: (note: number, index: number) => ReactNode
 }
 
+/**
+ * @category Piano
+ */
 export interface KeyMethods {
   play: () => void
   stop: () => void

package/src/components/Piano/keyboardShortcuts.ts

@@ -1,3 +1,4 @@
+/** @category Piano */
 export type KeyBoardShortcuts = {
   keys: string[]
   // TODO
@@ -6,6 +7,7 @@ export type KeyBoardShortcuts = {
   }
 }
 
+/** @category Piano */
 export const Shortcuts = {
   HOME_ROW: {
     keys: [

package/src/components/Slider/Scale.tsx

@@ -4,9 +4,10 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react'
 import { xor } from '@tremolo-ui/functions'
 import { generateOptionsList, ScaleOptions } from '@tremolo-ui/functions/Slider'
 
-import { useMax, useMin, useReverse, useStep, useVertical } from './context'
+import { useSliderContext } from './context'
 import { ScaleOption } from './ScaleOption'
 
+/** @category Slider */
 export interface ScaleProps {
   gap?: number | string
   options?: ScaleOptions
@@ -16,6 +17,7 @@ export interface ScaleProps {
 type Props = ScaleProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleProps>
 
+/** @category Slider */
 export function Scale({
   gap = 6,
   options,
@@ -24,11 +26,11 @@ export function Scale({
   style,
   ...props
 }: Props) {
-  const min = useMin()
-  const max = useMax()
-  const step = useStep()
-  const vertical = useVertical()
-  const reverse = useReverse()
+  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 reverse = useSliderContext((s) => s.reverse)
 
   const optionsList = options
     ? generateOptionsList(options, min, max, step)

package/src/components/Slider/ScaleOption.tsx

@@ -4,8 +4,9 @@ import { ComponentPropsWithoutRef, CSSProperties, useCallback } from 'react'
 import { toFixed, xor, normalizeValue } from '@tremolo-ui/functions'
 import { ScaleType } from '@tremolo-ui/functions/Slider'
 
-import { useMax, useMin, useReverse, useSkew, useVertical } from './context'
+import { useSliderContext } from './context'
 
+/** @category Slider */
 export interface ScaleOptionProps {
   // required
   value: number
@@ -31,6 +32,7 @@ export interface ScaleOptionProps {
   }
 }
 
+/** @category Slider */
 export function ScaleOption({
   value,
   type = 'mark-number',
@@ -46,11 +48,11 @@ export function ScaleOption({
   ...props
 }: ScaleOptionProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleOptionProps>) {
-  const min = useMin()
-  const max = useMax()
-  const skew = useSkew()
-  const vertical = useVertical()
-  const reverse = useReverse()
+  const min = useSliderContext((s) => s.min)
+  const max = useSliderContext((s) => s.max)
+  const skew = useSliderContext((s) => s.skew)
+  const vertical = useSliderContext((s) => s.vertical)
+  const reverse = useSliderContext((s) => s.reverse)
 
   const calcPercent = useCallback(
     (rawValue: number) => {