@bikdotai/bik-component-library 0.0.786-beta.4 → 0.0.786-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +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"),u=require("./context/InputStyleProvider.js"),c=require("./Input.styled.js");const d=n.forwardRef(((d,h)=>{var v,p,g,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:F,onChangeText:M,value:P,noErrorHint:R,reset:z,rangeValidation:D,noKeyDownChange:A,version:K,noMaxCharCheck:N,labelElement:_,autoGrow:W,minHeight:G,maxHeight:U,labelTextBold:V,truncateText:$,maxCharLimitPosition:J,hightlightInputColor:Q,onKeyDownEvent:X,hideInputHeader:Y,hideBorder:Z,inputWrapperStyles:ee,minCharsToTrigger:te,isDisabled:ne=!1,allowUnsafeInput:ie}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},d),se=null==C?void 0:C.icon,le=null==O?void 0:O.icon,[re,ae]=n.useState(!1),[oe,ue]=n.useState(!1),[ce,de]=n.useState(),he="x-small"===q?"12px":"small"===q?"18px":"22px",ve=n.useContext(u.InputStyleContext),[pe,ge]=n.useState(""),xe=n.useRef(null),je=null!=h?h:xe;n.useEffect((()=>{ge(P||""),!P&&W&&(je.current.style.height=G||"48px")}),[P]),n.useEffect((()=>{var e;je.current&&(null===(e=d.onReferenceInit)||void 0===e||e.call(d,je.current))}),[je]),n.useEffect((()=>{const e=je.current;if(e&&["phonenumber","zip","number"].includes(E))return e.addEventListener("wheel",ye,{passive:!1}),()=>{e.removeEventListener("wheel",ye)}}),[]),n.useEffect((()=>{z&&ge("")}),[z]),n.useEffect((()=>{var e;ue(!!d.isActive),d.isActive&&(null===(e=je.current)||void 0===e||e.focus())}),[d.isActive]),n.useEffect((()=>{de(d.errorMessage)}),[d.errorMessage]),n.useEffect((()=>{var e;ae(!1),("invalid"===d.state||ce||"disabled-invalid"===d.state)&&ae(!0),"active"===d.state&&(null===(e=je.current)||void 0===e||e.focus())}),[d.state,ce]),n.useEffect((()=>{ae(!!ce||"invalid"===d.state)}),[ce,d.state]);const fe=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"===E?6:2e3,be=e=>{const t=0!==I?I:me(),n=te,i=e.target.value;X&&(!i.length||i.length>=n)&&X(e),A||i.length&&!(i.length>=n)||M(P||"",e),N||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},ye=e=>{e.preventDefault()},Ce=e=>{let t=e.target.value;const n=0!==I?I+1:me(),i=te;if(!ie&&s.shouldSanitizeForType(E)&&(t=s.sanitizeUnsafeInput(t)),!N&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),d.textControl||ge(t||""),i&&t&&t.length<i)return;M(t,e),W&&(je.current.style.height=`${je.current.scrollHeight}px`,t||(je.current.style.height=G||"48px"));const l=H||s.validateInput;if(!l||!s.isFunction(l))return;const[r,a]=l(t,E,D);ae(!r),de(d.errorMessage?d.errorMessage:a)},Oe=e=>{var t;d.skipFocus||ue(!0),fe(null===(t=d.onFocus)||void 0===t?void 0:t.call(d,e))},Te=e=>{var t;d.skipFocus||ue(!1),fe(null===(t=d.onBlur)||void 0===t?void 0:t.call(d,e))},Ie=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==E&&e.jsx("input",{className:$?"truncate-class":"","data-test":d["data-test"],id:d.id,style:null!==(t=null==ve?void 0:ve.input)&&void 0!==t?t:{},ref:je,disabled:ne,type:["phonenumber","zip","number"].includes(E)?"number":E,value:pe,onFocus:e=>Oe(e),onBlur:e=>Te(e),placeholder:y||"Enter here",onChange:Ce,onClick:e=>fe(d.onClick),onKeyDown:e=>be(e)}),"multiline"===E&&e.jsx("textarea",{"data-test":d["data-test"],value:pe,ref:je,onFocus:e=>Oe(e),onBlur:e=>Te(e),onClick:e=>fe(d.onClick),disabled:ne,placeholder:y||"Enter here",onChange:Ce,onKeyDown:e=>be(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==ve?void 0:ve.RootContainer)&&void 0!==v?v:{}},{children:[e.jsxs("div",Object.assign({className:"flex-align-center"},{children:[!R&&(!!w||!!ce)&&e.jsxs(c.InputFooter,Object.assign({invalid:!!ce},{children:[!!ce&&e.jsx(o.default,{width:16,height:16}),ce||w]})),I>0&&"BOTTOM"===J&&e.jsxs(c.MaxCharStyle,Object.assign({position:"BOTTOM"},{children:[null!==(g=null===(p=(null!=P?P:"").toString())||void 0===p?void 0:p.length)&&void 0!==g?g:0,"/",I]}))]})),e.jsxs(c.InputWrapper,Object.assign({variant:q,state:k,width:d.width,isActive:"active"===k||oe,isInvalid:re,style:null!==(j=null!==(x=null==ve?void 0:ve.InputWrapper)&&void 0!==x?x:ee)&&void 0!==j?j:{},version:K,height:d.height,hightlightInputColor:Q,hideBorder:Z},{children:[!!se&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:he,onClick:()=>fe(null==C?void 0:C.callback),isLeft:!0,style:null!==(f=null==ve?void 0:ve.IconHolder)&&void 0!==f?f:{}},{children:e.jsx(se,{})})),!!F&&e.jsx(c.PrefixHolder,Object.assign({variant:q},{children:F})),"default"===q&&e.jsx(c.InputContainer,Object.assign({height:d.height,type:d.type,minHeight:G,maxHeight:U,autoGrow:W},{children:Ie()})),["x-small","small"].includes(q)&&e.jsx(c.InputContainerSmall,Object.assign({height:d.height,type:d.type},{children:Ie()})),!!le&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:he,onClick:()=>fe(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:()=>fe(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:re},{children:[_&&_,e.jsxs("div",Object.assign({className:"label__container"},{children:[V?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(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:re?a.COLORS.content.negative:a.COLORS.content.primary})})}))]})),I>0&&"TOP"===J&&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;
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"),u=require("./context/InputStyleProvider.js"),c=require("./Input.styled.js");const d=n.forwardRef(((d,h)=>{var v,p,g,x,j,f,b,m;const{placeholder:y,leftIcon:C,rightIcon:O,labelText:I,maxCharLimit:T,isRequired:S,hintText:w,type:E,state:k,validate:H,variant:q,button:B,suffixText:L,prefixText:F,onChangeText:M,value:P,noErrorHint:R,reset:z,rangeValidation:D,noKeyDownChange:A,version:K,noMaxCharCheck:N,labelElement:_,autoGrow:W,minHeight:G,maxHeight:U,labelTextBold:V,truncateText:$,maxCharLimitPosition:J,hightlightInputColor:Q,onKeyDownEvent:X,hideInputHeader:Y,hideBorder:Z,inputWrapperStyles:ee,minCharsToTrigger:te,isDisabled:ne=!1,allowUnsafeInput:ie,leftIconStyle:se}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},d),le=null==C?void 0:C.icon,re=null==O?void 0:O.icon,[ae,oe]=n.useState(!1),[ue,ce]=n.useState(!1),[de,he]=n.useState(),ve="x-small"===q?"12px":"small"===q?"18px":"22px",pe=n.useContext(u.InputStyleContext),[ge,xe]=n.useState(""),je=n.useRef(null),fe=null!=h?h:je;n.useEffect((()=>{xe(P||""),!P&&W&&(fe.current.style.height=G||"48px")}),[P]),n.useEffect((()=>{var e;fe.current&&(null===(e=d.onReferenceInit)||void 0===e||e.call(d,fe.current))}),[fe]),n.useEffect((()=>{const e=fe.current;if(e&&["phonenumber","zip","number"].includes(E))return e.addEventListener("wheel",Ce,{passive:!1}),()=>{e.removeEventListener("wheel",Ce)}}),[]),n.useEffect((()=>{z&&xe("")}),[z]),n.useEffect((()=>{var e;ce(!!d.isActive),d.isActive&&(null===(e=fe.current)||void 0===e||e.focus())}),[d.isActive]),n.useEffect((()=>{he(d.errorMessage)}),[d.errorMessage]),n.useEffect((()=>{var e;oe(!1),("invalid"===d.state||de||"disabled-invalid"===d.state)&&oe(!0),"active"===d.state&&(null===(e=fe.current)||void 0===e||e.focus())}),[d.state,de]),n.useEffect((()=>{oe(!!de||"invalid"===d.state)}),[de,d.state]);const be=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"===E?6:2e3,ye=e=>{const t=0!==T?T:me(),n=te,i=e.target.value;X&&(!i.length||i.length>=n)&&X(e),A||i.length&&!(i.length>=n)||M(P||"",e),N||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},Ce=e=>{e.preventDefault()},Oe=e=>{let t=e.target.value;const n=0!==T?T+1:me(),i=te;if(!ie&&s.shouldSanitizeForType(E)&&(t=s.sanitizeUnsafeInput(t)),!N&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),d.textControl||xe(t||""),i&&t&&t.length<i)return;M(t,e),W&&(fe.current.style.height=`${fe.current.scrollHeight}px`,t||(fe.current.style.height=G||"48px"));const l=H||s.validateInput;if(!l||!s.isFunction(l))return;const[r,a]=l(t,E,D);oe(!r),he(d.errorMessage?d.errorMessage:a)},Ie=e=>{var t;d.skipFocus||ce(!0),be(null===(t=d.onFocus)||void 0===t?void 0:t.call(d,e))},Te=e=>{var t;d.skipFocus||ce(!1),be(null===(t=d.onBlur)||void 0===t?void 0:t.call(d,e))},Se=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==E&&e.jsx("input",{className:$?"truncate-class":"","data-test":d["data-test"],id:d.id,style:null!==(t=null==pe?void 0:pe.input)&&void 0!==t?t:{},ref:fe,disabled:ne,type:["phonenumber","zip","number"].includes(E)?"number":E,value:ge,onFocus:e=>Ie(e),onBlur:e=>Te(e),placeholder:y||"Enter here",onChange:Oe,onClick:e=>be(d.onClick),onKeyDown:e=>ye(e)}),"multiline"===E&&e.jsx("textarea",{"data-test":d["data-test"],value:ge,ref:fe,onFocus:e=>Ie(e),onBlur:e=>Te(e),onClick:e=>be(d.onClick),disabled:ne,placeholder:y||"Enter here",onChange:Oe,onKeyDown:e=>ye(e),maxLength:T>0?T:void 0})]})};return e.jsxs(c.RootContainer,Object.assign({width:d.width,height:d.height,state:k,type:E,style:null!==(v=null==pe?void 0:pe.RootContainer)&&void 0!==v?v:{}},{children:[e.jsxs("div",Object.assign({className:"flex-align-center"},{children:[!R&&(!!w||!!de)&&e.jsxs(c.InputFooter,Object.assign({invalid:!!de},{children:[!!de&&e.jsx(o.default,{width:16,height:16}),de||w]})),T>0&&"BOTTOM"===J&&e.jsxs(c.MaxCharStyle,Object.assign({position:"BOTTOM"},{children:[null!==(g=null===(p=(null!=P?P:"").toString())||void 0===p?void 0:p.length)&&void 0!==g?g:0,"/",T]}))]})),e.jsxs(c.InputWrapper,Object.assign({variant:q,state:k,width:d.width,isActive:"active"===k||ue,isInvalid:ae,style:null!==(j=null!==(x=null==pe?void 0:pe.InputWrapper)&&void 0!==x?x:ee)&&void 0!==j?j:{},version:K,height:d.height,hightlightInputColor:Q,hideBorder:Z},{children:[!!le&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:ve,onClick:()=>be(null==C?void 0:C.callback),isLeft:!0,style:Object.assign(Object.assign({},null!==(f=null==pe?void 0:pe.IconHolder)&&void 0!==f?f:{}),se)},{children:e.jsx(le,{})})),!!F&&e.jsx(c.PrefixHolder,Object.assign({variant:q},{children:F})),"default"===q&&e.jsx(c.InputContainer,Object.assign({height:d.height,type:d.type,minHeight:G,maxHeight:U,autoGrow:W},{children:Se()})),["x-small","small"].includes(q)&&e.jsx(c.InputContainerSmall,Object.assign({height:d.height,type:d.type},{children:Se()})),!!re&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:ve,onClick:()=>be(null==O?void 0:O.callback),isLeft:!1},{children:e.jsx(re,{})})),!!L&&e.jsx(c.SuffixHolder,Object.assign({variant:q},{children:L})),B&&B.text&&e.jsx(i.Button,{buttonText:B.text,onClick:()=>be(null==B?void 0:B.onClick)}),B&&B.buttonProps&&e.jsx(i.Button,Object.assign({},B.buttonProps))]})),!Y&&(!!I||!!T)&&e.jsxs(c.InputHeader,Object.assign({invalid:ae},{children:[_&&_,e.jsxs("div",Object.assign({className:"label__container"},{children:[V?e.jsxs(r.TitleSmall,{children:[I,S?e.jsx("span",{children:"*"}):""]}):e.jsxs(r.BodySecondary,{children:[I,S?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:ae?a.COLORS.content.negative:a.COLORS.content.primary})})}))]})),T>0&&"TOP"===J&&e.jsxs(c.MaxCharStyle,{children:[null!==(m=null===(b=(null!=P?P:"").toString())||void 0===b?void 0:b.length)&&void 0!==m?m:0,"/",T]})]}))]}))}));d.displayName="Input",exports.Input=d;
@@ -14,6 +14,7 @@ export interface InputProps {
14
14
  icon: React.FC;
15
15
  callback?: () => void;
16
16
  };
