carbon-react/esm/components/textbox/textbox.component.js

A library of reusable React components for easily building user interfaces.

import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o,{useState as t,useContext as r,useRef as a}from"react";import{Box as l}from"../box/box.component.js";import d from"../../__internal__/form-field/form-field.component.js";import{HintText as p}from"../../__internal__/hint-text/hint-text.component.js";import s from"../../__internal__/input/input.component.js";import c from"../../__internal__/input/input-presentation.component.js";import{InputBehaviour as u}from"../../__internal__/input-behaviour/input-behaviour.component.js";import m from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import{TooltipProvider as f}from"../../__internal__/tooltip-provider/index.js";import b from"../../__internal__/validation-message/validation-message.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import g from"../../style/utils/filter-styled-system-margin-props.js";import h from"../carbon-provider/__internal__/new-validation.context.js";import _ from"../numeral-date/__internal__/numeral-date.context.js";import v from"../../hooks/useCharacterCount/useCharacterCount.js";import y from"../../hooks/__internal__/useUniqueId/index.js";import O from"../../__internal__/utils/helpers/guid/index.js";import j from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import I from"./textbox.style.js";import w from"./__internal__/prefix.style.js";function x(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function C(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(i){x(e,i,n[i])}))}return e}function P(e,i){return i=null!=i?i:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);i.push.apply(i,n)}return i}(Object(i)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(i,n))})),e}const k="left",D="medium",H=30,L=!1,M=o.forwardRef(((o,x)=>{var{"aria-labelledby":M,"aria-describedby":T,align:W=k,autoFocus:B,children:S,disabled:A,inputIcon:F,leftChildren:q,label:z,labelAlign:R,labelHelp:E,labelInline:V,labelSpacing:U,id:G,formattedValue:J,inputHint:K,fieldHelp:N,error:Q,warning:X,info:Y,name:Z,reverse:$,size:ee=D,value:ie,readOnly:ne,placeholder:oe,onBlur:te,onClick:re,onFocus:ae,onChange:le,onMouseDown:de,onChangeDeferred:pe,deferTimeout:se,iconOnClick:ce,iconOnMouseDown:ue,iconTabIndex:me,validationOnLabel:fe=L,labelWidth:be=H,inputWidth:ge,maxWidth:he,prefix:_e,adaptiveLabelBreakpoint:ve,required:ye,positionedChildren:Oe,tooltipPosition:je,"data-component":Ie,"data-element":we,"data-role":xe,characterLimit:Ce,helpAriaLabel:Pe,tooltipId:ke,validationMessagePositionTop:De=!0}=o,He=function(e,i){if(null==e)return{};var n,o,t=function(e,i){if(null==e)return{};var n,o,t={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],i.indexOf(n)>=0||(t[n]=e[n]);return t}(e,i);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(o,["aria-labelledby","aria-describedby","align","autoFocus","children","disabled","inputIcon","leftChildren","label","labelAlign","labelHelp","labelInline","labelSpacing","id","formattedValue","inputHint","fieldHelp","error","warning","info","name","reverse","size","value","readOnly","placeholder","onBlur","onClick","onFocus","onChange","onMouseDown","onChangeDeferred","deferTimeout","iconOnClick","iconOnMouseDown","iconTabIndex","validationOnLabel","labelWidth","inputWidth","maxWidth","prefix","adaptiveLabelBreakpoint","required","positionedChildren","tooltipPosition","data-component","data-element","data-role","characterLimit","helpAriaLabel","tooltipId","validationMessagePositionTop"]);const Le="string"==typeof ie?ie:"",[Me,Te]=y(G,Z),[We,Be]=t("off"),[Se,Ae]=v(Le,Ce,We),{validationRedesignOptIn:Fe}=r(h),{disableErrorBorder:qe}=r(_),ze=e=>Fe?void 0:e,{labelId:Re,validationId:Ee,fieldHelpId:Ve,ariaDescribedBy:Ue}=j({id:Me,validationRedesignOptIn:Fe,error:Q,warning:X,info:Y,label:z,fieldHelp:N}),Ge=a(O()),Je=K?Ge.current:void 0,Ke=[...Fe&&De?[Ue,Je]:[Je,Ue],Ae,T].filter(Boolean).join(" "),Ne=e(c,{align:W,disabled:A,readOnly:ne,size:ee,error:Q,warning:X,info:Y,prefix:_e,inputWidth:ge||100-be,maxWidth:V||"right"!==R?he:void 0,positionedChildren:Oe,hasIcon:!!(F||Ee&&!fe),children:[q,_e&&i(w,{"data-element":"textbox-prefix",size:ee,children:_e}),i(s,C(P(C({},ye&&{required:ye}),{align:W,"aria-invalid":!!Q,"aria-labelledby":M,"aria-describedby":Ke,autoFocus:B,deferTimeout:se,disabled:A,id:Me,ref:x,name:Te,onBlur:e=>{Ce&&Be("off"),null==te||te(e)},onChange:le,onChangeDeferred:pe,onClick:A||ne?void 0:re,onFocus:e=>{Ce&&Be("polite"),null==ae||ae(e)},onMouseDown:A||ne?void 0:de,placeholder:A||ne?"":oe,readOnly:ne,value:"string"==typeof J?J:ie,validationIconId:Fe?void 0:ke||Ee}),He)),S,i(m,{align:W,disabled:A,error:Q,iconTabIndex:me,info:Y,inputIcon:F,onClick:A||ne?void 0:ce||re,onMouseDown:A||ne?void 0:ue||de,readOnly:ne,size:ee,useValidationIcon:!(Fe||fe),warning:X,validationIconId:Fe?void 0:ke||Ee})]});return i(f,{helpAriaLabel:Pe,tooltipPosition:je,children:i(u,{children:e(d,P(C({maxWidth:V||"right"!==R?void 0:he,disabled:A,fieldHelpId:Ve,fieldHelp:ze(N),error:Q,warning:X,info:Y,label:z,labelId:Re,labelAlign:R,labelHelp:ze(E),labelInline:ze(V),labelSpacing:U,labelWidth:ze(be),id:Me,reverse:ze($),useValidationIcon:ze(fe),adaptiveLabelBreakpoint:ve,isRequired:ye,"data-component":Ie,"data-role":xe,"data-element":we,validationIconId:Fe?void 0:Ee,validationRedesignOptIn:Fe},g(He)),{children:[(K||E&&Fe)&&i(p,{align:R,"data-element":"input-hint",id:Je,isComponentInline:V,children:K||E}),Fe?e(l,{position:"relative",children:[De&&e(n,{children:[i(b,{error:Q,validationId:Ee,warning:X,validationMessagePositionTop:De}),!qe&&(Q||X)&&i(I,{warning:!(Q||!X)})]}),Ne,!De&&e(n,{children:[i(b,{error:Q,validationId:Ee,warning:X,validationMessagePositionTop:De}),!qe&&(Q||X)&&i(I,{warning:!(Q||!X)})]})]}):Ne,Se]}))})})}));export{k as ALIGN_DEFAULT,L as LABEL_VALIDATION_DEFAULT,H as LABEL_WIDTH_DEFAULT,D as SIZE_DEFAULT,M as Textbox,M as default};