@bothub-chat/ui/dist/components/text-field/index.js

Bothub UI Components

import{__rest as e}from"tslib";import{jsxs as o,jsx as l}from"react/jsx-runtime";import{useRef as r,useId as a,useState as t,useCallback as n,useMemo as i}from"react";import{TextFieldStyled as s,TextFieldLabel as c,TextFieldBlock as d,TextFieldColor as u,TextFieldColorInput as p,TextFieldColorPreview as m,TextFieldInput as h,TextFieldShowpassButton as b,TextFieldClearButton as y,TextFieldSkeleton as f,TextFieldErrorText as g}from"./styled.js";import{IconProvider as v}from"../icon/context.js";import"../icon/styled.js";import"@react-spring/web";import"react-markdown";import"react-dom";import"../portal/styled.js";import"../tooltip/styled.js";import"../tooltip/arrow/styled.js";import"../../theme/index.js";import"../tooltip/context.js";import{SearchCircleIcon as C}from"../../icons/search-circle/index.js";import{Skeleton as j}from"../skeleton/index.js";import{EyeIcon as $}from"../../icons/eye/index.js";import{useTheme as w}from"../../theme/hook.js";const k=k=>{var{label:x,placeholder:S,value:L,defaultValue:B,error:A,name:F,type:M,fullWidth:O=!1,disabled:V=!1,startIcon:I,endIcon:P,skeleton:E=!1,onChange:W,onFocus:z,onBlur:q,onMouseEnter:D,onMouseLeave:G,onValueChange:H,onClearButtonClick:J,readonly:K=!1,variant:N="primary",autoFocus:Q,autoComplete:R,inputStyles:T,clearable:U=!1,bigClearButton:X=!1,"aria-label":Y,clearAriaLabel:Z,showPasswordAriaLabel:_,hidePasswordAriaLabel:ee}=k,oe=e(k,["label","placeholder","value","defaultValue","error","name","type","fullWidth","disabled","startIcon","endIcon","skeleton","onChange","onFocus","onBlur","onMouseEnter","onMouseLeave","onValueChange","onClearButtonClick","readonly","variant","autoFocus","autoComplete","inputStyles","clearable","bigClearButton","aria-label","clearAriaLabel","showPasswordAriaLabel","hidePasswordAriaLabel"]);const le=w(),re=r(null),ae=a(),te=a(),ne=a(),[ie,se]=t(!1),[ce,de]=t(!1),[ue,pe]=t(!1),me=n(e=>{null==z||z(e),se(!0)},[z]),he=n(e=>{null==q||q(e),se(!1)},[q]),be=n(e=>{null==D||D(e),de(!0)},[D]),ye=n(e=>{null==G||G(e),de(!1)},[G]),fe=n(e=>{null==W||W(e),null==H||H(e.target.value)},[W,H]),ge=n(()=>{const e=re.current;null!==e&&(e.value="",null==H||H(""),null==J||J())},[W]),ve=n(()=>{pe(e=>!e)},[]),Ce=Object.assign(Object.assign({size:16},V&&{fill:le.colors.grayScale.gray1}),!V&&{fill:"light"===le.mode?le.default.colors.accent.primary:le.colors.base.white}),je=i(()=>"password"===M?ue?"text":"password":"color"===M?"text":M,[M,ue]);return o(s,Object.assign({},oe,{$fullWidth:O,$disabled:V,children:[x&&E&&l(c,{children:l(j,{width:100})}),"string"==typeof x&&!E&&l(c,{id:te,children:x}),"string"!=typeof x&&!E&&x,!E&&o(d,{$error:!!A,$hover:ce,$focus:ie,$disabled:V,$skeleton:!1,$variant:N,style:T,children:[("search"===M||I)&&o(v,Object.assign({},Ce,{children:[I,"search"===M&&l(C,{})]})),"color"===M&&"object"==typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("background",null!=L?L:"#000")&&o(u,{children:[l(p,{value:null!=L?L:"#000",onChange:fe}),l(m,{$color:null!=L?L:"#000"})]}),l(h,{ref:re,id:ae,value:L,type:je,name:F,readOnly:K,defaultValue:B,placeholder:S,disabled:V,onChange:fe,onFocus:me,onBlur:he,onMouseEnter:be,onMouseLeave:ye,$variant:N,autoFocus:Q,autoComplete:R,"aria-labelledby":"string"==typeof x?te:void 0,"aria-label":"string"==typeof x?void 0:Y,"aria-invalid":Boolean(A),"aria-describedby":A?ne:void 0}),!!L&&"password"===M&&l(b,{onClick:ve,type:"button","data-test":"show-password","aria-label":ue?ee:_,"aria-pressed":ue,children:l($,{fill:le.colors.grayScale.gray1,size:16})}),(U||"search"===M)&&L&&l(y,{$big:X,onClick:ge,"aria-label":Z}),"search"!==M&&P&&l(v,Object.assign({},Ce,{children:P}))]}),E&&l(d,{$error:!1,$hover:!1,$focus:!1,$disabled:!1,$skeleton:!0,$variant:N,children:l(f,{})}),A&&l(g,{id:ne,children:A})]}))};export{k as TextField,d as TextFieldBlock,y as TextFieldClearButton,u as TextFieldColor,p as TextFieldColorInput,m as TextFieldColorPreview,g as TextFieldErrorText,h as TextFieldInput,c as TextFieldLabel,b as TextFieldShowpassButton,f as TextFieldSkeleton,s as TextFieldStyled};