17
+ leftIconStyle?: React.CSSProperties;
17
18
  rightIcon?: {
18
19
  icon: React.FC;
19
20
  callback?: () => void;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),n=require("./MenuItem.js"),o=require("./MultiLevelDropdown.styled.js");exports.GroupedMenuList=s=>{let{width:i,onDropdownItemClick:l,option:u,parents:p,allowParentSelection:d,maxLevels:a,hideGroupLabel:c,currentLevel:x,renderNestedMenu:j,version:m}=s;return e.jsxs(o.GroupedMenuListContainer,{children:[!c&&e.jsx(t.BodyTiny,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.COLORS.content.placeholder},{children:u.label})),u.options.map(((r,t)=>e.jsx(n.MenuItem,{width:i,onDropdownItemClick:l,option:r,parents:p,allowParentSelection:d,maxLevels:a,currentLevel:x,renderNestedMenu:j,version:m},t)))]})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),n=require("./MenuItem.js"),o=require("./MultiLevelDropdown.styled.js");exports.GroupedMenuList=s=>{let{width:i,onDropdownItemClick:l,option:u,parents:p,allowParentSelection:a,maxLevels:d,hideGroupLabel:c,currentLevel:x,renderNestedMenu:j,version:v}=s;return e.jsxs(o.GroupedMenuListContainer,Object.assign({version:v},{children:[!c&&e.jsx(t.BodyTiny,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.COLORS.content.placeholder},{children:u.label})),u.options.map(((r,t)=>e.jsx(n.MenuItem,{width:i,onDropdownItemClick:l,option:r,parents:p,allowParentSelection:a,maxLevels:d,currentLevel:x,renderNestedMenu:j,version:v},t)))]}))};
