@bikdotai/bik-component-library 0.0.576 → 0.0.577

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ButtonProps } from '../button/model';
 export type InputVariant = 'default' | 'small';
 export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
 export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
@@ -33,6 +34,7 @@ export interface InputProps {
     button?: {
         text: string;
         onClick?: () => void;
+        buttonProps?: ButtonProps;
     };
     suffixText?: string;
     prefixText?: string;

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

package/dist/cjs/components/searchBar/searchBar.d.ts

@@ -1,3 +1,4 @@
+import { ButtonProps } from '../button/model';
 import { InputVariant } from '../input/Input';
 export interface SearchBarProps {
     width: string;
@@ -11,5 +12,7 @@ export interface SearchBarProps {
     reset?: boolean;
     onClickCross?: () => void;
     isActive?: boolean;
+    suffixButton?: ButtonProps;
+    searchValue?: string;
 }
 export declare const SearchBar: (props: SearchBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/searchBar/searchBar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/searchIcon.js"),s=require("react"),a=require("../../assets/icons/cross.svg.js"),r=require("../input/Input.js");exports.SearchBar=n=>{const{isEnabled:c,onEnter:i,placeholder:o,width:l,variant:u,validate:d,isActive:h}=n,[v,f]=s.useState("search"),[p,g]=s.useState("default"),[C,b]=s.useState(h?"active":c?"none":"disabled"),[j,k]=s.useState(n.initialValue||"");s.useEffect((()=>{b(h?"active":c?"none":"disabled")}),[c,h]),s.useEffect((()=>{n.reset&&S()}),[null==n?void 0:n.reset]);const I=e=>{c&&i(e)},S=()=>{f("search"),g("default"),k(""),n.onChange(""),b("none"),i("")};return e.jsx(r.Input,{id:"search-bar",validate:d,onFocus:()=>{j.length&&f("cross"),"default"===p&&c&&(g("clicked"),b("active"))},width:l,state:C,leftIcon:"search"===v&&"default"===p?{icon:t.SearchIcon}:void 0,rightIcon:"cross"===v?{icon:a.default,callback:()=>{S(),n.onClickCross&&n.onClickCross()}}:void 0,onChangeText:(e,t)=>{n.onChange(e),k(e),"keydown"!==(null==t?void 0:t.type)||13!==t.which&&13!==t.keyCode?e.trim().length?f("cross"):f("search"):I(e)},placeholder:o,variant:u,value:j,onBlur:()=>{j.length||g("default"),b("none")}})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/searchIcon.js"),s=require("react"),a=require("../../assets/icons/cross.svg.js"),r=require("../input/Input.js");exports.SearchBar=n=>{const{isEnabled:o,onEnter:c,placeholder:i,width:l,variant:u,validate:d,isActive:h}=n,[v,f]=s.useState("search"),[p,g]=s.useState("default"),[b,x]=s.useState(h?"active":o?"none":"disabled"),[C,j]=s.useState(n.initialValue||n.searchValue||"");s.useEffect((()=>{var e,t,s;j(null!==(e=n.searchValue)&&void 0!==e?e:""),(null===(s=null===(t=n.searchValue)||void 0===t?void 0:t.trim())||void 0===s?void 0:s.length)?f("cross"):f("search")}),[n.searchValue]),s.useEffect((()=>{x(h?"active":o?"none":"disabled")}),[o,h]),s.useEffect((()=>{n.reset&&I()}),[null==n?void 0:n.reset]);const k=e=>{o&&c(e)},I=()=>{f("search"),g("default"),j(""),n.onChange(""),x("none"),c("")};return e.jsx(r.Input,{id:"search-bar",validate:d,onFocus:()=>{C.length&&f("cross"),"default"===p&&o&&(g("clicked"),x("active"))},width:l,state:b,leftIcon:"search"===v&&"default"===p?{icon:t.SearchIcon}:void 0,rightIcon:"cross"!==v||n.suffixButton?void 0:{icon:a.default,callback:()=>{I(),n.onClickCross&&n.onClickCross()}},onChangeText:(e,t)=>{n.onChange(e),j(e),"keydown"!==(null==t?void 0:t.type)||13!==t.which&&13!==t.keyCode?e.trim().length?f("cross"):f("search"):k(e)},placeholder:i,variant:u,value:C,onBlur:()=>{C.length||g("default"),x("none")},button:{text:"",buttonProps:n.suffixButton}})};

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ButtonProps } from '../button/model';
 export type InputVariant = 'default' | 'small';
 export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
 export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
@@ -33,6 +34,7 @@ export interface InputProps {
     button?: {
         text: string;
         onClick?: () => void;
+        buttonProps?: ButtonProps;
     };
     suffixText?: string;
     prefixText?: string;

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

package/dist/esm/components/searchBar/searchBar.d.ts

@@ -1,3 +1,4 @@
+import { ButtonProps } from '../button/model';
 import { InputVariant } from '../input/Input';
 export interface SearchBarProps {
     width: string;
@@ -11,5 +12,7 @@ export interface SearchBarProps {
     reset?: boolean;
     onClickCross?: () => void;
     isActive?: boolean;
+    suffixButton?: ButtonProps;
+    searchValue?: string;
 }
 export declare const SearchBar: (props: SearchBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/searchBar/searchBar.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{SearchIcon as o}from"../../assets/icons/searchIcon.js";import{useState as t,useEffect as n}from"react";import s from"../../assets/icons/cross.svg.js";import{Input as a}from"../input/Input.js";const i=i=>{const{isEnabled:r,onEnter:c,placeholder:l,width:d,variant:h,validate:u,isActive:v}=i,[m,f]=t("search"),[p,g]=t("default"),[C,k]=t(v?"active":r?"none":"disabled"),[b,j]=t(i.initialValue||"");n((()=>{k(v?"active":r?"none":"disabled")}),[r,v]),n((()=>{i.reset&&I()}),[null==i?void 0:i.reset]);const w=e=>{r&&c(e)},I=()=>{f("search"),g("default"),j(""),i.onChange(""),k("none"),c("")};return e(a,{id:"search-bar",validate:u,onFocus:()=>{b.length&&f("cross"),"default"===p&&r&&(g("clicked"),k("active"))},width:d,state:C,leftIcon:"search"===m&&"default"===p?{icon:o}:void 0,rightIcon:"cross"===m?{icon:s,callback:()=>{I(),i.onClickCross&&i.onClickCross()}}:void 0,onChangeText:(e,o)=>{i.onChange(e),j(e),"keydown"!==(null==o?void 0:o.type)||13!==o.which&&13!==o.keyCode?e.trim().length?f("cross"):f("search"):w(e)},placeholder:l,variant:h,value:b,onBlur:()=>{b.length||g("default"),k("none")}})};export{i as SearchBar};
+import{jsx as e}from"react/jsx-runtime";import{SearchIcon as o}from"../../assets/icons/searchIcon.js";import{useState as t,useEffect as n}from"react";import s from"../../assets/icons/cross.svg.js";import{Input as a}from"../input/Input.js";const r=r=>{const{isEnabled:i,onEnter:c,placeholder:l,width:d,variant:u,validate:h,isActive:v}=r,[f,m]=t("search"),[p,g]=t("default"),[C,b]=t(v?"active":i?"none":"disabled"),[k,x]=t(r.initialValue||r.searchValue||"");n((()=>{var e,o,t;x(null!==(e=r.searchValue)&&void 0!==e?e:""),(null===(t=null===(o=r.searchValue)||void 0===o?void 0:o.trim())||void 0===t?void 0:t.length)?m("cross"):m("search")}),[r.searchValue]),n((()=>{b(v?"active":i?"none":"disabled")}),[i,v]),n((()=>{r.reset&&j()}),[null==r?void 0:r.reset]);const V=e=>{i&&c(e)},j=()=>{m("search"),g("default"),x(""),r.onChange(""),b("none"),c("")};return e(a,{id:"search-bar",validate:h,onFocus:()=>{k.length&&m("cross"),"default"===p&&i&&(g("clicked"),b("active"))},width:d,state:C,leftIcon:"search"===f&&"default"===p?{icon:o}:void 0,rightIcon:"cross"!==f||r.suffixButton?void 0:{icon:s,callback:()=>{j(),r.onClickCross&&r.onClickCross()}},onChangeText:(e,o)=>{r.onChange(e),x(e),"keydown"!==(null==o?void 0:o.type)||13!==o.which&&13!==o.keyCode?e.trim().length?m("cross"):m("search"):V(e)},placeholder:l,variant:u,value:k,onBlur:()=>{k.length||g("default"),b("none")},button:{text:"",buttonProps:r.suffixButton}})};export{r as SearchBar};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.576",
+	"version": "0.0.577",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",