@yamada-ui/number-input 1.1.16-dev-20241007025246 → 1.1.16-dev-20241007155115
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-CIRY2IVK.mjs → chunk-OFYIJUE5.mjs} +7 -7
- package/dist/{chunk-CIRY2IVK.mjs.map → chunk-OFYIJUE5.mjs.map} +1 -1
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/number-input.d.mts +3 -3
- package/dist/number-input.d.ts +3 -3
- package/dist/number-input.js +6 -6
- package/dist/number-input.js.map +1 -1
- package/dist/number-input.mjs +1 -1
- package/package.json +8 -8
|
@@ -70,10 +70,10 @@ var useNumberInput = (props = {}) => {
|
|
|
70
70
|
...rest
|
|
71
71
|
} = useFormControlProps(props);
|
|
72
72
|
const {
|
|
73
|
+
"aria-invalid": isInvalid,
|
|
73
74
|
disabled,
|
|
74
75
|
readOnly,
|
|
75
76
|
required,
|
|
76
|
-
"aria-invalid": isInvalid,
|
|
77
77
|
onBlur: onBlurProp,
|
|
78
78
|
onFocus: onFocusProp,
|
|
79
79
|
...formControlProps
|
|
@@ -279,17 +279,17 @@ var useNumberInput = (props = {}) => {
|
|
|
279
279
|
...formControlProps,
|
|
280
280
|
...props2,
|
|
281
281
|
ref: mergeRefs(inputRef, ref),
|
|
282
|
+
"aria-invalid": ariaAttr(isInvalid != null ? isInvalid : isOut),
|
|
283
|
+
"aria-valuemax": max,
|
|
284
|
+
"aria-valuemin": min,
|
|
285
|
+
"aria-valuenow": Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber,
|
|
286
|
+
"aria-valuetext": valueText,
|
|
282
287
|
autoComplete: "off",
|
|
283
288
|
autoCorrect: "off",
|
|
284
289
|
max,
|
|
285
290
|
min,
|
|
286
291
|
step: stepProp,
|
|
287
292
|
value: format(value),
|
|
288
|
-
"aria-invalid": ariaAttr(isInvalid != null ? isInvalid : isOut),
|
|
289
|
-
"aria-valuemax": max,
|
|
290
|
-
"aria-valuemin": min,
|
|
291
|
-
"aria-valuenow": Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber,
|
|
292
|
-
"aria-valuetext": valueText,
|
|
293
293
|
onBlur: handlerAll(props2.onBlur, onBlur),
|
|
294
294
|
onChange: handlerAll(props2.onChange, onChange),
|
|
295
295
|
onFocus: handlerAll(props2.onFocus, onFocus),
|
|
@@ -604,4 +604,4 @@ export {
|
|
|
604
604
|
useNumberInput,
|
|
605
605
|
NumberInput
|
|
606
606
|
};
|
|
607
|
-
//# sourceMappingURL=chunk-
|
|
607
|
+
//# sourceMappingURL=chunk-OFYIJUE5.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/number-input.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { UseFormControlProps } from \"@yamada-ui/form-control\"\nimport type { UseCounterProps } from \"@yamada-ui/use-counter\"\nimport type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n} from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { useCounter } from \"@yamada-ui/use-counter\"\nimport { useEventListener } from \"@yamada-ui/use-event-listener\"\nimport { useInterval } from \"@yamada-ui/use-interval\"\nimport {\n ariaAttr,\n createContext,\n cx,\n handlerAll,\n mergeRefs,\n pickObject,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst isDefaultValidCharacter = (character: string) =>\n /^[Ee0-9+\\-.]$/.test(character)\n\nconst isValidNumericKeyboardEvent = (\n { key, altKey, ctrlKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n const isModifierKey = ctrlKey || altKey || metaKey\n const isSingleCharacterKey = key.length === 1\n\n if (!isSingleCharacterKey || isModifierKey) return true\n\n return isValid(key)\n}\n\nconst getStep = <Y extends KeyboardEvent | WheelEvent>({\n ctrlKey,\n metaKey,\n shiftKey,\n}: Y) => {\n let ratio = 1\n\n if (metaKey || ctrlKey) ratio = 0.1\n\n if (shiftKey) ratio = 10\n\n return ratio\n}\n\ntype ValidityState = \"rangeOverflow\" | \"rangeUnderflow\"\n\nexport interface UseNumberInputProps\n extends UseFormControlProps<HTMLInputElement>,\n UseCounterProps {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * If `true`, the input's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\n /**\n * This controls the value update when you blur out of the input.\n * - If `true` and the value is greater than `max`, the value will be reset to `max`.\n * - Else, the value remains the same.\n *\n * @default true\n */\n clampValueOnBlur?: boolean\n /**\n * If `true`, the input will be focused as you increment or decrement the value with the stepper.\n *\n * @default true\n */\n focusInputOnChange?: boolean\n /**\n * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: number | string) => number | string\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number | string) => string | undefined\n /**\n * Hints at the type of data that might be entered by the user.\n * It also determines the type of keyboard shown to the user on mobile devices.\n *\n * @default 'decimal'\n */\n inputMode?: InputHTMLAttributes<any>[\"inputMode\"]\n /**\n * Whether the pressed key should be allowed in the input.\n * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\\-.]$/.\n */\n isValidCharacter?: (value: string) => boolean\n /**\n * If using a custom display format, this converts the custom format to a format `parseFloat` understands.\n */\n parse?: (value: string) => string\n /**\n * The pattern used to check the <input> element's value against on form submission.\n *\n * @default '[0-9]*(.[0-9]+)?'\n */\n pattern?: InputHTMLAttributes<any>[\"pattern\"]\n /**\n * The callback invoked when invalid number is entered.\n */\n onInvalid?: (\n message: ValidityState,\n value: string,\n valueAsNumber: number,\n ) => void\n}\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n id,\n name,\n allowMouseWheel,\n clampValueOnBlur = true,\n defaultValue,\n focusInputOnChange = true,\n format: formatProp,\n getAriaValueText: getAriaValueTextProp,\n inputMode = \"decimal\",\n isValidCharacter: isValidCharacterProp,\n keepWithinRange = true,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n parse: parseProp,\n pattern = \"[0-9]*(.[0-9]+)?\",\n precision,\n step: stepProp,\n value: valueProp,\n onChange: onChangeProp,\n onInvalid: onInvalidProp,\n ...rest\n } = useFormControlProps(props)\n const {\n disabled,\n readOnly,\n required,\n \"aria-invalid\": isInvalid,\n onBlur: onBlurProp,\n onFocus: onFocusProp,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n\n const isRequired = required\n const isReadOnly = readOnly\n const isDisabled = disabled\n\n const [isFocused, setFocused] = useState(false)\n const isInteractive = !(readOnly || disabled)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const inputSelectionRef = useRef<{\n end: null | number\n start: null | number\n } | null>(null)\n const incrementRef = useRef<HTMLButtonElement>(null)\n const decrementRef = useRef<HTMLButtonElement>(null)\n\n const onFocus = useCallbackRef(\n handlerAll(onFocusProp, (ev) => {\n setFocused(true)\n\n if (!inputSelectionRef.current) return\n\n ev.target.selectionStart =\n inputSelectionRef.current.start ?? ev.currentTarget.value.length\n ev.currentTarget.selectionEnd =\n inputSelectionRef.current.end ?? ev.currentTarget.selectionStart\n }),\n )\n const onBlur = useCallbackRef(\n handlerAll(onBlurProp, () => {\n setFocused(false)\n\n if (clampValueOnBlur) validateAndClamp()\n }),\n )\n const onInvalid = useCallbackRef(onInvalidProp)\n const getAriaValueText = useCallbackRef(getAriaValueTextProp)\n const isValidCharacter = useCallbackRef(\n isValidCharacterProp ?? isDefaultValidCharacter,\n )\n\n const {\n cast,\n isMax,\n isMin,\n isOut,\n setValue,\n update,\n value,\n valueAsNumber,\n ...counter\n } = useCounter({\n defaultValue,\n keepWithinRange,\n max,\n min,\n precision,\n step: stepProp,\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const valueText = useMemo(() => {\n let text = getAriaValueText(value)\n\n if (text != null) return text\n\n text = value.toString()\n\n return !text ? undefined : text\n }, [value, getAriaValueText])\n\n const sanitize = useCallback(\n (value: string) => value.split(\"\").filter(isValidCharacter).join(\"\"),\n [isValidCharacter],\n )\n\n const parse = useCallback(\n (value: string) => parseProp?.(value) ?? value,\n [parseProp],\n )\n\n const format = useCallback(\n (value: number | string) => (formatProp?.(value) ?? value).toString(),\n [formatProp],\n )\n\n const increment = useCallback(\n (step = stepProp ?? 1) => {\n if (isInteractive) counter.increment(step)\n },\n [isInteractive, counter, stepProp],\n )\n\n const decrement = useCallback(\n (step = stepProp ?? 1) => {\n if (isInteractive) counter.decrement(step)\n },\n [isInteractive, counter, stepProp],\n )\n\n const validateAndClamp = useCallback(() => {\n let next = value as number | string\n\n if (value === \"\") return\n\n const valueStartsWithE = /^[eE]/.test(value.toString())\n\n if (valueStartsWithE) {\n setValue(\"\")\n } else {\n if (valueAsNumber < min) next = min\n\n if (valueAsNumber > max) next = max\n\n cast(next)\n }\n }, [cast, max, min, setValue, value, valueAsNumber])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if ((ev.nativeEvent as InputEvent).isComposing) return\n\n const parsedInput = parse(ev.currentTarget.value)\n\n update(sanitize(parsedInput))\n\n inputSelectionRef.current = {\n end: ev.currentTarget.selectionEnd,\n start: ev.currentTarget.selectionStart,\n }\n },\n [parse, update, sanitize],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.nativeEvent.isComposing) return\n\n if (!isValidNumericKeyboardEvent(ev, isValidCharacter))\n ev.preventDefault()\n\n const step = getStep(ev) * (stepProp ?? 1)\n\n const keyMap: { [key: string]: KeyboardEventHandler } = {\n ArrowDown: () => decrement(step),\n ArrowUp: () => increment(step),\n End: () => update(max),\n Home: () => update(min),\n }\n\n const action = keyMap[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n action(ev)\n },\n [decrement, increment, isValidCharacter, max, min, stepProp, update],\n )\n\n const { down, isSpinning, stop, up } = useSpinner(increment, decrement)\n\n useAttributeObserver(incrementRef, [\"disabled\"], isSpinning, stop)\n useAttributeObserver(decrementRef, [\"disabled\"], isSpinning, stop)\n\n const focusInput = useCallback(() => {\n if (focusInputOnChange)\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n }, [focusInputOnChange])\n\n const eventUp = useCallback(\n (ev: any) => {\n ev.preventDefault()\n up()\n focusInput()\n },\n [focusInput, up],\n )\n\n const eventDown = useCallback(\n (ev: any) => {\n ev.preventDefault()\n down()\n focusInput()\n },\n [focusInput, down],\n )\n\n useUpdateEffect(() => {\n if (valueAsNumber > max) {\n onInvalid(\"rangeOverflow\", format(value), valueAsNumber)\n } else if (valueAsNumber < min) {\n onInvalid(\"rangeOverflow\", format(value), valueAsNumber)\n }\n }, [valueAsNumber, value, format, onInvalid])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n const notInSync = inputRef.current.value != value\n\n if (!notInSync) return\n\n const parsedInput = parse(inputRef.current.value)\n\n setValue(sanitize(parsedInput))\n }, [parse, sanitize])\n\n useEventListener(\n () => inputRef.current,\n \"wheel\",\n (ev) => {\n const ownerDocument = inputRef.current?.ownerDocument ?? document\n const isFocused = ownerDocument.activeElement === inputRef.current\n\n if (!allowMouseWheel || !isFocused) return\n\n ev.preventDefault()\n\n const step = getStep(ev as any) * (stepProp ?? 1)\n const direction = Math.sign(ev.deltaY)\n\n if (direction === -1) {\n increment(step)\n } else if (direction === 1) {\n decrement(step)\n }\n },\n { passive: false },\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n id,\n type: \"text\",\n name,\n disabled,\n inputMode,\n pattern,\n readOnly,\n required,\n role: \"spinbutton\",\n ...formControlProps,\n ...props,\n ref: mergeRefs(inputRef, ref),\n autoComplete: \"off\",\n autoCorrect: \"off\",\n max,\n min,\n step: stepProp,\n value: format(value),\n \"aria-invalid\": ariaAttr(isInvalid ?? isOut),\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onFocus),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n id,\n name,\n inputMode,\n pattern,\n required,\n disabled,\n readOnly,\n formControlProps,\n min,\n max,\n stepProp,\n format,\n value,\n valueAsNumber,\n valueText,\n isInvalid,\n isOut,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n ],\n )\n\n const getIncrementProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMax)\n\n return {\n disabled: trulyDisabled,\n readOnly,\n required,\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, incrementRef),\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n tabIndex: -1,\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button === 0 && !trulyDisabled) eventUp(ev)\n }),\n onPointerLeave: handlerAll(props.onPointerLeave, stop),\n onPointerUp: handlerAll(props.onPointerUp, stop),\n }\n },\n [\n disabled,\n keepWithinRange,\n isMax,\n required,\n readOnly,\n formControlProps,\n stop,\n eventUp,\n ],\n )\n\n const getDecrementProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMin)\n\n return {\n disabled: trulyDisabled,\n readOnly,\n required,\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, decrementRef),\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n tabIndex: -1,\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button === 0 && !trulyDisabled) eventDown(ev)\n }),\n onPointerLeave: handlerAll(props.onPointerLeave, stop),\n onPointerUp: handlerAll(props.onPointerUp, stop),\n }\n },\n [\n disabled,\n keepWithinRange,\n isMin,\n required,\n readOnly,\n formControlProps,\n stop,\n eventDown,\n ],\n )\n\n return {\n isDisabled,\n isFocused,\n isReadOnly,\n isRequired,\n props: rest,\n value: format(value),\n valueAsNumber,\n getDecrementProps,\n getIncrementProps,\n getInputProps,\n }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n\nconst INTERVAL = 50\n\nconst DELAY = 300\n\ntype Action = \"decrement\" | \"increment\"\n\nconst useSpinner = (increment: Function, decrement: Function) => {\n const [isSpinning, setIsSpinning] = useState(false)\n const [action, setAction] = useState<Action | null>(null)\n const [isOnce, setIsOnce] = useState(true)\n const timeoutRef = useRef<any>(null)\n\n const removeTimeout = () => clearTimeout(timeoutRef.current)\n\n useInterval(\n () => {\n if (action === \"increment\") increment()\n\n if (action === \"decrement\") decrement()\n },\n isSpinning ? INTERVAL : null,\n )\n\n const up = useCallback(() => {\n if (isOnce) increment()\n\n timeoutRef.current = setTimeout(() => {\n setIsOnce(false)\n setIsSpinning(true)\n setAction(\"increment\")\n }, DELAY)\n }, [increment, isOnce])\n\n const down = useCallback(() => {\n if (isOnce) decrement()\n\n timeoutRef.current = setTimeout(() => {\n setIsOnce(false)\n setIsSpinning(true)\n setAction(\"decrement\")\n }, DELAY)\n }, [decrement, isOnce])\n\n const stop = useCallback(() => {\n setIsOnce(true)\n setIsSpinning(false)\n removeTimeout()\n }, [])\n\n useEffect(() => {\n return () => removeTimeout()\n }, [])\n\n return { down, isSpinning, stop, up }\n}\n\nconst useAttributeObserver = (\n ref: React.RefObject<HTMLElement | null>,\n attributeFilter: string[],\n enabled: boolean,\n func: () => void,\n) => {\n useEffect(() => {\n if (!ref.current || !enabled) return\n\n const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n const observer = new ownerDocument.MutationObserver((changes) => {\n for (const { type, attributeName } of changes) {\n if (\n type === \"attributes\" &&\n attributeName &&\n attributeFilter.includes(attributeName)\n )\n func()\n }\n })\n\n observer.observe(ref.current, { attributeFilter, attributes: true })\n\n return () => observer.disconnect()\n })\n}\n\ninterface NumberInputOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the addon for the number input.\n */\n isStepper?: boolean\n /**\n * Props for addon component.\n */\n addonProps?: HTMLUIProps\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps\n /**\n * Props for decrement component.\n */\n decrementProps?: NumberDecrementStepperProps\n /**\n * Props for increment component.\n */\n incrementProps?: NumberIncrementStepperProps\n}\n\nexport interface NumberInputProps\n extends Omit<\n HTMLUIProps<\"input\">,\n | \"defaultValue\"\n | \"disabled\"\n | \"max\"\n | \"min\"\n | \"onChange\"\n | \"onInvalid\"\n | \"readOnly\"\n | \"required\"\n | \"size\"\n | \"step\"\n | \"value\"\n >,\n ThemeProps<\"NumberInput\">,\n Omit<UseNumberInputProps, \"disabled\" | \"readOnly\" | \"required\">,\n NumberInputOptions {}\n\ninterface NumberInputContext {\n styles: { [key: string]: CSSUIObject | undefined }\n getDecrementProps: PropGetter<\"button\">\n getIncrementProps: PropGetter<\"button\">\n getInputProps: PropGetter<\"input\">\n}\n\nconst [NumberInputContextProvider, useNumberInputContext] =\n createContext<NumberInputContext>({\n name: \"NumberInputContext\",\n errorMessage: `useNumberInputContext returned is 'undefined'. Seems you forgot to wrap the components in \"<NumberInput />\"`,\n })\n\n/**\n * `NumberInput` is a component used to obtain numeric input from the user.\n *\n * @see Docs https://yamada-ui.com/components/forms/number-input\n */\nexport const NumberInput = forwardRef<NumberInputProps, \"input\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NumberInput\", props)\n const {\n className,\n isStepper = true,\n addonProps,\n containerProps,\n decrementProps,\n incrementProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const {\n props: rest,\n getDecrementProps,\n getIncrementProps,\n getInputProps,\n } = useNumberInput(computedProps)\n\n const css: CSSUIObject = {\n position: \"relative\",\n zIndex: 0,\n ...styles.container,\n }\n\n return (\n <NumberInputContextProvider\n value={{ styles, getDecrementProps, getIncrementProps, getInputProps }}\n >\n <ui.div\n className={cx(\"ui-number-input\", className)}\n __css={css}\n {...containerProps}\n >\n <NumberInputField {...getInputProps(rest, ref)} />\n\n {isStepper ? (\n <NumberInputAddon {...addonProps}>\n <NumberIncrementStepper {...incrementProps} />\n <NumberDecrementStepper {...decrementProps} />\n </NumberInputAddon>\n ) : null}\n </ui.div>\n </NumberInputContextProvider>\n )\n },\n)\n\nNumberInput.displayName = \"NumberInput\"\nNumberInput.__ui__ = \"NumberInput\"\n\ntype NumberInputFieldProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"readOnly\" | \"required\" | \"size\"\n>\n\nconst NumberInputField = forwardRef<NumberInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\n width: \"100%\",\n ...styles.field,\n }\n\n return (\n <ui.input\n ref={ref}\n className={cx(\"ui-number-input__field\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nNumberInputField.displayName = \"NumberInputField\"\nNumberInputField.__ui__ = \"NumberInputField\"\n\ntype NumberInputAddonProps = HTMLUIProps\n\nconst NumberInputAddon = forwardRef<NumberInputAddonProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n height: \"calc(100% - 2px)\",\n insetEnd: \"0px\",\n margin: \"1px\",\n position: \"absolute\",\n top: \"0\",\n zIndex: \"fallback(yamcha, 1)\",\n ...styles.addon,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-number-input__addon\", className)}\n aria-hidden\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nNumberInputAddon.displayName = \"NumberInputAddon\"\nNumberInputAddon.__ui__ = \"NumberInputAddon\"\n\nconst Stepper = ui(\"button\", {\n baseStyle: {\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"flex\",\n flex: 1,\n justifyContent: \"center\",\n lineHeight: \"normal\",\n transitionDuration: \"normal\",\n transitionProperty: \"common\",\n userSelect: \"none\",\n },\n})\n\ntype NumberIncrementStepperProps = HTMLUIProps<\"button\">\n\nconst NumberIncrementStepper = forwardRef<\n NumberIncrementStepperProps,\n \"button\"\n>(({ className, children, ...rest }, ref) => {\n const { styles, getIncrementProps } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <Stepper\n className={cx(\"ui-number-input__stepper--up\", className)}\n {...getIncrementProps(rest, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon __css={{ transform: \"rotate(180deg)\" }} />}\n </Stepper>\n )\n})\n\nNumberIncrementStepper.displayName = \"NumberIncrementStepper\"\nNumberIncrementStepper.__ui__ = \"NumberIncrementStepper\"\n\ntype NumberDecrementStepperProps = HTMLUIProps<\"button\">\n\nconst NumberDecrementStepper = forwardRef<\n NumberDecrementStepperProps,\n \"button\"\n>(({ className, children, ...rest }, ref) => {\n const { styles, getDecrementProps } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <Stepper\n className={cx(\"ui-number-input__stepper--down\", className)}\n {...getDecrementProps(rest, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon />}\n </Stepper>\n )\n})\n\nNumberDecrementStepper.displayName = \"NumberDecrementStepper\"\nNumberDecrementStepper.__ui__ = \"NumberDecrementStepper\"\n"],"mappings":"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","names":["value","isFocused","props"]}
|
|
1
|
+
{"version":3,"sources":["../src/number-input.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { UseFormControlProps } from \"@yamada-ui/form-control\"\nimport type { UseCounterProps } from \"@yamada-ui/use-counter\"\nimport type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n} from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { useCounter } from \"@yamada-ui/use-counter\"\nimport { useEventListener } from \"@yamada-ui/use-event-listener\"\nimport { useInterval } from \"@yamada-ui/use-interval\"\nimport {\n ariaAttr,\n createContext,\n cx,\n handlerAll,\n mergeRefs,\n pickObject,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst isDefaultValidCharacter = (character: string) =>\n /^[Ee0-9+\\-.]$/.test(character)\n\nconst isValidNumericKeyboardEvent = (\n { key, altKey, ctrlKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n const isModifierKey = ctrlKey || altKey || metaKey\n const isSingleCharacterKey = key.length === 1\n\n if (!isSingleCharacterKey || isModifierKey) return true\n\n return isValid(key)\n}\n\nconst getStep = <Y extends KeyboardEvent | WheelEvent>({\n ctrlKey,\n metaKey,\n shiftKey,\n}: Y) => {\n let ratio = 1\n\n if (metaKey || ctrlKey) ratio = 0.1\n\n if (shiftKey) ratio = 10\n\n return ratio\n}\n\ntype ValidityState = \"rangeOverflow\" | \"rangeUnderflow\"\n\nexport interface UseNumberInputProps\n extends UseFormControlProps<HTMLInputElement>,\n UseCounterProps {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * If `true`, the input's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\n /**\n * This controls the value update when you blur out of the input.\n * - If `true` and the value is greater than `max`, the value will be reset to `max`.\n * - Else, the value remains the same.\n *\n * @default true\n */\n clampValueOnBlur?: boolean\n /**\n * If `true`, the input will be focused as you increment or decrement the value with the stepper.\n *\n * @default true\n */\n focusInputOnChange?: boolean\n /**\n * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: number | string) => number | string\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number | string) => string | undefined\n /**\n * Hints at the type of data that might be entered by the user.\n * It also determines the type of keyboard shown to the user on mobile devices.\n *\n * @default 'decimal'\n */\n inputMode?: InputHTMLAttributes<any>[\"inputMode\"]\n /**\n * Whether the pressed key should be allowed in the input.\n * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\\-.]$/.\n */\n isValidCharacter?: (value: string) => boolean\n /**\n * If using a custom display format, this converts the custom format to a format `parseFloat` understands.\n */\n parse?: (value: string) => string\n /**\n * The pattern used to check the <input> element's value against on form submission.\n *\n * @default '[0-9]*(.[0-9]+)?'\n */\n pattern?: InputHTMLAttributes<any>[\"pattern\"]\n /**\n * The callback invoked when invalid number is entered.\n */\n onInvalid?: (\n message: ValidityState,\n value: string,\n valueAsNumber: number,\n ) => void\n}\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n id,\n name,\n allowMouseWheel,\n clampValueOnBlur = true,\n defaultValue,\n focusInputOnChange = true,\n format: formatProp,\n getAriaValueText: getAriaValueTextProp,\n inputMode = \"decimal\",\n isValidCharacter: isValidCharacterProp,\n keepWithinRange = true,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n parse: parseProp,\n pattern = \"[0-9]*(.[0-9]+)?\",\n precision,\n step: stepProp,\n value: valueProp,\n onChange: onChangeProp,\n onInvalid: onInvalidProp,\n ...rest\n } = useFormControlProps(props)\n const {\n \"aria-invalid\": isInvalid,\n disabled,\n readOnly,\n required,\n onBlur: onBlurProp,\n onFocus: onFocusProp,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n\n const isRequired = required\n const isReadOnly = readOnly\n const isDisabled = disabled\n\n const [isFocused, setFocused] = useState(false)\n const isInteractive = !(readOnly || disabled)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const inputSelectionRef = useRef<{\n end: null | number\n start: null | number\n } | null>(null)\n const incrementRef = useRef<HTMLButtonElement>(null)\n const decrementRef = useRef<HTMLButtonElement>(null)\n\n const onFocus = useCallbackRef(\n handlerAll(onFocusProp, (ev) => {\n setFocused(true)\n\n if (!inputSelectionRef.current) return\n\n ev.target.selectionStart =\n inputSelectionRef.current.start ?? ev.currentTarget.value.length\n ev.currentTarget.selectionEnd =\n inputSelectionRef.current.end ?? ev.currentTarget.selectionStart\n }),\n )\n const onBlur = useCallbackRef(\n handlerAll(onBlurProp, () => {\n setFocused(false)\n\n if (clampValueOnBlur) validateAndClamp()\n }),\n )\n const onInvalid = useCallbackRef(onInvalidProp)\n const getAriaValueText = useCallbackRef(getAriaValueTextProp)\n const isValidCharacter = useCallbackRef(\n isValidCharacterProp ?? isDefaultValidCharacter,\n )\n\n const {\n cast,\n isMax,\n isMin,\n isOut,\n setValue,\n update,\n value,\n valueAsNumber,\n ...counter\n } = useCounter({\n defaultValue,\n keepWithinRange,\n max,\n min,\n precision,\n step: stepProp,\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const valueText = useMemo(() => {\n let text = getAriaValueText(value)\n\n if (text != null) return text\n\n text = value.toString()\n\n return !text ? undefined : text\n }, [value, getAriaValueText])\n\n const sanitize = useCallback(\n (value: string) => value.split(\"\").filter(isValidCharacter).join(\"\"),\n [isValidCharacter],\n )\n\n const parse = useCallback(\n (value: string) => parseProp?.(value) ?? value,\n [parseProp],\n )\n\n const format = useCallback(\n (value: number | string) => (formatProp?.(value) ?? value).toString(),\n [formatProp],\n )\n\n const increment = useCallback(\n (step = stepProp ?? 1) => {\n if (isInteractive) counter.increment(step)\n },\n [isInteractive, counter, stepProp],\n )\n\n const decrement = useCallback(\n (step = stepProp ?? 1) => {\n if (isInteractive) counter.decrement(step)\n },\n [isInteractive, counter, stepProp],\n )\n\n const validateAndClamp = useCallback(() => {\n let next = value as number | string\n\n if (value === \"\") return\n\n const valueStartsWithE = /^[eE]/.test(value.toString())\n\n if (valueStartsWithE) {\n setValue(\"\")\n } else {\n if (valueAsNumber < min) next = min\n\n if (valueAsNumber > max) next = max\n\n cast(next)\n }\n }, [cast, max, min, setValue, value, valueAsNumber])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if ((ev.nativeEvent as InputEvent).isComposing) return\n\n const parsedInput = parse(ev.currentTarget.value)\n\n update(sanitize(parsedInput))\n\n inputSelectionRef.current = {\n end: ev.currentTarget.selectionEnd,\n start: ev.currentTarget.selectionStart,\n }\n },\n [parse, update, sanitize],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.nativeEvent.isComposing) return\n\n if (!isValidNumericKeyboardEvent(ev, isValidCharacter))\n ev.preventDefault()\n\n const step = getStep(ev) * (stepProp ?? 1)\n\n const keyMap: { [key: string]: KeyboardEventHandler } = {\n ArrowDown: () => decrement(step),\n ArrowUp: () => increment(step),\n End: () => update(max),\n Home: () => update(min),\n }\n\n const action = keyMap[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n action(ev)\n },\n [decrement, increment, isValidCharacter, max, min, stepProp, update],\n )\n\n const { down, isSpinning, stop, up } = useSpinner(increment, decrement)\n\n useAttributeObserver(incrementRef, [\"disabled\"], isSpinning, stop)\n useAttributeObserver(decrementRef, [\"disabled\"], isSpinning, stop)\n\n const focusInput = useCallback(() => {\n if (focusInputOnChange)\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n }, [focusInputOnChange])\n\n const eventUp = useCallback(\n (ev: any) => {\n ev.preventDefault()\n up()\n focusInput()\n },\n [focusInput, up],\n )\n\n const eventDown = useCallback(\n (ev: any) => {\n ev.preventDefault()\n down()\n focusInput()\n },\n [focusInput, down],\n )\n\n useUpdateEffect(() => {\n if (valueAsNumber > max) {\n onInvalid(\"rangeOverflow\", format(value), valueAsNumber)\n } else if (valueAsNumber < min) {\n onInvalid(\"rangeOverflow\", format(value), valueAsNumber)\n }\n }, [valueAsNumber, value, format, onInvalid])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n const notInSync = inputRef.current.value != value\n\n if (!notInSync) return\n\n const parsedInput = parse(inputRef.current.value)\n\n setValue(sanitize(parsedInput))\n }, [parse, sanitize])\n\n useEventListener(\n () => inputRef.current,\n \"wheel\",\n (ev) => {\n const ownerDocument = inputRef.current?.ownerDocument ?? document\n const isFocused = ownerDocument.activeElement === inputRef.current\n\n if (!allowMouseWheel || !isFocused) return\n\n ev.preventDefault()\n\n const step = getStep(ev as any) * (stepProp ?? 1)\n const direction = Math.sign(ev.deltaY)\n\n if (direction === -1) {\n increment(step)\n } else if (direction === 1) {\n decrement(step)\n }\n },\n { passive: false },\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n id,\n type: \"text\",\n name,\n disabled,\n inputMode,\n pattern,\n readOnly,\n required,\n role: \"spinbutton\",\n ...formControlProps,\n ...props,\n ref: mergeRefs(inputRef, ref),\n \"aria-invalid\": ariaAttr(isInvalid ?? isOut),\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n max,\n min,\n step: stepProp,\n value: format(value),\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onFocus),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n id,\n name,\n inputMode,\n pattern,\n required,\n disabled,\n readOnly,\n formControlProps,\n min,\n max,\n stepProp,\n format,\n value,\n valueAsNumber,\n valueText,\n isInvalid,\n isOut,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n ],\n )\n\n const getIncrementProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMax)\n\n return {\n disabled: trulyDisabled,\n readOnly,\n required,\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, incrementRef),\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n tabIndex: -1,\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button === 0 && !trulyDisabled) eventUp(ev)\n }),\n onPointerLeave: handlerAll(props.onPointerLeave, stop),\n onPointerUp: handlerAll(props.onPointerUp, stop),\n }\n },\n [\n disabled,\n keepWithinRange,\n isMax,\n required,\n readOnly,\n formControlProps,\n stop,\n eventUp,\n ],\n )\n\n const getDecrementProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMin)\n\n return {\n disabled: trulyDisabled,\n readOnly,\n required,\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, decrementRef),\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n tabIndex: -1,\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button === 0 && !trulyDisabled) eventDown(ev)\n }),\n onPointerLeave: handlerAll(props.onPointerLeave, stop),\n onPointerUp: handlerAll(props.onPointerUp, stop),\n }\n },\n [\n disabled,\n keepWithinRange,\n isMin,\n required,\n readOnly,\n formControlProps,\n stop,\n eventDown,\n ],\n )\n\n return {\n isDisabled,\n isFocused,\n isReadOnly,\n isRequired,\n props: rest,\n value: format(value),\n valueAsNumber,\n getDecrementProps,\n getIncrementProps,\n getInputProps,\n }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n\nconst INTERVAL = 50\n\nconst DELAY = 300\n\ntype Action = \"decrement\" | \"increment\"\n\nconst useSpinner = (increment: Function, decrement: Function) => {\n const [isSpinning, setIsSpinning] = useState(false)\n const [action, setAction] = useState<Action | null>(null)\n const [isOnce, setIsOnce] = useState(true)\n const timeoutRef = useRef<any>(null)\n\n const removeTimeout = () => clearTimeout(timeoutRef.current)\n\n useInterval(\n () => {\n if (action === \"increment\") increment()\n\n if (action === \"decrement\") decrement()\n },\n isSpinning ? INTERVAL : null,\n )\n\n const up = useCallback(() => {\n if (isOnce) increment()\n\n timeoutRef.current = setTimeout(() => {\n setIsOnce(false)\n setIsSpinning(true)\n setAction(\"increment\")\n }, DELAY)\n }, [increment, isOnce])\n\n const down = useCallback(() => {\n if (isOnce) decrement()\n\n timeoutRef.current = setTimeout(() => {\n setIsOnce(false)\n setIsSpinning(true)\n setAction(\"decrement\")\n }, DELAY)\n }, [decrement, isOnce])\n\n const stop = useCallback(() => {\n setIsOnce(true)\n setIsSpinning(false)\n removeTimeout()\n }, [])\n\n useEffect(() => {\n return () => removeTimeout()\n }, [])\n\n return { down, isSpinning, stop, up }\n}\n\nconst useAttributeObserver = (\n ref: React.RefObject<HTMLElement | null>,\n attributeFilter: string[],\n enabled: boolean,\n func: () => void,\n) => {\n useEffect(() => {\n if (!ref.current || !enabled) return\n\n const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n const observer = new ownerDocument.MutationObserver((changes) => {\n for (const { type, attributeName } of changes) {\n if (\n type === \"attributes\" &&\n attributeName &&\n attributeFilter.includes(attributeName)\n )\n func()\n }\n })\n\n observer.observe(ref.current, { attributeFilter, attributes: true })\n\n return () => observer.disconnect()\n })\n}\n\ninterface NumberInputOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the addon for the number input.\n */\n isStepper?: boolean\n /**\n * Props for addon component.\n */\n addonProps?: HTMLUIProps\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps\n /**\n * Props for decrement component.\n */\n decrementProps?: NumberDecrementStepperProps\n /**\n * Props for increment component.\n */\n incrementProps?: NumberIncrementStepperProps\n}\n\nexport interface NumberInputProps\n extends Omit<\n HTMLUIProps<\"input\">,\n | \"defaultValue\"\n | \"disabled\"\n | \"max\"\n | \"min\"\n | \"onChange\"\n | \"onInvalid\"\n | \"readOnly\"\n | \"required\"\n | \"size\"\n | \"step\"\n | \"value\"\n >,\n ThemeProps<\"NumberInput\">,\n Omit<UseNumberInputProps, \"disabled\" | \"readOnly\" | \"required\">,\n NumberInputOptions {}\n\ninterface NumberInputContext {\n styles: { [key: string]: CSSUIObject | undefined }\n getDecrementProps: PropGetter<\"button\">\n getIncrementProps: PropGetter<\"button\">\n getInputProps: PropGetter<\"input\">\n}\n\nconst [NumberInputContextProvider, useNumberInputContext] =\n createContext<NumberInputContext>({\n name: \"NumberInputContext\",\n errorMessage: `useNumberInputContext returned is 'undefined'. Seems you forgot to wrap the components in \"<NumberInput />\"`,\n })\n\n/**\n * `NumberInput` is a component used to obtain numeric input from the user.\n *\n * @see Docs https://yamada-ui.com/components/forms/number-input\n */\nexport const NumberInput = forwardRef<NumberInputProps, \"input\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NumberInput\", props)\n const {\n className,\n isStepper = true,\n addonProps,\n containerProps,\n decrementProps,\n incrementProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const {\n props: rest,\n getDecrementProps,\n getIncrementProps,\n getInputProps,\n } = useNumberInput(computedProps)\n\n const css: CSSUIObject = {\n position: \"relative\",\n zIndex: 0,\n ...styles.container,\n }\n\n return (\n <NumberInputContextProvider\n value={{ styles, getDecrementProps, getIncrementProps, getInputProps }}\n >\n <ui.div\n className={cx(\"ui-number-input\", className)}\n __css={css}\n {...containerProps}\n >\n <NumberInputField {...getInputProps(rest, ref)} />\n\n {isStepper ? (\n <NumberInputAddon {...addonProps}>\n <NumberIncrementStepper {...incrementProps} />\n <NumberDecrementStepper {...decrementProps} />\n </NumberInputAddon>\n ) : null}\n </ui.div>\n </NumberInputContextProvider>\n )\n },\n)\n\nNumberInput.displayName = \"NumberInput\"\nNumberInput.__ui__ = \"NumberInput\"\n\ntype NumberInputFieldProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"readOnly\" | \"required\" | \"size\"\n>\n\nconst NumberInputField = forwardRef<NumberInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\n width: \"100%\",\n ...styles.field,\n }\n\n return (\n <ui.input\n ref={ref}\n className={cx(\"ui-number-input__field\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nNumberInputField.displayName = \"NumberInputField\"\nNumberInputField.__ui__ = \"NumberInputField\"\n\ntype NumberInputAddonProps = HTMLUIProps\n\nconst NumberInputAddon = forwardRef<NumberInputAddonProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n height: \"calc(100% - 2px)\",\n insetEnd: \"0px\",\n margin: \"1px\",\n position: \"absolute\",\n top: \"0\",\n zIndex: \"fallback(yamcha, 1)\",\n ...styles.addon,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-number-input__addon\", className)}\n aria-hidden\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nNumberInputAddon.displayName = \"NumberInputAddon\"\nNumberInputAddon.__ui__ = \"NumberInputAddon\"\n\nconst Stepper = ui(\"button\", {\n baseStyle: {\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"flex\",\n flex: 1,\n justifyContent: \"center\",\n lineHeight: \"normal\",\n transitionDuration: \"normal\",\n transitionProperty: \"common\",\n userSelect: \"none\",\n },\n})\n\ntype NumberIncrementStepperProps = HTMLUIProps<\"button\">\n\nconst NumberIncrementStepper = forwardRef<\n NumberIncrementStepperProps,\n \"button\"\n>(({ className, children, ...rest }, ref) => {\n const { styles, getIncrementProps } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <Stepper\n className={cx(\"ui-number-input__stepper--up\", className)}\n {...getIncrementProps(rest, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon __css={{ transform: \"rotate(180deg)\" }} />}\n </Stepper>\n )\n})\n\nNumberIncrementStepper.displayName = \"NumberIncrementStepper\"\nNumberIncrementStepper.__ui__ = \"NumberIncrementStepper\"\n\ntype NumberDecrementStepperProps = HTMLUIProps<\"button\">\n\nconst NumberDecrementStepper = forwardRef<\n NumberDecrementStepperProps,\n \"button\"\n>(({ className, children, ...rest }, ref) => {\n const { styles, getDecrementProps } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <Stepper\n className={cx(\"ui-number-input__stepper--down\", className)}\n {...getDecrementProps(rest, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon />}\n </Stepper>\n )\n})\n\nNumberDecrementStepper.displayName = \"NumberDecrementStepper\"\nNumberDecrementStepper.__ui__ = \"NumberDecrementStepper\"\n"],"mappings":"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","names":["value","isFocused","props"]}
|
package/dist/index.js
CHANGED
|
@@ -78,10 +78,10 @@ var useNumberInput = (props = {}) => {
|
|
|
78
78
|
...rest
|
|
79
79
|
} = (0, import_form_control.useFormControlProps)(props);
|
|
80
80
|
const {
|
|
81
|
+
"aria-invalid": isInvalid,
|
|
81
82
|
disabled,
|
|
82
83
|
readOnly,
|
|
83
84
|
required,
|
|
84
|
-
"aria-invalid": isInvalid,
|
|
85
85
|
onBlur: onBlurProp,
|
|
86
86
|
onFocus: onFocusProp,
|
|
87
87
|
...formControlProps
|
|
@@ -287,17 +287,17 @@ var useNumberInput = (props = {}) => {
|
|
|
287
287
|
...formControlProps,
|
|
288
288
|
...props2,
|
|
289
289
|
ref: (0, import_utils.mergeRefs)(inputRef, ref),
|
|
290
|
+
"aria-invalid": (0, import_utils.ariaAttr)(isInvalid != null ? isInvalid : isOut),
|
|
291
|
+
"aria-valuemax": max,
|
|
292
|
+
"aria-valuemin": min,
|
|
293
|
+
"aria-valuenow": Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber,
|
|
294
|
+
"aria-valuetext": valueText,
|
|
290
295
|
autoComplete: "off",
|
|
291
296
|
autoCorrect: "off",
|
|
292
297
|
max,
|
|
293
298
|
min,
|
|
294
299
|
step: stepProp,
|
|
295
300
|
value: format(value),
|
|
296
|
-
"aria-invalid": (0, import_utils.ariaAttr)(isInvalid != null ? isInvalid : isOut),
|
|
297
|
-
"aria-valuemax": max,
|
|
298
|
-
"aria-valuemin": min,
|
|
299
|
-
"aria-valuenow": Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber,
|
|
300
|
-
"aria-valuetext": valueText,
|
|
301
301
|
onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
|
|
302
302
|
onChange: (0, import_utils.handlerAll)(props2.onChange, onChange),
|
|
303
303
|
onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocus),
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/number-input.tsx"],"sourcesContent":["export { NumberInput, useNumberInput } from \"./number-input\"\nexport type {\n NumberInputProps,\n UseNumberInputProps,\n UseNumberInputReturn,\n} from \"./number-input\"\n","import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { UseFormControlProps } from \"@yamada-ui/form-control\"\nimport type { UseCounterProps } from \"@yamada-ui/use-counter\"\nimport type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n} from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { useCounter } from \"@yamada-ui/use-counter\"\nimport { useEventListener } from \"@yamada-ui/use-event-listener\"\nimport { useInterval } from \"@yamada-ui/use-interval\"\nimport {\n ariaAttr,\n createContext,\n cx,\n handlerAll,\n mergeRefs,\n pickObject,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst isDefaultValidCharacter = (character: string) =>\n /^[Ee0-9+\\-.]$/.test(character)\n\nconst isValidNumericKeyboardEvent = (\n { key, altKey, ctrlKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n const isModifierKey = ctrlKey || altKey || metaKey\n const isSingleCharacterKey = key.length === 1\n\n if (!isSingleCharacterKey || isModifierKey) return true\n\n return isValid(key)\n}\n\nconst getStep = <Y extends KeyboardEvent | WheelEvent>({\n ctrlKey,\n metaKey,\n shiftKey,\n}: Y) => {\n let ratio = 1\n\n if (metaKey || ctrlKey) ratio = 0.1\n\n if (shiftKey) ratio = 10\n\n return ratio\n}\n\ntype ValidityState = \"rangeOverflow\" | \"rangeUnderflow\"\n\nexport interface UseNumberInputProps\n extends UseFormControlProps<HTMLInputElement>,\n UseCounterProps {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * If `true`, the input's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\n /**\n * This controls the value update when you blur out of the input.\n * - If `true` and the value is greater than `max`, the value will be reset to `max`.\n * - Else, the value remains the same.\n *\n * @default true\n */\n clampValueOnBlur?: boolean\n /**\n * If `true`, the input will be focused as you increment or decrement the value with the stepper.\n *\n * @default true\n */\n focusInputOnChange?: boolean\n /**\n * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: number | string) => number | string\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number | string) => string | undefined\n /**\n * Hints at the type of data that might be entered by the user.\n * It also determines the type of keyboard shown to the user on mobile devices.\n *\n * @default 'decimal'\n */\n inputMode?: InputHTMLAttributes<any>[\"inputMode\"]\n /**\n * Whether the pressed key should be allowed in the input.\n * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\\-.]$/.\n */\n isValidCharacter?: (value: string) => boolean\n /**\n * If using a custom display format, this converts the custom format to a format `parseFloat` understands.\n */\n parse?: (value: string) => string\n /**\n * The pattern used to check the <input> element's value against on form submission.\n *\n * @default '[0-9]*(.[0-9]+)?'\n */\n pattern?: InputHTMLAttributes<any>[\"pattern\"]\n /**\n * The callback invoked when invalid number is entered.\n */\n onInvalid?: (\n message: ValidityState,\n value: string,\n valueAsNumber: number,\n ) => void\n}\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n id,\n name,\n allowMouseWheel,\n clampValueOnBlur = true,\n defaultValue,\n focusInputOnChange = true,\n format: formatProp,\n getAriaValueText: getAriaValueTextProp,\n inputMode = \"decimal\",\n isValidCharacter: isValidCharacterProp,\n keepWithinRange = true,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n parse: parseProp,\n pattern = \"[0-9]*(.[0-9]+)?\",\n precision,\n step: stepProp,\n value: valueProp,\n onChange: onChangeProp,\n onInvalid: onInvalidProp,\n ...rest\n } = useFormControlProps(props)\n const {\n disabled,\n readOnly,\n required,\n \"aria-invalid\": isInvalid,\n onBlur: onBlurProp,\n onFocus: onFocusProp,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n\n const isRequired = required\n const isReadOnly = readOnly\n const isDisabled = disabled\n\n const [isFocused, setFocused] = useState(false)\n const isInteractive = !(readOnly || disabled)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const inputSelectionRef = useRef<{\n end: null | number\n start: null | number\n } | null>(null)\n const incrementRef = useRef<HTMLButtonElement>(null)\n const decrementRef = useRef<HTMLButtonElement>(null)\n\n const onFocus = useCallbackRef(\n handlerAll(onFocusProp, (ev) => {\n setFocused(true)\n\n if (!inputSelectionRef.current) return\n\n ev.target.selectionStart =\n inputSelectionRef.current.start ?? ev.currentTarget.value.length\n ev.currentTarget.selectionEnd =\n inputSelectionRef.current.end ?? ev.currentTarget.selectionStart\n }),\n )\n const onBlur = useCallbackRef(\n handlerAll(onBlurProp, () => {\n setFocused(false)\n\n if (clampValueOnBlur) validateAndClamp()\n }),\n )\n const onInvalid = useCallbackRef(onInvalidProp)\n const getAriaValueText = useCallbackRef(getAriaValueTextProp)\n const isValidCharacter = useCallbackRef(\n isValidCharacterProp ?? isDefaultValidCharacter,\n )\n\n const {\n cast,\n isMax,\n isMin,\n isOut,\n setValue,\n update,\n value,\n valueAsNumber,\n ...counter\n } = useCounter({\n defaultValue,\n keepWithinRange,\n max,\n min,\n precision,\n step: stepProp,\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const valueText = useMemo(() => {\n let text = getAriaValueText(value)\n\n if (text != null) return text\n\n text = value.toString()\n\n return !text ? undefined : text\n }, [value, getAriaValueText])\n\n const sanitize = useCallback(\n (value: string) => value.split(\"\").filter(isValidCharacter).join(\"\"),\n [isValidCharacter],\n )\n\n const parse = useCallback(\n (value: string) => parseProp?.(value) ?? value,\n [parseProp],\n )\n\n const format = useCallback(\n (value: number | string) => (formatProp?.(value) ?? value).toString(),\n [formatProp],\n )\n\n const increment = useCallback(\n (step = stepProp ?? 1) => {\n if (isInteractive) counter.increment(step)\n },\n [isInteractive, counter, stepProp],\n )\n\n const decrement = useCallback(\n (step = stepProp ?? 1) => {\n if (isInteractive) counter.decrement(step)\n },\n [isInteractive, counter, stepProp],\n )\n\n const validateAndClamp = useCallback(() => {\n let next = value as number | string\n\n if (value === \"\") return\n\n const valueStartsWithE = /^[eE]/.test(value.toString())\n\n if (valueStartsWithE) {\n setValue(\"\")\n } else {\n if (valueAsNumber < min) next = min\n\n if (valueAsNumber > max) next = max\n\n cast(next)\n }\n }, [cast, max, min, setValue, value, valueAsNumber])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if ((ev.nativeEvent as InputEvent).isComposing) return\n\n const parsedInput = parse(ev.currentTarget.value)\n\n update(sanitize(parsedInput))\n\n inputSelectionRef.current = {\n end: ev.currentTarget.selectionEnd,\n start: ev.currentTarget.selectionStart,\n }\n },\n [parse, update, sanitize],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.nativeEvent.isComposing) return\n\n if (!isValidNumericKeyboardEvent(ev, isValidCharacter))\n ev.preventDefault()\n\n const step = getStep(ev) * (stepProp ?? 1)\n\n const keyMap: { [key: string]: KeyboardEventHandler } = {\n ArrowDown: () => decrement(step),\n ArrowUp: () => increment(step),\n End: () => update(max),\n Home: () => update(min),\n }\n\n const action = keyMap[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n action(ev)\n },\n [decrement, increment, isValidCharacter, max, min, stepProp, update],\n )\n\n const { down, isSpinning, stop, up } = useSpinner(increment, decrement)\n\n useAttributeObserver(incrementRef, [\"disabled\"], isSpinning, stop)\n useAttributeObserver(decrementRef, [\"disabled\"], isSpinning, stop)\n\n const focusInput = useCallback(() => {\n if (focusInputOnChange)\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n }, [focusInputOnChange])\n\n const eventUp = useCallback(\n (ev: any) => {\n ev.preventDefault()\n up()\n focusInput()\n },\n [focusInput, up],\n )\n\n const eventDown = useCallback(\n (ev: any) => {\n ev.preventDefault()\n down()\n focusInput()\n },\n [focusInput, down],\n )\n\n useUpdateEffect(() => {\n if (valueAsNumber > max) {\n onInvalid(\"rangeOverflow\", format(value), valueAsNumber)\n } else if (valueAsNumber < min) {\n onInvalid(\"rangeOverflow\", format(value), valueAsNumber)\n }\n }, [valueAsNumber, value, format, onInvalid])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n const notInSync = inputRef.current.value != value\n\n if (!notInSync) return\n\n const parsedInput = parse(inputRef.current.value)\n\n setValue(sanitize(parsedInput))\n }, [parse, sanitize])\n\n useEventListener(\n () => inputRef.current,\n \"wheel\",\n (ev) => {\n const ownerDocument = inputRef.current?.ownerDocument ?? document\n const isFocused = ownerDocument.activeElement === inputRef.current\n\n if (!allowMouseWheel || !isFocused) return\n\n ev.preventDefault()\n\n const step = getStep(ev as any) * (stepProp ?? 1)\n const direction = Math.sign(ev.deltaY)\n\n if (direction === -1) {\n increment(step)\n } else if (direction === 1) {\n decrement(step)\n }\n },\n { passive: false },\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n id,\n type: \"text\",\n name,\n disabled,\n inputMode,\n pattern,\n readOnly,\n required,\n role: \"spinbutton\",\n ...formControlProps,\n ...props,\n ref: mergeRefs(inputRef, ref),\n autoComplete: \"off\",\n autoCorrect: \"off\",\n max,\n min,\n step: stepProp,\n value: format(value),\n \"aria-invalid\": ariaAttr(isInvalid ?? isOut),\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onFocus),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n id,\n name,\n inputMode,\n pattern,\n required,\n disabled,\n readOnly,\n formControlProps,\n min,\n max,\n stepProp,\n format,\n value,\n valueAsNumber,\n valueText,\n isInvalid,\n isOut,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n ],\n )\n\n const getIncrementProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMax)\n\n return {\n disabled: trulyDisabled,\n readOnly,\n required,\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, incrementRef),\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n tabIndex: -1,\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button === 0 && !trulyDisabled) eventUp(ev)\n }),\n onPointerLeave: handlerAll(props.onPointerLeave, stop),\n onPointerUp: handlerAll(props.onPointerUp, stop),\n }\n },\n [\n disabled,\n keepWithinRange,\n isMax,\n required,\n readOnly,\n formControlProps,\n stop,\n eventUp,\n ],\n )\n\n const getDecrementProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMin)\n\n return {\n disabled: trulyDisabled,\n readOnly,\n required,\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, decrementRef),\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n tabIndex: -1,\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button === 0 && !trulyDisabled) eventDown(ev)\n }),\n onPointerLeave: handlerAll(props.onPointerLeave, stop),\n onPointerUp: handlerAll(props.onPointerUp, stop),\n }\n },\n [\n disabled,\n keepWithinRange,\n isMin,\n required,\n readOnly,\n formControlProps,\n stop,\n eventDown,\n ],\n )\n\n return {\n isDisabled,\n isFocused,\n isReadOnly,\n isRequired,\n props: rest,\n value: format(value),\n valueAsNumber,\n getDecrementProps,\n getIncrementProps,\n getInputProps,\n }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n\nconst INTERVAL = 50\n\nconst DELAY = 300\n\ntype Action = \"decrement\" | \"increment\"\n\nconst useSpinner = (increment: Function, decrement: Function) => {\n const [isSpinning, setIsSpinning] = useState(false)\n const [action, setAction] = useState<Action | null>(null)\n const [isOnce, setIsOnce] = useState(true)\n const timeoutRef = useRef<any>(null)\n\n const removeTimeout = () => clearTimeout(timeoutRef.current)\n\n useInterval(\n () => {\n if (action === \"increment\") increment()\n\n if (action === \"decrement\") decrement()\n },\n isSpinning ? INTERVAL : null,\n )\n\n const up = useCallback(() => {\n if (isOnce) increment()\n\n timeoutRef.current = setTimeout(() => {\n setIsOnce(false)\n setIsSpinning(true)\n setAction(\"increment\")\n }, DELAY)\n }, [increment, isOnce])\n\n const down = useCallback(() => {\n if (isOnce) decrement()\n\n timeoutRef.current = setTimeout(() => {\n setIsOnce(false)\n setIsSpinning(true)\n setAction(\"decrement\")\n }, DELAY)\n }, [decrement, isOnce])\n\n const stop = useCallback(() => {\n setIsOnce(true)\n setIsSpinning(false)\n removeTimeout()\n }, [])\n\n useEffect(() => {\n return () => removeTimeout()\n }, [])\n\n return { down, isSpinning, stop, up }\n}\n\nconst useAttributeObserver = (\n ref: React.RefObject<HTMLElement | null>,\n attributeFilter: string[],\n enabled: boolean,\n func: () => void,\n) => {\n useEffect(() => {\n if (!ref.current || !enabled) return\n\n const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n const observer = new ownerDocument.MutationObserver((changes) => {\n for (const { type, attributeName } of changes) {\n if (\n type === \"attributes\" &&\n attributeName &&\n attributeFilter.includes(attributeName)\n )\n func()\n }\n })\n\n observer.observe(ref.current, { attributeFilter, attributes: true })\n\n return () => observer.disconnect()\n })\n}\n\ninterface NumberInputOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the addon for the number input.\n */\n isStepper?: boolean\n /**\n * Props for addon component.\n */\n addonProps?: HTMLUIProps\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps\n /**\n * Props for decrement component.\n */\n decrementProps?: NumberDecrementStepperProps\n /**\n * Props for increment component.\n */\n incrementProps?: NumberIncrementStepperProps\n}\n\nexport interface NumberInputProps\n extends Omit<\n HTMLUIProps<\"input\">,\n | \"defaultValue\"\n | \"disabled\"\n | \"max\"\n | \"min\"\n | \"onChange\"\n | \"onInvalid\"\n | \"readOnly\"\n | \"required\"\n | \"size\"\n | \"step\"\n | \"value\"\n >,\n ThemeProps<\"NumberInput\">,\n Omit<UseNumberInputProps, \"disabled\" | \"readOnly\" | \"required\">,\n NumberInputOptions {}\n\ninterface NumberInputContext {\n styles: { [key: string]: CSSUIObject | undefined }\n getDecrementProps: PropGetter<\"button\">\n getIncrementProps: PropGetter<\"button\">\n getInputProps: PropGetter<\"input\">\n}\n\nconst [NumberInputContextProvider, useNumberInputContext] =\n createContext<NumberInputContext>({\n name: \"NumberInputContext\",\n errorMessage: `useNumberInputContext returned is 'undefined'. Seems you forgot to wrap the components in \"<NumberInput />\"`,\n })\n\n/**\n * `NumberInput` is a component used to obtain numeric input from the user.\n *\n * @see Docs https://yamada-ui.com/components/forms/number-input\n */\nexport const NumberInput = forwardRef<NumberInputProps, \"input\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NumberInput\", props)\n const {\n className,\n isStepper = true,\n addonProps,\n containerProps,\n decrementProps,\n incrementProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const {\n props: rest,\n getDecrementProps,\n getIncrementProps,\n getInputProps,\n } = useNumberInput(computedProps)\n\n const css: CSSUIObject = {\n position: \"relative\",\n zIndex: 0,\n ...styles.container,\n }\n\n return (\n <NumberInputContextProvider\n value={{ styles, getDecrementProps, getIncrementProps, getInputProps }}\n >\n <ui.div\n className={cx(\"ui-number-input\", className)}\n __css={css}\n {...containerProps}\n >\n <NumberInputField {...getInputProps(rest, ref)} />\n\n {isStepper ? (\n <NumberInputAddon {...addonProps}>\n <NumberIncrementStepper {...incrementProps} />\n <NumberDecrementStepper {...decrementProps} />\n </NumberInputAddon>\n ) : null}\n </ui.div>\n </NumberInputContextProvider>\n )\n },\n)\n\nNumberInput.displayName = \"NumberInput\"\nNumberInput.__ui__ = \"NumberInput\"\n\ntype NumberInputFieldProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"readOnly\" | \"required\" | \"size\"\n>\n\nconst NumberInputField = forwardRef<NumberInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\n width: \"100%\",\n ...styles.field,\n }\n\n return (\n <ui.input\n ref={ref}\n className={cx(\"ui-number-input__field\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nNumberInputField.displayName = \"NumberInputField\"\nNumberInputField.__ui__ = \"NumberInputField\"\n\ntype NumberInputAddonProps = HTMLUIProps\n\nconst NumberInputAddon = forwardRef<NumberInputAddonProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n height: \"calc(100% - 2px)\",\n insetEnd: \"0px\",\n margin: \"1px\",\n position: \"absolute\",\n top: \"0\",\n zIndex: \"fallback(yamcha, 1)\",\n ...styles.addon,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-number-input__addon\", className)}\n aria-hidden\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nNumberInputAddon.displayName = \"NumberInputAddon\"\nNumberInputAddon.__ui__ = \"NumberInputAddon\"\n\nconst Stepper = ui(\"button\", {\n baseStyle: {\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"flex\",\n flex: 1,\n justifyContent: \"center\",\n lineHeight: \"normal\",\n transitionDuration: \"normal\",\n transitionProperty: \"common\",\n userSelect: \"none\",\n },\n})\n\ntype NumberIncrementStepperProps = HTMLUIProps<\"button\">\n\nconst NumberIncrementStepper = forwardRef<\n NumberIncrementStepperProps,\n \"button\"\n>(({ className, children, ...rest }, ref) => {\n const { styles, getIncrementProps } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <Stepper\n className={cx(\"ui-number-input__stepper--up\", className)}\n {...getIncrementProps(rest, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon __css={{ transform: \"rotate(180deg)\" }} />}\n </Stepper>\n )\n})\n\nNumberIncrementStepper.displayName = \"NumberIncrementStepper\"\nNumberIncrementStepper.__ui__ = \"NumberIncrementStepper\"\n\ntype NumberDecrementStepperProps = HTMLUIProps<\"button\">\n\nconst NumberDecrementStepper = forwardRef<\n NumberDecrementStepperProps,\n \"button\"\n>(({ className, children, ...rest }, ref) => {\n const { styles, getDecrementProps } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <Stepper\n className={cx(\"ui-number-input__stepper--down\", className)}\n {...getDecrementProps(rest, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon />}\n </Stepper>\n )\n})\n\nNumberDecrementStepper.displayName = \"NumberDecrementStepper\"\nNumberDecrementStepper.__ui__ = \"NumberDecrementStepper\"\n"],"mappings":"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","names":["value","isFocused","props"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/number-input.tsx"],"sourcesContent":["export { NumberInput, useNumberInput } from \"./number-input\"\nexport type {\n NumberInputProps,\n UseNumberInputProps,\n UseNumberInputReturn,\n} from \"./number-input\"\n","import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { UseFormControlProps } from \"@yamada-ui/form-control\"\nimport type { UseCounterProps } from \"@yamada-ui/use-counter\"\nimport type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n} from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { useCounter } from \"@yamada-ui/use-counter\"\nimport { useEventListener } from \"@yamada-ui/use-event-listener\"\nimport { useInterval } from \"@yamada-ui/use-interval\"\nimport {\n ariaAttr,\n createContext,\n cx,\n handlerAll,\n mergeRefs,\n pickObject,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst isDefaultValidCharacter = (character: string) =>\n /^[Ee0-9+\\-.]$/.test(character)\n\nconst isValidNumericKeyboardEvent = (\n { key, altKey, ctrlKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n const isModifierKey = ctrlKey || altKey || metaKey\n const isSingleCharacterKey = key.length === 1\n\n if (!isSingleCharacterKey || isModifierKey) return true\n\n return isValid(key)\n}\n\nconst getStep = <Y extends KeyboardEvent | WheelEvent>({\n ctrlKey,\n metaKey,\n shiftKey,\n}: Y) => {\n let ratio = 1\n\n if (metaKey || ctrlKey) ratio = 0.1\n\n if (shiftKey) ratio = 10\n\n return ratio\n}\n\ntype ValidityState = \"rangeOverflow\" | \"rangeUnderflow\"\n\nexport interface UseNumberInputProps\n extends UseFormControlProps<HTMLInputElement>,\n UseCounterProps {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * If `true`, the input's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\n /**\n * This controls the value update when you blur out of the input.\n * - If `true` and the value is greater than `max`, the value will be reset to `max`.\n * - Else, the value remains the same.\n *\n * @default true\n */\n clampValueOnBlur?: boolean\n /**\n * If `true`, the input will be focused as you increment or decrement the value with the stepper.\n *\n * @default true\n */\n focusInputOnChange?: boolean\n /**\n * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: number | string) => number | string\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number | string) => string | undefined\n /**\n * Hints at the type of data that might be entered by the user.\n * It also determines the type of keyboard shown to the user on mobile devices.\n *\n * @default 'decimal'\n */\n inputMode?: InputHTMLAttributes<any>[\"inputMode\"]\n /**\n * Whether the pressed key should be allowed in the input.\n * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\\-.]$/.\n */\n isValidCharacter?: (value: string) => boolean\n /**\n * If using a custom display format, this converts the custom format to a format `parseFloat` understands.\n */\n parse?: (value: string) => string\n /**\n * The pattern used to check the <input> element's value against on form submission.\n *\n * @default '[0-9]*(.[0-9]+)?'\n */\n pattern?: InputHTMLAttributes<any>[\"pattern\"]\n /**\n * The callback invoked when invalid number is entered.\n */\n onInvalid?: (\n message: ValidityState,\n value: string,\n valueAsNumber: number,\n ) => void\n}\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n id,\n name,\n allowMouseWheel,\n clampValueOnBlur = true,\n defaultValue,\n focusInputOnChange = true,\n format: formatProp,\n getAriaValueText: getAriaValueTextProp,\n inputMode = \"decimal\",\n isValidCharacter: isValidCharacterProp,\n keepWithinRange = true,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n parse: parseProp,\n pattern = \"[0-9]*(.[0-9]+)?\",\n precision,\n step: stepProp,\n value: valueProp,\n onChange: onChangeProp,\n onInvalid: onInvalidProp,\n ...rest\n } = useFormControlProps(props)\n const {\n \"aria-invalid\": isInvalid,\n disabled,\n readOnly,\n required,\n onBlur: onBlurProp,\n onFocus: onFocusProp,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n\n const isRequired = required\n const isReadOnly = readOnly\n const isDisabled = disabled\n\n const [isFocused, setFocused] = useState(false)\n const isInteractive = !(readOnly || disabled)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const inputSelectionRef = useRef<{\n end: null | number\n start: null | number\n } | null>(null)\n const incrementRef = useRef<HTMLButtonElement>(null)\n const decrementRef = useRef<HTMLButtonElement>(null)\n\n const onFocus = useCallbackRef(\n handlerAll(onFocusProp, (ev) => {\n setFocused(true)\n\n if (!inputSelectionRef.current) return\n\n ev.target.selectionStart =\n inputSelectionRef.current.start ?? ev.currentTarget.value.length\n ev.currentTarget.selectionEnd =\n inputSelectionRef.current.end ?? ev.currentTarget.selectionStart\n }),\n )\n const onBlur = useCallbackRef(\n handlerAll(onBlurProp, () => {\n setFocused(false)\n\n if (clampValueOnBlur) validateAndClamp()\n }),\n )\n const onInvalid = useCallbackRef(onInvalidProp)\n const getAriaValueText = useCallbackRef(getAriaValueTextProp)\n const isValidCharacter = useCallbackRef(\n isValidCharacterProp ?? isDefaultValidCharacter,\n )\n\n const {\n cast,\n isMax,\n isMin,\n isOut,\n setValue,\n update,\n value,\n valueAsNumber,\n ...counter\n } = useCounter({\n defaultValue,\n keepWithinRange,\n max,\n min,\n precision,\n step: stepProp,\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const valueText = useMemo(() => {\n let text = getAriaValueText(value)\n\n if (text != null) return text\n\n text = value.toString()\n\n return !text ? undefined : text\n }, [value, getAriaValueText])\n\n const sanitize = useCallback(\n (value: string) => value.split(\"\").filter(isValidCharacter).join(\"\"),\n [isValidCharacter],\n )\n\n const parse = useCallback(\n (value: string) => parseProp?.(value) ?? value,\n [parseProp],\n )\n\n const format = useCallback(\n (value: number | string) => (formatProp?.(value) ?? value).toString(),\n [formatProp],\n )\n\n const increment = useCallback(\n (step = stepProp ?? 1) => {\n if (isInteractive) counter.increment(step)\n },\n [isInteractive, counter, stepProp],\n )\n\n const decrement = useCallback(\n (step = stepProp ?? 1) => {\n if (isInteractive) counter.decrement(step)\n },\n [isInteractive, counter, stepProp],\n )\n\n const validateAndClamp = useCallback(() => {\n let next = value as number | string\n\n if (value === \"\") return\n\n const valueStartsWithE = /^[eE]/.test(value.toString())\n\n if (valueStartsWithE) {\n setValue(\"\")\n } else {\n if (valueAsNumber < min) next = min\n\n if (valueAsNumber > max) next = max\n\n cast(next)\n }\n }, [cast, max, min, setValue, value, valueAsNumber])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if ((ev.nativeEvent as InputEvent).isComposing) return\n\n const parsedInput = parse(ev.currentTarget.value)\n\n update(sanitize(parsedInput))\n\n inputSelectionRef.current = {\n end: ev.currentTarget.selectionEnd,\n start: ev.currentTarget.selectionStart,\n }\n },\n [parse, update, sanitize],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.nativeEvent.isComposing) return\n\n if (!isValidNumericKeyboardEvent(ev, isValidCharacter))\n ev.preventDefault()\n\n const step = getStep(ev) * (stepProp ?? 1)\n\n const keyMap: { [key: string]: KeyboardEventHandler } = {\n ArrowDown: () => decrement(step),\n ArrowUp: () => increment(step),\n End: () => update(max),\n Home: () => update(min),\n }\n\n const action = keyMap[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n action(ev)\n },\n [decrement, increment, isValidCharacter, max, min, stepProp, update],\n )\n\n const { down, isSpinning, stop, up } = useSpinner(increment, decrement)\n\n useAttributeObserver(incrementRef, [\"disabled\"], isSpinning, stop)\n useAttributeObserver(decrementRef, [\"disabled\"], isSpinning, stop)\n\n const focusInput = useCallback(() => {\n if (focusInputOnChange)\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n }, [focusInputOnChange])\n\n const eventUp = useCallback(\n (ev: any) => {\n ev.preventDefault()\n up()\n focusInput()\n },\n [focusInput, up],\n )\n\n const eventDown = useCallback(\n (ev: any) => {\n ev.preventDefault()\n down()\n focusInput()\n },\n [focusInput, down],\n )\n\n useUpdateEffect(() => {\n if (valueAsNumber > max) {\n onInvalid(\"rangeOverflow\", format(value), valueAsNumber)\n } else if (valueAsNumber < min) {\n onInvalid(\"rangeOverflow\", format(value), valueAsNumber)\n }\n }, [valueAsNumber, value, format, onInvalid])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n const notInSync = inputRef.current.value != value\n\n if (!notInSync) return\n\n const parsedInput = parse(inputRef.current.value)\n\n setValue(sanitize(parsedInput))\n }, [parse, sanitize])\n\n useEventListener(\n () => inputRef.current,\n \"wheel\",\n (ev) => {\n const ownerDocument = inputRef.current?.ownerDocument ?? document\n const isFocused = ownerDocument.activeElement === inputRef.current\n\n if (!allowMouseWheel || !isFocused) return\n\n ev.preventDefault()\n\n const step = getStep(ev as any) * (stepProp ?? 1)\n const direction = Math.sign(ev.deltaY)\n\n if (direction === -1) {\n increment(step)\n } else if (direction === 1) {\n decrement(step)\n }\n },\n { passive: false },\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n id,\n type: \"text\",\n name,\n disabled,\n inputMode,\n pattern,\n readOnly,\n required,\n role: \"spinbutton\",\n ...formControlProps,\n ...props,\n ref: mergeRefs(inputRef, ref),\n \"aria-invalid\": ariaAttr(isInvalid ?? isOut),\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n max,\n min,\n step: stepProp,\n value: format(value),\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onFocus),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n id,\n name,\n inputMode,\n pattern,\n required,\n disabled,\n readOnly,\n formControlProps,\n min,\n max,\n stepProp,\n format,\n value,\n valueAsNumber,\n valueText,\n isInvalid,\n isOut,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n ],\n )\n\n const getIncrementProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMax)\n\n return {\n disabled: trulyDisabled,\n readOnly,\n required,\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, incrementRef),\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n tabIndex: -1,\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button === 0 && !trulyDisabled) eventUp(ev)\n }),\n onPointerLeave: handlerAll(props.onPointerLeave, stop),\n onPointerUp: handlerAll(props.onPointerUp, stop),\n }\n },\n [\n disabled,\n keepWithinRange,\n isMax,\n required,\n readOnly,\n formControlProps,\n stop,\n eventUp,\n ],\n )\n\n const getDecrementProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMin)\n\n return {\n disabled: trulyDisabled,\n readOnly,\n required,\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, decrementRef),\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n tabIndex: -1,\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button === 0 && !trulyDisabled) eventDown(ev)\n }),\n onPointerLeave: handlerAll(props.onPointerLeave, stop),\n onPointerUp: handlerAll(props.onPointerUp, stop),\n }\n },\n [\n disabled,\n keepWithinRange,\n isMin,\n required,\n readOnly,\n formControlProps,\n stop,\n eventDown,\n ],\n )\n\n return {\n isDisabled,\n isFocused,\n isReadOnly,\n isRequired,\n props: rest,\n value: format(value),\n valueAsNumber,\n getDecrementProps,\n getIncrementProps,\n getInputProps,\n }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n\nconst INTERVAL = 50\n\nconst DELAY = 300\n\ntype Action = \"decrement\" | \"increment\"\n\nconst useSpinner = (increment: Function, decrement: Function) => {\n const [isSpinning, setIsSpinning] = useState(false)\n const [action, setAction] = useState<Action | null>(null)\n const [isOnce, setIsOnce] = useState(true)\n const timeoutRef = useRef<any>(null)\n\n const removeTimeout = () => clearTimeout(timeoutRef.current)\n\n useInterval(\n () => {\n if (action === \"increment\") increment()\n\n if (action === \"decrement\") decrement()\n },\n isSpinning ? INTERVAL : null,\n )\n\n const up = useCallback(() => {\n if (isOnce) increment()\n\n timeoutRef.current = setTimeout(() => {\n setIsOnce(false)\n setIsSpinning(true)\n setAction(\"increment\")\n }, DELAY)\n }, [increment, isOnce])\n\n const down = useCallback(() => {\n if (isOnce) decrement()\n\n timeoutRef.current = setTimeout(() => {\n setIsOnce(false)\n setIsSpinning(true)\n setAction(\"decrement\")\n }, DELAY)\n }, [decrement, isOnce])\n\n const stop = useCallback(() => {\n setIsOnce(true)\n setIsSpinning(false)\n removeTimeout()\n }, [])\n\n useEffect(() => {\n return () => removeTimeout()\n }, [])\n\n return { down, isSpinning, stop, up }\n}\n\nconst useAttributeObserver = (\n ref: React.RefObject<HTMLElement | null>,\n attributeFilter: string[],\n enabled: boolean,\n func: () => void,\n) => {\n useEffect(() => {\n if (!ref.current || !enabled) return\n\n const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n const observer = new ownerDocument.MutationObserver((changes) => {\n for (const { type, attributeName } of changes) {\n if (\n type === \"attributes\" &&\n attributeName &&\n attributeFilter.includes(attributeName)\n )\n func()\n }\n })\n\n observer.observe(ref.current, { attributeFilter, attributes: true })\n\n return () => observer.disconnect()\n })\n}\n\ninterface NumberInputOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the addon for the number input.\n */\n isStepper?: boolean\n /**\n * Props for addon component.\n */\n addonProps?: HTMLUIProps\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps\n /**\n * Props for decrement component.\n */\n decrementProps?: NumberDecrementStepperProps\n /**\n * Props for increment component.\n */\n incrementProps?: NumberIncrementStepperProps\n}\n\nexport interface NumberInputProps\n extends Omit<\n HTMLUIProps<\"input\">,\n | \"defaultValue\"\n | \"disabled\"\n | \"max\"\n | \"min\"\n | \"onChange\"\n | \"onInvalid\"\n | \"readOnly\"\n | \"required\"\n | \"size\"\n | \"step\"\n | \"value\"\n >,\n ThemeProps<\"NumberInput\">,\n Omit<UseNumberInputProps, \"disabled\" | \"readOnly\" | \"required\">,\n NumberInputOptions {}\n\ninterface NumberInputContext {\n styles: { [key: string]: CSSUIObject | undefined }\n getDecrementProps: PropGetter<\"button\">\n getIncrementProps: PropGetter<\"button\">\n getInputProps: PropGetter<\"input\">\n}\n\nconst [NumberInputContextProvider, useNumberInputContext] =\n createContext<NumberInputContext>({\n name: \"NumberInputContext\",\n errorMessage: `useNumberInputContext returned is 'undefined'. Seems you forgot to wrap the components in \"<NumberInput />\"`,\n })\n\n/**\n * `NumberInput` is a component used to obtain numeric input from the user.\n *\n * @see Docs https://yamada-ui.com/components/forms/number-input\n */\nexport const NumberInput = forwardRef<NumberInputProps, \"input\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NumberInput\", props)\n const {\n className,\n isStepper = true,\n addonProps,\n containerProps,\n decrementProps,\n incrementProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const {\n props: rest,\n getDecrementProps,\n getIncrementProps,\n getInputProps,\n } = useNumberInput(computedProps)\n\n const css: CSSUIObject = {\n position: \"relative\",\n zIndex: 0,\n ...styles.container,\n }\n\n return (\n <NumberInputContextProvider\n value={{ styles, getDecrementProps, getIncrementProps, getInputProps }}\n >\n <ui.div\n className={cx(\"ui-number-input\", className)}\n __css={css}\n {...containerProps}\n >\n <NumberInputField {...getInputProps(rest, ref)} />\n\n {isStepper ? (\n <NumberInputAddon {...addonProps}>\n <NumberIncrementStepper {...incrementProps} />\n <NumberDecrementStepper {...decrementProps} />\n </NumberInputAddon>\n ) : null}\n </ui.div>\n </NumberInputContextProvider>\n )\n },\n)\n\nNumberInput.displayName = \"NumberInput\"\nNumberInput.__ui__ = \"NumberInput\"\n\ntype NumberInputFieldProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"readOnly\" | \"required\" | \"size\"\n>\n\nconst NumberInputField = forwardRef<NumberInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\n width: \"100%\",\n ...styles.field,\n }\n\n return (\n <ui.input\n ref={ref}\n className={cx(\"ui-number-input__field\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nNumberInputField.displayName = \"NumberInputField\"\nNumberInputField.__ui__ = \"NumberInputField\"\n\ntype NumberInputAddonProps = HTMLUIProps\n\nconst NumberInputAddon = forwardRef<NumberInputAddonProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n height: \"calc(100% - 2px)\",\n insetEnd: \"0px\",\n margin: \"1px\",\n position: \"absolute\",\n top: \"0\",\n zIndex: \"fallback(yamcha, 1)\",\n ...styles.addon,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-number-input__addon\", className)}\n aria-hidden\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nNumberInputAddon.displayName = \"NumberInputAddon\"\nNumberInputAddon.__ui__ = \"NumberInputAddon\"\n\nconst Stepper = ui(\"button\", {\n baseStyle: {\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"flex\",\n flex: 1,\n justifyContent: \"center\",\n lineHeight: \"normal\",\n transitionDuration: \"normal\",\n transitionProperty: \"common\",\n userSelect: \"none\",\n },\n})\n\ntype NumberIncrementStepperProps = HTMLUIProps<\"button\">\n\nconst NumberIncrementStepper = forwardRef<\n NumberIncrementStepperProps,\n \"button\"\n>(({ className, children, ...rest }, ref) => {\n const { styles, getIncrementProps } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <Stepper\n className={cx(\"ui-number-input__stepper--up\", className)}\n {...getIncrementProps(rest, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon __css={{ transform: \"rotate(180deg)\" }} />}\n </Stepper>\n )\n})\n\nNumberIncrementStepper.displayName = \"NumberIncrementStepper\"\nNumberIncrementStepper.__ui__ = \"NumberIncrementStepper\"\n\ntype NumberDecrementStepperProps = HTMLUIProps<\"button\">\n\nconst NumberDecrementStepper = forwardRef<\n NumberDecrementStepperProps,\n \"button\"\n>(({ className, children, ...rest }, ref) => {\n const { styles, getDecrementProps } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <Stepper\n className={cx(\"ui-number-input__stepper--down\", className)}\n {...getDecrementProps(rest, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon />}\n </Stepper>\n )\n})\n\nNumberDecrementStepper.displayName = \"NumberDecrementStepper\"\nNumberDecrementStepper.__ui__ = \"NumberDecrementStepper\"\n"],"mappings":"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","names":["value","isFocused","props"]}
|
package/dist/index.mjs
CHANGED
package/dist/number-input.d.mts
CHANGED
|
@@ -80,14 +80,14 @@ declare const useNumberInput: (props?: UseNumberInputProps) => {
|
|
|
80
80
|
_focusVisible?: {} | undefined;
|
|
81
81
|
_hover?: {} | undefined;
|
|
82
82
|
_invalid?: {} | undefined;
|
|
83
|
-
disabled: boolean | undefined;
|
|
84
|
-
readOnly: boolean | undefined;
|
|
85
|
-
required: boolean | undefined;
|
|
86
83
|
"aria-disabled": boolean | undefined;
|
|
87
84
|
"aria-invalid": boolean | undefined;
|
|
88
85
|
"aria-readonly": boolean | undefined;
|
|
89
86
|
"aria-required": boolean | undefined;
|
|
90
87
|
"data-readonly": boolean | "false" | "true";
|
|
88
|
+
disabled: boolean | undefined;
|
|
89
|
+
readOnly: boolean | undefined;
|
|
90
|
+
required: boolean | undefined;
|
|
91
91
|
onBlur: (event: react.FocusEvent<HTMLInputElement, Element>) => void;
|
|
92
92
|
onFocus: (event: react.FocusEvent<HTMLInputElement, Element>) => void;
|
|
93
93
|
};
|
package/dist/number-input.d.ts
CHANGED
|
@@ -80,14 +80,14 @@ declare const useNumberInput: (props?: UseNumberInputProps) => {
|
|
|
80
80
|
_focusVisible?: {} | undefined;
|
|
81
81
|
_hover?: {} | undefined;
|
|
82
82
|
_invalid?: {} | undefined;
|
|
83
|
-
disabled: boolean | undefined;
|
|
84
|
-
readOnly: boolean | undefined;
|
|
85
|
-
required: boolean | undefined;
|
|
86
83
|
"aria-disabled": boolean | undefined;
|
|
87
84
|
"aria-invalid": boolean | undefined;
|
|
88
85
|
"aria-readonly": boolean | undefined;
|
|
89
86
|
"aria-required": boolean | undefined;
|
|
90
87
|
"data-readonly": boolean | "false" | "true";
|
|
88
|
+
disabled: boolean | undefined;
|
|
89
|
+
readOnly: boolean | undefined;
|
|
90
|
+
required: boolean | undefined;
|
|
91
91
|
onBlur: (event: react.FocusEvent<HTMLInputElement, Element>) => void;
|
|
92
92
|
onFocus: (event: react.FocusEvent<HTMLInputElement, Element>) => void;
|
|
93
93
|
};
|
package/dist/number-input.js
CHANGED
|
@@ -76,10 +76,10 @@ var useNumberInput = (props = {}) => {
|
|
|
76
76
|
...rest
|
|
77
77
|
} = (0, import_form_control.useFormControlProps)(props);
|
|
78
78
|
const {
|
|
79
|
+
"aria-invalid": isInvalid,
|
|
79
80
|
disabled,
|
|
80
81
|
readOnly,
|
|
81
82
|
required,
|
|
82
|
-
"aria-invalid": isInvalid,
|
|
83
83
|
onBlur: onBlurProp,
|
|
84
84
|
onFocus: onFocusProp,
|
|
85
85
|
...formControlProps
|
|
@@ -285,17 +285,17 @@ var useNumberInput = (props = {}) => {
|
|
|
285
285
|
...formControlProps,
|
|
286
286
|
...props2,
|
|
287
287
|
ref: (0, import_utils.mergeRefs)(inputRef, ref),
|
|
288
|
+
"aria-invalid": (0, import_utils.ariaAttr)(isInvalid != null ? isInvalid : isOut),
|
|
289
|
+
"aria-valuemax": max,
|
|
290
|
+
"aria-valuemin": min,
|
|
291
|
+
"aria-valuenow": Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber,
|
|
292
|
+
"aria-valuetext": valueText,
|
|
288
293
|
autoComplete: "off",
|
|
289
294
|
autoCorrect: "off",
|
|
290
295
|
max,
|
|
291
296
|
min,
|
|
292
297
|
step: stepProp,
|
|
293
298
|
value: format(value),
|
|
294
|
-
"aria-invalid": (0, import_utils.ariaAttr)(isInvalid != null ? isInvalid : isOut),
|
|
295
|
-
"aria-valuemax": max,
|
|
296
|
-
"aria-valuemin": min,
|
|
297
|
-
"aria-valuenow": Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber,
|
|
298
|
-
"aria-valuetext": valueText,
|
|
299
299
|
onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
|
|
300
300
|
onChange: (0, import_utils.handlerAll)(props2.onChange, onChange),
|
|
301
301
|
onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocus),
|
package/dist/number-input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/number-input.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { UseFormControlProps } from \"@yamada-ui/form-control\"\nimport type { UseCounterProps } from \"@yamada-ui/use-counter\"\nimport type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n} from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { useCounter } from \"@yamada-ui/use-counter\"\nimport { useEventListener } from \"@yamada-ui/use-event-listener\"\nimport { useInterval } from \"@yamada-ui/use-interval\"\nimport {\n ariaAttr,\n createContext,\n cx,\n handlerAll,\n mergeRefs,\n pickObject,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst isDefaultValidCharacter = (character: string) =>\n /^[Ee0-9+\\-.]$/.test(character)\n\nconst isValidNumericKeyboardEvent = (\n { key, altKey, ctrlKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n const isModifierKey = ctrlKey || altKey || metaKey\n const isSingleCharacterKey = key.length === 1\n\n if (!isSingleCharacterKey || isModifierKey) return true\n\n return isValid(key)\n}\n\nconst getStep = <Y extends KeyboardEvent | WheelEvent>({\n ctrlKey,\n metaKey,\n shiftKey,\n}: Y) => {\n let ratio = 1\n\n if (metaKey || ctrlKey) ratio = 0.1\n\n if (shiftKey) ratio = 10\n\n return ratio\n}\n\ntype ValidityState = \"rangeOverflow\" | \"rangeUnderflow\"\n\nexport interface UseNumberInputProps\n extends UseFormControlProps<HTMLInputElement>,\n UseCounterProps {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * If `true`, the input's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\n /**\n * This controls the value update when you blur out of the input.\n * - If `true` and the value is greater than `max`, the value will be reset to `max`.\n * - Else, the value remains the same.\n *\n * @default true\n */\n clampValueOnBlur?: boolean\n /**\n * If `true`, the input will be focused as you increment or decrement the value with the stepper.\n *\n * @default true\n */\n focusInputOnChange?: boolean\n /**\n * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: number | string) => number | string\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number | string) => string | undefined\n /**\n * Hints at the type of data that might be entered by the user.\n * It also determines the type of keyboard shown to the user on mobile devices.\n *\n * @default 'decimal'\n */\n inputMode?: InputHTMLAttributes<any>[\"inputMode\"]\n /**\n * Whether the pressed key should be allowed in the input.\n * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\\-.]$/.\n */\n isValidCharacter?: (value: string) => boolean\n /**\n * If using a custom display format, this converts the custom format to a format `parseFloat` understands.\n */\n parse?: (value: string) => string\n /**\n * The pattern used to check the <input> element's value against on form submission.\n *\n * @default '[0-9]*(.[0-9]+)?'\n */\n pattern?: InputHTMLAttributes<any>[\"pattern\"]\n /**\n * The callback invoked when invalid number is entered.\n */\n onInvalid?: (\n message: ValidityState,\n value: string,\n valueAsNumber: number,\n ) => void\n}\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n id,\n name,\n allowMouseWheel,\n clampValueOnBlur = true,\n defaultValue,\n focusInputOnChange = true,\n format: formatProp,\n getAriaValueText: getAriaValueTextProp,\n inputMode = \"decimal\",\n isValidCharacter: isValidCharacterProp,\n keepWithinRange = true,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n parse: parseProp,\n pattern = \"[0-9]*(.[0-9]+)?\",\n precision,\n step: stepProp,\n value: valueProp,\n onChange: onChangeProp,\n onInvalid: onInvalidProp,\n ...rest\n } = useFormControlProps(props)\n const {\n disabled,\n readOnly,\n required,\n \"aria-invalid\": isInvalid,\n onBlur: onBlurProp,\n onFocus: onFocusProp,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n\n const isRequired = required\n const isReadOnly = readOnly\n const isDisabled = disabled\n\n const [isFocused, setFocused] = useState(false)\n const isInteractive = !(readOnly || disabled)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const inputSelectionRef = useRef<{\n end: null | number\n start: null | number\n } | null>(null)\n const incrementRef = useRef<HTMLButtonElement>(null)\n const decrementRef = useRef<HTMLButtonElement>(null)\n\n const onFocus = useCallbackRef(\n handlerAll(onFocusProp, (ev) => {\n setFocused(true)\n\n if (!inputSelectionRef.current) return\n\n ev.target.selectionStart =\n inputSelectionRef.current.start ?? ev.currentTarget.value.length\n ev.currentTarget.selectionEnd =\n inputSelectionRef.current.end ?? ev.currentTarget.selectionStart\n }),\n )\n const onBlur = useCallbackRef(\n handlerAll(onBlurProp, () => {\n setFocused(false)\n\n if (clampValueOnBlur) validateAndClamp()\n }),\n )\n const onInvalid = useCallbackRef(onInvalidProp)\n const getAriaValueText = useCallbackRef(getAriaValueTextProp)\n const isValidCharacter = useCallbackRef(\n isValidCharacterProp ?? isDefaultValidCharacter,\n )\n\n const {\n cast,\n isMax,\n isMin,\n isOut,\n setValue,\n update,\n value,\n valueAsNumber,\n ...counter\n } = useCounter({\n defaultValue,\n keepWithinRange,\n max,\n min,\n precision,\n step: stepProp,\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const valueText = useMemo(() => {\n let text = getAriaValueText(value)\n\n if (text != null) return text\n\n text = value.toString()\n\n return !text ? undefined : text\n }, [value, getAriaValueText])\n\n const sanitize = useCallback(\n (value: string) => value.split(\"\").filter(isValidCharacter).join(\"\"),\n [isValidCharacter],\n )\n\n const parse = useCallback(\n (value: string) => parseProp?.(value) ?? value,\n [parseProp],\n )\n\n const format = useCallback(\n (value: number | string) => (formatProp?.(value) ?? value).toString(),\n [formatProp],\n )\n\n const increment = useCallback(\n (step = stepProp ?? 1) => {\n if (isInteractive) counter.increment(step)\n },\n [isInteractive, counter, stepProp],\n )\n\n const decrement = useCallback(\n (step = stepProp ?? 1) => {\n if (isInteractive) counter.decrement(step)\n },\n [isInteractive, counter, stepProp],\n )\n\n const validateAndClamp = useCallback(() => {\n let next = value as number | string\n\n if (value === \"\") return\n\n const valueStartsWithE = /^[eE]/.test(value.toString())\n\n if (valueStartsWithE) {\n setValue(\"\")\n } else {\n if (valueAsNumber < min) next = min\n\n if (valueAsNumber > max) next = max\n\n cast(next)\n }\n }, [cast, max, min, setValue, value, valueAsNumber])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if ((ev.nativeEvent as InputEvent).isComposing) return\n\n const parsedInput = parse(ev.currentTarget.value)\n\n update(sanitize(parsedInput))\n\n inputSelectionRef.current = {\n end: ev.currentTarget.selectionEnd,\n start: ev.currentTarget.selectionStart,\n }\n },\n [parse, update, sanitize],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.nativeEvent.isComposing) return\n\n if (!isValidNumericKeyboardEvent(ev, isValidCharacter))\n ev.preventDefault()\n\n const step = getStep(ev) * (stepProp ?? 1)\n\n const keyMap: { [key: string]: KeyboardEventHandler } = {\n ArrowDown: () => decrement(step),\n ArrowUp: () => increment(step),\n End: () => update(max),\n Home: () => update(min),\n }\n\n const action = keyMap[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n action(ev)\n },\n [decrement, increment, isValidCharacter, max, min, stepProp, update],\n )\n\n const { down, isSpinning, stop, up } = useSpinner(increment, decrement)\n\n useAttributeObserver(incrementRef, [\"disabled\"], isSpinning, stop)\n useAttributeObserver(decrementRef, [\"disabled\"], isSpinning, stop)\n\n const focusInput = useCallback(() => {\n if (focusInputOnChange)\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n }, [focusInputOnChange])\n\n const eventUp = useCallback(\n (ev: any) => {\n ev.preventDefault()\n up()\n focusInput()\n },\n [focusInput, up],\n )\n\n const eventDown = useCallback(\n (ev: any) => {\n ev.preventDefault()\n down()\n focusInput()\n },\n [focusInput, down],\n )\n\n useUpdateEffect(() => {\n if (valueAsNumber > max) {\n onInvalid(\"rangeOverflow\", format(value), valueAsNumber)\n } else if (valueAsNumber < min) {\n onInvalid(\"rangeOverflow\", format(value), valueAsNumber)\n }\n }, [valueAsNumber, value, format, onInvalid])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n const notInSync = inputRef.current.value != value\n\n if (!notInSync) return\n\n const parsedInput = parse(inputRef.current.value)\n\n setValue(sanitize(parsedInput))\n }, [parse, sanitize])\n\n useEventListener(\n () => inputRef.current,\n \"wheel\",\n (ev) => {\n const ownerDocument = inputRef.current?.ownerDocument ?? document\n const isFocused = ownerDocument.activeElement === inputRef.current\n\n if (!allowMouseWheel || !isFocused) return\n\n ev.preventDefault()\n\n const step = getStep(ev as any) * (stepProp ?? 1)\n const direction = Math.sign(ev.deltaY)\n\n if (direction === -1) {\n increment(step)\n } else if (direction === 1) {\n decrement(step)\n }\n },\n { passive: false },\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n id,\n type: \"text\",\n name,\n disabled,\n inputMode,\n pattern,\n readOnly,\n required,\n role: \"spinbutton\",\n ...formControlProps,\n ...props,\n ref: mergeRefs(inputRef, ref),\n autoComplete: \"off\",\n autoCorrect: \"off\",\n max,\n min,\n step: stepProp,\n value: format(value),\n \"aria-invalid\": ariaAttr(isInvalid ?? isOut),\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onFocus),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n id,\n name,\n inputMode,\n pattern,\n required,\n disabled,\n readOnly,\n formControlProps,\n min,\n max,\n stepProp,\n format,\n value,\n valueAsNumber,\n valueText,\n isInvalid,\n isOut,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n ],\n )\n\n const getIncrementProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMax)\n\n return {\n disabled: trulyDisabled,\n readOnly,\n required,\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, incrementRef),\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n tabIndex: -1,\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button === 0 && !trulyDisabled) eventUp(ev)\n }),\n onPointerLeave: handlerAll(props.onPointerLeave, stop),\n onPointerUp: handlerAll(props.onPointerUp, stop),\n }\n },\n [\n disabled,\n keepWithinRange,\n isMax,\n required,\n readOnly,\n formControlProps,\n stop,\n eventUp,\n ],\n )\n\n const getDecrementProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMin)\n\n return {\n disabled: trulyDisabled,\n readOnly,\n required,\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, decrementRef),\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n tabIndex: -1,\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button === 0 && !trulyDisabled) eventDown(ev)\n }),\n onPointerLeave: handlerAll(props.onPointerLeave, stop),\n onPointerUp: handlerAll(props.onPointerUp, stop),\n }\n },\n [\n disabled,\n keepWithinRange,\n isMin,\n required,\n readOnly,\n formControlProps,\n stop,\n eventDown,\n ],\n )\n\n return {\n isDisabled,\n isFocused,\n isReadOnly,\n isRequired,\n props: rest,\n value: format(value),\n valueAsNumber,\n getDecrementProps,\n getIncrementProps,\n getInputProps,\n }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n\nconst INTERVAL = 50\n\nconst DELAY = 300\n\ntype Action = \"decrement\" | \"increment\"\n\nconst useSpinner = (increment: Function, decrement: Function) => {\n const [isSpinning, setIsSpinning] = useState(false)\n const [action, setAction] = useState<Action | null>(null)\n const [isOnce, setIsOnce] = useState(true)\n const timeoutRef = useRef<any>(null)\n\n const removeTimeout = () => clearTimeout(timeoutRef.current)\n\n useInterval(\n () => {\n if (action === \"increment\") increment()\n\n if (action === \"decrement\") decrement()\n },\n isSpinning ? INTERVAL : null,\n )\n\n const up = useCallback(() => {\n if (isOnce) increment()\n\n timeoutRef.current = setTimeout(() => {\n setIsOnce(false)\n setIsSpinning(true)\n setAction(\"increment\")\n }, DELAY)\n }, [increment, isOnce])\n\n const down = useCallback(() => {\n if (isOnce) decrement()\n\n timeoutRef.current = setTimeout(() => {\n setIsOnce(false)\n setIsSpinning(true)\n setAction(\"decrement\")\n }, DELAY)\n }, [decrement, isOnce])\n\n const stop = useCallback(() => {\n setIsOnce(true)\n setIsSpinning(false)\n removeTimeout()\n }, [])\n\n useEffect(() => {\n return () => removeTimeout()\n }, [])\n\n return { down, isSpinning, stop, up }\n}\n\nconst useAttributeObserver = (\n ref: React.RefObject<HTMLElement | null>,\n attributeFilter: string[],\n enabled: boolean,\n func: () => void,\n) => {\n useEffect(() => {\n if (!ref.current || !enabled) return\n\n const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n const observer = new ownerDocument.MutationObserver((changes) => {\n for (const { type, attributeName } of changes) {\n if (\n type === \"attributes\" &&\n attributeName &&\n attributeFilter.includes(attributeName)\n )\n func()\n }\n })\n\n observer.observe(ref.current, { attributeFilter, attributes: true })\n\n return () => observer.disconnect()\n })\n}\n\ninterface NumberInputOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the addon for the number input.\n */\n isStepper?: boolean\n /**\n * Props for addon component.\n */\n addonProps?: HTMLUIProps\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps\n /**\n * Props for decrement component.\n */\n decrementProps?: NumberDecrementStepperProps\n /**\n * Props for increment component.\n */\n incrementProps?: NumberIncrementStepperProps\n}\n\nexport interface NumberInputProps\n extends Omit<\n HTMLUIProps<\"input\">,\n | \"defaultValue\"\n | \"disabled\"\n | \"max\"\n | \"min\"\n | \"onChange\"\n | \"onInvalid\"\n | \"readOnly\"\n | \"required\"\n | \"size\"\n | \"step\"\n | \"value\"\n >,\n ThemeProps<\"NumberInput\">,\n Omit<UseNumberInputProps, \"disabled\" | \"readOnly\" | \"required\">,\n NumberInputOptions {}\n\ninterface NumberInputContext {\n styles: { [key: string]: CSSUIObject | undefined }\n getDecrementProps: PropGetter<\"button\">\n getIncrementProps: PropGetter<\"button\">\n getInputProps: PropGetter<\"input\">\n}\n\nconst [NumberInputContextProvider, useNumberInputContext] =\n createContext<NumberInputContext>({\n name: \"NumberInputContext\",\n errorMessage: `useNumberInputContext returned is 'undefined'. Seems you forgot to wrap the components in \"<NumberInput />\"`,\n })\n\n/**\n * `NumberInput` is a component used to obtain numeric input from the user.\n *\n * @see Docs https://yamada-ui.com/components/forms/number-input\n */\nexport const NumberInput = forwardRef<NumberInputProps, \"input\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NumberInput\", props)\n const {\n className,\n isStepper = true,\n addonProps,\n containerProps,\n decrementProps,\n incrementProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const {\n props: rest,\n getDecrementProps,\n getIncrementProps,\n getInputProps,\n } = useNumberInput(computedProps)\n\n const css: CSSUIObject = {\n position: \"relative\",\n zIndex: 0,\n ...styles.container,\n }\n\n return (\n <NumberInputContextProvider\n value={{ styles, getDecrementProps, getIncrementProps, getInputProps }}\n >\n <ui.div\n className={cx(\"ui-number-input\", className)}\n __css={css}\n {...containerProps}\n >\n <NumberInputField {...getInputProps(rest, ref)} />\n\n {isStepper ? (\n <NumberInputAddon {...addonProps}>\n <NumberIncrementStepper {...incrementProps} />\n <NumberDecrementStepper {...decrementProps} />\n </NumberInputAddon>\n ) : null}\n </ui.div>\n </NumberInputContextProvider>\n )\n },\n)\n\nNumberInput.displayName = \"NumberInput\"\nNumberInput.__ui__ = \"NumberInput\"\n\ntype NumberInputFieldProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"readOnly\" | \"required\" | \"size\"\n>\n\nconst NumberInputField = forwardRef<NumberInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\n width: \"100%\",\n ...styles.field,\n }\n\n return (\n <ui.input\n ref={ref}\n className={cx(\"ui-number-input__field\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nNumberInputField.displayName = \"NumberInputField\"\nNumberInputField.__ui__ = \"NumberInputField\"\n\ntype NumberInputAddonProps = HTMLUIProps\n\nconst NumberInputAddon = forwardRef<NumberInputAddonProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n height: \"calc(100% - 2px)\",\n insetEnd: \"0px\",\n margin: \"1px\",\n position: \"absolute\",\n top: \"0\",\n zIndex: \"fallback(yamcha, 1)\",\n ...styles.addon,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-number-input__addon\", className)}\n aria-hidden\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nNumberInputAddon.displayName = \"NumberInputAddon\"\nNumberInputAddon.__ui__ = \"NumberInputAddon\"\n\nconst Stepper = ui(\"button\", {\n baseStyle: {\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"flex\",\n flex: 1,\n justifyContent: \"center\",\n lineHeight: \"normal\",\n transitionDuration: \"normal\",\n transitionProperty: \"common\",\n userSelect: \"none\",\n },\n})\n\ntype NumberIncrementStepperProps = HTMLUIProps<\"button\">\n\nconst NumberIncrementStepper = forwardRef<\n NumberIncrementStepperProps,\n \"button\"\n>(({ className, children, ...rest }, ref) => {\n const { styles, getIncrementProps } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <Stepper\n className={cx(\"ui-number-input__stepper--up\", className)}\n {...getIncrementProps(rest, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon __css={{ transform: \"rotate(180deg)\" }} />}\n </Stepper>\n )\n})\n\nNumberIncrementStepper.displayName = \"NumberIncrementStepper\"\nNumberIncrementStepper.__ui__ = \"NumberIncrementStepper\"\n\ntype NumberDecrementStepperProps = HTMLUIProps<\"button\">\n\nconst NumberDecrementStepper = forwardRef<\n NumberDecrementStepperProps,\n \"button\"\n>(({ className, children, ...rest }, ref) => {\n const { styles, getDecrementProps } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <Stepper\n className={cx(\"ui-number-input__stepper--down\", className)}\n {...getDecrementProps(rest, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon />}\n </Stepper>\n )\n})\n\nNumberDecrementStepper.displayName = \"NumberDecrementStepper\"\nNumberDecrementStepper.__ui__ = \"NumberDecrementStepper\"\n"],"mappings":"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","names":["value","isFocused","props"]}
|
|
1
|
+
{"version":3,"sources":["../src/number-input.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { UseFormControlProps } from \"@yamada-ui/form-control\"\nimport type { UseCounterProps } from \"@yamada-ui/use-counter\"\nimport type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n} from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { useCounter } from \"@yamada-ui/use-counter\"\nimport { useEventListener } from \"@yamada-ui/use-event-listener\"\nimport { useInterval } from \"@yamada-ui/use-interval\"\nimport {\n ariaAttr,\n createContext,\n cx,\n handlerAll,\n mergeRefs,\n pickObject,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst isDefaultValidCharacter = (character: string) =>\n /^[Ee0-9+\\-.]$/.test(character)\n\nconst isValidNumericKeyboardEvent = (\n { key, altKey, ctrlKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n const isModifierKey = ctrlKey || altKey || metaKey\n const isSingleCharacterKey = key.length === 1\n\n if (!isSingleCharacterKey || isModifierKey) return true\n\n return isValid(key)\n}\n\nconst getStep = <Y extends KeyboardEvent | WheelEvent>({\n ctrlKey,\n metaKey,\n shiftKey,\n}: Y) => {\n let ratio = 1\n\n if (metaKey || ctrlKey) ratio = 0.1\n\n if (shiftKey) ratio = 10\n\n return ratio\n}\n\ntype ValidityState = \"rangeOverflow\" | \"rangeUnderflow\"\n\nexport interface UseNumberInputProps\n extends UseFormControlProps<HTMLInputElement>,\n UseCounterProps {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * If `true`, the input's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\n /**\n * This controls the value update when you blur out of the input.\n * - If `true` and the value is greater than `max`, the value will be reset to `max`.\n * - Else, the value remains the same.\n *\n * @default true\n */\n clampValueOnBlur?: boolean\n /**\n * If `true`, the input will be focused as you increment or decrement the value with the stepper.\n *\n * @default true\n */\n focusInputOnChange?: boolean\n /**\n * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: number | string) => number | string\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number | string) => string | undefined\n /**\n * Hints at the type of data that might be entered by the user.\n * It also determines the type of keyboard shown to the user on mobile devices.\n *\n * @default 'decimal'\n */\n inputMode?: InputHTMLAttributes<any>[\"inputMode\"]\n /**\n * Whether the pressed key should be allowed in the input.\n * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\\-.]$/.\n */\n isValidCharacter?: (value: string) => boolean\n /**\n * If using a custom display format, this converts the custom format to a format `parseFloat` understands.\n */\n parse?: (value: string) => string\n /**\n * The pattern used to check the <input> element's value against on form submission.\n *\n * @default '[0-9]*(.[0-9]+)?'\n */\n pattern?: InputHTMLAttributes<any>[\"pattern\"]\n /**\n * The callback invoked when invalid number is entered.\n */\n onInvalid?: (\n message: ValidityState,\n value: string,\n valueAsNumber: number,\n ) => void\n}\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n id,\n name,\n allowMouseWheel,\n clampValueOnBlur = true,\n defaultValue,\n focusInputOnChange = true,\n format: formatProp,\n getAriaValueText: getAriaValueTextProp,\n inputMode = \"decimal\",\n isValidCharacter: isValidCharacterProp,\n keepWithinRange = true,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n parse: parseProp,\n pattern = \"[0-9]*(.[0-9]+)?\",\n precision,\n step: stepProp,\n value: valueProp,\n onChange: onChangeProp,\n onInvalid: onInvalidProp,\n ...rest\n } = useFormControlProps(props)\n const {\n \"aria-invalid\": isInvalid,\n disabled,\n readOnly,\n required,\n onBlur: onBlurProp,\n onFocus: onFocusProp,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n\n const isRequired = required\n const isReadOnly = readOnly\n const isDisabled = disabled\n\n const [isFocused, setFocused] = useState(false)\n const isInteractive = !(readOnly || disabled)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const inputSelectionRef = useRef<{\n end: null | number\n start: null | number\n } | null>(null)\n const incrementRef = useRef<HTMLButtonElement>(null)\n const decrementRef = useRef<HTMLButtonElement>(null)\n\n const onFocus = useCallbackRef(\n handlerAll(onFocusProp, (ev) => {\n setFocused(true)\n\n if (!inputSelectionRef.current) return\n\n ev.target.selectionStart =\n inputSelectionRef.current.start ?? ev.currentTarget.value.length\n ev.currentTarget.selectionEnd =\n inputSelectionRef.current.end ?? ev.currentTarget.selectionStart\n }),\n )\n const onBlur = useCallbackRef(\n handlerAll(onBlurProp, () => {\n setFocused(false)\n\n if (clampValueOnBlur) validateAndClamp()\n }),\n )\n const onInvalid = useCallbackRef(onInvalidProp)\n const getAriaValueText = useCallbackRef(getAriaValueTextProp)\n const isValidCharacter = useCallbackRef(\n isValidCharacterProp ?? isDefaultValidCharacter,\n )\n\n const {\n cast,\n isMax,\n isMin,\n isOut,\n setValue,\n update,\n value,\n valueAsNumber,\n ...counter\n } = useCounter({\n defaultValue,\n keepWithinRange,\n max,\n min,\n precision,\n step: stepProp,\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const valueText = useMemo(() => {\n let text = getAriaValueText(value)\n\n if (text != null) return text\n\n text = value.toString()\n\n return !text ? undefined : text\n }, [value, getAriaValueText])\n\n const sanitize = useCallback(\n (value: string) => value.split(\"\").filter(isValidCharacter).join(\"\"),\n [isValidCharacter],\n )\n\n const parse = useCallback(\n (value: string) => parseProp?.(value) ?? value,\n [parseProp],\n )\n\n const format = useCallback(\n (value: number | string) => (formatProp?.(value) ?? value).toString(),\n [formatProp],\n )\n\n const increment = useCallback(\n (step = stepProp ?? 1) => {\n if (isInteractive) counter.increment(step)\n },\n [isInteractive, counter, stepProp],\n )\n\n const decrement = useCallback(\n (step = stepProp ?? 1) => {\n if (isInteractive) counter.decrement(step)\n },\n [isInteractive, counter, stepProp],\n )\n\n const validateAndClamp = useCallback(() => {\n let next = value as number | string\n\n if (value === \"\") return\n\n const valueStartsWithE = /^[eE]/.test(value.toString())\n\n if (valueStartsWithE) {\n setValue(\"\")\n } else {\n if (valueAsNumber < min) next = min\n\n if (valueAsNumber > max) next = max\n\n cast(next)\n }\n }, [cast, max, min, setValue, value, valueAsNumber])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if ((ev.nativeEvent as InputEvent).isComposing) return\n\n const parsedInput = parse(ev.currentTarget.value)\n\n update(sanitize(parsedInput))\n\n inputSelectionRef.current = {\n end: ev.currentTarget.selectionEnd,\n start: ev.currentTarget.selectionStart,\n }\n },\n [parse, update, sanitize],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.nativeEvent.isComposing) return\n\n if (!isValidNumericKeyboardEvent(ev, isValidCharacter))\n ev.preventDefault()\n\n const step = getStep(ev) * (stepProp ?? 1)\n\n const keyMap: { [key: string]: KeyboardEventHandler } = {\n ArrowDown: () => decrement(step),\n ArrowUp: () => increment(step),\n End: () => update(max),\n Home: () => update(min),\n }\n\n const action = keyMap[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n action(ev)\n },\n [decrement, increment, isValidCharacter, max, min, stepProp, update],\n )\n\n const { down, isSpinning, stop, up } = useSpinner(increment, decrement)\n\n useAttributeObserver(incrementRef, [\"disabled\"], isSpinning, stop)\n useAttributeObserver(decrementRef, [\"disabled\"], isSpinning, stop)\n\n const focusInput = useCallback(() => {\n if (focusInputOnChange)\n requestAnimationFrame(() => {\n inputRef.current?.focus()\n })\n }, [focusInputOnChange])\n\n const eventUp = useCallback(\n (ev: any) => {\n ev.preventDefault()\n up()\n focusInput()\n },\n [focusInput, up],\n )\n\n const eventDown = useCallback(\n (ev: any) => {\n ev.preventDefault()\n down()\n focusInput()\n },\n [focusInput, down],\n )\n\n useUpdateEffect(() => {\n if (valueAsNumber > max) {\n onInvalid(\"rangeOverflow\", format(value), valueAsNumber)\n } else if (valueAsNumber < min) {\n onInvalid(\"rangeOverflow\", format(value), valueAsNumber)\n }\n }, [valueAsNumber, value, format, onInvalid])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n const notInSync = inputRef.current.value != value\n\n if (!notInSync) return\n\n const parsedInput = parse(inputRef.current.value)\n\n setValue(sanitize(parsedInput))\n }, [parse, sanitize])\n\n useEventListener(\n () => inputRef.current,\n \"wheel\",\n (ev) => {\n const ownerDocument = inputRef.current?.ownerDocument ?? document\n const isFocused = ownerDocument.activeElement === inputRef.current\n\n if (!allowMouseWheel || !isFocused) return\n\n ev.preventDefault()\n\n const step = getStep(ev as any) * (stepProp ?? 1)\n const direction = Math.sign(ev.deltaY)\n\n if (direction === -1) {\n increment(step)\n } else if (direction === 1) {\n decrement(step)\n }\n },\n { passive: false },\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n id,\n type: \"text\",\n name,\n disabled,\n inputMode,\n pattern,\n readOnly,\n required,\n role: \"spinbutton\",\n ...formControlProps,\n ...props,\n ref: mergeRefs(inputRef, ref),\n \"aria-invalid\": ariaAttr(isInvalid ?? isOut),\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n autoComplete: \"off\",\n autoCorrect: \"off\",\n max,\n min,\n step: stepProp,\n value: format(value),\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onFocus),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n id,\n name,\n inputMode,\n pattern,\n required,\n disabled,\n readOnly,\n formControlProps,\n min,\n max,\n stepProp,\n format,\n value,\n valueAsNumber,\n valueText,\n isInvalid,\n isOut,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n ],\n )\n\n const getIncrementProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMax)\n\n return {\n disabled: trulyDisabled,\n readOnly,\n required,\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, incrementRef),\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n tabIndex: -1,\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button === 0 && !trulyDisabled) eventUp(ev)\n }),\n onPointerLeave: handlerAll(props.onPointerLeave, stop),\n onPointerUp: handlerAll(props.onPointerUp, stop),\n }\n },\n [\n disabled,\n keepWithinRange,\n isMax,\n required,\n readOnly,\n formControlProps,\n stop,\n eventUp,\n ],\n )\n\n const getDecrementProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMin)\n\n return {\n disabled: trulyDisabled,\n readOnly,\n required,\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, decrementRef),\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n tabIndex: -1,\n onPointerDown: handlerAll(props.onPointerDown, (ev) => {\n if (ev.button === 0 && !trulyDisabled) eventDown(ev)\n }),\n onPointerLeave: handlerAll(props.onPointerLeave, stop),\n onPointerUp: handlerAll(props.onPointerUp, stop),\n }\n },\n [\n disabled,\n keepWithinRange,\n isMin,\n required,\n readOnly,\n formControlProps,\n stop,\n eventDown,\n ],\n )\n\n return {\n isDisabled,\n isFocused,\n isReadOnly,\n isRequired,\n props: rest,\n value: format(value),\n valueAsNumber,\n getDecrementProps,\n getIncrementProps,\n getInputProps,\n }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n\nconst INTERVAL = 50\n\nconst DELAY = 300\n\ntype Action = \"decrement\" | \"increment\"\n\nconst useSpinner = (increment: Function, decrement: Function) => {\n const [isSpinning, setIsSpinning] = useState(false)\n const [action, setAction] = useState<Action | null>(null)\n const [isOnce, setIsOnce] = useState(true)\n const timeoutRef = useRef<any>(null)\n\n const removeTimeout = () => clearTimeout(timeoutRef.current)\n\n useInterval(\n () => {\n if (action === \"increment\") increment()\n\n if (action === \"decrement\") decrement()\n },\n isSpinning ? INTERVAL : null,\n )\n\n const up = useCallback(() => {\n if (isOnce) increment()\n\n timeoutRef.current = setTimeout(() => {\n setIsOnce(false)\n setIsSpinning(true)\n setAction(\"increment\")\n }, DELAY)\n }, [increment, isOnce])\n\n const down = useCallback(() => {\n if (isOnce) decrement()\n\n timeoutRef.current = setTimeout(() => {\n setIsOnce(false)\n setIsSpinning(true)\n setAction(\"decrement\")\n }, DELAY)\n }, [decrement, isOnce])\n\n const stop = useCallback(() => {\n setIsOnce(true)\n setIsSpinning(false)\n removeTimeout()\n }, [])\n\n useEffect(() => {\n return () => removeTimeout()\n }, [])\n\n return { down, isSpinning, stop, up }\n}\n\nconst useAttributeObserver = (\n ref: React.RefObject<HTMLElement | null>,\n attributeFilter: string[],\n enabled: boolean,\n func: () => void,\n) => {\n useEffect(() => {\n if (!ref.current || !enabled) return\n\n const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n const observer = new ownerDocument.MutationObserver((changes) => {\n for (const { type, attributeName } of changes) {\n if (\n type === \"attributes\" &&\n attributeName &&\n attributeFilter.includes(attributeName)\n )\n func()\n }\n })\n\n observer.observe(ref.current, { attributeFilter, attributes: true })\n\n return () => observer.disconnect()\n })\n}\n\ninterface NumberInputOptions {\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the addon for the number input.\n */\n isStepper?: boolean\n /**\n * Props for addon component.\n */\n addonProps?: HTMLUIProps\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps\n /**\n * Props for decrement component.\n */\n decrementProps?: NumberDecrementStepperProps\n /**\n * Props for increment component.\n */\n incrementProps?: NumberIncrementStepperProps\n}\n\nexport interface NumberInputProps\n extends Omit<\n HTMLUIProps<\"input\">,\n | \"defaultValue\"\n | \"disabled\"\n | \"max\"\n | \"min\"\n | \"onChange\"\n | \"onInvalid\"\n | \"readOnly\"\n | \"required\"\n | \"size\"\n | \"step\"\n | \"value\"\n >,\n ThemeProps<\"NumberInput\">,\n Omit<UseNumberInputProps, \"disabled\" | \"readOnly\" | \"required\">,\n NumberInputOptions {}\n\ninterface NumberInputContext {\n styles: { [key: string]: CSSUIObject | undefined }\n getDecrementProps: PropGetter<\"button\">\n getIncrementProps: PropGetter<\"button\">\n getInputProps: PropGetter<\"input\">\n}\n\nconst [NumberInputContextProvider, useNumberInputContext] =\n createContext<NumberInputContext>({\n name: \"NumberInputContext\",\n errorMessage: `useNumberInputContext returned is 'undefined'. Seems you forgot to wrap the components in \"<NumberInput />\"`,\n })\n\n/**\n * `NumberInput` is a component used to obtain numeric input from the user.\n *\n * @see Docs https://yamada-ui.com/components/forms/number-input\n */\nexport const NumberInput = forwardRef<NumberInputProps, \"input\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"NumberInput\", props)\n const {\n className,\n isStepper = true,\n addonProps,\n containerProps,\n decrementProps,\n incrementProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const {\n props: rest,\n getDecrementProps,\n getIncrementProps,\n getInputProps,\n } = useNumberInput(computedProps)\n\n const css: CSSUIObject = {\n position: \"relative\",\n zIndex: 0,\n ...styles.container,\n }\n\n return (\n <NumberInputContextProvider\n value={{ styles, getDecrementProps, getIncrementProps, getInputProps }}\n >\n <ui.div\n className={cx(\"ui-number-input\", className)}\n __css={css}\n {...containerProps}\n >\n <NumberInputField {...getInputProps(rest, ref)} />\n\n {isStepper ? (\n <NumberInputAddon {...addonProps}>\n <NumberIncrementStepper {...incrementProps} />\n <NumberDecrementStepper {...decrementProps} />\n </NumberInputAddon>\n ) : null}\n </ui.div>\n </NumberInputContextProvider>\n )\n },\n)\n\nNumberInput.displayName = \"NumberInput\"\nNumberInput.__ui__ = \"NumberInput\"\n\ntype NumberInputFieldProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"readOnly\" | \"required\" | \"size\"\n>\n\nconst NumberInputField = forwardRef<NumberInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\n width: \"100%\",\n ...styles.field,\n }\n\n return (\n <ui.input\n ref={ref}\n className={cx(\"ui-number-input__field\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nNumberInputField.displayName = \"NumberInputField\"\nNumberInputField.__ui__ = \"NumberInputField\"\n\ntype NumberInputAddonProps = HTMLUIProps\n\nconst NumberInputAddon = forwardRef<NumberInputAddonProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n height: \"calc(100% - 2px)\",\n insetEnd: \"0px\",\n margin: \"1px\",\n position: \"absolute\",\n top: \"0\",\n zIndex: \"fallback(yamcha, 1)\",\n ...styles.addon,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-number-input__addon\", className)}\n aria-hidden\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nNumberInputAddon.displayName = \"NumberInputAddon\"\nNumberInputAddon.__ui__ = \"NumberInputAddon\"\n\nconst Stepper = ui(\"button\", {\n baseStyle: {\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"flex\",\n flex: 1,\n justifyContent: \"center\",\n lineHeight: \"normal\",\n transitionDuration: \"normal\",\n transitionProperty: \"common\",\n userSelect: \"none\",\n },\n})\n\ntype NumberIncrementStepperProps = HTMLUIProps<\"button\">\n\nconst NumberIncrementStepper = forwardRef<\n NumberIncrementStepperProps,\n \"button\"\n>(({ className, children, ...rest }, ref) => {\n const { styles, getIncrementProps } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <Stepper\n className={cx(\"ui-number-input__stepper--up\", className)}\n {...getIncrementProps(rest, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon __css={{ transform: \"rotate(180deg)\" }} />}\n </Stepper>\n )\n})\n\nNumberIncrementStepper.displayName = \"NumberIncrementStepper\"\nNumberIncrementStepper.__ui__ = \"NumberIncrementStepper\"\n\ntype NumberDecrementStepperProps = HTMLUIProps<\"button\">\n\nconst NumberDecrementStepper = forwardRef<\n NumberDecrementStepperProps,\n \"button\"\n>(({ className, children, ...rest }, ref) => {\n const { styles, getDecrementProps } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <Stepper\n className={cx(\"ui-number-input__stepper--down\", className)}\n {...getDecrementProps(rest, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon />}\n </Stepper>\n )\n})\n\nNumberDecrementStepper.displayName = \"NumberDecrementStepper\"\nNumberDecrementStepper.__ui__ = \"NumberDecrementStepper\"\n"],"mappings":"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","names":["value","isFocused","props"]}
|
package/dist/number-input.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/number-input",
|
|
3
|
-
"version": "1.1.16-dev-
|
|
3
|
+
"version": "1.1.16-dev-20241007155115",
|
|
4
4
|
"description": "Yamada UI number input component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@yamada-ui/
|
|
40
|
-
"@yamada-ui/
|
|
41
|
-
"@yamada-ui/icon": "1.1.8-dev-
|
|
42
|
-
"@yamada-ui/use-counter": "1.0.23-dev-
|
|
43
|
-
"@yamada-ui/use-event-listener": "1.0.22-dev-
|
|
44
|
-
"@yamada-ui/use-interval": "1.0.22-dev-
|
|
45
|
-
"@yamada-ui/utils": "1.5.3-dev-
|
|
39
|
+
"@yamada-ui/form-control": "2.1.4-dev-20241007155115",
|
|
40
|
+
"@yamada-ui/core": "1.15.2-dev-20241007155115",
|
|
41
|
+
"@yamada-ui/icon": "1.1.8-dev-20241007155115",
|
|
42
|
+
"@yamada-ui/use-counter": "1.0.23-dev-20241007155115",
|
|
43
|
+
"@yamada-ui/use-event-listener": "1.0.22-dev-20241007155115",
|
|
44
|
+
"@yamada-ui/use-interval": "1.0.22-dev-20241007155115",
|
|
45
|
+
"@yamada-ui/utils": "1.5.3-dev-20241007155115"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"clean-package": "2.2.0",
|