@@ -10,7 +10,9 @@ export declare const NoResultsContainer: import("styled-components").StyledCompo
10
10
  width?: string | undefined;
11
11
  version?: "1.0" | "2.0" | "3.0" | undefined;
12
12
  }, never>;
13
- export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
13
+ export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {
14
+ version?: "1.0" | "2.0" | "3.0" | undefined;
15
+ }, never>;
14
16
  export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
15
17
  export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
16
18
  version?: "1.0" | "2.0" | "3.0" | undefined;
@@ -12,20 +12,20 @@
12
12
  &::-webkit-scrollbar {
13
13
  width: 0px;
14
14
  }
15
- `,d=n.default.div`
15
+ `,s=n.default.div`
16
16
  margin-top: ${e=>{let{version:t}=e;return"3.0"===t?0:64}}px;
17
17
  height: ${e=>{let{version:t}=e;return"3.0"===t?236:200}}px;
18
18
  width: ${e=>{let{width:t}=e;return t||"200px"}};
19
19
  display: ${e=>{let{version:t}=e;return"3.0"===t?"flex":"block"}};
20
20
  align-items: center;
21
21
  justify-content: center;
22
- `,s=n.default.div`
22
+ `,d=n.default.div`
23
23
  width: 100%;
24
24
  justify-content: center;
