UNPKG

@stlite/browser

Version:
2 lines (1 loc) 2.81 kB
import{c as H,r as i,bO as L,z as P,cZ as W,j as r,bY as _,bZ as M,cb as U,b_ as B,bH as O,D as Z,c_ as A}from"./index-B3URMCDH.js";import{u as G}from"./uniqueId-CiDhGWIC.js";import{u as K,a as N,b as Y}from"./useOnInputChange-BXBzaK2Q.js";import{a as q}from"./useBasicWidgetState-D0YqqcVB.js";import{I as J}from"./InputInstructions-DZbCUUkN.js";import{I as Q}from"./input-C_RYAu18.js";const X=H("div",{target:"e11y4ecf0"})({name:"bjn8wh",styles:"position:relative"});function $({disabled:a,element:e,widgetMgr:s,fragmentId:u}){var h;const[l,m]=i.useState(()=>I(s,e)??null),[y,v]=L(),[o,p]=i.useState(!1),T=i.useCallback(()=>{m(e.default??null),p(!0)},[e.default]),[C,c]=q({getStateFromWidgetMgr:I,getDefaultStateFromProto:ee,getCurrStateFromProto:te,updateWidgetMgrState:ae,element:e,widgetMgr:s,fragmentId:u,onFormCleared:T});K(C,l,m,o);const[j,b]=i.useState(!1),t=P(),[f]=i.useState(()=>G("text_input_")),{placeholder:z,formId:n,icon:d,maxChars:x}=e,g=i.useCallback(()=>{p(!1),c({value:l,fromUi:!0})},[l,c]),F=W({formId:n})?s.allowFormEnterToSubmit(n):o,R=j&&y>t.breakpoints.hideWidgetDetails,V=i.useCallback(()=>{o&&g(),b(!1)},[o,g]),w=i.useCallback(()=>{b(!0)},[]),E=N({formId:n,maxChars:x,setDirty:p,setUiValue:m,setValueWithSource:c}),k=Y(n,g,o,s,u),S=d==null?void 0:d.startsWith(":material"),D=S?"lg":"base";return r.jsxs(X,{className:"stTextInput","data-testid":"stTextInput",ref:v,children:[r.jsx(_,{label:e.label,disabled:a,labelVisibility:M((h=e.labelVisibility)==null?void 0:h.value),htmlFor:f,children:e.help&&r.jsx(U,{children:r.jsx(B,{content:e.help,placement:O.TOP_RIGHT})})}),r.jsx(Q,{value:l??"",placeholder:z,onBlur:V,onFocus:w,onChange:E,onKeyPress:k,"aria-label":e.label,disabled:a,id:f,type:ie(e),autoComplete:e.autocomplete,startEnhancer:d&&r.jsx(Z,{"data-testid":"stTextInputIcon",iconValue:d,size:D}),overrides:{Input:{style:{minWidth:0,"::placeholder":{opacity:"0.7"},lineHeight:t.lineHeights.inputWidget,paddingRight:t.spacing.sm,paddingLeft:t.spacing.md,paddingBottom:t.spacing.sm,paddingTop:t.spacing.sm}},Root:{props:{"data-testid":"stTextInputRootElement"},style:{height:t.sizes.minElementHeight,borderLeftWidth:t.sizes.borderWidth,borderRightWidth:t.sizes.borderWidth,borderTopWidth:t.sizes.borderWidth,borderBottomWidth:t.sizes.borderWidth,paddingLeft:d?t.spacing.sm:0}},StartEnhancer:{style:{paddingLeft:0,paddingRight:0,minWidth:t.iconSizes.lg,color:S?t.colors.fadedText60:"inherit"}}}}),R&&r.jsx(J,{dirty:o,value:l??"",maxLength:x,inForm:W({formId:n}),allowEnterToSubmit:F})]})}function I(a,e){return a.getStringValue(e)??null}function ee(a){return a.default??null}function te(a){return a.value??null}function ae(a,e,s,u){e.setStringValue(a,s.value,{fromUi:s.fromUi},u)}function ie(a){return a.type===A.Type.PASSWORD?"password":"text"}const se=i.memo($);export{se as default};