@bikdotai/bik-component-library 0.0.700-beta.1 → 0.0.700-beta.5

package/dist/esm/components/input/Input.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,validateInput as u}from"./Input-helper.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as p}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as x}from"./context/InputStyleProvider.js";import{RootContainer as b,InputFooter as f,MaxCharStyle as y,InputWrapper as j,IconHolder as C,PrefixHolder as O,InputContainer as T,InputContainerSmall as w,SuffixHolder as I,InputHeader as k}from"./Input.styled.js";const L=l(((l,L)=>{var H,B,E,M,P,D,S;const{placeholder:z,leftIcon:A,rightIcon:F,labelText:K,maxCharLimit:N,isRequired:R,hintText:G,type:_,state:q,validate:V,variant:W,button:$,suffixText:J,prefixText:Q,onChangeText:U,value:X,noErrorHint:Y,reset:Z,rangeValidation:ee,noKeyDownChange:te,version:ne,noMaxCharCheck:ie,labelElement:le,autoGrow:re,minHeight:oe,maxHeight:ae,labelTextBold:se,truncateText:ce,maxCharLimitPosition:he,hightlightInputColor:ue,onKeyDownEvent:de,hideInputHeader:ve}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP"},l),pe=null==A?void 0:A.icon,ge=null==F?void 0:F.icon,[me,xe]=r(!1),[be,fe]=r(!1),[ye,je]=r(),Ce="x-small"===W?"12px":"small"===W?"18px":"22px",Oe=o(x),[Te,we]=r(),Ie=a(null),ke=null!=L?L:Ie;s((()=>{we(X),!X&&re&&(ke.current.style.height=oe||"48px")}),[X]),s((()=>{var e;ke.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,ke.current))}),[ke]),s((()=>{const e=ke.current;if(e&&["phonenumber","zip","number"].includes(_))return e.addEventListener("wheel",Ee,{passive:!1}),()=>{e.removeEventListener("wheel",Ee)}}),[]),s((()=>{Z&&we("")}),[Z]),s((()=>{var e;fe(!!l.isActive),l.isActive&&(null===(e=ke.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{je(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;xe(!1),("invalid"===l.state||ye||"disabled-invalid"===l.state)&&xe(!0),"active"===l.state&&(null===(e=ke.current)||void 0===e||e.focus())}),[l.state,ye]),s((()=>{xe(!!ye||"invalid"===l.state)}),[ye,l.state]);const Le=function(e){if(h(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},He=()=>"zip"===_?6:2e3,Be=e=>{const t=0!==N?N:He();if(de&&de(e),te||U(X||"",e),ie)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},Ee=e=>{e.preventDefault()},Me=e=>{let t=e.target.value;const n=0!==N?N+1:He();!ie&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),U(t,e),l.textControl||we(t),re&&(ke.current.style.height=`${ke.current.scrollHeight}px`,t||(ke.current.style.height=oe||"48px"));const i=V||u;if(!i||!h(i))return;const[r,o]=i(t,_,ee);xe(!r),je(l.errorMessage?l.errorMessage:o)},Pe=e=>{var t;l.skipFocus||fe(!0),Le(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},De=e=>{var t;l.skipFocus||fe(!1),Le(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},Se=()=>{var i;return e(n,{children:["multiline"!==_&&t("input",{className:ce?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(i=null==Oe?void 0:Oe.input)&&void 0!==i?i:{},ref:ke,type:["phonenumber","zip","number"].includes(_)?"number":_,value:Te,onFocus:e=>Pe(e),onBlur:e=>De(e),placeholder:z||"Enter here",onChange:Me,onClick:e=>Le(l.onClick),onKeyDown:e=>Be(e)}),"multiline"===_&&t("textarea",{"data-test":l["data-test"],value:Te,ref:ke,onFocus:e=>Pe(e),onBlur:e=>De(e),onClick:e=>Le(l.onClick),placeholder:z||"Enter here",onChange:Me,onKeyDown:e=>Be(e),maxLength:N>0?N:void 0})]})};return e(b,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(H=null==Oe?void 0:Oe.RootContainer)&&void 0!==H?H:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!Y&&(!!G||!!ye)&&e(f,Object.assign({invalid:!!ye},{children:[!!ye&&t(m,{width:16,height:16}),ye||G]})),N>0&&"BOTTOM"===he&&e(y,Object.assign({position:"BOTTOM"},{children:[null!==(E=null===(B=(null!=X?X:"").toString())||void 0===B?void 0:B.length)&&void 0!==E?E:0,"/",N]}))]})),e(j,Object.assign({variant:W,state:q,width:l.width,isActive:"active"===q||be,isInvalid:me,style:null!==(M=null==Oe?void 0:Oe.InputWrapper)&&void 0!==M?M:{},version:ne,height:l.height,hightlightInputColor:ue},{children:[!!pe&&t(C,Object.assign({variant:W,iconSize:Ce,onClick:()=>Le(null==A?void 0:A.callback),isLeft:!0,style:null!==(P=null==Oe?void 0:Oe.IconHolder)&&void 0!==P?P:{}},{children:t(pe,{})})),!!Q&&t(O,Object.assign({variant:W},{children:Q})),"default"===W&&t(T,Object.assign({height:l.height,type:l.type,minHeight:oe,maxHeight:ae,autoGrow:re},{children:Se()})),["x-small","small"].includes(W)&&t(w,Object.assign({height:l.height,type:l.type},{children:Se()})),!!ge&&t(C,Object.assign({variant:W,iconSize:Ce,onClick:()=>Le(null==F?void 0:F.callback),isLeft:!1},{children:t(ge,{})})),!!J&&t(I,Object.assign({variant:W},{children:J})),$&&$.text&&t(c,{buttonText:$.text,onClick:()=>Le(null==$?void 0:$.onClick)}),$&&$.buttonProps&&t(c,Object.assign({},$.buttonProps))]})),!ve&&(!!K||!!N)&&e(k,Object.assign({invalid:me},{children:[le&&le,e("div",Object.assign({className:"label__container"},{children:[e(se?v:p,{children:[K,R?t("span",{children:"*"}):""]}),l.tooltipText&&t(d,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(i,{style:{marginTop:-3},width:18,height:18,color:me?g.content.negative:g.content.primary})})}))]})),N>0&&"TOP"===he&&e(y,{children:[null!==(S=null===(D=(null!=X?X:"").toString())||void 0===D?void 0:D.length)&&void 0!==S?S:0,"/",N]})]}))]}))}));L.displayName="Input";export{L as Input};
+import{j as e}from"../../node_modules/react/jsx-runtime.js";import t from"../../assets/icons/info.svg.js";import{forwardRef as n,useState as i,useContext as l,useRef as s,useEffect as r}from"react";import{Button as o}from"../button/Button.js";import{isFunction as a,validateInput as c}from"./Input-helper.js";import{Tooltip as h}from"../tooltips/Tooltip.js";import{TitleSmall as d,BodySecondary as u}from"../TypographyStyle.js";import{COLORS as v}from"../../constants/Theme.js";import g from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as p}from"./context/InputStyleProvider.js";import{RootContainer as x,InputFooter as m,MaxCharStyle as j,InputWrapper as b,IconHolder as f,PrefixHolder as y,InputContainer as C,InputContainerSmall as T,SuffixHolder as O,InputHeader as w}from"./Input.styled.js";const I=n(((n,I)=>{var k,B,L,H,D,E,M,P;const{placeholder:S,leftIcon:F,rightIcon:z,labelText:A,maxCharLimit:K,isRequired:N,hintText:R,type:_,state:G,validate:W,variant:q,button:V,suffixText:$,prefixText:J,onChangeText:Q,value:U,noErrorHint:X,reset:Y,rangeValidation:Z,noKeyDownChange:ee,version:te,noMaxCharCheck:ne,labelElement:ie,autoGrow:le,minHeight:se,maxHeight:re,labelTextBold:oe,truncateText:ae,maxCharLimitPosition:ce,hightlightInputColor:he,onKeyDownEvent:de,hideInputHeader:ue,hideBorder:ve,inputWrapperStyles:ge,minCharsToTrigger:pe,isDisabled:xe=!1}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},n),me=null==F?void 0:F.icon,je=null==z?void 0:z.icon,[be,fe]=i(!1),[ye,Ce]=i(!1),[Te,Oe]=i(),we="x-small"===q?"12px":"small"===q?"18px":"22px",Ie=l(p),[ke,Be]=i(),Le=s(null),He=null!=I?I:Le;r((()=>{Be(U),!U&&le&&(He.current.style.height=se||"48px")}),[U]),r((()=>{var e;He.current&&(null===(e=n.onReferenceInit)||void 0===e||e.call(n,He.current))}),[He]),r((()=>{const e=He.current;if(e&&["phonenumber","zip","number"].includes(_))return e.addEventListener("wheel",Pe,{passive:!1}),()=>{e.removeEventListener("wheel",Pe)}}),[]),r((()=>{Y&&Be("")}),[Y]),r((()=>{var e;Ce(!!n.isActive),n.isActive&&(null===(e=He.current)||void 0===e||e.focus())}),[n.isActive]),r((()=>{Oe(n.errorMessage)}),[n.errorMessage]),r((()=>{var e;fe(!1),("invalid"===n.state||Te||"disabled-invalid"===n.state)&&fe(!0),"active"===n.state&&(null===(e=He.current)||void 0===e||e.focus())}),[n.state,Te]),r((()=>{fe(!!Te||"invalid"===n.state)}),[Te,n.state]);const De=function(e){if(a(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},Ee=()=>"zip"===_?6:2e3,Me=e=>{const t=0!==K?K:Ee(),n=pe,i=e.target.value;de&&(!i.length||i.length>=n)&&de(e),ee||i.length&&!(i.length>=n)||Q(U||"",e),ne||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},Pe=e=>{e.preventDefault()},Se=e=>{let t=e.target.value;const i=0!==K?K+1:Ee(),l=pe;if(!ne&&i>0&&t.length>=i&&(t=t.substring(0,i-1)),n.textControl||Be(t),l&&t&&t.length<l)return;Q(t,e),le&&(He.current.style.height=`${He.current.scrollHeight}px`,t||(He.current.style.height=se||"48px"));const s=W||c;if(!s||!a(s))return;const[r,o]=s(t,_,Z);fe(!r),Oe(n.errorMessage?n.errorMessage:o)},Fe=e=>{var t;n.skipFocus||Ce(!0),De(null===(t=n.onFocus)||void 0===t?void 0:t.call(n,e))},ze=e=>{var t;n.skipFocus||Ce(!1),De(null===(t=n.onBlur)||void 0===t?void 0:t.call(n,e))},Ae=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==_&&e.jsx("input",{className:ae?"truncate-class":"","data-test":n["data-test"],id:n.id,style:null!==(t=null==Ie?void 0:Ie.input)&&void 0!==t?t:{},ref:He,disabled:xe,type:["phonenumber","zip","number"].includes(_)?"number":_,value:ke,onFocus:e=>Fe(e),onBlur:e=>ze(e),placeholder:S||"Enter here",onChange:Se,onClick:e=>De(n.onClick),onKeyDown:e=>Me(e)}),"multiline"===_&&e.jsx("textarea",{"data-test":n["data-test"],value:ke,ref:He,onFocus:e=>Fe(e),onBlur:e=>ze(e),onClick:e=>De(n.onClick),disabled:xe,placeholder:S||"Enter here",onChange:Se,onKeyDown:e=>Me(e),maxLength:K>0?K:void 0})]})};return e.jsxs(x,Object.assign({width:n.width,height:n.height,state:G,type:_,style:null!==(k=null==Ie?void 0:Ie.RootContainer)&&void 0!==k?k:{}},{children:[e.jsxs("div",Object.assign({className:"flex-align-center"},{children:[!X&&(!!R||!!Te)&&e.jsxs(m,Object.assign({invalid:!!Te},{children:[!!Te&&e.jsx(g,{width:16,height:16}),Te||R]})),K>0&&"BOTTOM"===ce&&e.jsxs(j,Object.assign({position:"BOTTOM"},{children:[null!==(L=null===(B=(null!=U?U:"").toString())||void 0===B?void 0:B.length)&&void 0!==L?L:0,"/",K]}))]})),e.jsxs(b,Object.assign({variant:q,state:G,width:n.width,isActive:"active"===G||ye,isInvalid:be,style:null!==(D=null!==(H=null==Ie?void 0:Ie.InputWrapper)&&void 0!==H?H:ge)&&void 0!==D?D:{},version:te,height:n.height,hightlightInputColor:he,hideBorder:ve},{children:[!!me&&e.jsx(f,Object.assign({variant:q,iconSize:we,onClick:()=>De(null==F?void 0:F.callback),isLeft:!0,style:null!==(E=null==Ie?void 0:Ie.IconHolder)&&void 0!==E?E:{}},{children:e.jsx(me,{})})),!!J&&e.jsx(y,Object.assign({variant:q},{children:J})),"default"===q&&e.jsx(C,Object.assign({height:n.height,type:n.type,minHeight:se,maxHeight:re,autoGrow:le},{children:Ae()})),["x-small","small"].includes(q)&&e.jsx(T,Object.assign({height:n.height,type:n.type},{children:Ae()})),!!je&&e.jsx(f,Object.assign({variant:q,iconSize:we,onClick:()=>De(null==z?void 0:z.callback),isLeft:!1},{children:e.jsx(je,{})})),!!$&&e.jsx(O,Object.assign({variant:q},{children:$})),V&&V.text&&e.jsx(o,{buttonText:V.text,onClick:()=>De(null==V?void 0:V.onClick)}),V&&V.buttonProps&&e.jsx(o,Object.assign({},V.buttonProps))]})),!ue&&(!!A||!!K)&&e.jsxs(w,Object.assign({invalid:be},{children:[ie&&ie,e.jsxs("div",Object.assign({className:"label__container"},{children:[oe?e.jsxs(d,{children:[A,N?e.jsx("span",{children:"*"}):""]}):e.jsxs(u,{children:[A,N?e.jsx("span",{children:"*"}):""]}),n.tooltipText&&e.jsx(h,Object.assign({body:n.tooltipText,placement:"top"},{children:e.jsx("span",{children:e.jsx(t,{style:{marginTop:-3},width:18,height:18,color:be?v.content.negative:v.content.primary})})}))]})),K>0&&"TOP"===ce&&e.jsxs(j,{children:[null!==(P=null===(M=(null!=U?U:"").toString())||void 0===M?void 0:M.length)&&void 0!==P?P:0,"/",K]})]}))]}))}));I.displayName="Input";export{I as Input};

package/dist/esm/components/input/Input.styled.d.ts

@@ -12,6 +12,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     variant?: InputVariant | undefined;
     version?: "1.0" | "2.0" | undefined;
     hightlightInputColor?: string | undefined;
+    hideBorder?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;