koval-ui/dist/src/lib/InputFile/InputFile.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 t=require("react/jsx-runtime"),a=require("react"),h=require("classnames"),P=require("css-vars-hook"),B=require("../../internal/Icons/IconFile.cjs"),H=require("../../internal/inputs/ValidationProps.cjs"),_=require("../../internal/inputs/useValidation.cjs"),$=require("../../internal/inputs/useRevalidateOnFormChange.cjs"),A=require("../../internal/inputs/useExternalValidation.cjs"),D=require("../../internal/inputs/useValidationIcon.cjs"),G=require("../../internal/hooks/useInternalId.cjs"),J=require("../../internal/hooks/useInternalRef.cjs"),e=require("./InputFile.module.css.cjs"),q=a.forwardRef(({id:V,className:p,placeholder:o="",disabled:x,value:F,onChange:u=()=>{},onFocus:N=()=>{},onBlur:R=()=>{},onKeyDown:g=()=>{},onKeyUp:j=()=>{},defaultValue:b,size:r=16,errorMessage:v,revalidateOnFormChange:y,validation:n,displayIcon:c=!0,...C},S)=>{const{LocalRoot:k}=P.useLocalTheme(),w=a.useMemo(()=>({"input-width":`${r}ch`}),[r]),d=G.useInternalId(V),[O,s]=a.useState(""),T=!!n,{validateTextual:m,validity:f,setValidity:i}=_.useValidation({validation:n,hasValidators:T}),l=J.useInternalRef(S);A.useExternalValidation({errorMessage:v,inputRef:l,setValidity:i,validation:n}),$.useRevalidateOnFormChange(l,m,y);const E=D.useValidationIcon(f),L=a.useCallback(I=>{u(I),s(I.target.files[0].name)},[u,s]),M=a.useCallback(()=>{s(""),i(H.ValidationState.error)},[i]);return t.jsxs(k,{theme:w,className:h(e.default["input-file"],{[e.default.withValidationIcon]:c},p),children:[t.jsxs("div",{className:e.default.toggle,children:[t.jsx("input",{...C,id:d,type:"file",placeholder:o,className:e.default.input,ref:l,disabled:x,value:F,defaultValue:b,onChange:L,onBlur:R,onFocus:N,onKeyUp:j,onKeyDown:g,onInvalid:M,onInput:m}),t.jsx(B.IconFile,{className:h(e.default.icon)})]}),t.jsx("label",{htmlFor:d,className:e.default.label,children:O||o}),c&&f&&t.jsx(E,{className:e.default.validity})]})});q.displayName="InputFile";exports.InputFile=q;
//# sourceMappingURL=InputFile.cjs.map