25
25
  cursor: pointer;
26
26
  align-items: center;
27
27
  justify-content: space-between;
28
- margin: 4px 0;
28
+ margin: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0"}};
29
29
  `,a=n.default.div`
30
30
  z-index: 1000;
31
31
  position: relative;
@@ -48,7 +48,7 @@
48
48
  width: 100%;
49
49
  border-radius: ${e=>{let{version:t}=e;return"3.0"===t?0:8}}px;
50
50
  justify-content: center;
51
- background-color: ${e=>{let{isSelected:r,isHovered:n,isSubMenuOpen:i,isDisabled:o,version:d}=e;return o?t.COLORS.surface.standard:r||i?"3.0"===d?t.COLORS.background.brandLight:t.COLORS.background.positive.light:n?t.COLORS.surface.hovered:t.COLORS.surface.standard}};
51
+ background-color: ${e=>{let{isSelected:r,isHovered:n,isSubMenuOpen:i,isDisabled:o,version:s}=e;return o?t.COLORS.surface.standard:r||i?"3.0"===s?t.COLORS.background.brandLight:t.COLORS.background.positive.light:n?t.COLORS.surface.hovered:t.COLORS.surface.standard}};
52
52
  color: ${e=>{let{isSelected:r,isSubMenuOpen:n,version:i}=e;return r||n?"3.0"===i?t.COLORS.text.primary:t.COLORS.content.positive:t.COLORS.content.primary}};
53
53
  display: flex;
54
54
  align-items: center;
@@ -78,14 +78,14 @@
78
78
  &::-webkit-scrollbar {
79
79
  display: none;
80
80
  }
81
- `,f=n.default.div`
81
+ `,v=n.default.div`
82
82
  width: 16px;
83
83
  height: 16px;
84
84
  display: flex;
85
85
  align-items: center;
86
86
  justify-content: center;
87
87
  margin-right: 4px;
88
- `,v=n.default.div`
88
+ `,f=n.default.div`
89
89
  width: 16px;
90
90
  height: 16px;
