@tremolo-ui/react 0.0.10 → 0.0.12

package/src/components/NumberInput/InternalInput.tsx

@@ -0,0 +1,219 @@
+import clsx from 'clsx'
+import {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import {
+  clamp,
+  InputEventOption,
+  normalizeValue,
+  rawValue,
+  stepValue,
+} from '@tremolo-ui/functions'
+import { parseValue } from '@tremolo-ui/functions/NumberInput'
+
+import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
+
+import { safeClamp, useNumberInputContext } from './context'
+
+import { NumberInputMethods } from '.'
+
+interface InternalProps {
+  disabled: boolean
+  readonly: boolean
+  wheel: InputEventOption | null
+  keyboard: InputEventOption | null
+
+  selectWithFocus?: 'all' | 'number' | 'none'
+  blurOnEnter?: boolean
+  keepWithinRange?: boolean
+  clampValueOnBlur?: boolean
+
+  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
+}
+
+type InternalPropsWithAttributes = InternalProps &
+  Omit<ComponentPropsWithoutRef<'input'>, keyof InternalProps>
+
+export const InternalInput = forwardRef<
+  NumberInputMethods,
+  InternalPropsWithAttributes
+>(
+  (
+    {
+      disabled,
+      readonly,
+      selectWithFocus,
+      blurOnEnter,
+      clampValueOnBlur,
+      wheel,
+      keyboard,
+      className,
+      onChange,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      children: _children,
+      ...props
+    }: InternalPropsWithAttributes,
+    ref,
+  ) => {
+    const elmRef = useRef<HTMLInputElement>(null)
+    const [editing, setEditing] = useState(false)
+    const value = useNumberInputContext((s) => s.value)
+    const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber)
+    const min = useNumberInputContext((s) => s.min)
+    const max = useNumberInputContext((s) => s.max)
+    const step = useNumberInputContext((s) => s.step)
+    const units = useNumberInputContext((s) => s.units)
+    const digit = useNumberInputContext((s) => s.digit)
+    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])
+
+    const updateValueByEvent = useCallback(
+      (eventType: InputEventOption[0], x: number) => {
+        let newValue
+        if (eventType == 'normalized') {
+          if (!min || !max) {
+            throw new Error('required parameter: min, max') // TODO
+          }
+          const n = normalizeValue(valueAsNumber, min, max)
+          newValue = rawValue(n + x, min, max)
+          return clamp(stepValue(newValue, step), min, max)
+        } else {
+          newValue = valueAsNumber + x
+          return stepValue(newValue, step)
+        }
+      },
+      [max, min, step, valueAsNumber],
+    )
+
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (!keyboard || !onChange || readonly) return
+        const key = event.key
+        if (!['ArrowUp', 'ArrowDown'].includes(key)) return
+        event.preventDefault()
+        const x = key == 'ArrowUp' ? keyboard[1] : -keyboard[1]
+        const parsed = parseValue(String(updateValueByEvent(keyboard[0], x)))
+        console.log('key control')
+        onChange?.(parsed.rawValue, parsed.formatValue)
+      },
+      [keyboard, readonly, onChange, updateValueByEvent],
+    )
+
+    const wheelRefCallback = useRefCallbackEvent(
+      'wheel',
+      (event) => {
+        if (!wheel || readonly) return
+        event.preventDefault()
+        if (!onChange || event.deltaY == 0) return
+        const x = Math.sign(event.deltaY) * -wheel[1]
+        const parsed = parseValue(String(updateValueByEvent(wheel[0], x)))
+        console.log('wheel control')
+        onChange?.(parsed.rawValue, parsed.formatValue)
+      },
+      { passive: false },
+      [wheel, readonly, onChange, updateValueByEvent],
+    )
+
+    useImperativeHandle(ref, () => {
+      return {
+        focus() {
+          elmRef.current?.focus()
+        },
+        blur() {
+          elmRef.current?.blur()
+        },
+      }
+    }, [])
+
+    return (
+      <input
+        ref={(input) => {
+          elmRef.current = input
+          wheelRefCallback(input)
+        }}
+        className={clsx('tremolo-number-input', className)}
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        type="text"
+        aria-disabled={disabled}
+        aria-readonly={readonly}
+        tabIndex={-1}
+        data-error={error}
+        onChange={(event) => {
+          if (readonly) return
+          const v = event.currentTarget.value
+          const cursorPos = event.target.selectionStart
+          change(v)
+          const valueAsNumber = parseValue(v, units, digit).rawValue
+          onChange?.(valueAsNumber, v)
+          if (cursorPos) {
+            event.target.selectionStart = cursorPos
+            event.target.selectionEnd = cursorPos
+          }
+        }}
+        onFocus={(event) => {
+          setEditing(true)
+          const v = event.currentTarget.value
+          const parsed = parseValue(v, units, digit)
+          if (selectWithFocus == 'all') {
+            event.currentTarget.setSelectionRange(0, v.length)
+          } else if (selectWithFocus == 'number') {
+            event.currentTarget.setSelectionRange(
+              0,
+              parsed.formatValue.length - parsed.unit.length,
+            )
+          }
+          onFocus?.(parsed.rawValue, parsed.formatValue, event)
+        }}
+        onBlur={(event) => {
+          setEditing(false)
+          // update value
+          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 (blurOnEnter && event.key == 'Enter') {
+            event.currentTarget.blur()
+          }
+          handleKeyDown(event)
+          onKeyDown?.(event)
+        }}
+        {...props}
+      />
+    )
+  },
+)

