@bikdotai/bik-component-library 0.0.737-beta.2 → 0.0.738-0

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

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

@@ -2,7 +2,7 @@
 import { InputStateI, InputTypeI, InputVariant } from "./Input";
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;
@@ -16,7 +16,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isLeft?: boolean | undefined;
     iconSize?: string | undefined;
@@ -57,7 +57,7 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
 }, {}, {}>;
 export declare const InputHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     invalid?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -91,7 +91,7 @@ export declare const InputFooter: import("@emotion/styled").StyledComponent<{
 }, {}, {}>;
 export declare const RootContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;