shelving/ui/form/NumberInput.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
import { formatNumber } from "../../util/format.js";
import { getNumber } from "../../util/number.js";
import { TEXT_INPUT_CLASS } from "./Input.js";
export function NumberInput({ name, title = "", placeholder = title, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
required = false, disabled = false, message = "", value, onValue, 
// min = Number.NEGATIVE_INFINITY,
// max = Number.POSITIVE_INFINITY,
formatter = formatNumber, }) {
    const onChange = ({ currentTarget }) => {
        onValue?.(getNumber(currentTarget.value) ?? undefined);
    };
    const onBlur = ({ currentTarget }) => {
        const num = getNumber(currentTarget.value);
        currentTarget.value = num !== undefined ? formatter(num) : "";
    };
    return (_jsx("input", { name: name, type: "text", inputMode: "decimal", defaultValue: value !== undefined ? formatter(value) : "", required: required, disabled: disabled, placeholder: placeholder || " ", className: TEXT_INPUT_CLASS, onChange: onChange, onInput: onChange, onBlur: onBlur, title: message, "aria-invalid": !!message }));
}