@bikdotai/bik-component-library 0.0.581-aidd-beta.3 → 0.0.581-aidd-beta.5

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/cjs/components/floating-input-dropdown/FloatingInputDropdown.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("react-popper"),s=require("styled-components"),i=require("../dropShadow/DropShadow.js"),r=require("../dropdown/Common.styled.js"),o=require("../dropdown/OpenedDropdown/components/OpennedDropdown.js"),l=require("../floater/floater.js"),a=require("../input/Input.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=d(s).default(r.OpenDropdownContainer)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("react-popper"),s=require("styled-components"),i=require("../dropShadow/DropShadow.js"),r=require("../dropdown/Common.styled.js"),o=require("../dropdown/OpenedDropdown/components/OpennedDropdown.js"),l=require("../floater/floater.js"),d=require("../input/Input.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=a(s).default(r.OpenDropdownContainer)`
 	opacity: ${e=>{let{visible:n}=e;return n?1:0}};
 	visibility: ${e=>{let{visible:n}=e;return n?"visible":"hidden"}};
 	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
-`;exports.FloatingInputDropdown=s=>{let{inputProps:r,dropdownProps:d,floaterProps:p,children:c,isVisible:j,onDropdownOptionClick:v,onChangeText:b}=s;const f=n.useRef(null),O=n.useRef(null),[g,x]=n.useState(!1),[h,w]=n.useState(null),[y,m]=n.useState(null),[S,q]=n.useState(!1),{styles:C,attributes:D}=t.usePopper(y,h,{placement:d.placement,strategy:d.strategy});n.useEffect((()=>{if(!g){const e=setTimeout((()=>q(!1)),200);return()=>clearTimeout(e)}q(!0)}),[g]);return e.jsxs(e.Fragment,{children:[j&&e.jsxs(l.Floater,Object.assign({},p,{refElement:O},{children:[e.jsx("div",Object.assign({style:{position:"relative"},ref:m},{children:e.jsx(i.default,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e.jsx(a.Input,Object.assign({},r,{onClick:()=>{var e;null===(e=d.onDropdownOpen)||void 0===e||e.call(d),g?x(!1):d.disabled||x(!0)},ref:f,onChangeText:(e,n)=>{null==b||b(e,n)}}))}))})),e.jsx(u,Object.assign({ref:w,style:Object.assign(Object.assign({},C.popper),{zIndex:3})},D.popper,{visible:g||S},{children:e.jsx(i.default,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e.jsx(o.OpenedDropdown,Object.assign({},d,{onSelect:e=>{var n;"2.0"===d.version&&d.isMultiSelect||(null===(n=d.onSelect)||void 0===n||n.call(d,e),x(!1))},onClose:e=>{var n,t;"2.0"===d.version&&d.isMultiSelect&&e&&(null===(n=d.onSelect)||void 0===n||n.call(d,[...e])),x(!1),null===(t=null==d?void 0:d.onClose)||void 0===t||t.call(d)},version:d.version,headerRef:f,onDropdownItemClick:e=>{null==v||v(e)}}))}))}))]})),e.jsx("div",Object.assign({ref:O},{children:c&&e.jsx("div",{children:c})}))]})};
+`;exports.FloatingInputDropdown=s=>{let{inputProps:r,dropdownProps:a,floaterProps:c,children:p,isVisible:j,onDropdownOptionClick:v,onChangeText:b}=s;const f=n.useRef(null),O=n.useRef(null),[g,x]=n.useState(!1),[h,w]=n.useState(null),[y,m]=n.useState(null),[S,q]=n.useState(!1),{styles:C,attributes:D}=t.usePopper(y,h,{placement:a.placement,strategy:a.strategy});n.useEffect((()=>{if(!g){const e=setTimeout((()=>q(!1)),200);return()=>clearTimeout(e)}q(!0)}),[g]);return e.jsxs(e.Fragment,{children:[j&&e.jsxs(l.Floater,Object.assign({},c,{refElement:O},{children:[e.jsx("div",Object.assign({style:{position:"relative"}},{children:e.jsx(i.default,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e.jsx("div",Object.assign({ref:m},{children:e.jsx(d.Input,Object.assign({},r,{onClick:()=>{var e;null===(e=a.onDropdownOpen)||void 0===e||e.call(a),g?x(!1):a.disabled||x(!0)},ref:f,onChangeText:(e,n)=>{null==b||b(e,n)}}))}))}))})),e.jsx(u,Object.assign({ref:w,style:Object.assign(Object.assign({},C.popper),{zIndex:3})},D.popper,{visible:g||S},{children:e.jsx(i.default,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e.jsx(o.OpenedDropdown,Object.assign({},a,{onSelect:e=>{var n;"2.0"===a.version&&a.isMultiSelect||(null===(n=a.onSelect)||void 0===n||n.call(a,e),x(!1))},onClose:e=>{var n,t;"2.0"===a.version&&a.isMultiSelect&&e&&(null===(n=a.onSelect)||void 0===n||n.call(a,[...e])),x(!1),null===(t=null==a?void 0:a.onClose)||void 0===t||t.call(a)},version:a.version,headerRef:f,onDropdownItemClick:e=>{null==v||v(e)}}))}))}))]})),e.jsx("div",Object.assign({ref:O},{children:p&&e.jsx("div",{children:p})}))]})};

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

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

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/esm/components/floating-input-dropdown/FloatingInputDropdown.js

@@ -1,5 +1,5 @@
-import{jsxs as e,Fragment as o,jsx as i}from"react/jsx-runtime";import{useRef as n,useState as t,useEffect as r}from"react";import{usePopper as l}from"react-popper";import s from"styled-components";import p from"../dropShadow/DropShadow.js";import{OpenDropdownContainer as d}from"../dropdown/Common.styled.js";import{OpenedDropdown as c}from"../dropdown/OpenedDropdown/components/OpennedDropdown.js";import{Floater as a}from"../floater/floater.js";import{Input as m}from"../input/Input.js";const u=s(d)`
+import{jsxs as e,Fragment as o,jsx as i}from"react/jsx-runtime";import{useRef as n,useState as t,useEffect as r}from"react";import{usePopper as l}from"react-popper";import s from"styled-components";import d from"../dropShadow/DropShadow.js";import{OpenDropdownContainer as p}from"../dropdown/Common.styled.js";import{OpenedDropdown as c}from"../dropdown/OpenedDropdown/components/OpennedDropdown.js";import{Floater as a}from"../floater/floater.js";import{Input as m}from"../input/Input.js";const u=s(p)`
 	opacity: ${e=>{let{visible:o}=e;return o?1:0}};
 	visibility: ${e=>{let{visible:o}=e;return o?"visible":"hidden"}};
 	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
-`,v=s=>{let{inputProps:d,dropdownProps:v,floaterProps:b,children:f,isVisible:j,onDropdownOptionClick:h,onChangeText:g}=s;const O=n(null),y=n(null),[w,C]=t(!1),[S,D]=t(null),[x,T]=t(null),[k,z]=t(!1),{styles:I,attributes:P}=l(x,S,{placement:v.placement,strategy:v.strategy});r((()=>{if(!w){const e=setTimeout((()=>z(!1)),200);return()=>clearTimeout(e)}z(!0)}),[w]);return e(o,{children:[j&&e(a,Object.assign({},b,{refElement:y},{children:[i("div",Object.assign({style:{position:"relative"},ref:T},{children:i(p,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:i(m,Object.assign({},d,{onClick:()=>{var e;null===(e=v.onDropdownOpen)||void 0===e||e.call(v),w?C(!1):v.disabled||C(!0)},ref:O,onChangeText:(e,o)=>{null==g||g(e,o)}}))}))})),i(u,Object.assign({ref:D,style:Object.assign(Object.assign({},I.popper),{zIndex:3})},P.popper,{visible:w||k},{children:i(p,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:i(c,Object.assign({},v,{onSelect:e=>{var o;"2.0"===v.version&&v.isMultiSelect||(null===(o=v.onSelect)||void 0===o||o.call(v,e),C(!1))},onClose:e=>{var o,i;"2.0"===v.version&&v.isMultiSelect&&e&&(null===(o=v.onSelect)||void 0===o||o.call(v,[...e])),C(!1),null===(i=null==v?void 0:v.onClose)||void 0===i||i.call(v)},version:v.version,headerRef:O,onDropdownItemClick:e=>{null==h||h(e)}}))}))}))]})),i("div",Object.assign({ref:y},{children:f&&i("div",{children:f})}))]})};export{v as FloatingInputDropdown};
+`,v=s=>{let{inputProps:p,dropdownProps:v,floaterProps:b,children:f,isVisible:j,onDropdownOptionClick:h,onChangeText:g}=s;const O=n(null),y=n(null),[w,C]=t(!1),[S,D]=t(null),[x,T]=t(null),[k,z]=t(!1),{styles:I,attributes:P}=l(x,S,{placement:v.placement,strategy:v.strategy});r((()=>{if(!w){const e=setTimeout((()=>z(!1)),200);return()=>clearTimeout(e)}z(!0)}),[w]);return e(o,{children:[j&&e(a,Object.assign({},b,{refElement:y},{children:[i("div",Object.assign({style:{position:"relative"}},{children:i(d,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:i("div",Object.assign({ref:T},{children:i(m,Object.assign({},p,{onClick:()=>{var e;null===(e=v.onDropdownOpen)||void 0===e||e.call(v),w?C(!1):v.disabled||C(!0)},ref:O,onChangeText:(e,o)=>{null==g||g(e,o)}}))}))}))})),i(u,Object.assign({ref:D,style:Object.assign(Object.assign({},I.popper),{zIndex:3})},P.popper,{visible:w||k},{children:i(d,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:i(c,Object.assign({},v,{onSelect:e=>{var o;"2.0"===v.version&&v.isMultiSelect||(null===(o=v.onSelect)||void 0===o||o.call(v,e),C(!1))},onClose:e=>{var o,i;"2.0"===v.version&&v.isMultiSelect&&e&&(null===(o=v.onSelect)||void 0===o||o.call(v,[...e])),C(!1),null===(i=null==v?void 0:v.onClose)||void 0===i||i.call(v)},version:v.version,headerRef:O,onDropdownItemClick:e=>{null==h||h(e)}}))}))}))]})),i("div",Object.assign({ref:y},{children:f&&i("div",{children:f})}))]})};export{v as FloatingInputDropdown};

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

@@ -63,5 +63,6 @@ export interface InputProps {
     truncateText?: boolean;
     maxCharLimitPosition?: 'TOP' | 'BOTTOM';
     hightlightInputColor?: string;
+    onKeyDownEvent?: (e: Event) => void;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;

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

@@ -1 +1 @@
-import{jsxs as t,jsx as e,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 b}from"./context/InputStyleProvider.js";import{RootContainer as f,InputFooter as x,MaxCharStyle as y,InputWrapper as j,IconHolder as C,PrefixHolder as O,InputContainer as T,InputContainerSmall as w,SuffixHolder as k,InputHeader as I}from"./Input.styled.js";const L=l(((l,L)=>{var B,H,M,P,E,S,z;const{placeholder:A,leftIcon:D,rightIcon:F,labelText:N,maxCharLimit:K,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:tt,noKeyDownChange:et,version:it,noMaxCharCheck:nt,labelElement:lt,autoGrow:rt,minHeight:ot,maxHeight:at,labelTextBold:st,truncateText:ct,maxCharLimitPosition:ht,hightlightInputColor:ut}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP"},l),dt=null==D?void 0:D.icon,vt=null==F?void 0:F.icon,[pt,gt]=r(!1),[mt,bt]=r(!1),[ft,xt]=r(),yt="small"===W?"18px":"22px",jt=o(b),[Ct,Ot]=r(),Tt=a(null),wt=null!=L?L:Tt;s((()=>{Ot(X),!X&&rt&&(wt.current.style.height=ot||"48px")}),[X]),s((()=>{var t;wt.current&&(null===(t=l.onReferenceInit)||void 0===t||t.call(l,wt.current))}),[wt]),s((()=>{const t=wt.current;if(t&&["phonenumber","zip","number"].includes(_))return t.addEventListener("wheel",Bt,{passive:!1}),()=>{t.removeEventListener("wheel",Bt)}}),[]),s((()=>{Z&&Ot("")}),[Z]),s((()=>{var t;bt(!!l.isActive),l.isActive&&(null===(t=wt.current)||void 0===t||t.focus())}),[l.isActive]),s((()=>{xt(l.errorMessage)}),[l.errorMessage]),s((()=>{var t;gt(!1),("invalid"===l.state||ft||"disabled-invalid"===l.state)&&gt(!0),"active"===l.state&&(null===(t=wt.current)||void 0===t||t.focus())}),[l.state,ft]),s((()=>{gt(!!ft||"invalid"===l.state)}),[ft,l.state]);const kt=function(t){if(h(t)){for(var e=arguments.length,i=new Array(e>1?e-1:0),n=1;n<e;n++)i[n-1]=arguments[n];t(...i)}},It=()=>"zip"===_?6:2e3,Lt=t=>{const e=0!==K?K:It();if(et||U(X||"",t),nt)return;const i=t.target.value;![8].includes(t.which)&&e>0&&i.length>=e&&t.preventDefault()},Bt=t=>{t.preventDefault()},Ht=t=>{let e=t.target.value;const i=0!==K?K+1:It();!nt&&i>0&&e.length>=i&&(e=e.substring(0,i-1)),U(e,t),l.textControl||Ot(e),rt&&(wt.current.style.height=`${wt.current.scrollHeight}px`,e||(wt.current.style.height=ot||"48px"));const n=V||u;if(!n||!h(n))return;const[r,o]=n(e,_,tt);gt(!r),xt(l.errorMessage?l.errorMessage:o)},Mt=t=>{var e;l.skipFocus||bt(!0),kt(null===(e=l.onFocus)||void 0===e?void 0:e.call(l,t))},Pt=t=>{var e;l.skipFocus||bt(!1),kt(null===(e=l.onBlur)||void 0===e?void 0:e.call(l,t))},Et=()=>{var n;return t(i,{children:["multiline"!==_&&e("input",{className:ct?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(n=null==jt?void 0:jt.input)&&void 0!==n?n:{},ref:wt,type:["phonenumber","zip","number"].includes(_)?"number":_,value:Ct,onFocus:t=>Mt(t),onBlur:t=>Pt(t),placeholder:A||"Enter here",onChange:Ht,onClick:t=>kt(l.onClick),onKeyDown:t=>Lt(t)}),"multiline"===_&&e("textarea",{"data-test":l["data-test"],value:Ct,ref:wt,onFocus:t=>Mt(t),onBlur:t=>Pt(t),onClick:t=>kt(l.onClick),placeholder:A||"Enter here",onChange:Ht,onKeyDown:t=>Lt(t),maxLength:K>0?K:void 0})]})};return t(f,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(B=null==jt?void 0:jt.RootContainer)&&void 0!==B?B:{}},{children:[t("div",Object.assign({className:"flex-align-center"},{children:[!Y&&(!!G||!!ft)&&t(x,Object.assign({invalid:!!ft},{children:[!!ft&&e(m,{width:16,height:16}),ft||G]})),K>0&&"BOTTOM"===ht&&t(y,Object.assign({position:"BOTTOM"},{children:[null!==(M=null===(H=(null!=X?X:"").toString())||void 0===H?void 0:H.length)&&void 0!==M?M:0,"/",K]}))]})),t(j,Object.assign({variant:W,state:q,width:l.width,isActive:"active"===q||mt,isInvalid:pt,style:null!==(P=null==jt?void 0:jt.InputWrapper)&&void 0!==P?P:{},version:it,height:l.height,hightlightInputColor:ut},{children:[!!dt&&e(C,Object.assign({variant:W,iconSize:yt,onClick:()=>kt(null==D?void 0:D.callback),isLeft:!0,style:null!==(E=null==jt?void 0:jt.IconHolder)&&void 0!==E?E:{}},{children:e(dt,{})})),!!Q&&e(O,Object.assign({variant:W},{children:Q})),"default"===W&&e(T,Object.assign({height:l.height,type:l.type,minHeight:ot,maxHeight:at,autoGrow:rt},{children:Et()})),"small"===W&&e(w,Object.assign({height:l.height,type:l.type},{children:Et()})),!!vt&&e(C,Object.assign({variant:W,iconSize:yt,onClick:()=>kt(null==F?void 0:F.callback),isLeft:!1},{children:e(vt,{})})),!!J&&e(k,Object.assign({variant:W},{children:J})),$&&$.text&&e(c,{buttonText:$.text,onClick:()=>kt(null==$?void 0:$.onClick)}),$&&$.buttonProps&&e(c,Object.assign({},$.buttonProps))]})),(!!N||!!K)&&t(I,Object.assign({invalid:pt},{children:[lt&&lt,t("div",Object.assign({className:"label__container"},{children:[t(st?v:p,{children:[N,R?e("span",{children:"*"}):""]}),l.tooltipText&&e(d,Object.assign({body:l.tooltipText,placement:"top"},{children:e("span",{children:e(n,{style:{marginTop:-3},width:18,height:18,color:pt?g.content.negative:g.content.primary})})}))]})),K>0&&"TOP"===ht&&t(y,{children:[null!==(z=null===(S=(null!=X?X:"").toString())||void 0===S?void 0:S.length)&&void 0!==z?z:0,"/",K]})]}))]}))}));L.displayName="Input";export{L as Input};
+import{jsxs as t,jsx as e,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as o,useContext as r,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 b}from"./context/InputStyleProvider.js";import{RootContainer as f,InputFooter as x,MaxCharStyle as y,InputWrapper as j,IconHolder as C,PrefixHolder as O,InputContainer as T,InputContainerSmall as w,SuffixHolder as k,InputHeader as I}from"./Input.styled.js";const L=l(((l,L)=>{var B,E,H,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:tt,noKeyDownChange:et,version:nt,noMaxCharCheck:it,labelElement:lt,autoGrow:ot,minHeight:rt,maxHeight:at,labelTextBold:st,truncateText:ct,maxCharLimitPosition:ht,hightlightInputColor:ut,onKeyDownEvent:dt}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP"},l),vt=null==A?void 0:A.icon,pt=null==F?void 0:F.icon,[gt,mt]=o(!1),[bt,ft]=o(!1),[xt,yt]=o(),jt="small"===W?"18px":"22px",Ct=r(b),[Ot,Tt]=o(),wt=a(null),kt=null!=L?L:wt;s((()=>{Tt(X),!X&&ot&&(kt.current.style.height=rt||"48px")}),[X]),s((()=>{var t;kt.current&&(null===(t=l.onReferenceInit)||void 0===t||t.call(l,kt.current))}),[kt]),s((()=>{const t=kt.current;if(t&&["phonenumber","zip","number"].includes(_))return t.addEventListener("wheel",Et,{passive:!1}),()=>{t.removeEventListener("wheel",Et)}}),[]),s((()=>{Z&&Tt("")}),[Z]),s((()=>{var t;ft(!!l.isActive),l.isActive&&(null===(t=kt.current)||void 0===t||t.focus())}),[l.isActive]),s((()=>{yt(l.errorMessage)}),[l.errorMessage]),s((()=>{var t;mt(!1),("invalid"===l.state||xt||"disabled-invalid"===l.state)&&mt(!0),"active"===l.state&&(null===(t=kt.current)||void 0===t||t.focus())}),[l.state,xt]),s((()=>{mt(!!xt||"invalid"===l.state)}),[xt,l.state]);const It=function(t){if(h(t)){for(var e=arguments.length,n=new Array(e>1?e-1:0),i=1;i<e;i++)n[i-1]=arguments[i];t(...n)}},Lt=()=>"zip"===_?6:2e3,Bt=t=>{const e=0!==N?N:Lt();if(dt&&dt(t),et||U(X||"",t),it)return;const n=t.target.value;![8].includes(t.which)&&e>0&&n.length>=e&&t.preventDefault()},Et=t=>{t.preventDefault()},Ht=t=>{let e=t.target.value;const n=0!==N?N+1:Lt();!it&&n>0&&e.length>=n&&(e=e.substring(0,n-1)),U(e,t),l.textControl||Tt(e),ot&&(kt.current.style.height=`${kt.current.scrollHeight}px`,e||(kt.current.style.height=rt||"48px"));const i=V||u;if(!i||!h(i))return;const[o,r]=i(e,_,tt);mt(!o),yt(l.errorMessage?l.errorMessage:r)},Mt=t=>{var e;l.skipFocus||ft(!0),It(null===(e=l.onFocus)||void 0===e?void 0:e.call(l,t))},Pt=t=>{var e;l.skipFocus||ft(!1),It(null===(e=l.onBlur)||void 0===e?void 0:e.call(l,t))},Dt=()=>{var i;return t(n,{children:["multiline"!==_&&e("input",{className:ct?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(i=null==Ct?void 0:Ct.input)&&void 0!==i?i:{},ref:kt,type:["phonenumber","zip","number"].includes(_)?"number":_,value:Ot,onFocus:t=>Mt(t),onBlur:t=>Pt(t),placeholder:z||"Enter here",onChange:Ht,onClick:t=>It(l.onClick),onKeyDown:t=>Bt(t)}),"multiline"===_&&e("textarea",{"data-test":l["data-test"],value:Ot,ref:kt,onFocus:t=>Mt(t),onBlur:t=>Pt(t),onClick:t=>It(l.onClick),placeholder:z||"Enter here",onChange:Ht,onKeyDown:t=>Bt(t),maxLength:N>0?N:void 0})]})};return t(f,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(B=null==Ct?void 0:Ct.RootContainer)&&void 0!==B?B:{}},{children:[t("div",Object.assign({className:"flex-align-center"},{children:[!Y&&(!!G||!!xt)&&t(x,Object.assign({invalid:!!xt},{children:[!!xt&&e(m,{width:16,height:16}),xt||G]})),N>0&&"BOTTOM"===ht&&t(y,Object.assign({position:"BOTTOM"},{children:[null!==(H=null===(E=(null!=X?X:"").toString())||void 0===E?void 0:E.length)&&void 0!==H?H:0,"/",N]}))]})),t(j,Object.assign({variant:W,state:q,width:l.width,isActive:"active"===q||bt,isInvalid:gt,style:null!==(M=null==Ct?void 0:Ct.InputWrapper)&&void 0!==M?M:{},version:nt,height:l.height,hightlightInputColor:ut},{children:[!!vt&&e(C,Object.assign({variant:W,iconSize:jt,onClick:()=>It(null==A?void 0:A.callback),isLeft:!0,style:null!==(P=null==Ct?void 0:Ct.IconHolder)&&void 0!==P?P:{}},{children:e(vt,{})})),!!Q&&e(O,Object.assign({variant:W},{children:Q})),"default"===W&&e(T,Object.assign({height:l.height,type:l.type,minHeight:rt,maxHeight:at,autoGrow:ot},{children:Dt()})),"small"===W&&e(w,Object.assign({height:l.height,type:l.type},{children:Dt()})),!!pt&&e(C,Object.assign({variant:W,iconSize:jt,onClick:()=>It(null==F?void 0:F.callback),isLeft:!1},{children:e(pt,{})})),!!J&&e(k,Object.assign({variant:W},{children:J})),$&&$.text&&e(c,{buttonText:$.text,onClick:()=>It(null==$?void 0:$.onClick)}),$&&$.buttonProps&&e(c,Object.assign({},$.buttonProps))]})),(!!K||!!N)&&t(I,Object.assign({invalid:gt},{children:[lt&&lt,t("div",Object.assign({className:"label__container"},{children:[t(st?v:p,{children:[K,R?e("span",{children:"*"}):""]}),l.tooltipText&&e(d,Object.assign({body:l.tooltipText,placement:"top"},{children:e("span",{children:e(i,{style:{marginTop:-3},width:18,height:18,color:gt?g.content.negative:g.content.primary})})}))]})),N>0&&"TOP"===ht&&t(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};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.581-aidd-beta.3",
+	"version": "0.0.581-aidd-beta.5",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",