@bikdotai/bik-component-library 0.0.731-beta.2 → 0.0.731-beta.24

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),n=require("react-chips"),r=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),s=require("./ChipInput.styled.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(n);exports.default=n=>{let{onChipsChange:o,placeholder:c,chips:a,label:u,labelColor:d,hintText:p,hintTextColor:h,error:y,inputHeight:x,createChipKeys:j,chipsContainerCustomStyle:m,nativeID:C}=n;const[O,v]=t.useState(!1);return t.useEffect((()=>{var e,t;null===(e=document.querySelector(`#${C} input`))||void 0===e||e.addEventListener("focus",(()=>{v(!0)})),null===(t=document.querySelector(`#${C} input`))||void 0===t||t.addEventListener("blur",(()=>{v(!1)}))}),[]),e.jsxRuntimeExports.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8},id:C},{children:[u&&e.jsxRuntimeExports.jsx(i.BodySecondary,Object.assign({style:{color:O?r.COLORS.content.brand:y?r.COLORS.content.negative:d||r.COLORS.content.primary}},{children:u})),e.jsxRuntimeExports.jsx(l.default,{value:a,theme:s.theme(!!y,x,m,O),chipTheme:s.chipTheme,placeholder:0===a.length&&!!c&&!O&&c,onChange:e=>{o(e)},createChipKeys:j||","}),(!!p||!!y)&&e.jsxRuntimeExports.jsx(i.BodyCaption,Object.assign({style:{color:y?r.COLORS.content.negative:h||r.COLORS.content.secondary}},{children:y||p}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-chips"),n=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),o=require("./ChipInput.styled.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(r);exports.default=r=>{let{onChipsChange:c,placeholder:s,chips:a,label:u,labelColor:d,hintText:h,hintTextColor:p,error:y,inputHeight:C,createChipKeys:O,chipsContainerCustomStyle:j,nativeID:v}=r;const[f,g]=t.useState(!1);return t.useEffect((()=>{var e,t;null===(e=document.querySelector(`#${v} input`))||void 0===e||e.addEventListener("focus",(()=>{g(!0)})),null===(t=document.querySelector(`#${v} input`))||void 0===t||t.addEventListener("blur",(()=>{g(!1)}))}),[]),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8},id:v},{children:[u&&e.jsx(i.BodySecondary,Object.assign({style:{color:f?n.COLORS.content.brand:y?n.COLORS.content.negative:d||n.COLORS.content.primary}},{children:u})),e.jsx(l.default,{value:a,theme:o.theme(!!y,C,j,f),chipTheme:o.chipTheme,placeholder:0===a.length&&!!s&&!f&&s,onChange:e=>{c(e)},createChipKeys:O||","}),(!!h||!!y)&&e.jsx(i.BodyCaption,Object.assign({style:{color:y?n.COLORS.content.negative:p||n.COLORS.content.secondary}},{children:y||h}))]}))};

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

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

package/dist/cjs/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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;