package/src/components/NumberInput/Stepper.tsx

@@ -1,12 +1,14 @@
 import clsx from 'clsx'
 import { ComponentPropsWithoutRef, ReactNode } from 'react'
 
+/** @category NumberInput */
 export interface StepperProps {
   /** Display only when hovering. */
   dynamic?: boolean
   children?: ReactNode
 }
 
+/** @category NumberInput */
 export function Stepper({
   dynamic = true,
   children,

package/src/components/NumberInput/context.tsx

@@ -7,12 +7,14 @@ import { parseValue, Units } from '@tremolo-ui/functions/NumberInput'
 type State = {
   value: string
   valueAsNumber: number
+  step: number
+
   min?: number
   max?: number
-  step?: number
-  keepWithinRange?: boolean
   units?: string | Units
   digit?: number
+  readonly?: boolean
+  keepWithinRange?: boolean
   onChange?: (value: number, text: string) => void
 }
 
@@ -41,6 +43,7 @@ const createNumberInputStore = (initProps?: ProviderProps) => {
     min: 0,
     max: 0,
     step: 1,
+    readonly: false,
     keepWithinRange: true,
     onChange: (_v: number, _t: string) => {},
   }
@@ -62,9 +65,13 @@ const createNumberInputStore = (initProps?: ProviderProps) => {
     },
     increment: () =>
       set((state) => {
-        let next =
-          parseValue(state.value, state.units, state.digit).rawValue +
-          (state.step ?? 1)
+        if (state.readonly) return {}
+        const current = parseValue(
+          state.value,
+          state.units,
+          state.digit,
+        ).rawValue
+        let next = current + (state.step ?? 1)
         if (state.keepWithinRange) {
           next = safeClamp(next, state.min, state.max)
         }
@@ -77,9 +84,13 @@ const createNumberInputStore = (initProps?: ProviderProps) => {
       }),
     decrement: () =>
       set((state) => {
-        let next =
-          parseValue(state.value, state.units, state.digit).rawValue -
-          (state.step ?? 1)
+        if (state.readonly) return {}
+        const current = parseValue(
+          state.value,
+          state.units,
+          state.digit,
+        ).rawValue
+        let next = current - (state.step ?? 1)
         if (state.keepWithinRange) {
           next = safeClamp(next, state.min, state.max)
         }
@@ -92,6 +103,7 @@ const createNumberInputStore = (initProps?: ProviderProps) => {
       }),
     change: (value) =>
       set((state) => {
+        if (state.readonly) return {}
         const v = value ?? ''
         return {
           value: v,
@@ -109,7 +121,7 @@ export function NumberInputProvider({
   children,
   ...props
 }: NumberInputProviderProps) {
-  const storeRef = useRef<NumberInputStore>()
+  const storeRef = useRef<NumberInputStore>(null)
   if (!storeRef.current) {
     storeRef.current = createNumberInputStore(props)
   }

package/src/components/NumberInput/index.css

@@ -1,40 +1,78 @@
 .tremolo-number-input-wrapper {
-  --tremolo-number-input-border-radius: 4px;
-  --tremolo-number-input-stepper-width: 20px;
+  --border-radius: 4px;
+  --stepper-width: 20px;
+  --active-color: var(--tremolo-theme-color);
 
   display: inline-flex;
   flex-direction: row;
   position: relative;
-
-  border-style: solid;
-  border-width: 1px;
-  border-color: #bbb;
-  border-radius: var(--tremolo-number-input-border-radius);
-
   width: 140px;
   height: min-content;
-
-  &:hover {
-    border-color: var(--tremolo-theme-color);
-  }
+  border-style: solid;
+  border-color: #c1c1c1;
+  border-width: 0px;
+  outline: none;
+  transition: all 0.1s;
 
   &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {
     border-color: #f34343;
   }
 
-  &:focus-within {
-    border-color: var(--tremolo-theme-color);
-    box-shadow: 0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1);
+  &[data-variant='outline'] {
+    border-width: 1px;
+    border-radius: var(--border-radius);
+
+    &:hover {
+      border-color: #909090;
+    }
+
+    &:focus-within {
+      border-color: var(--active-color);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--active-color) 10%, transparent);
+    }
+  }
+
+  &[data-variant='filled'] {
+    border-width: 1px;
+    border-radius: var(--border-radius);
+    border-color: transparent;
+    background-color: #edf2f7;
+
+    &:hover {
+      background-color: #e4e9ee;
+    }
+
+    &:focus-within {
+      background-color: inherit;
+      border-color: var(--active-color);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--active-color) 10%, transparent);
+    }
+  }
+
+  &[data-variant='flushed'] {
+    border-bottom-width: 1px;
+
+    &:hover {
+      border-color: #909090;
+    }
+
+    &:focus-within {
+      border-color: var(--active-color);
+      box-shadow: 0px 2px 0px 0px
+        color-mix(in srgb, var(--active-color) 10%, transparent);
+    }
   }
 
   &[data-stepper='false'] {
-    --tremolo-number-input-stepper-width: 0px;
+    --stepper-width: 0px;
   }
 }
 
 .tremolo-number-input {
   display: block;
-  width: calc(100% - 20px - var(--tremolo-number-input-stepper-width));
+  width: calc(100% - 20px - var(--stepper-width));
   background-color: inherit;
   font: inherit;
   padding: 6px 10px;
@@ -42,7 +80,11 @@
   margin: 0;
   border: none;
   outline: none;
-  appearance: textfield;
+  appearance: none;
+
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
 }
 
 .tremolo-number-input-stepper {
@@ -52,7 +94,7 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: var(--tremolo-number-input-stepper-width);
+  width: var(--stepper-width);
   transition: all 0.1s linear;
 
   &[data-dynamic='true'] {
@@ -61,7 +103,11 @@
   }
 }
 
-.tremolo-number-input-wrapper:hover .tremolo-number-input-stepper {
+:is(
+    .tremolo-number-input-wrapper:hover,
+    .tremolo-number-input-wrapper:focus-within
+  )
+  .tremolo-number-input-stepper {
   opacity: 1;
   transform: translateX(0);
 }
@@ -78,7 +124,7 @@
   max-height: 50%;
   user-select: none;
   cursor: pointer;
-  border-top-right-radius: var(--tremolo-number-input-border-radius);
+  border-top-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
     background-color: #3443560e;
@@ -87,6 +133,10 @@
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
+
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
 }
 
 .tremolo-number-input-decrement-stepper {
@@ -102,7 +152,7 @@
   max-height: 50%;
   user-select: none;
   cursor: pointer;
-  border-bottom-right-radius: var(--tremolo-number-input-border-radius);
+  border-bottom-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
     background-color: #3443560e;
@@ -111,4 +161,8 @@
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
+
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
 }