@bikdotai/bik-component-library 0.0.679-10 → 0.0.679-3

package/dist/cjs/components/input/Input.d.ts

@@ -65,8 +65,5 @@ export interface InputProps {
     hightlightInputColor?: string;
     onKeyDownEvent?: (e: Event) => void;
     hideInputHeader?: boolean;
-    hideBorder?: boolean;
-    inputWrapperStyles?: React.CSSProperties;
-    minCharLimit?: number;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;

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

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

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

@@ -12,7 +12,6 @@ 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;