koval-ui/dist/src/lib/InputNumeric/InputNumeric.cjs

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),n=require("react"),K=require("classnames"),P=require("../../internal/inputs/ValidationProps.cjs"),_=require("../../internal/inputs/useValidation.cjs"),z=require("../../internal/inputs/useRevalidateOnFormChange.cjs"),G=require("../../internal/inputs/useExternalValidation.cjs"),H=require("../../internal/inputs/useValidationIcon.cjs"),J=require("../../internal/Icons/IconNumeric.cjs"),L=require("../../internal/hooks/useInternalId.cjs"),Q=require("../../internal/hooks/useInternalRef.cjs"),i=require("./InputNumeric.module.css.cjs"),W={natural:"(?:0|[1-9]\\d*)",integer:"[+\\-]?(?:0|[1-9]\\d*)",floating:"[+\\-]?(?:0|[1-9]\\d*)(?:\\.\\d+)?",scientific:"[+\\-]?(?:0|[1-9]\\d*)(?:\\.\\d+)?(?:[eE][+\\-]?\\d+)?"},N=n.forwardRef(({className:g,placeholder:y="",disabled:h,value:w,onChange:r=()=>{},onFocus:b=()=>{},onBlur:k=()=>{},onKeyDown:d=()=>{},onKeyUp:f=()=>{},defaultValue:R,validation:u,errorMessage:j,id:C,step:l=1,size:S=12,mode:t="natural",revalidateOnFormChange:A,displayIcon:p=!0,...I},D)=>{const s=Q.useInternalRef(D),m=L.useInternalId(C),E=!!u||!!I.required,{validateTextual:V,validity:q,setValidity:o}=_.useValidation({validation:u,hasValidators:E});z.useRevalidateOnFormChange(s,V,A),G.useExternalValidation({errorMessage:j,inputRef:s,setValidity:o,validation:u});const F=H.useValidationIcon(q),M=n.useCallback(e=>{r(e)},[r]),O=n.useCallback(()=>{o(P.ValidationState.error)},[o]),T=n.useCallback(e=>{const x=e.target.value;if(e.key==="ArrowUp"&&t!=="scientific"){const c=Number(x||0)+l;e.target.value=c.toString()}if(e.key==="ArrowDown"&&t!=="scientific"){const c=Number(x||0)-l;e.target.value=c.toString()}d(e)},[t,d,l]),U=n.useCallback(e=>{(e.key==="ArrowDown"||e.key==="ArrowUp")&&t!=="scientific"&&(e.currentTarget.reportValidity(),r(e)),f(e)},[t,r,f]),B=W[t];return a.jsxs("div",{className:K(i.default.wrapper,{[i.default.withValidationIcon]:p},g),children:[a.jsx("label",{className:i.default.prefix,htmlFor:m,children:a.jsx(J.IconNumeric,{})}),a.jsx("input",{...I,autoComplete:"off",ref:s,size:S,id:m,type:"text",inputMode:"decimal",pattern:B,placeholder:y,className:i.default.input,disabled:h,value:w,defaultValue:R,onChange:M,onBlur:k,onFocus:b,onKeyUp:U,onKeyDown:T,onInvalid:O,onInput:V}),p&&q&&a.jsx(F,{})]})});N.displayName="InputNumeric";exports.InputNumeric=N;
//# sourceMappingURL=InputNumeric.cjs.map