@bikdotai/bik-component-library 0.0.678 → 0.0.679-1

package/dist/esm/components/country-code-picker/CountryCodePicker.js

@@ -1 +1 @@
-import{jsx as o,jsxs as e}from"react/jsx-runtime";import t from"../../assets/icons/chevronDown.svg.js";import{useState as n,useEffect as r}from"react";import{CountriesData as d}from"./CountryCodePicker.modal.js";import{StyledCountryPickerWrapper as s,StyledCountryPickerOption as i}from"./CountryCodePicker.styled.js";import{DropdownPopover as p}from"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"../zeroState/ZeroState.js";import{BodySecondary as c}from"../TypographyStyle.js";import{COLORS as m}from"../../constants/Theme.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";const l=l=>{var a,u,w,h,j,v;const[y,g]=n(null!==(a=l.selectedCountry)&&void 0!==a?a:{name:"India",dial:"+91",code:"IN"}),C=`https://flagcdn.com/${null===(u=y.code)||void 0===u?void 0:u.toLowerCase()}.svg`;r((()=>{l.selectedCountry&&g(l.selectedCountry)}),[null===(w=l.selectedCountry)||void 0===w?void 0:w.code]);return o(p,Object.assign({version:l.version,isSearchable:!0,width:null!==(h=l.popoverWidth)&&void 0!==h?h:"200px",placement:null!==(j=l.placement)&&void 0!==j?j:"bottom-start",strategy:null!==(v=l.placementStrategy)&&void 0!==v?v:"absolute",options:d.map((t=>{var n;const r=`https://flagcdn.com/${null===(n=t.code)||void 0===n?void 0:n.toLowerCase()}.svg`;return{value:t.code,label:t.dial,searchKey:t.name,customComponent:e(i,{children:[o("img",{src:r,className:"country-flag__option",alt:t.name}),e(c,{children:[t.code,"  ",t.dial]})]}),selected:y.code===t.code}})),disabled:l.disabled,onSelect:o=>{const e=d.filter((e=>e.code===o.value));g(e[0]),l.onCountrySelect(e[0])}},{children:e(s,Object.assign({height:l.height},{children:[e("div",Object.assign({className:"content__wrapper"},{children:[o("img",{src:C,className:"country-flag__selected-option",alt:y.name}),o(c,{children:y.dial})]})),o(t,{width:24,height:24,color:m.content.primary})]}))}))};export{l as CountryCodePicker};
+import{jsx as o,jsxs as e}from"react/jsx-runtime";import t from"../../assets/icons/chevronDown.svg.js";import{useState as n,useEffect as r}from"react";import{CountriesData as d}from"./CountryCodePicker.modal.js";import{StyledCountryPickerWrapper as s,StyledCountryPickerOption as i}from"./CountryCodePicker.styled.js";import{DropdownPopover as p}from"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"../zeroState/ZeroState.js";import{BodySecondary as c}from"../TypographyStyle.js";import{COLORS as l}from"../../constants/Theme.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";const m=m=>{var a,u,h,w,j,y;const[v,g]=n(null!==(a=m.selectedCountry)&&void 0!==a?a:{name:"India",dial:"+91",code:"IN"}),C=`https://flagcdn.com/${null===(u=v.code)||void 0===u?void 0:u.toLowerCase()}.svg`;r((()=>{m.selectedCountry&&g(m.selectedCountry)}),[null===(h=m.selectedCountry)||void 0===h?void 0:h.code]);return o(p,Object.assign({version:m.version,isSearchable:!0,width:null!==(w=m.popoverWidth)&&void 0!==w?w:"200px",placement:null!==(j=m.placement)&&void 0!==j?j:"bottom-start",strategy:null!==(y=m.placementStrategy)&&void 0!==y?y:"absolute",options:d.map((t=>{var n;const r=`https://flagcdn.com/${null===(n=t.code)||void 0===n?void 0:n.toLowerCase()}.svg`;return{value:t.code,label:t.dial,searchKey:t.name,customComponent:e(i,{children:[!m.hideFlagImage&&o("img",{src:r,className:"country-flag__option",alt:t.name}),e(c,{children:[t.code,"  ",t.dial]})]}),selected:v.code===t.code}})),disabled:m.disabled,onSelect:o=>{const e=d.filter((e=>e.code===o.value));g(e[0]),m.onCountrySelect(e[0])}},{children:e(s,Object.assign({height:m.height,style:m.containerStyles},{children:[e("div",Object.assign({className:"content__wrapper"},{children:[!m.hideFlagImage&&o("img",{src:C,className:"country-flag__selected-option",alt:v.name}),o(c,{children:v.dial})]})),o(t,{width:24,height:24,color:l.content.primary})]}))}))};export{m as CountryCodePicker};

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

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

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{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 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 B=l(((l,B)=>{var L,H,E,M,P,S,D,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:ue,hightlightInputColor:de,onKeyDownEvent:ve,hideInputHeader:pe,hideBorder:ge,inputWrapperStyles:me}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP"},l),xe=null==F?void 0:F.icon,be=null==K?void 0:K.icon,[fe,ye]=r(!1),[je,Ce]=r(!1),[Oe,Te]=r(),we="x-small"===$?"12px":"small"===$?"18px":"22px",Ie=o(x),[ke,Be]=r(),Le=a(null),He=null!=B?B:Le;s((()=>{Be(Y),!Y&&oe&&(He.current.style.height=ae||"48px")}),[Y]),s((()=>{var e;He.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,He.current))}),[He]),s((()=>{const e=He.current;if(e&&["phonenumber","zip","number"].includes(_))return e.addEventListener("wheel",Se,{passive:!1}),()=>{e.removeEventListener("wheel",Se)}}),[]),s((()=>{ee&&Be("")}),[ee]),s((()=>{var e;Ce(!!l.isActive),l.isActive&&(null===(e=He.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{Te(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;ye(!1),("invalid"===l.state||Oe||"disabled-invalid"===l.state)&&ye(!0),"active"===l.state&&(null===(e=He.current)||void 0===e||e.focus())}),[l.state,Oe]),s((()=>{ye(!!Oe||"invalid"===l.state)}),[Oe,l.state]);const Ee=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)}},Me=()=>"zip"===_?6:2e3,Pe=e=>{const t=0!==R?R:Me();if(ve&&ve(e),ie||X(Y||"",e),le)return;const i=e.target.value;![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},Se=e=>{e.preventDefault()},De=e=>{let t=e.target.value;const i=0!==R?R+1:Me();!le&&i>0&&t.length>=i&&(t=t.substring(0,i-1)),X(t,e),l.textControl||Be(t),oe&&(He.current.style.height=`${He.current.scrollHeight}px`,t||(He.current.style.height=ae||"48px"));const n=V||u;if(!n||!h(n))return;const[r,o]=n(t,_,te);ye(!r),Te(l.errorMessage?l.errorMessage:o)},ze=e=>{var t;l.skipFocus||Ce(!0),Ee(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},Ae=e=>{var t;l.skipFocus||Ce(!1),Ee(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},Fe=()=>{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==Ie?void 0:Ie.input)&&void 0!==n?n:{},ref:He,type:["phonenumber","zip","number"].includes(_)?"number":_,value:ke,onFocus:e=>ze(e),onBlur:e=>Ae(e),placeholder:A||"Enter here",onChange:De,onClick:e=>Ee(l.onClick),onKeyDown:e=>Pe(e)}),"multiline"===_&&t("textarea",{"data-test":l["data-test"],value:ke,ref:He,onFocus:e=>ze(e),onBlur:e=>Ae(e),onClick:e=>Ee(l.onClick),placeholder:A||"Enter here",onChange:De,onKeyDown:e=>Pe(e),maxLength:R>0?R:void 0})]})};return e(b,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(L=null==Ie?void 0:Ie.RootContainer)&&void 0!==L?L:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!Z&&(!!W||!!Oe)&&e(f,Object.assign({invalid:!!Oe},{children:[!!Oe&&t(m,{width:16,height:16}),Oe||W]})),R>0&&"BOTTOM"===ue&&e(y,Object.assign({position:"BOTTOM"},{children:[null!==(E=null===(H=(null!=Y?Y:"").toString())||void 0===H?void 0:H.length)&&void 0!==E?E:0,"/",R]}))]})),e(j,Object.assign({variant:$,state:q,width:l.width,isActive:"active"===q||je,isInvalid:fe,style:null!==(P=null!==(M=null==Ie?void 0:Ie.InputWrapper)&&void 0!==M?M:me)&&void 0!==P?P:{},version:ne,height:l.height,hightlightInputColor:de,hideBorder:ge},{children:[!!xe&&t(C,Object.assign({variant:$,iconSize:we,onClick:()=>Ee(null==F?void 0:F.callback),isLeft:!0,style:null!==(S=null==Ie?void 0:Ie.IconHolder)&&void 0!==S?S:{}},{children:t(xe,{})})),!!U&&t(O,Object.assign({variant:$},{children:U})),"default"===$&&t(T,Object.assign({height:l.height,type:l.type,minHeight:ae,maxHeight:se,autoGrow:oe},{children:Fe()})),["x-small","small"].includes($)&&t(w,Object.assign({height:l.height,type:l.type},{children:Fe()})),!!be&&t(C,Object.assign({variant:$,iconSize:we,onClick:()=>Ee(null==K?void 0:K.callback),isLeft:!1},{children:t(be,{})})),!!Q&&t(I,Object.assign({variant:$},{children:Q})),J&&J.text&&t(c,{buttonText:J.text,onClick:()=>Ee(null==J?void 0:J.onClick)}),J&&J.buttonProps&&t(c,Object.assign({},J.buttonProps))]})),!pe&&(!!N||!!R)&&e(k,Object.assign({invalid:fe},{children:[re&&re,e("div",Object.assign({className:"label__container"},{children:[e(ce?v:p,{children:[N,G?t("span",{children:"*"}):""]}),l.tooltipText&&t(d,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(n,{style:{marginTop:-3},width:18,height:18,color:fe?g.content.negative:g.content.primary})})}))]})),R>0&&"TOP"===ue&&e(y,{children:[null!==(z=null===(D=(null!=Y?Y:"").toString())||void 0===D?void 0:D.length)&&void 0!==z?z:0,"/",R]})]}))]}))}));B.displayName="Input";export{B 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;