@yamada-ui/number-input 1.1.2 → 2.0.0-next-20240607112929
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-GLJTPTRV.mjs → chunk-D4RPJ6FD.mjs} +3 -27
- package/dist/{chunk-GLJTPTRV.mjs.map → chunk-D4RPJ6FD.mjs.map} +1 -1
- package/dist/index.js +2 -26
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/number-input.js +2 -26
- package/dist/number-input.js.map +1 -1
- package/dist/number-input.mjs +1 -1
- package/package.json +8 -8
|
@@ -505,8 +505,6 @@ var NumberInput = forwardRef(
|
|
|
505
505
|
props: rest
|
|
506
506
|
} = useNumberInput(computedProps);
|
|
507
507
|
const css = {
|
|
508
|
-
position: "relative",
|
|
509
|
-
zIndex: 0,
|
|
510
508
|
...styles.container
|
|
511
509
|
};
|
|
512
510
|
return /* @__PURE__ */ jsx(
|
|
@@ -541,7 +539,6 @@ var NumberInputField = forwardRef(
|
|
|
541
539
|
({ className, ...rest }, ref) => {
|
|
542
540
|
const { styles } = useNumberInputContext();
|
|
543
541
|
const css = {
|
|
544
|
-
width: "100%",
|
|
545
542
|
...styles.field
|
|
546
543
|
};
|
|
547
544
|
return /* @__PURE__ */ jsx(
|
|
@@ -559,14 +556,6 @@ var NumberInputAddon = forwardRef(
|
|
|
559
556
|
({ className, ...rest }, ref) => {
|
|
560
557
|
const { styles } = useNumberInputContext();
|
|
561
558
|
const css = {
|
|
562
|
-
display: "flex",
|
|
563
|
-
flexDirection: "column",
|
|
564
|
-
position: "absolute",
|
|
565
|
-
top: "0",
|
|
566
|
-
insetEnd: "0px",
|
|
567
|
-
margin: "1px",
|
|
568
|
-
height: "calc(100% - 2px)",
|
|
569
|
-
zIndex: "fallback(yamcha, 1)",
|
|
570
559
|
...styles.addon
|
|
571
560
|
};
|
|
572
561
|
return /* @__PURE__ */ jsx(
|
|
@@ -581,25 +570,12 @@ var NumberInputAddon = forwardRef(
|
|
|
581
570
|
);
|
|
582
571
|
}
|
|
583
572
|
);
|
|
584
|
-
var Stepper = ui("div", {
|
|
585
|
-
baseStyle: {
|
|
586
|
-
display: "flex",
|
|
587
|
-
justifyContent: "center",
|
|
588
|
-
alignItems: "center",
|
|
589
|
-
flex: 1,
|
|
590
|
-
transitionProperty: "common",
|
|
591
|
-
transitionDuration: "normal",
|
|
592
|
-
userSelect: "none",
|
|
593
|
-
cursor: "pointer",
|
|
594
|
-
lineHeight: "normal"
|
|
595
|
-
}
|
|
596
|
-
});
|
|
597
573
|
var NumberIncrementStepper = forwardRef(
|
|
598
574
|
({ className, children, ...rest }, ref) => {
|
|
599
575
|
const { getIncrementProps, styles } = useNumberInputContext();
|
|
600
576
|
const css = { ...styles.stepper };
|
|
601
577
|
return /* @__PURE__ */ jsx(
|
|
602
|
-
|
|
578
|
+
ui.div,
|
|
603
579
|
{
|
|
604
580
|
className: cx("ui-number-input__stepper--up", className),
|
|
605
581
|
...getIncrementProps(rest, ref),
|
|
@@ -614,7 +590,7 @@ var NumberDecrementStepper = forwardRef(
|
|
|
614
590
|
const { getDecrementProps, styles } = useNumberInputContext();
|
|
615
591
|
const css = { ...styles.stepper };
|
|
616
592
|
return /* @__PURE__ */ jsx(
|
|
617
|
-
|
|
593
|
+
ui.div,
|
|
618
594
|
{
|
|
619
595
|
className: cx("ui-number-input__stepper--down", className),
|
|
620
596
|
...getDecrementProps(rest, ref),
|
|
@@ -629,4 +605,4 @@ export {
|
|
|
629
605
|
useNumberInput,
|
|
630
606
|
NumberInput
|
|
631
607
|
};
|
|
632
|
-
//# sourceMappingURL=chunk-
|
|
608
|
+
//# sourceMappingURL=chunk-D4RPJ6FD.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/number-input.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { UseFormControlProps } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport type { UseCounterProps } from \"@yamada-ui/use-counter\"\nimport { useCounter } from \"@yamada-ui/use-counter\"\nimport { useEventListener } from \"@yamada-ui/use-event-listener\"\nimport { useInterval } from \"@yamada-ui/use-interval\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\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 type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n} from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst isDefaultValidCharacter = (character: string) =>\n /^[Ee0-9+\\-.]$/.test(character)\n\nconst isValidNumericKeyboardEvent = (\n { key, ctrlKey, altKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n if (key == null) return true\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 shiftKey,\n metaKey,\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 = \"rangeUnderflow\" | \"rangeOverflow\"\n\nexport type UseNumberInputProps = UseFormControlProps<HTMLInputElement> &\n UseCounterProps & {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\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 * 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 * 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 * 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's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\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 * 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: string | number) => string\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 * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: string | number) => string | number\n }\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n id,\n name,\n value: valueProp,\n defaultValue,\n inputMode = \"decimal\",\n pattern = \"[0-9]*(.[0-9]+)?\",\n required,\n disabled,\n readOnly,\n focusInputOnChange = true,\n clampValueOnBlur = true,\n keepWithinRange = true,\n allowMouseWheel,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step: stepProp,\n precision,\n parse: parseProp,\n format: formatProp,\n onInvalid: onInvalidProp,\n isValidCharacter: isValidCharacterProp,\n getAriaValueText: getAriaValueTextProp,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n \"aria-invalid\": isInvalid,\n ...rest\n } = useFormControlProps(props)\n const formControlProps = 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 start: number | null\n end: number | null\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 isMin,\n isMax,\n isOut,\n value,\n valueAsNumber,\n setValue,\n update,\n cast,\n ...counter\n } = useCounter({\n value: valueProp,\n defaultValue,\n step: stepProp,\n min,\n max,\n precision,\n keepWithinRange,\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: string | number) => (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 string | number\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 start: ev.currentTarget.selectionStart,\n end: ev.currentTarget.selectionEnd,\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: Record<string, KeyboardEventHandler> = {\n ArrowUp: () => increment(step),\n ArrowDown: () => decrement(step),\n Home: () => update(min),\n End: () => update(max),\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 { up, down, stop, isSpinning } = 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 = useCallback(\n (props = {}, ref = null) => ({\n id,\n name,\n type: \"text\",\n role: \"spinbutton\",\n inputMode,\n pattern,\n required,\n disabled,\n readOnly,\n ...formControlProps,\n ...props,\n min,\n max,\n step: stepProp,\n ref: mergeRefs(inputRef, ref),\n value: format(value),\n \"aria-valuemin\": min,\n \"aria-valuemax\": max,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n \"aria-invalid\": ariaAttr(isInvalid ?? isOut),\n autoComplete: \"off\",\n autoCorrect: \"off\",\n onChange: handlerAll(props.onChange, onChange),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onFocus: handlerAll(props.onFocus, onFocus),\n onBlur: handlerAll(props.onBlur, onBlur),\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 = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMax)\n\n return {\n required,\n readOnly,\n disabled: trulyDisabled,\n ...formControlProps,\n ...props,\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n ref: mergeRefs(ref, incrementRef),\n role: \"button\",\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 = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMin)\n\n return {\n required,\n readOnly,\n disabled: trulyDisabled,\n ...formControlProps,\n ...props,\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n ref: mergeRefs(ref, decrementRef),\n role: \"button\",\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 props: rest,\n value: format(value),\n valueAsNumber,\n isFocused,\n isRequired,\n isReadOnly,\n isDisabled,\n getInputProps,\n getIncrementProps,\n getDecrementProps,\n }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n\nconst INTERVAL = 50\n\nconst DELAY = 300\n\ntype Action = \"increment\" | \"decrement\"\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 { up, down, stop, isSpinning }\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, { attributes: true, attributeFilter })\n\n return () => observer.disconnect()\n })\n}\n\ntype NumberInputOptions = {\n /**\n * If `true`, display the addon for the number input.\n */\n isStepper?: boolean\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"div\">\n /**\n * Props for addon component.\n */\n addonProps?: HTMLUIProps<\"div\">\n /**\n * Props for increment component.\n */\n incrementProps?: NumberIncrementStepperProps\n /**\n * Props for decrement component.\n */\n decrementProps?: NumberDecrementStepperProps\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n}\n\nexport type NumberInputProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"required\" | \"readOnly\" | \"size\" | \"onChange\"\n> &\n ThemeProps<\"NumberInput\"> &\n Omit<UseNumberInputProps, \"disabled\" | \"required\" | \"readOnly\"> &\n NumberInputOptions\n\ntype NumberInputContext = {\n getInputProps: PropGetter\n getIncrementProps: PropGetter\n getDecrementProps: PropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [NumberInputContextProvider, useNumberInputContext] =\n createContext<NumberInputContext>({\n strict: false,\n name: \"NumberInputContext\",\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] = useMultiComponentStyle(\"NumberInput\", props)\n const {\n className,\n isStepper = true,\n containerProps,\n addonProps,\n incrementProps,\n decrementProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const {\n getInputProps,\n getIncrementProps,\n getDecrementProps,\n props: rest,\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={{ getInputProps, getIncrementProps, getDecrementProps, styles }}\n >\n <ui.div\n className={cx(\"ui-number-input\", className)}\n __css={css}\n {...containerProps}\n >\n <NumberInputField\n {...getInputProps(rest as DOMAttributes<HTMLElement>, ref)}\n />\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\ntype NumberInputFieldProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"required\" | \"readOnly\" | \"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\ntype NumberInputAddonProps = HTMLUIProps<\"div\">\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 position: \"absolute\",\n top: \"0\",\n insetEnd: \"0px\",\n margin: \"1px\",\n height: \"calc(100% - 2px)\",\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\nconst Stepper = ui(\"div\", {\n baseStyle: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n flex: 1,\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: \"normal\",\n },\n})\n\ntype NumberIncrementStepperProps = HTMLUIProps<\"div\">\n\nconst NumberIncrementStepper = forwardRef<NumberIncrementStepperProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { getIncrementProps, styles } = 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 as DOMAttributes<HTMLElement>, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon __css={{ transform: \"rotate(180deg)\" }} />}\n </Stepper>\n )\n },\n)\n\ntype NumberDecrementStepperProps = HTMLUIProps<\"div\">\n\nconst NumberDecrementStepper = forwardRef<NumberDecrementStepperProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { getDecrementProps, styles } = 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 as DOMAttributes<HTMLElement>, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon />}\n </Stepper>\n )\n },\n)\n"],"mappings":"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","names":["value","isFocused","props"]}
|
|
1
|
+
{"version":3,"sources":["../src/number-input.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { UseFormControlProps } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport type { UseCounterProps } from \"@yamada-ui/use-counter\"\nimport { useCounter } from \"@yamada-ui/use-counter\"\nimport { useEventListener } from \"@yamada-ui/use-event-listener\"\nimport { useInterval } from \"@yamada-ui/use-interval\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\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 type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n} from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst isDefaultValidCharacter = (character: string) =>\n /^[Ee0-9+\\-.]$/.test(character)\n\nconst isValidNumericKeyboardEvent = (\n { key, ctrlKey, altKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n if (key == null) return true\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 shiftKey,\n metaKey,\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 = \"rangeUnderflow\" | \"rangeOverflow\"\n\nexport type UseNumberInputProps = UseFormControlProps<HTMLInputElement> &\n UseCounterProps & {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\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 * 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 * 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 * 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's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\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 * 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: string | number) => string\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 * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: string | number) => string | number\n }\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n id,\n name,\n value: valueProp,\n defaultValue,\n inputMode = \"decimal\",\n pattern = \"[0-9]*(.[0-9]+)?\",\n required,\n disabled,\n readOnly,\n focusInputOnChange = true,\n clampValueOnBlur = true,\n keepWithinRange = true,\n allowMouseWheel,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step: stepProp,\n precision,\n parse: parseProp,\n format: formatProp,\n onInvalid: onInvalidProp,\n isValidCharacter: isValidCharacterProp,\n getAriaValueText: getAriaValueTextProp,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n \"aria-invalid\": isInvalid,\n ...rest\n } = useFormControlProps(props)\n const formControlProps = 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 start: number | null\n end: number | null\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 isMin,\n isMax,\n isOut,\n value,\n valueAsNumber,\n setValue,\n update,\n cast,\n ...counter\n } = useCounter({\n value: valueProp,\n defaultValue,\n step: stepProp,\n min,\n max,\n precision,\n keepWithinRange,\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: string | number) => (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 string | number\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 start: ev.currentTarget.selectionStart,\n end: ev.currentTarget.selectionEnd,\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: Record<string, KeyboardEventHandler> = {\n ArrowUp: () => increment(step),\n ArrowDown: () => decrement(step),\n Home: () => update(min),\n End: () => update(max),\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 { up, down, stop, isSpinning } = 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 = useCallback(\n (props = {}, ref = null) => ({\n id,\n name,\n type: \"text\",\n role: \"spinbutton\",\n inputMode,\n pattern,\n required,\n disabled,\n readOnly,\n ...formControlProps,\n ...props,\n min,\n max,\n step: stepProp,\n ref: mergeRefs(inputRef, ref),\n value: format(value),\n \"aria-valuemin\": min,\n \"aria-valuemax\": max,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n \"aria-invalid\": ariaAttr(isInvalid ?? isOut),\n autoComplete: \"off\",\n autoCorrect: \"off\",\n onChange: handlerAll(props.onChange, onChange),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onFocus: handlerAll(props.onFocus, onFocus),\n onBlur: handlerAll(props.onBlur, onBlur),\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 = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMax)\n\n return {\n required,\n readOnly,\n disabled: trulyDisabled,\n ...formControlProps,\n ...props,\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n ref: mergeRefs(ref, incrementRef),\n role: \"button\",\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 = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMin)\n\n return {\n required,\n readOnly,\n disabled: trulyDisabled,\n ...formControlProps,\n ...props,\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n ref: mergeRefs(ref, decrementRef),\n role: \"button\",\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 props: rest,\n value: format(value),\n valueAsNumber,\n isFocused,\n isRequired,\n isReadOnly,\n isDisabled,\n getInputProps,\n getIncrementProps,\n getDecrementProps,\n }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n\nconst INTERVAL = 50\n\nconst DELAY = 300\n\ntype Action = \"increment\" | \"decrement\"\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 { up, down, stop, isSpinning }\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, { attributes: true, attributeFilter })\n\n return () => observer.disconnect()\n })\n}\n\ntype NumberInputOptions = {\n /**\n * If `true`, display the addon for the number input.\n */\n isStepper?: boolean\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"div\">\n /**\n * Props for addon component.\n */\n addonProps?: HTMLUIProps<\"div\">\n /**\n * Props for increment component.\n */\n incrementProps?: NumberIncrementStepperProps\n /**\n * Props for decrement component.\n */\n decrementProps?: NumberDecrementStepperProps\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n}\n\nexport type NumberInputProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"required\" | \"readOnly\" | \"size\" | \"onChange\"\n> &\n ThemeProps<\"NumberInput\"> &\n Omit<UseNumberInputProps, \"disabled\" | \"required\" | \"readOnly\"> &\n NumberInputOptions\n\ntype NumberInputContext = {\n getInputProps: PropGetter\n getIncrementProps: PropGetter\n getDecrementProps: PropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [NumberInputContextProvider, useNumberInputContext] =\n createContext<NumberInputContext>({\n strict: false,\n name: \"NumberInputContext\",\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] = useMultiComponentStyle(\"NumberInput\", props)\n const {\n className,\n isStepper = true,\n containerProps,\n addonProps,\n incrementProps,\n decrementProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const {\n getInputProps,\n getIncrementProps,\n getDecrementProps,\n props: rest,\n } = useNumberInput(computedProps)\n\n const css: CSSUIObject = {\n ...styles.container,\n }\n\n return (\n <NumberInputContextProvider\n value={{ getInputProps, getIncrementProps, getDecrementProps, styles }}\n >\n <ui.div\n className={cx(\"ui-number-input\", className)}\n __css={css}\n {...containerProps}\n >\n <NumberInputField\n {...getInputProps(rest as DOMAttributes<HTMLElement>, ref)}\n />\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\ntype NumberInputFieldProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"required\" | \"readOnly\" | \"size\"\n>\n\nconst NumberInputField = forwardRef<NumberInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\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\ntype NumberInputAddonProps = HTMLUIProps<\"div\">\n\nconst NumberInputAddon = forwardRef<NumberInputAddonProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\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\ntype NumberIncrementStepperProps = HTMLUIProps<\"div\">\n\nconst NumberIncrementStepper = forwardRef<NumberIncrementStepperProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { getIncrementProps, styles } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <ui.div\n className={cx(\"ui-number-input__stepper--up\", className)}\n {...getIncrementProps(rest as DOMAttributes<HTMLElement>, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon __css={{ transform: \"rotate(180deg)\" }} />}\n </ui.div>\n )\n },\n)\n\ntype NumberDecrementStepperProps = HTMLUIProps<\"div\">\n\nconst NumberDecrementStepper = forwardRef<NumberDecrementStepperProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { getDecrementProps, styles } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <ui.div\n className={cx(\"ui-number-input__stepper--down\", className)}\n {...getDecrementProps(rest as DOMAttributes<HTMLElement>, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon />}\n </ui.div>\n )\n },\n)\n"],"mappings":"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","names":["value","isFocused","props"]}
|
package/dist/index.js
CHANGED
|
@@ -513,8 +513,6 @@ var NumberInput = (0, import_core.forwardRef)(
|
|
|
513
513
|
props: rest
|
|
514
514
|
} = useNumberInput(computedProps);
|
|
515
515
|
const css = {
|
|
516
|
-
position: "relative",
|
|
517
|
-
zIndex: 0,
|
|
518
516
|
...styles.container
|
|
519
517
|
};
|
|
520
518
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -549,7 +547,6 @@ var NumberInputField = (0, import_core.forwardRef)(
|
|
|
549
547
|
({ className, ...rest }, ref) => {
|
|
550
548
|
const { styles } = useNumberInputContext();
|
|
551
549
|
const css = {
|
|
552
|
-
width: "100%",
|
|
553
550
|
...styles.field
|
|
554
551
|
};
|
|
555
552
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -567,14 +564,6 @@ var NumberInputAddon = (0, import_core.forwardRef)(
|
|
|
567
564
|
({ className, ...rest }, ref) => {
|
|
568
565
|
const { styles } = useNumberInputContext();
|
|
569
566
|
const css = {
|
|
570
|
-
display: "flex",
|
|
571
|
-
flexDirection: "column",
|
|
572
|
-
position: "absolute",
|
|
573
|
-
top: "0",
|
|
574
|
-
insetEnd: "0px",
|
|
575
|
-
margin: "1px",
|
|
576
|
-
height: "calc(100% - 2px)",
|
|
577
|
-
zIndex: "fallback(yamcha, 1)",
|
|
578
567
|
...styles.addon
|
|
579
568
|
};
|
|
580
569
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -589,25 +578,12 @@ var NumberInputAddon = (0, import_core.forwardRef)(
|
|
|
589
578
|
);
|
|
590
579
|
}
|
|
591
580
|
);
|
|
592
|
-
var Stepper = (0, import_core.ui)("div", {
|
|
593
|
-
baseStyle: {
|
|
594
|
-
display: "flex",
|
|
595
|
-
justifyContent: "center",
|
|
596
|
-
alignItems: "center",
|
|
597
|
-
flex: 1,
|
|
598
|
-
transitionProperty: "common",
|
|
599
|
-
transitionDuration: "normal",
|
|
600
|
-
userSelect: "none",
|
|
601
|
-
cursor: "pointer",
|
|
602
|
-
lineHeight: "normal"
|
|
603
|
-
}
|
|
604
|
-
});
|
|
605
581
|
var NumberIncrementStepper = (0, import_core.forwardRef)(
|
|
606
582
|
({ className, children, ...rest }, ref) => {
|
|
607
583
|
const { getIncrementProps, styles } = useNumberInputContext();
|
|
608
584
|
const css = { ...styles.stepper };
|
|
609
585
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
610
|
-
|
|
586
|
+
import_core.ui.div,
|
|
611
587
|
{
|
|
612
588
|
className: (0, import_utils.cx)("ui-number-input__stepper--up", className),
|
|
613
589
|
...getIncrementProps(rest, ref),
|
|
@@ -622,7 +598,7 @@ var NumberDecrementStepper = (0, import_core.forwardRef)(
|
|
|
622
598
|
const { getDecrementProps, styles } = useNumberInputContext();
|
|
623
599
|
const css = { ...styles.stepper };
|
|
624
600
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
625
|
-
|
|
601
|
+
import_core.ui.div,
|
|
626
602
|
{
|
|
627
603
|
className: (0, import_utils.cx)("ui-number-input__stepper--down", className),
|
|
628
604
|
...getDecrementProps(rest, ref),
|
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 CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { UseFormControlProps } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport type { UseCounterProps } from \"@yamada-ui/use-counter\"\nimport { useCounter } from \"@yamada-ui/use-counter\"\nimport { useEventListener } from \"@yamada-ui/use-event-listener\"\nimport { useInterval } from \"@yamada-ui/use-interval\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\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 type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n} from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst isDefaultValidCharacter = (character: string) =>\n /^[Ee0-9+\\-.]$/.test(character)\n\nconst isValidNumericKeyboardEvent = (\n { key, ctrlKey, altKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n if (key == null) return true\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 shiftKey,\n metaKey,\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 = \"rangeUnderflow\" | \"rangeOverflow\"\n\nexport type UseNumberInputProps = UseFormControlProps<HTMLInputElement> &\n UseCounterProps & {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\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 * 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 * 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 * 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's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\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 * 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: string | number) => string\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 * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: string | number) => string | number\n }\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n id,\n name,\n value: valueProp,\n defaultValue,\n inputMode = \"decimal\",\n pattern = \"[0-9]*(.[0-9]+)?\",\n required,\n disabled,\n readOnly,\n focusInputOnChange = true,\n clampValueOnBlur = true,\n keepWithinRange = true,\n allowMouseWheel,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step: stepProp,\n precision,\n parse: parseProp,\n format: formatProp,\n onInvalid: onInvalidProp,\n isValidCharacter: isValidCharacterProp,\n getAriaValueText: getAriaValueTextProp,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n \"aria-invalid\": isInvalid,\n ...rest\n } = useFormControlProps(props)\n const formControlProps = 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 start: number | null\n end: number | null\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 isMin,\n isMax,\n isOut,\n value,\n valueAsNumber,\n setValue,\n update,\n cast,\n ...counter\n } = useCounter({\n value: valueProp,\n defaultValue,\n step: stepProp,\n min,\n max,\n precision,\n keepWithinRange,\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: string | number) => (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 string | number\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 start: ev.currentTarget.selectionStart,\n end: ev.currentTarget.selectionEnd,\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: Record<string, KeyboardEventHandler> = {\n ArrowUp: () => increment(step),\n ArrowDown: () => decrement(step),\n Home: () => update(min),\n End: () => update(max),\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 { up, down, stop, isSpinning } = 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 = useCallback(\n (props = {}, ref = null) => ({\n id,\n name,\n type: \"text\",\n role: \"spinbutton\",\n inputMode,\n pattern,\n required,\n disabled,\n readOnly,\n ...formControlProps,\n ...props,\n min,\n max,\n step: stepProp,\n ref: mergeRefs(inputRef, ref),\n value: format(value),\n \"aria-valuemin\": min,\n \"aria-valuemax\": max,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n \"aria-invalid\": ariaAttr(isInvalid ?? isOut),\n autoComplete: \"off\",\n autoCorrect: \"off\",\n onChange: handlerAll(props.onChange, onChange),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onFocus: handlerAll(props.onFocus, onFocus),\n onBlur: handlerAll(props.onBlur, onBlur),\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 = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMax)\n\n return {\n required,\n readOnly,\n disabled: trulyDisabled,\n ...formControlProps,\n ...props,\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n ref: mergeRefs(ref, incrementRef),\n role: \"button\",\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 = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMin)\n\n return {\n required,\n readOnly,\n disabled: trulyDisabled,\n ...formControlProps,\n ...props,\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n ref: mergeRefs(ref, decrementRef),\n role: \"button\",\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 props: rest,\n value: format(value),\n valueAsNumber,\n isFocused,\n isRequired,\n isReadOnly,\n isDisabled,\n getInputProps,\n getIncrementProps,\n getDecrementProps,\n }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n\nconst INTERVAL = 50\n\nconst DELAY = 300\n\ntype Action = \"increment\" | \"decrement\"\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 { up, down, stop, isSpinning }\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, { attributes: true, attributeFilter })\n\n return () => observer.disconnect()\n })\n}\n\ntype NumberInputOptions = {\n /**\n * If `true`, display the addon for the number input.\n */\n isStepper?: boolean\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"div\">\n /**\n * Props for addon component.\n */\n addonProps?: HTMLUIProps<\"div\">\n /**\n * Props for increment component.\n */\n incrementProps?: NumberIncrementStepperProps\n /**\n * Props for decrement component.\n */\n decrementProps?: NumberDecrementStepperProps\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n}\n\nexport type NumberInputProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"required\" | \"readOnly\" | \"size\" | \"onChange\"\n> &\n ThemeProps<\"NumberInput\"> &\n Omit<UseNumberInputProps, \"disabled\" | \"required\" | \"readOnly\"> &\n NumberInputOptions\n\ntype NumberInputContext = {\n getInputProps: PropGetter\n getIncrementProps: PropGetter\n getDecrementProps: PropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [NumberInputContextProvider, useNumberInputContext] =\n createContext<NumberInputContext>({\n strict: false,\n name: \"NumberInputContext\",\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] = useMultiComponentStyle(\"NumberInput\", props)\n const {\n className,\n isStepper = true,\n containerProps,\n addonProps,\n incrementProps,\n decrementProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const {\n getInputProps,\n getIncrementProps,\n getDecrementProps,\n props: rest,\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={{ getInputProps, getIncrementProps, getDecrementProps, styles }}\n >\n <ui.div\n className={cx(\"ui-number-input\", className)}\n __css={css}\n {...containerProps}\n >\n <NumberInputField\n {...getInputProps(rest as DOMAttributes<HTMLElement>, ref)}\n />\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\ntype NumberInputFieldProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"required\" | \"readOnly\" | \"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\ntype NumberInputAddonProps = HTMLUIProps<\"div\">\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 position: \"absolute\",\n top: \"0\",\n insetEnd: \"0px\",\n margin: \"1px\",\n height: \"calc(100% - 2px)\",\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\nconst Stepper = ui(\"div\", {\n baseStyle: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n flex: 1,\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: \"normal\",\n },\n})\n\ntype NumberIncrementStepperProps = HTMLUIProps<\"div\">\n\nconst NumberIncrementStepper = forwardRef<NumberIncrementStepperProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { getIncrementProps, styles } = 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 as DOMAttributes<HTMLElement>, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon __css={{ transform: \"rotate(180deg)\" }} />}\n </Stepper>\n )\n },\n)\n\ntype NumberDecrementStepperProps = HTMLUIProps<\"div\">\n\nconst NumberDecrementStepper = forwardRef<NumberDecrementStepperProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { getDecrementProps, styles } = 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 as DOMAttributes<HTMLElement>, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon />}\n </Stepper>\n )\n },\n)\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 CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { UseFormControlProps } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport type { UseCounterProps } from \"@yamada-ui/use-counter\"\nimport { useCounter } from \"@yamada-ui/use-counter\"\nimport { useEventListener } from \"@yamada-ui/use-event-listener\"\nimport { useInterval } from \"@yamada-ui/use-interval\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\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 type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n} from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst isDefaultValidCharacter = (character: string) =>\n /^[Ee0-9+\\-.]$/.test(character)\n\nconst isValidNumericKeyboardEvent = (\n { key, ctrlKey, altKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n if (key == null) return true\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 shiftKey,\n metaKey,\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 = \"rangeUnderflow\" | \"rangeOverflow\"\n\nexport type UseNumberInputProps = UseFormControlProps<HTMLInputElement> &\n UseCounterProps & {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\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 * 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 * 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 * 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's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\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 * 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: string | number) => string\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 * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: string | number) => string | number\n }\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n id,\n name,\n value: valueProp,\n defaultValue,\n inputMode = \"decimal\",\n pattern = \"[0-9]*(.[0-9]+)?\",\n required,\n disabled,\n readOnly,\n focusInputOnChange = true,\n clampValueOnBlur = true,\n keepWithinRange = true,\n allowMouseWheel,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step: stepProp,\n precision,\n parse: parseProp,\n format: formatProp,\n onInvalid: onInvalidProp,\n isValidCharacter: isValidCharacterProp,\n getAriaValueText: getAriaValueTextProp,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n \"aria-invalid\": isInvalid,\n ...rest\n } = useFormControlProps(props)\n const formControlProps = 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 start: number | null\n end: number | null\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 isMin,\n isMax,\n isOut,\n value,\n valueAsNumber,\n setValue,\n update,\n cast,\n ...counter\n } = useCounter({\n value: valueProp,\n defaultValue,\n step: stepProp,\n min,\n max,\n precision,\n keepWithinRange,\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: string | number) => (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 string | number\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 start: ev.currentTarget.selectionStart,\n end: ev.currentTarget.selectionEnd,\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: Record<string, KeyboardEventHandler> = {\n ArrowUp: () => increment(step),\n ArrowDown: () => decrement(step),\n Home: () => update(min),\n End: () => update(max),\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 { up, down, stop, isSpinning } = 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 = useCallback(\n (props = {}, ref = null) => ({\n id,\n name,\n type: \"text\",\n role: \"spinbutton\",\n inputMode,\n pattern,\n required,\n disabled,\n readOnly,\n ...formControlProps,\n ...props,\n min,\n max,\n step: stepProp,\n ref: mergeRefs(inputRef, ref),\n value: format(value),\n \"aria-valuemin\": min,\n \"aria-valuemax\": max,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n \"aria-invalid\": ariaAttr(isInvalid ?? isOut),\n autoComplete: \"off\",\n autoCorrect: \"off\",\n onChange: handlerAll(props.onChange, onChange),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onFocus: handlerAll(props.onFocus, onFocus),\n onBlur: handlerAll(props.onBlur, onBlur),\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 = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMax)\n\n return {\n required,\n readOnly,\n disabled: trulyDisabled,\n ...formControlProps,\n ...props,\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n ref: mergeRefs(ref, incrementRef),\n role: \"button\",\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 = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMin)\n\n return {\n required,\n readOnly,\n disabled: trulyDisabled,\n ...formControlProps,\n ...props,\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n ref: mergeRefs(ref, decrementRef),\n role: \"button\",\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 props: rest,\n value: format(value),\n valueAsNumber,\n isFocused,\n isRequired,\n isReadOnly,\n isDisabled,\n getInputProps,\n getIncrementProps,\n getDecrementProps,\n }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n\nconst INTERVAL = 50\n\nconst DELAY = 300\n\ntype Action = \"increment\" | \"decrement\"\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 { up, down, stop, isSpinning }\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, { attributes: true, attributeFilter })\n\n return () => observer.disconnect()\n })\n}\n\ntype NumberInputOptions = {\n /**\n * If `true`, display the addon for the number input.\n */\n isStepper?: boolean\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"div\">\n /**\n * Props for addon component.\n */\n addonProps?: HTMLUIProps<\"div\">\n /**\n * Props for increment component.\n */\n incrementProps?: NumberIncrementStepperProps\n /**\n * Props for decrement component.\n */\n decrementProps?: NumberDecrementStepperProps\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n}\n\nexport type NumberInputProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"required\" | \"readOnly\" | \"size\" | \"onChange\"\n> &\n ThemeProps<\"NumberInput\"> &\n Omit<UseNumberInputProps, \"disabled\" | \"required\" | \"readOnly\"> &\n NumberInputOptions\n\ntype NumberInputContext = {\n getInputProps: PropGetter\n getIncrementProps: PropGetter\n getDecrementProps: PropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [NumberInputContextProvider, useNumberInputContext] =\n createContext<NumberInputContext>({\n strict: false,\n name: \"NumberInputContext\",\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] = useMultiComponentStyle(\"NumberInput\", props)\n const {\n className,\n isStepper = true,\n containerProps,\n addonProps,\n incrementProps,\n decrementProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const {\n getInputProps,\n getIncrementProps,\n getDecrementProps,\n props: rest,\n } = useNumberInput(computedProps)\n\n const css: CSSUIObject = {\n ...styles.container,\n }\n\n return (\n <NumberInputContextProvider\n value={{ getInputProps, getIncrementProps, getDecrementProps, styles }}\n >\n <ui.div\n className={cx(\"ui-number-input\", className)}\n __css={css}\n {...containerProps}\n >\n <NumberInputField\n {...getInputProps(rest as DOMAttributes<HTMLElement>, ref)}\n />\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\ntype NumberInputFieldProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"required\" | \"readOnly\" | \"size\"\n>\n\nconst NumberInputField = forwardRef<NumberInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\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\ntype NumberInputAddonProps = HTMLUIProps<\"div\">\n\nconst NumberInputAddon = forwardRef<NumberInputAddonProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\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\ntype NumberIncrementStepperProps = HTMLUIProps<\"div\">\n\nconst NumberIncrementStepper = forwardRef<NumberIncrementStepperProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { getIncrementProps, styles } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <ui.div\n className={cx(\"ui-number-input__stepper--up\", className)}\n {...getIncrementProps(rest as DOMAttributes<HTMLElement>, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon __css={{ transform: \"rotate(180deg)\" }} />}\n </ui.div>\n )\n },\n)\n\ntype NumberDecrementStepperProps = HTMLUIProps<\"div\">\n\nconst NumberDecrementStepper = forwardRef<NumberDecrementStepperProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { getDecrementProps, styles } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <ui.div\n className={cx(\"ui-number-input__stepper--down\", className)}\n {...getDecrementProps(rest as DOMAttributes<HTMLElement>, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon />}\n </ui.div>\n )\n },\n)\n"],"mappings":"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","names":["value","isFocused","props"]}
|
package/dist/index.mjs
CHANGED
package/dist/number-input.js
CHANGED
|
@@ -511,8 +511,6 @@ var NumberInput = (0, import_core.forwardRef)(
|
|
|
511
511
|
props: rest
|
|
512
512
|
} = useNumberInput(computedProps);
|
|
513
513
|
const css = {
|
|
514
|
-
position: "relative",
|
|
515
|
-
zIndex: 0,
|
|
516
514
|
...styles.container
|
|
517
515
|
};
|
|
518
516
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -547,7 +545,6 @@ var NumberInputField = (0, import_core.forwardRef)(
|
|
|
547
545
|
({ className, ...rest }, ref) => {
|
|
548
546
|
const { styles } = useNumberInputContext();
|
|
549
547
|
const css = {
|
|
550
|
-
width: "100%",
|
|
551
548
|
...styles.field
|
|
552
549
|
};
|
|
553
550
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -565,14 +562,6 @@ var NumberInputAddon = (0, import_core.forwardRef)(
|
|
|
565
562
|
({ className, ...rest }, ref) => {
|
|
566
563
|
const { styles } = useNumberInputContext();
|
|
567
564
|
const css = {
|
|
568
|
-
display: "flex",
|
|
569
|
-
flexDirection: "column",
|
|
570
|
-
position: "absolute",
|
|
571
|
-
top: "0",
|
|
572
|
-
insetEnd: "0px",
|
|
573
|
-
margin: "1px",
|
|
574
|
-
height: "calc(100% - 2px)",
|
|
575
|
-
zIndex: "fallback(yamcha, 1)",
|
|
576
565
|
...styles.addon
|
|
577
566
|
};
|
|
578
567
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -587,25 +576,12 @@ var NumberInputAddon = (0, import_core.forwardRef)(
|
|
|
587
576
|
);
|
|
588
577
|
}
|
|
589
578
|
);
|
|
590
|
-
var Stepper = (0, import_core.ui)("div", {
|
|
591
|
-
baseStyle: {
|
|
592
|
-
display: "flex",
|
|
593
|
-
justifyContent: "center",
|
|
594
|
-
alignItems: "center",
|
|
595
|
-
flex: 1,
|
|
596
|
-
transitionProperty: "common",
|
|
597
|
-
transitionDuration: "normal",
|
|
598
|
-
userSelect: "none",
|
|
599
|
-
cursor: "pointer",
|
|
600
|
-
lineHeight: "normal"
|
|
601
|
-
}
|
|
602
|
-
});
|
|
603
579
|
var NumberIncrementStepper = (0, import_core.forwardRef)(
|
|
604
580
|
({ className, children, ...rest }, ref) => {
|
|
605
581
|
const { getIncrementProps, styles } = useNumberInputContext();
|
|
606
582
|
const css = { ...styles.stepper };
|
|
607
583
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
608
|
-
|
|
584
|
+
import_core.ui.div,
|
|
609
585
|
{
|
|
610
586
|
className: (0, import_utils.cx)("ui-number-input__stepper--up", className),
|
|
611
587
|
...getIncrementProps(rest, ref),
|
|
@@ -620,7 +596,7 @@ var NumberDecrementStepper = (0, import_core.forwardRef)(
|
|
|
620
596
|
const { getDecrementProps, styles } = useNumberInputContext();
|
|
621
597
|
const css = { ...styles.stepper };
|
|
622
598
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
623
|
-
|
|
599
|
+
import_core.ui.div,
|
|
624
600
|
{
|
|
625
601
|
className: (0, import_utils.cx)("ui-number-input__stepper--down", className),
|
|
626
602
|
...getDecrementProps(rest, ref),
|
package/dist/number-input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/number-input.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { UseFormControlProps } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport type { UseCounterProps } from \"@yamada-ui/use-counter\"\nimport { useCounter } from \"@yamada-ui/use-counter\"\nimport { useEventListener } from \"@yamada-ui/use-event-listener\"\nimport { useInterval } from \"@yamada-ui/use-interval\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\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 type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n} from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst isDefaultValidCharacter = (character: string) =>\n /^[Ee0-9+\\-.]$/.test(character)\n\nconst isValidNumericKeyboardEvent = (\n { key, ctrlKey, altKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n if (key == null) return true\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 shiftKey,\n metaKey,\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 = \"rangeUnderflow\" | \"rangeOverflow\"\n\nexport type UseNumberInputProps = UseFormControlProps<HTMLInputElement> &\n UseCounterProps & {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\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 * 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 * 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 * 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's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\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 * 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: string | number) => string\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 * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: string | number) => string | number\n }\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n id,\n name,\n value: valueProp,\n defaultValue,\n inputMode = \"decimal\",\n pattern = \"[0-9]*(.[0-9]+)?\",\n required,\n disabled,\n readOnly,\n focusInputOnChange = true,\n clampValueOnBlur = true,\n keepWithinRange = true,\n allowMouseWheel,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step: stepProp,\n precision,\n parse: parseProp,\n format: formatProp,\n onInvalid: onInvalidProp,\n isValidCharacter: isValidCharacterProp,\n getAriaValueText: getAriaValueTextProp,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n \"aria-invalid\": isInvalid,\n ...rest\n } = useFormControlProps(props)\n const formControlProps = 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 start: number | null\n end: number | null\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 isMin,\n isMax,\n isOut,\n value,\n valueAsNumber,\n setValue,\n update,\n cast,\n ...counter\n } = useCounter({\n value: valueProp,\n defaultValue,\n step: stepProp,\n min,\n max,\n precision,\n keepWithinRange,\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: string | number) => (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 string | number\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 start: ev.currentTarget.selectionStart,\n end: ev.currentTarget.selectionEnd,\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: Record<string, KeyboardEventHandler> = {\n ArrowUp: () => increment(step),\n ArrowDown: () => decrement(step),\n Home: () => update(min),\n End: () => update(max),\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 { up, down, stop, isSpinning } = 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 = useCallback(\n (props = {}, ref = null) => ({\n id,\n name,\n type: \"text\",\n role: \"spinbutton\",\n inputMode,\n pattern,\n required,\n disabled,\n readOnly,\n ...formControlProps,\n ...props,\n min,\n max,\n step: stepProp,\n ref: mergeRefs(inputRef, ref),\n value: format(value),\n \"aria-valuemin\": min,\n \"aria-valuemax\": max,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n \"aria-invalid\": ariaAttr(isInvalid ?? isOut),\n autoComplete: \"off\",\n autoCorrect: \"off\",\n onChange: handlerAll(props.onChange, onChange),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onFocus: handlerAll(props.onFocus, onFocus),\n onBlur: handlerAll(props.onBlur, onBlur),\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 = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMax)\n\n return {\n required,\n readOnly,\n disabled: trulyDisabled,\n ...formControlProps,\n ...props,\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n ref: mergeRefs(ref, incrementRef),\n role: \"button\",\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 = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMin)\n\n return {\n required,\n readOnly,\n disabled: trulyDisabled,\n ...formControlProps,\n ...props,\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n ref: mergeRefs(ref, decrementRef),\n role: \"button\",\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 props: rest,\n value: format(value),\n valueAsNumber,\n isFocused,\n isRequired,\n isReadOnly,\n isDisabled,\n getInputProps,\n getIncrementProps,\n getDecrementProps,\n }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n\nconst INTERVAL = 50\n\nconst DELAY = 300\n\ntype Action = \"increment\" | \"decrement\"\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 { up, down, stop, isSpinning }\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, { attributes: true, attributeFilter })\n\n return () => observer.disconnect()\n })\n}\n\ntype NumberInputOptions = {\n /**\n * If `true`, display the addon for the number input.\n */\n isStepper?: boolean\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"div\">\n /**\n * Props for addon component.\n */\n addonProps?: HTMLUIProps<\"div\">\n /**\n * Props for increment component.\n */\n incrementProps?: NumberIncrementStepperProps\n /**\n * Props for decrement component.\n */\n decrementProps?: NumberDecrementStepperProps\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n}\n\nexport type NumberInputProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"required\" | \"readOnly\" | \"size\" | \"onChange\"\n> &\n ThemeProps<\"NumberInput\"> &\n Omit<UseNumberInputProps, \"disabled\" | \"required\" | \"readOnly\"> &\n NumberInputOptions\n\ntype NumberInputContext = {\n getInputProps: PropGetter\n getIncrementProps: PropGetter\n getDecrementProps: PropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [NumberInputContextProvider, useNumberInputContext] =\n createContext<NumberInputContext>({\n strict: false,\n name: \"NumberInputContext\",\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] = useMultiComponentStyle(\"NumberInput\", props)\n const {\n className,\n isStepper = true,\n containerProps,\n addonProps,\n incrementProps,\n decrementProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const {\n getInputProps,\n getIncrementProps,\n getDecrementProps,\n props: rest,\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={{ getInputProps, getIncrementProps, getDecrementProps, styles }}\n >\n <ui.div\n className={cx(\"ui-number-input\", className)}\n __css={css}\n {...containerProps}\n >\n <NumberInputField\n {...getInputProps(rest as DOMAttributes<HTMLElement>, ref)}\n />\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\ntype NumberInputFieldProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"required\" | \"readOnly\" | \"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\ntype NumberInputAddonProps = HTMLUIProps<\"div\">\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 position: \"absolute\",\n top: \"0\",\n insetEnd: \"0px\",\n margin: \"1px\",\n height: \"calc(100% - 2px)\",\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\nconst Stepper = ui(\"div\", {\n baseStyle: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n flex: 1,\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: \"normal\",\n },\n})\n\ntype NumberIncrementStepperProps = HTMLUIProps<\"div\">\n\nconst NumberIncrementStepper = forwardRef<NumberIncrementStepperProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { getIncrementProps, styles } = 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 as DOMAttributes<HTMLElement>, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon __css={{ transform: \"rotate(180deg)\" }} />}\n </Stepper>\n )\n },\n)\n\ntype NumberDecrementStepperProps = HTMLUIProps<\"div\">\n\nconst NumberDecrementStepper = forwardRef<NumberDecrementStepperProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { getDecrementProps, styles } = 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 as DOMAttributes<HTMLElement>, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon />}\n </Stepper>\n )\n },\n)\n"],"mappings":"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","names":["value","isFocused","props"]}
|
|
1
|
+
{"version":3,"sources":["../src/number-input.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { UseFormControlProps } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport type { UseCounterProps } from \"@yamada-ui/use-counter\"\nimport { useCounter } from \"@yamada-ui/use-counter\"\nimport { useEventListener } from \"@yamada-ui/use-event-listener\"\nimport { useInterval } from \"@yamada-ui/use-interval\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\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 type {\n ChangeEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n} from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst isDefaultValidCharacter = (character: string) =>\n /^[Ee0-9+\\-.]$/.test(character)\n\nconst isValidNumericKeyboardEvent = (\n { key, ctrlKey, altKey, metaKey }: KeyboardEvent,\n isValid: (key: string) => boolean,\n) => {\n if (key == null) return true\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 shiftKey,\n metaKey,\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 = \"rangeUnderflow\" | \"rangeOverflow\"\n\nexport type UseNumberInputProps = UseFormControlProps<HTMLInputElement> &\n UseCounterProps & {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\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 * 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 * 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 * 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's value will change based on mouse wheel.\n *\n * @default false\n */\n allowMouseWheel?: boolean\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 * 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: string | number) => string\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 * If using a custom display format, this converts the default format to the custom format.\n */\n format?: (value: string | number) => string | number\n }\n\nexport const useNumberInput = (props: UseNumberInputProps = {}) => {\n const {\n id,\n name,\n value: valueProp,\n defaultValue,\n inputMode = \"decimal\",\n pattern = \"[0-9]*(.[0-9]+)?\",\n required,\n disabled,\n readOnly,\n focusInputOnChange = true,\n clampValueOnBlur = true,\n keepWithinRange = true,\n allowMouseWheel,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step: stepProp,\n precision,\n parse: parseProp,\n format: formatProp,\n onInvalid: onInvalidProp,\n isValidCharacter: isValidCharacterProp,\n getAriaValueText: getAriaValueTextProp,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n \"aria-invalid\": isInvalid,\n ...rest\n } = useFormControlProps(props)\n const formControlProps = 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 start: number | null\n end: number | null\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 isMin,\n isMax,\n isOut,\n value,\n valueAsNumber,\n setValue,\n update,\n cast,\n ...counter\n } = useCounter({\n value: valueProp,\n defaultValue,\n step: stepProp,\n min,\n max,\n precision,\n keepWithinRange,\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: string | number) => (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 string | number\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 start: ev.currentTarget.selectionStart,\n end: ev.currentTarget.selectionEnd,\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: Record<string, KeyboardEventHandler> = {\n ArrowUp: () => increment(step),\n ArrowDown: () => decrement(step),\n Home: () => update(min),\n End: () => update(max),\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 { up, down, stop, isSpinning } = 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 = useCallback(\n (props = {}, ref = null) => ({\n id,\n name,\n type: \"text\",\n role: \"spinbutton\",\n inputMode,\n pattern,\n required,\n disabled,\n readOnly,\n ...formControlProps,\n ...props,\n min,\n max,\n step: stepProp,\n ref: mergeRefs(inputRef, ref),\n value: format(value),\n \"aria-valuemin\": min,\n \"aria-valuemax\": max,\n \"aria-valuenow\": Number.isNaN(valueAsNumber) ? undefined : valueAsNumber,\n \"aria-valuetext\": valueText,\n \"aria-invalid\": ariaAttr(isInvalid ?? isOut),\n autoComplete: \"off\",\n autoCorrect: \"off\",\n onChange: handlerAll(props.onChange, onChange),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onFocus: handlerAll(props.onFocus, onFocus),\n onBlur: handlerAll(props.onBlur, onBlur),\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 = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMax)\n\n return {\n required,\n readOnly,\n disabled: trulyDisabled,\n ...formControlProps,\n ...props,\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n ref: mergeRefs(ref, incrementRef),\n role: \"button\",\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 = useCallback(\n (props = {}, ref = null) => {\n const trulyDisabled = disabled || (keepWithinRange && isMin)\n\n return {\n required,\n readOnly,\n disabled: trulyDisabled,\n ...formControlProps,\n ...props,\n style: {\n ...props.style,\n cursor: readOnly ? \"not-allowed\" : props.style?.cursor,\n },\n ref: mergeRefs(ref, decrementRef),\n role: \"button\",\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 props: rest,\n value: format(value),\n valueAsNumber,\n isFocused,\n isRequired,\n isReadOnly,\n isDisabled,\n getInputProps,\n getIncrementProps,\n getDecrementProps,\n }\n}\n\nexport type UseNumberInputReturn = ReturnType<typeof useNumberInput>\n\nconst INTERVAL = 50\n\nconst DELAY = 300\n\ntype Action = \"increment\" | \"decrement\"\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 { up, down, stop, isSpinning }\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, { attributes: true, attributeFilter })\n\n return () => observer.disconnect()\n })\n}\n\ntype NumberInputOptions = {\n /**\n * If `true`, display the addon for the number input.\n */\n isStepper?: boolean\n /**\n * Props for container element.\n */\n containerProps?: HTMLUIProps<\"div\">\n /**\n * Props for addon component.\n */\n addonProps?: HTMLUIProps<\"div\">\n /**\n * Props for increment component.\n */\n incrementProps?: NumberIncrementStepperProps\n /**\n * Props for decrement component.\n */\n decrementProps?: NumberDecrementStepperProps\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n}\n\nexport type NumberInputProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"required\" | \"readOnly\" | \"size\" | \"onChange\"\n> &\n ThemeProps<\"NumberInput\"> &\n Omit<UseNumberInputProps, \"disabled\" | \"required\" | \"readOnly\"> &\n NumberInputOptions\n\ntype NumberInputContext = {\n getInputProps: PropGetter\n getIncrementProps: PropGetter\n getDecrementProps: PropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [NumberInputContextProvider, useNumberInputContext] =\n createContext<NumberInputContext>({\n strict: false,\n name: \"NumberInputContext\",\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] = useMultiComponentStyle(\"NumberInput\", props)\n const {\n className,\n isStepper = true,\n containerProps,\n addonProps,\n incrementProps,\n decrementProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n const {\n getInputProps,\n getIncrementProps,\n getDecrementProps,\n props: rest,\n } = useNumberInput(computedProps)\n\n const css: CSSUIObject = {\n ...styles.container,\n }\n\n return (\n <NumberInputContextProvider\n value={{ getInputProps, getIncrementProps, getDecrementProps, styles }}\n >\n <ui.div\n className={cx(\"ui-number-input\", className)}\n __css={css}\n {...containerProps}\n >\n <NumberInputField\n {...getInputProps(rest as DOMAttributes<HTMLElement>, ref)}\n />\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\ntype NumberInputFieldProps = Omit<\n HTMLUIProps<\"input\">,\n \"disabled\" | \"required\" | \"readOnly\" | \"size\"\n>\n\nconst NumberInputField = forwardRef<NumberInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\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\ntype NumberInputAddonProps = HTMLUIProps<\"div\">\n\nconst NumberInputAddon = forwardRef<NumberInputAddonProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useNumberInputContext()\n\n const css: CSSUIObject = {\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\ntype NumberIncrementStepperProps = HTMLUIProps<\"div\">\n\nconst NumberIncrementStepper = forwardRef<NumberIncrementStepperProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { getIncrementProps, styles } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <ui.div\n className={cx(\"ui-number-input__stepper--up\", className)}\n {...getIncrementProps(rest as DOMAttributes<HTMLElement>, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon __css={{ transform: \"rotate(180deg)\" }} />}\n </ui.div>\n )\n },\n)\n\ntype NumberDecrementStepperProps = HTMLUIProps<\"div\">\n\nconst NumberDecrementStepper = forwardRef<NumberDecrementStepperProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { getDecrementProps, styles } = useNumberInputContext()\n\n const css: CSSUIObject = { ...styles.stepper }\n\n return (\n <ui.div\n className={cx(\"ui-number-input__stepper--down\", className)}\n {...getDecrementProps(rest as DOMAttributes<HTMLElement>, ref)}\n __css={css}\n >\n {children ?? <ChevronIcon />}\n </ui.div>\n )\n },\n)\n"],"mappings":"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","names":["value","isFocused","props"]}
|
package/dist/number-input.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/number-input",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-next-20240607112929",
|
|
4
4
|
"description": "Yamada UI number input component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@yamada-ui/core": "1.7.1",
|
|
40
|
-
"@yamada-ui/utils": "1.2.1",
|
|
41
|
-
"@yamada-ui/form-control": "1.1.2",
|
|
42
|
-
"@yamada-ui/icon": "1.0.27",
|
|
43
|
-
"@yamada-ui/use-counter": "1.0.15",
|
|
44
|
-
"@yamada-ui/use-interval": "1.0.14",
|
|
45
|
-
"@yamada-ui/use-event-listener": "1.0.14"
|
|
39
|
+
"@yamada-ui/core": "1.7.1-next-20240607112929",
|
|
40
|
+
"@yamada-ui/utils": "1.2.1-next-20240607112929",
|
|
41
|
+
"@yamada-ui/form-control": "1.1.2-next-20240607112929",
|
|
42
|
+
"@yamada-ui/icon": "1.0.27-next-20240607112929",
|
|
43
|
+
"@yamada-ui/use-counter": "1.0.15-next-20240607112929",
|
|
44
|
+
"@yamada-ui/use-interval": "1.0.14-next-20240607112929",
|
|
45
|
+
"@yamada-ui/use-event-listener": "1.0.14-next-20240607112929"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"react": "^18.0.0",
|