monday-ui-react-core/dist/esm/src/components/TextField/TextField.js

Official monday.com UI resources for application development in React.js

import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import a,{forwardRef as n,useState as r,useRef as i,useCallback as l,useMemo as s,useEffect as c}from"react";import d from"../../hooks/useDebounceEvent/index.js";import m from"../Icon/Icon.js";import{backwardCompatibilityForProperties as u}from"../../helpers/backwardCompatibilityForProperties.js";import p from"../Loader/Loader.js";import v from"../Text/Text.js";import f from"../FieldLabel/FieldLabel.js";import{TextFieldFeedbackState as C,TextFieldTextType as b,FEEDBACK_CLASSES as y,SIZE_MAPPER as x,getActualSize as T,TextFieldAriaLabel as E}from"./TextFieldConstants.js";import{BASE_SIZES as N}from"../../constants/sizes.js";import h from"../../hooks/useMergeRef.js";import g from"../Clickable/Clickable.js";import{getTestId as I}from"../../tests/testIds.js";import{NOOP as j}from"../../utils/function-utils.js";import{ComponentDefaultTestId as L}from"../../tests/constants.js";import{withStaticProps as k}from"../../types/withStaticProps.js";import F from"./TextField.module.scss.js";import S from"../Tooltip/Tooltip.js";import A from"../HiddenText/HiddenText.js";var w={primary:"",secondary:"",layout:""},O=n((function(n,C){var N=n.className,k=void 0===N?"":N,D=n.placeholder,H=void 0===D?"":D,R=n.autoComplete,z=void 0===R?"off":R,_=n.value,q=n.onChange,B=void 0===q?j:q,M=n.onBlur,W=void 0===M?j:M,K=n.onFocus,P=void 0===K?j:K,X=n.onKeyDown,V=void 0===X?j:X,U=n.onWheel,Y=void 0===U?j:U,G=n.debounceRate,J=void 0===G?0:G,Q=n.autoFocus,Z=void 0!==Q&&Q,$=n.disabled,ee=void 0!==$&&$,te=n.readonly,oe=void 0!==te&&te,ae=n.setRef,ne=void 0===ae?j:ae,re=n.iconName,ie=n.secondaryIconName,le=n.id,se=void 0===le?"input":le,ce=n.title,de=void 0===ce?"":ce,me=n.size,ue=void 0===me?O.sizes.SMALL:me,pe=n.validation,ve=void 0===pe?null:pe,fe=n.wrapperClassName,Ce=void 0===fe?"":fe,be=n.onIconClick,ye=void 0===be?j:be,xe=n.clearOnIconClick,Te=void 0!==xe&&xe,Ee=n.labelIconName,Ne=n.showCharCount,he=void 0!==Ne&&Ne,ge=n.inputAriaLabel,Ie=n.searchResultsContainerId,je=void 0===Ie?"":Ie,Le=n.activeDescendant,ke=void 0===Le?"":Le,Fe=n.iconsNames,Se=void 0===Fe?w:Fe,Ae=n.type,we=void 0===Ae?b.TEXT:Ae,Oe=n.maxLength,De=void 0===Oe?null:Oe,He=n.allowExceedingMaxLength,Re=void 0!==He&&He,ze=n.trim,_e=void 0!==ze&&ze,qe=n.role,Be=void 0===qe?"":qe,Me=n.required,We=void 0!==Me&&Me,Ke=n.requiredErrorText,Pe=void 0===Ke?"":Ke,Xe=n.loading,Ve=void 0!==Xe&&Xe,Ue=n.requiredAsterisk,Ye=void 0!==Ue&&Ue,Ge=n.dataTestId,Je=n["data-testid"],Qe=n.secondaryDataTestId,Ze=n.tabIndex,$e=n.underline,et=void 0!==$e&&$e,tt=n.name,ot=n.withReadOnlyStyle,at=n.controlled,nt=void 0!==at&&at,rt=n.iconTooltipContent,it=n.secondaryTooltipContent,lt=r(!1),st=e(lt,2),ct=st[0],dt=st[1],mt=u([Je,Ge],I(L.TEXT_FIELD,se)),ut=i(null),pt=h(C,ut,ne),vt=l((function(e){We&&!e.target.value&&dt(!0),W(e)}),[W,We]),ft=l((function(e,t){ct&&e&&dt(!1),B(e,t||{target:ut.current})}),[B,ct]),Ct=d({delay:J,onChange:ft,initialStateValue:_,trim:_e}),bt=Ct.inputValue,yt=Ct.onEventChanged,xt=Ct.clearValue,Tt=s((function(){return nt?_:bt}),[nt,_,bt]),Et=l((function(e){nt?ft(e.target.value,e):yt(e)}),[nt,ft,yt]),Nt=s((function(){return ie&&Tt?ie:re}),[re,ie,Tt]),ht=l((function(){ee||(Te&&(ut.current&&ut.current.focus(),ut.current.value="",nt?ft(""):xt()),ye(Nt))}),[ee,Te,ye,Nt,nt,ft,xt]),gt=s((function(){return"number"==typeof De&&Tt&&Tt.length>De?y.error:ve&&ve.status||ct?y[ct?"error":ve.status]:""}),[De,ve,ct,Tt]),It=re||ie,jt=he||ve&&ve.text||ct,Lt=ie===Nt,kt=re===Nt,Ft=(ye!==j||Se.primary||rt)&&Tt&&re.length&&kt,St=(ie||it)&&Lt&&!!Tt,At=Re?"".concat(se,"-allow-exceeding-max-length-text"):void 0;c((function(){if((null==ut?void 0:ut.current)&&Z){var e=requestAnimationFrame((function(){return ut.current.focus()}));return function(){return cancelAnimationFrame(e)}}}),[ut,Z]);var wt=ye!==j||Te,Ot=Se.primary||rt,Dt=Se.secondary||it;return a.createElement("div",{className:o(F.textField,Ce,t(t({},F.disabled,ee),F.onlyUnderline,et)),role:Be,"aria-busy":Ve},a.createElement("div",{className:o(F.labelWrapper)},a.createElement(f,{labelText:de,icon:Ee,labelFor:se,requiredAsterisk:Ye}),a.createElement("div",{className:o(F.inputWrapper,x[T(ue)],gt)},a.createElement("input",{className:o(k,F.input,t(t(t({},F.inputHasIcon,!!It),F.readOnly,oe),F.withReadOnlyStyle,ot)),placeholder:H,autoComplete:z,value:Tt,onChange:Et,disabled:ee,readOnly:oe,ref:pt,type:we,id:se,"data-testid":mt,name:tt,onBlur:vt,onFocus:P,onKeyDown:V,onWheel:Y,maxLength:"number"!=typeof De||Re?void 0:De,role:je&&"combobox","aria-label":ge||H,"aria-invalid":ve&&"error"===ve.status||ct,"aria-owns":je,"aria-activedescendant":ke,"aria-required":We,"aria-describedby":At,required:We,tabIndex:Ze}),Ve&&a.createElement("div",{className:o(F.loaderContainer,t({},F.loaderContainerHasIcon,It))},a.createElement("div",{className:o(F.loader)},a.createElement(p,{svgClassName:o(F.loaderSvg)}))),a.createElement(S,{content:kt?rt:void 0,addKeyboardHideShowTriggersByDefault:!0,referenceWrapperClassName:F.tooltipContainer},a.createElement(g,{className:o(F.iconContainer,t(t(t({},F.iconContainerHasIcon,It),F.iconContainerActive,kt),F.iconContainerClickable,wt)),onClick:ht,tabIndex:Ft?"0":"-1",ariaLabel:Ot},a.createElement(m,{icon:re,className:o(F.icon),clickable:!1,iconType:m.type.ICON_FONT,iconSize:ue===O.sizes.SMALL?"16px":"18px"}))),a.createElement(S,{content:Lt?it:void 0,addKeyboardHideShowTriggersByDefault:!0,referenceWrapperClassName:F.tooltipContainer},a.createElement(g,{className:o(F.iconContainer,t(t(t({},F.iconContainerHasIcon,It),F.iconContainerActive,Lt),F.iconContainerClickable,wt)),onClick:ht,tabIndex:St?"0":"-1","data-testid":Qe||I(L.TEXT_FIELD_SECONDARY_BUTTON,se),ariaLabel:Dt},a.createElement(m,{icon:ie,className:o(F.icon),clickable:!1,iconType:m.type.ICON_FONT,iconSize:ue===O.sizes.SMALL?"16px":"18px"})))),jt&&a.createElement(v,{type:v.types.TEXT2,color:v.colors.SECONDARY,className:o(F.subTextContainer)},ve&&ve.text&&a.createElement("span",{className:o(F.subTextContainerStatus)},ct?Pe:ve.text),he&&a.createElement("span",{className:o(F.counter),"aria-label":E.CHAR},Tt&&Tt.length||0,"number"==typeof De&&"/".concat(De),a.createElement(A,{id:At,text:"Maximum of ".concat(De," characters")})))))})),D=k(O,{sizes:N,feedbacks:C,types:b});export{D as default};
//# sourceMappingURL=TextField.js.map