@bikdotai/bik-component-library 0.0.799-beta.2 → 0.0.799-beta.20

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

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

@@ -15,6 +15,7 @@ export interface InputProps {
         icon: React.FC;
         callback?: () => void;
     };
+    leftIconStyle?: React.CSSProperties;
     rightIcon?: {
         icon: React.FC;
         callback?: () => void;
@@ -54,7 +55,7 @@ export interface InputProps {
     };
     noKeyDownChange?: boolean;
     skipFocus?: boolean;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
     textControl?: boolean;
     noMaxCharCheck?: boolean;
     tooltipText?: string;

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

@@ -10,7 +10,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     isInvalid?: boolean | undefined;
     state?: InputStateI | undefined;
     variant?: InputVariant | undefined;
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
     hightlightInputColor?: string | undefined;
     hideBorder?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -55,6 +55,21 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
     height?: string | undefined;
     type?: InputTypeI | undefined;
 }, {}, {}>;
+export declare const InputContainerXSmall: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
+}, {}, {}>;
 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;