91
91
  display: flex;
@@ -98,4 +98,4 @@
98
98
  width: ${e=>e.width};
99
99
  top: ${e=>e.top}px;
100
100
  left: ${e=>e.left}px;
101
- `;exports.ContentContainer=u,exports.DropdownContainer=i,exports.GroupedMenuListContainer=s,exports.LeadingIconContainer=f,exports.MenuItemContainer=l,exports.MenuItemWrapper=p,exports.NoResultsContainer=d,exports.OptionsContainer=o,exports.StyledMenuList=a,exports.StyledSubMenuWrapper=b,exports.SubMenuContainer=g,exports.SubMenuListContainer=c,exports.SubMenuWrapper=x,exports.TrailingIconContainer=v;
101
+ `;exports.ContentContainer=u,exports.DropdownContainer=i,exports.GroupedMenuListContainer=d,exports.LeadingIconContainer=v,exports.MenuItemContainer=l,exports.MenuItemWrapper=p,exports.NoResultsContainer=s,exports.OptionsContainer=o,exports.StyledMenuList=a,exports.StyledSubMenuWrapper=b,exports.SubMenuContainer=g,exports.SubMenuListContainer=c,exports.SubMenuWrapper=x,exports.TrailingIconContainer=f;
@@ -1 +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 h,shouldSanitizeForType as d,sanitizeUnsafeInput as u,validateInput as v}from"./Input-helper.js";import{Tooltip as g}from"../tooltips/Tooltip.js";import{TitleSmall as p,BodySecondary as m}from"../TypographyStyle.js";import{COLORS as b}from"../../constants/Theme.js";import x from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as f}from"./context/InputStyleProvider.js";import{RootContainer as y,InputFooter as j,MaxCharStyle as C,InputWrapper as T,IconHolder as O,PrefixHolder as w,InputContainer as I,InputContainerSmall as k,SuffixHolder as B,InputHeader as L}from"./Input.styled.js";const H=l(((l,H)=>{var D,E,M,P,S,z,A,F;const{placeholder:K,leftIcon:N,rightIcon:R,labelText:G,maxCharLimit:W,isRequired:_,hintText:q,type:U,state:V,validate:$,variant:J,button:Q,suffixText:X,prefixText:Y,onChangeText:Z,value:ee,noErrorHint:te,reset:ie,rangeValidation:ne,noKeyDownChange:le,version:re,noMaxCharCheck:oe,labelElement:ae,autoGrow:se,minHeight:ce,maxHeight:he,labelTextBold:de,truncateText:ue,maxCharLimitPosition:ve,hightlightInputColor:ge,onKeyDownEvent:pe,hideInputHeader:me,hideBorder:be,inputWrapperStyles:xe,minCharsToTrigger:fe,isDisabled:ye=!1,allowUnsafeInput:je}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},l),Ce=null==N?void 0:N.icon,Te=null==R?void 0:R.icon,[Oe,we]=r(!1),[Ie,ke]=r(!1),[Be,Le]=r(),He="x-small"===J?"12px":"small"===J?"18px":"22px",De=o(f),[Ee,Me]=r(""),Pe=a(null),Se=null!=H?H:Pe;s((()=>{Me(ee||""),!ee&&se&&(Se.current.style.height=ce||"48px")}),[ee]),s((()=>{var e;Se.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Se.current))}),[Se]),s((()=>{const e=Se.current;if(e&&["phonenumber","zip","number"].includes(U))return e.addEventListener("wheel",Ke,{passive:!1}),()=>{e.removeEventListener("wheel",Ke)}}),[]),s((()=>{ie&&Me("")}),[ie]),s((()=>{var e;ke(!!l.isActive),l.isActive&&(null===(e=Se.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{Le(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;we(!1),("invalid"===l.state||Be||"disabled-invalid"===l.state)&&we(!0),"active"===l.state&&(null===(e=Se.current)||void 0===e||e.focus())}),[l.state,Be]),s((()=>{we(!!Be||"invalid"===l.state)}),[Be,l.state]);const ze=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)}},Ae=()=>"zip"===U?6:2e3,Fe=e=>{const t=0!==W?W:Ae(),i=fe,n=e.target.value;pe&&(!n.length||n.length>=i)&&pe(e),le||n.length&&!(n.length>=i)||Z(ee||"",e),oe||![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},Ke=e=>{e.preventDefault()},Ne=e=>{let t=e.target.value;const i=0!==W?W+1:Ae(),n=fe;if(!je&&d(U)&&(t=u(t)),!oe&&i>0&&t.length>=i&&(t=t.substring(0,i-1)),l.textControl||Me(t||""),n&&t&&t.length<n)return;Z(t,e),se&&(Se.current.style.height=`${Se.current.scrollHeight}px`,t||(Se.current.style.height=ce||"48px"));const r=$||v;if(!r||!h(r))return;const[o,a]=r(t,U,ne);we(!o),Le(l.errorMessage?l.errorMessage:a)},Re=e=>{var t;l.skipFocus||ke(!0),ze(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},Ge=e=>{var t;l.skipFocus||ke(!1),ze(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},We=()=>{var n;return e(i,{children:["multiline"!==U&&t("input",{className:ue?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(n=null==De?void 0:De.input)&&void 0!==n?n:{},ref:Se,disabled:ye,type:["phonenumber","zip","number"].includes(U)?"number":U,value:Ee,onFocus:e=>Re(e),onBlur:e=>Ge(e),placeholder:K||"Enter here",onChange:Ne,onClick:e=>ze(l.onClick),onKeyDown:e=>Fe(e)}),"multiline"===U&&t("textarea",{"data-test":l["data-test"],value:Ee,ref:Se,onFocus:e=>Re(e),onBlur:e=>Ge(e),onClick:e=>ze(l.onClick),disabled:ye,placeholder:K||"Enter here",onChange:Ne,onKeyDown:e=>Fe(e),maxLength:W>0?W:void 0})]})};return e(y,Object.assign({width:l.width,height:l.height,state:V,type:U,style:null!==(D=null==De?void 0:De.RootContainer)&&void 0!==D?D:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!te&&(!!q||!!Be)&&e(j,Object.assign({invalid:!!Be},{children:[!!Be&&t(x,{width:16,height:16}),Be||q]})),W>0&&"BOTTOM"===ve&&e(C,Object.assign({position:"BOTTOM"},{children:[null!==(M=null===(E=(null!=ee?ee:"").toString())||void 0===E?void 0:E.length)&&void 0!==M?M:0,"/",W]}))]})),e(T,Object.assign({variant:J,state:V,width:l.width,isActive:"active"===V||Ie,isInvalid:Oe,style:null!==(S=null!==(P=null==De?void 0:De.InputWrapper)&&void 0!==P?P:xe)&&void 0!==S?S:{},version:re,height:l.height,hightlightInputColor:ge,hideBorder:be},{children:[!!Ce&&t(O,Object.assign({variant:J,iconSize:He,onClick:()=>ze(null==N?void 0:N.callback),isLeft:!0,style:null!==(z=null==De?void 0:De.IconHolder)&&void 0!==z?z:{}},{children:t(Ce,{})})),!!Y&&t(w,Object.assign({variant:J},{children:Y})),"default"===J&&t(I,Object.assign({height:l.height,type:l.type,minHeight:ce,maxHeight:he,autoGrow:se},{children:We()})),["x-small","small"].includes(J)&&t(k,Object.assign({height:l.height,type:l.type},{children:We()})),!!Te&&t(O,Object.assign({variant:J,iconSize:He,onClick:()=>ze(null==R?void 0:R.callback),isLeft:!1},{children:t(Te,{})})),!!X&&t(B,Object.assign({variant:J},{children:X})),Q&&Q.text&&t(c,{buttonText:Q.text,onClick:()=>ze(null==Q?void 0:Q.onClick)}),Q&&Q.buttonProps&&t(c,Object.assign({},Q.buttonProps))]})),!me&&(!!G||!!W)&&e(L,Object.assign({invalid:Oe},{children:[ae&&ae,e("div",Object.assign({className:"label__container"},{children:[e(de?p:m,{children:[G,_?t("span",{children:"*"}):""]}),l.tooltipText&&t(g,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(n,{style:{marginTop:-3},width:18,height:18,color:Oe?b.content.negative:b.content.primary})})}))]})),W>0&&"TOP"===ve&&e(C,{children:[null!==(F=null===(A=(null!=ee?ee:"").toString())||void 0===A?void 0:A.length)&&void 0!==F?F:0,"/",W]})]}))]}))}));H.displayName="Input";export{H as Input};
1
+ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,shouldSanitizeForType as d,sanitizeUnsafeInput as u,validateInput as g}from"./Input-helper.js";import{Tooltip as v}from"../tooltips/Tooltip.js";import{TitleSmall as p,BodySecondary as m}from"../TypographyStyle.js";import{COLORS as b}from"../../constants/Theme.js";import f from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as x}from"./context/InputStyleProvider.js";import{RootContainer as y,InputFooter as j,MaxCharStyle as C,InputWrapper as O,IconHolder as T,PrefixHolder as w,InputContainer as I,InputContainerSmall as k,SuffixHolder as B,InputHeader as L}from"./Input.styled.js";const H=l(((l,H)=>{var S,D,E,M,P,z,A,F;const{placeholder:K,leftIcon:N,rightIcon:R,labelText:G,maxCharLimit:W,isRequired:_,hintText:q,type:U,state:V,validate:$,variant:J,button:Q,suffixText:X,prefixText:Y,onChangeText:Z,value:ee,noErrorHint:te,reset:ne,rangeValidation:ie,noKeyDownChange:le,version:re,noMaxCharCheck:oe,labelElement:ae,autoGrow:se,minHeight:ce,maxHeight:he,labelTextBold:de,truncateText:ue,maxCharLimitPosition:ge,hightlightInputColor:ve,onKeyDownEvent:pe,hideInputHeader:me,hideBorder:be,inputWrapperStyles:fe,minCharsToTrigger:xe,isDisabled:ye=!1,allowUnsafeInput:je,leftIconStyle:Ce}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},l),Oe=null==N?void 0:N.icon,Te=null==R?void 0:R.icon,[we,Ie]=r(!1),[ke,Be]=r(!1),[Le,He]=r(),Se="x-small"===J?"12px":"small"===J?"18px":"22px",De=o(x),[Ee,Me]=r(""),Pe=a(null),ze=null!=H?H:Pe;s((()=>{Me(ee||""),!ee&&se&&(ze.current.style.height=ce||"48px")}),[ee]),s((()=>{var e;ze.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,ze.current))}),[ze]),s((()=>{const e=ze.current;if(e&&["phonenumber","zip","number"].includes(U))return e.addEventListener("wheel",Ne,{passive:!1}),()=>{e.removeEventListener("wheel",Ne)}}),[]),s((()=>{ne&&Me("")}),[ne]),s((()=>{var e;Be(!!l.isActive),l.isActive&&(null===(e=ze.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{He(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;Ie(!1),("invalid"===l.state||Le||"disabled-invalid"===l.state)&&Ie(!0),"active"===l.state&&(null===(e=ze.current)||void 0===e||e.focus())}),[l.state,Le]),s((()=>{Ie(!!Le||"invalid"===l.state)}),[Le,l.state]);const Ae=function(e){if(h(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},Fe=()=>"zip"===U?6:2e3,Ke=e=>{const t=0!==W?W:Fe(),n=xe,i=e.target.value;pe&&(!i.length||i.length>=n)&&pe(e),le||i.length&&!(i.length>=n)||Z(ee||"",e),oe||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},Ne=e=>{e.preventDefault()},Re=e=>{let t=e.target.value;const n=0!==W?W+1:Fe(),i=xe;if(!je&&d(U)&&(t=u(t)),!oe&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),l.textControl||Me(t||""),i&&t&&t.length<i)return;Z(t,e),se&&(ze.current.style.height=`${ze.current.scrollHeight}px`,t||(ze.current.style.height=ce||"48px"));const r=$||g;if(!r||!h(r))return;const[o,a]=r(t,U,ie);Ie(!o),He(l.errorMessage?l.errorMessage:a)},Ge=e=>{var t;l.skipFocus||Be(!0),Ae(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},We=e=>{var t;l.skipFocus||Be(!1),Ae(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},_e=()=>{var i;return e(n,{children:["multiline"!==U&&t("input",{className:ue?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(i=null==De?void 0:De.input)&&void 0!==i?i:{},ref:ze,disabled:ye,type:["phonenumber","zip","number"].includes(U)?"number":U,value:Ee,onFocus:e=>Ge(e),onBlur:e=>We(e),placeholder:K||"Enter here",onChange:Re,onClick:e=>Ae(l.onClick),onKeyDown:e=>Ke(e)}),"multiline"===U&&t("textarea",{"data-test":l["data-test"],value:Ee,ref:ze,onFocus:e=>Ge(e),onBlur:e=>We(e),onClick:e=>Ae(l.onClick),disabled:ye,placeholder:K||"Enter here",onChange:Re,onKeyDown:e=>Ke(e),maxLength:W>0?W:void 0})]})};return e(y,Object.assign({width:l.width,height:l.height,state:V,type:U,style:null!==(S=null==De?void 0:De.RootContainer)&&void 0!==S?S:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!te&&(!!q||!!Le)&&e(j,Object.assign({invalid:!!Le},{children:[!!Le&&t(f,{width:16,height:16}),Le||q]})),W>0&&"BOTTOM"===ge&&e(C,Object.assign({position:"BOTTOM"},{children:[null!==(E=null===(D=(null!=ee?ee:"").toString())||void 0===D?void 0:D.length)&&void 0!==E?E:0,"/",W]}))]})),e(O,Object.assign({variant:J,state:V,width:l.width,isActive:"active"===V||ke,isInvalid:we,style:null!==(P=null!==(M=null==De?void 0:De.InputWrapper)&&void 0!==M?M:fe)&&void 0!==P?P:{},version:re,height:l.height,hightlightInputColor:ve,hideBorder:be},{children:[!!Oe&&t(T,Object.assign({variant:J,iconSize:Se,onClick:()=>Ae(null==N?void 0:N.callback),isLeft:!0,style:Object.assign(Object.assign({},null!==(z=null==De?void 0:De.IconHolder)&&void 0!==z?z:{}),Ce)},{children:t(Oe,{})})),!!Y&&t(w,Object.assign({variant:J},{children:Y})),"default"===J&&t(I,Object.assign({height:l.height,type:l.type,minHeight:ce,maxHeight:he,autoGrow:se},{children:_e()})),["x-small","small"].includes(J)&&t(k,Object.assign({height:l.height,type:l.type},{children:_e()})),!!Te&&t(T,Object.assign({variant:J,iconSize:Se,onClick:()=>Ae(null==R?void 0:R.callback),isLeft:!1},{children:t(Te,{})})),!!X&&t(B,Object.assign({variant:J},{children:X})),Q&&Q.text&&t(c,{buttonText:Q.text,onClick:()=>Ae(null==Q?void 0:Q.onClick)}),Q&&Q.buttonProps&&t(c,Object.assign({},Q.buttonProps))]})),!me&&(!!G||!!W)&&e(L,Object.assign({invalid:we},{children:[ae&&ae,e("div",Object.assign({className:"label__container"},{children:[e(de?p:m,{children:[G,_?t("span",{children:"*"}):""]}),l.tooltipText&&t(v,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(i,{style:{marginTop:-3},width:18,height:18,color:we?b.content.negative:b.content.primary})})}))]})),W>0&&"TOP"===ge&&e(C,{children:[null!==(F=null===(A=(null!=ee?ee:"").toString())||void 0===A?void 0:A.length)&&void 0!==F?F:0,"/",W]})]}))]}))}));H.displayName="Input";export{H as Input};
@@ -14,6 +14,7 @@ export interface InputProps {
14
14
  icon: React.FC;
15
15
  callback?: () => void;
16
16
  };
