@yamada-ui/number-input 1.1.20 → 1.2.0-dev-20241114153823
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-OFYIJUE5.mjs → chunk-5B2EEDS5.mjs} +4 -1
- package/dist/chunk-5B2EEDS5.mjs.map +1 -0
- package/dist/index.js +3 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/number-input.js +3 -0
- package/dist/number-input.js.map +1 -1
- package/dist/number-input.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-OFYIJUE5.mjs.map +0 -1
|
@@ -324,6 +324,7 @@ var useNumberInput = (props = {}) => {
|
|
|
324
324
|
var _a;
|
|
325
325
|
const trulyDisabled = disabled || keepWithinRange && isMax;
|
|
326
326
|
return {
|
|
327
|
+
"aria-label": "Increase",
|
|
327
328
|
disabled: trulyDisabled,
|
|
328
329
|
readOnly,
|
|
329
330
|
required,
|
|
@@ -358,6 +359,7 @@ var useNumberInput = (props = {}) => {
|
|
|
358
359
|
var _a;
|
|
359
360
|
const trulyDisabled = disabled || keepWithinRange && isMin;
|
|
360
361
|
return {
|
|
362
|
+
"aria-label": "Decrease",
|
|
361
363
|
disabled: trulyDisabled,
|
|
362
364
|
readOnly,
|
|
363
365
|
required,
|
|
@@ -491,6 +493,7 @@ var NumberInput = forwardRef(
|
|
|
491
493
|
ui.div,
|
|
492
494
|
{
|
|
493
495
|
className: cx("ui-number-input", className),
|
|
496
|
+
role: "group",
|
|
494
497
|
__css: css,
|
|
495
498
|
...containerProps,
|
|
496
499
|
children: [
|
|
@@ -604,4 +607,4 @@ export {
|
|
|
604
607
|
useNumberInput,
|
|
605
608
|
NumberInput
|
|
606
609
|
};
|
|
607
|
-
//# sourceMappingURL=chunk-
|
|
610
|
+
//# sourceMappingURL=chunk-5B2EEDS5.mjs.map
|
|
@@ -0,0 +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 \"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 \"aria-label\": \"Increase\",\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 \"aria-label\": \"Decrease\",\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 role=\"group\"\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
|
@@ -332,6 +332,7 @@ var useNumberInput = (props = {}) => {
|
|
|
332
332
|
var _a;
|
|
333
333
|
const trulyDisabled = disabled || keepWithinRange && isMax;
|
|
334
334
|
return {
|
|
335
|
+
"aria-label": "Increase",
|
|
335
336
|
disabled: trulyDisabled,
|
|
336
337
|
readOnly,
|
|
337
338
|
required,
|
|
@@ -366,6 +367,7 @@ var useNumberInput = (props = {}) => {
|
|
|
366
367
|
var _a;
|
|
367
368
|
const trulyDisabled = disabled || keepWithinRange && isMin;
|
|
368
369
|
return {
|
|
370
|
+
"aria-label": "Decrease",
|
|
369
371
|
disabled: trulyDisabled,
|
|
370
372
|
readOnly,
|
|
371
373
|
required,
|
|
@@ -499,6 +501,7 @@ var NumberInput = (0, import_core.forwardRef)(
|
|
|
499
501
|
import_core.ui.div,
|
|
500
502
|
{
|
|
501
503
|
className: (0, import_utils.cx)("ui-number-input", className),
|
|
504
|
+
role: "group",
|
|
502
505
|
__css: css,
|
|
503
506
|
...containerProps,
|
|
504
507
|
children: [
|
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 \"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"]}
|
|
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 \"aria-label\": \"Increase\",\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 \"aria-label\": \"Decrease\",\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 role=\"group\"\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.js
CHANGED
|
@@ -330,6 +330,7 @@ var useNumberInput = (props = {}) => {
|
|
|
330
330
|
var _a;
|
|
331
331
|
const trulyDisabled = disabled || keepWithinRange && isMax;
|
|
332
332
|
return {
|
|
333
|
+
"aria-label": "Increase",
|
|
333
334
|
disabled: trulyDisabled,
|
|
334
335
|
readOnly,
|
|
335
336
|
required,
|
|
@@ -364,6 +365,7 @@ var useNumberInput = (props = {}) => {
|
|
|
364
365
|
var _a;
|
|
365
366
|
const trulyDisabled = disabled || keepWithinRange && isMin;
|
|
366
367
|
return {
|
|
368
|
+
"aria-label": "Decrease",
|
|
367
369
|
disabled: trulyDisabled,
|
|
368
370
|
readOnly,
|
|
369
371
|
required,
|
|
@@ -497,6 +499,7 @@ var NumberInput = (0, import_core.forwardRef)(
|
|
|
497
499
|
import_core.ui.div,
|
|
498
500
|
{
|
|
499
501
|
className: (0, import_utils.cx)("ui-number-input", className),
|
|
502
|
+
role: "group",
|
|
500
503
|
__css: css,
|
|
501
504
|
...containerProps,
|
|
502
505
|
children: [
|
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 \"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"]}
|
|
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 \"aria-label\": \"Increase\",\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 \"aria-label\": \"Decrease\",\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 role=\"group\"\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 +0,0 @@
|
|
|
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"]}
|