17
+ leftIconStyle?: React.CSSProperties;
17
18
  rightIcon?: {
18
19
  icon: React.FC;
19
20
  callback?: () => void;
@@ -1 +1 @@
1
- import{jsxs as e,jsx as o}from"react/jsx-runtime";import{COLORS as r}from"../../constants/Theme.js";import{BodyTiny as t}from"../TypographyStyle.js";import{MenuItem as n}from"./MenuItem.js";import{GroupedMenuListContainer as l}from"./MultiLevelDropdown.styled.js";const p=p=>{let{width:i,onDropdownItemClick:s,option:a,parents:m,allowParentSelection:d,maxLevels:c,hideGroupLabel:u,currentLevel:h,renderNestedMenu:x,version:v}=p;return e(l,{children:[!u&&o(t,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.content.placeholder},{children:a.label})),a.options.map(((e,r)=>o(n,{width:i,onDropdownItemClick:s,option:e,parents:m,allowParentSelection:d,maxLevels:c,currentLevel:h,renderNestedMenu:x,version:v},r)))]})};export{p as GroupedMenuList};
1
+ import{jsxs as e,jsx as o}from"react/jsx-runtime";import{COLORS as r}from"../../constants/Theme.js";import{BodyTiny as t}from"../TypographyStyle.js";import{MenuItem as n}from"./MenuItem.js";import{GroupedMenuListContainer as l}from"./MultiLevelDropdown.styled.js";const i=i=>{let{width:s,onDropdownItemClick:p,option:a,parents:m,allowParentSelection:c,maxLevels:d,hideGroupLabel:u,currentLevel:h,renderNestedMenu:v,version:x}=i;return e(l,Object.assign({version:x},{children:[!u&&o(t,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.content.placeholder},{children:a.label})),a.options.map(((e,r)=>o(n,{width:s,onDropdownItemClick:p,option:e,parents:m,allowParentSelection:c,maxLevels:d,currentLevel:h,renderNestedMenu:v,version:x},r)))]}))};export{i as GroupedMenuList};
@@ -10,7 +10,9 @@ export declare const NoResultsContainer: import("styled-components").StyledCompo
10
10
  width?: string | undefined;
11
11
  version?: "1.0" | "2.0" | "3.0" | undefined;
12
12
  }, never>;
13
- export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
13
+ export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {
14
+ version?: "1.0" | "2.0" | "3.0" | undefined;
15
+ }, never>;
14
16
  export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
15
17
  export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
16
18
  version?: "1.0" | "2.0" | "3.0" | undefined;
@@ -25,7 +25,7 @@ import e from"styled-components";import{COLORS as t}from"../../constants/Theme.j
25
25
  cursor: pointer;
26
26
  align-items: center;
27
27
  justify-content: space-between;
28
- margin: 4px 0;
28
+ margin: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0"}};
29
29
  `,d=e.div`
30
30
  z-index: 1000;
31
31
  position: relative;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.786-beta.4",
3
+ "version": "0.0.786-beta.6",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",