@bikdotai/bik-component-library 0.0.679-10 → 0.0.679-3

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.
Files changed (79) hide show
  1. package/dist/cjs/components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js +1 -1
  2. package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
  3. package/dist/cjs/components/country-code-picker/CountryCodePicker.d.ts +0 -6
  4. package/dist/cjs/components/country-code-picker/CountryCodePicker.js +1 -1
  5. package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
  6. package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts +0 -1
  7. package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js +1 -1
  8. package/dist/cjs/components/dropdown/hooks/useDropdown.d.ts +1 -4
  9. package/dist/cjs/components/dropdown/hooks/useDropdown.js +1 -1
  10. package/dist/cjs/components/dropdown/type.d.ts +0 -1
  11. package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.d.ts +12 -0
  12. package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js +1 -0
  13. package/dist/cjs/components/feature-announcements/MajorUpdatePopup.d.ts +13 -0
  14. package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -0
  15. package/dist/cjs/components/feature-announcements/MajorUpdatePopup.style.d.ts +8 -0
  16. package/dist/cjs/components/feature-announcements/MajorUpdatePopup.style.js +55 -0
  17. package/dist/cjs/components/feature-announcements/MinorUpdatePopup.d.ts +13 -0
  18. package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js +1 -0
  19. package/dist/cjs/components/feature-announcements/MinorUpdatePopup.style.d.ts +12 -0
  20. package/dist/cjs/components/feature-announcements/MinorUpdatePopup.style.js +93 -0
  21. package/dist/cjs/components/feature-announcements/VideoModal.d.ts +8 -0
  22. package/dist/cjs/components/feature-announcements/VideoModal.js +1 -0
  23. package/dist/cjs/components/feature-announcements/index.d.ts +4 -0
  24. package/dist/cjs/components/index.d.ts +1 -0
  25. package/dist/cjs/components/input/Input.d.ts +0 -3
  26. package/dist/cjs/components/input/Input.js +1 -1
  27. package/dist/cjs/components/input/Input.styled.d.ts +0 -1
  28. package/dist/cjs/components/input/Input.styled.js +1 -1
  29. package/dist/cjs/components/zeroState/ZeroState.d.ts +0 -1
  30. package/dist/cjs/components/zeroState/ZeroState.js +1 -1
  31. package/dist/cjs/hooks/index.d.ts +2 -0
  32. package/dist/cjs/hooks/useElementVisibility.d.ts +11 -0
  33. package/dist/cjs/hooks/useElementVisibility.js +1 -0
  34. package/dist/cjs/hooks/useFeatureAnnouncements.d.ts +17 -0
  35. package/dist/cjs/hooks/useFeatureAnnouncements.js +1 -0
  36. package/dist/cjs/index.d.ts +3 -0
  37. package/dist/cjs/index.js +1 -1
  38. package/dist/cjs/types/FeatureAnnouncement.types.d.ts +27 -0
  39. package/dist/cjs/types/index.d.ts +1 -0
  40. package/dist/esm/components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js +1 -1
  41. package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
  42. package/dist/esm/components/country-code-picker/CountryCodePicker.d.ts +0 -6
  43. package/dist/esm/components/country-code-picker/CountryCodePicker.js +1 -1
  44. package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
  45. package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts +0 -1
  46. package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js +1 -1
  47. package/dist/esm/components/dropdown/hooks/useDropdown.d.ts +1 -4
  48. package/dist/esm/components/dropdown/hooks/useDropdown.js +1 -1
  49. package/dist/esm/components/dropdown/type.d.ts +0 -1
  50. package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.d.ts +12 -0
  51. package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js +1 -0
  52. package/dist/esm/components/feature-announcements/MajorUpdatePopup.d.ts +13 -0
  53. package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -0
  54. package/dist/esm/components/feature-announcements/MajorUpdatePopup.style.d.ts +8 -0
  55. package/dist/esm/components/feature-announcements/MajorUpdatePopup.style.js +55 -0
  56. package/dist/esm/components/feature-announcements/MinorUpdatePopup.d.ts +13 -0
  57. package/dist/esm/components/feature-announcements/MinorUpdatePopup.js +1 -0
  58. package/dist/esm/components/feature-announcements/MinorUpdatePopup.style.d.ts +12 -0
  59. package/dist/esm/components/feature-announcements/MinorUpdatePopup.style.js +93 -0
  60. package/dist/esm/components/feature-announcements/VideoModal.d.ts +8 -0
  61. package/dist/esm/components/feature-announcements/VideoModal.js +1 -0
  62. package/dist/esm/components/feature-announcements/index.d.ts +4 -0
  63. package/dist/esm/components/index.d.ts +1 -0
  64. package/dist/esm/components/input/Input.d.ts +0 -3
  65. package/dist/esm/components/input/Input.js +1 -1
  66. package/dist/esm/components/input/Input.styled.d.ts +0 -1
  67. package/dist/esm/components/input/Input.styled.js +1 -1
  68. package/dist/esm/components/zeroState/ZeroState.d.ts +0 -1
  69. package/dist/esm/components/zeroState/ZeroState.js +5 -5
  70. package/dist/esm/hooks/index.d.ts +2 -0
  71. package/dist/esm/hooks/useElementVisibility.d.ts +11 -0
  72. package/dist/esm/hooks/useElementVisibility.js +1 -0
  73. package/dist/esm/hooks/useFeatureAnnouncements.d.ts +17 -0
  74. package/dist/esm/hooks/useFeatureAnnouncements.js +1 -0
  75. package/dist/esm/index.d.ts +3 -0
  76. package/dist/esm/index.js +1 -1
  77. package/dist/esm/types/FeatureAnnouncement.types.d.ts +27 -0
  78. package/dist/esm/types/index.d.ts +1 -0
  79. package/package.json +5 -1
@@ -0,0 +1,55 @@
1
+ import e from"styled-components";const t=e.div`
2
+ width: 959px;
3
+ height: 274px;
4
+ display: flex;
5
+ background-color: #212121;
6
+ border-radius: 4px;
7
+ overflow: hidden;
8
+ position: relative;
9
+ `,i=e.div`
10
+ background-color: #212121;
11
+ width: 480px;
12
+ height: 274px;
13
+ position: relative;
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ padding: 8px;
18
+ `,n=e.div`
19
+ color: #9ca3af;
20
+ font-size: 14px;
21
+ text-align: center;
22
+ width: 290px;
23
+ height: 258px;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ `,o=e.div`
28
+ flex: 1;
29
+ display: flex;
30
+ margin: 0 8px 0 0;
31
+ flex-direction: column;
32
+ justify-content: space-between;
33
+ background: transparent;
34
+ `,l=e.div`
35
+ /* No specific styles, just a container */
36
+ `,p=e.h3`
37
+ font-size: 16px;
38
+ font-weight: 600;
39
+ padding: 36px 0 0 0;
40
+ color: #fff;
41
+ line-height: 1.25;
42
+ text-align: left;
43
+ `,a=e.div`
44
+ font-size: 14px;
45
+ line-height: 1.5;
46
+ color: rgba(255, 255, 255, 0.8);
47
+ text-align: left;
48
+ `,r=e.div`
49
+ position: absolute;
50
+ bottom: 16px;
51
+ right: 16px;
52
+ display: flex;
53
+ gap: 8px;
54
+ align-items: center;
55
+ `;export{o as StyledContentContainer,a as StyledDescription,n as StyledFeaturePreviewText,l as StyledHeaderContainer,i as StyledImageContainer,t as StyledMajorUpdateContainer,r as StyledNavigationContainer,p as StyledTitle};
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { FeatureAnnouncement } from '../../types/FeatureAnnouncement.types';
3
+ interface MinorUpdatePopupProps {
4
+ feature: FeatureAnnouncement;
5
+ currentIndex: number;
6
+ totalFeatures: number;
7
+ onSkip: () => void;
8
+ onExplore: () => void;
9
+ onPrevious: () => void;
10
+ onNext: () => void;
11
+ }
12
+ declare const MinorUpdatePopup: React.FC<MinorUpdatePopupProps>;
13
+ export default MinorUpdatePopup;
@@ -0,0 +1 @@
1
+ import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{StyledMinorUpdateContainer as n,StyledImageContainer as i,StyledImageWrapper as o,StyledImageOverlay as l,StyledNewFeatureText as c,StyledFeaturePreviewText as d,StyledContentContainer as a,StyledHeaderContainer as s,StyledTitle as u,StyledDescription as h,StyledActionButtonsContainer as p,StyledUnderstoodText as f}from"./MinorUpdatePopup.style.js";const x=e=>{if(!e)return"";const t=document.createElement("textarea");return t.innerHTML=e,t.value},g=g=>{let{feature:m,currentIndex:b,totalFeatures:y,onSkip:j,onExplore:k,onPrevious:I,onNext:v}=g;return e(t,{children:r(n,{children:[e(i,{children:m.displayImage?r(o,{children:[e("img",{src:m.displayImage,alt:m.title,style:{width:"235px",height:"134px",objectFit:"cover",borderRadius:"4px",display:"block"},onError:e=>{m.image&&(e.target.src=m.image)}}),e(l,{children:e(c,{children:"New feature"})})]}):e(d,{children:"Feature Preview"})}),r(a,{children:[r(s,{children:[e(u,{children:m.title}),e(h,{dangerouslySetInnerHTML:{__html:x(m.content||m.body||"")}})]}),r(p,{children:[e(f,Object.assign({onClick:j},{children:"Understood"})),m.productVideo&&e("button",Object.assign({onClick:()=>{k()},style:{backgroundColor:"#4B1583",border:"none",color:"#ffffff",borderRadius:"4px",fontSize:"14px",fontWeight:"500",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center"}},{children:m.buttonText||"Explore the feature"}))]})]})]})})};export{g as default};
@@ -0,0 +1,12 @@
1
+ export declare const StyledMinorUpdateContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const StyledImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
+ export declare const StyledImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
+ export declare const StyledImageOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const StyledNewFeatureText: import("styled-components").StyledComponent<"span", any, {}, never>;
6
+ export declare const StyledFeaturePreviewText: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
8
+ export declare const StyledHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const StyledTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
10
+ export declare const StyledDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
11
+ export declare const StyledActionButtonsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
12
+ export declare const StyledUnderstoodText: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -0,0 +1,93 @@
1
+ import i from"styled-components";const t=i.div`
2
+ width: 519px;
3
+ height: 160px;
4
+ display: flex;
5
+ background-color: #ffffff;
6
+ border-radius: 4px;
7
+ overflow: hidden;
8
+ position: relative;
9
+ box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
10
+ `,e=i.div`
11
+ background-color: #f9fafb;
12
+ border-radius: 4px;
13
+ position: relative;
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ margin: 13px 10px 13px 10px;
18
+ width: 235px;
19
+ min-width: 235px;
20
+ max-width: 235px;
21
+ height: 134px;
22
+ `,o=i.div`
23
+ position: relative;
24
+ width: 235px;
25
+ height: 134px;
26
+ `,n=i.div`
27
+ position: absolute;
28
+ top: 0px;
29
+ left: 0px;
30
+ right: 0px;
31
+ height: 27px;
32
+ background-color: rgba(0, 0, 0, 0.26);
33
+ border-radius: 4px 4px 4px 4px;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ z-index: 10;
38
+ `,p=i.span`
39
+ color: #ffffff;
40
+ font-weight: 400;
41
+ font-size: 14px;
42
+ `,r=i.div`
43
+ color: #9ca3af;
44
+ font-size: 14px;
45
+ text-align: center;
46
+ width: 100%;
47
+ height: 100%;
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: center;
51
+ background-color: #f3f4f6;
52
+ border-radius: 4px;
53
+ `,x=i.div`
54
+ flex: 1;
55
+ display: flex;
56
+ margin: 13px 13px 13px 3px;
57
+ flex-direction: column;
58
+ justify-content: space-between;
59
+ background: transparent;
60
+ `,a=i.div`
61
+ /* No specific styles, just a container */
62
+ `,l=i.h3`
63
+ font-size: 16px;
64
+ font-weight: 600;
65
+ padding: 0 0 0 0;
66
+ color: #212121;
67
+ line-height: 1.25;
68
+ text-align: left;
69
+ `,f=i.div`
70
+ font-size: 12px;
71
+ font-weight: 400;
72
+ line-height: 1.2;
73
+ color: #616161;
74
+ text-align: left;
75
+ max-height: 48px;
76
+ overflow: hidden;
77
+ display: -webkit-box;
78
+ -webkit-line-clamp: 3;
79
+ -webkit-box-orient: vertical;
80
+ `,s=i.div`
81
+ position: absolute;
82
+ bottom: 13px;
83
+ right: 10px;
84
+ display: flex;
85
+ gap: 16px;
86
+ align-items: center;
87
+ `,d=i.span`
88
+ color: #4b1583;
89
+ font-size: 14px;
90
+ font-weight: 500;
91
+ cursor: pointer;
92
+ transition: all 0.2s;
93
+ `;export{s as StyledActionButtonsContainer,x as StyledContentContainer,f as StyledDescription,r as StyledFeaturePreviewText,a as StyledHeaderContainer,e as StyledImageContainer,n as StyledImageOverlay,o as StyledImageWrapper,t as StyledMinorUpdateContainer,p as StyledNewFeatureText,l as StyledTitle,d as StyledUnderstoodText};
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ interface VideoModalProps {
3
+ isOpen: boolean;
4
+ videoUrl: string;
5
+ onClose: () => void;
6
+ }
7
+ export declare const VideoModal: React.FC<VideoModalProps>;
8
+ export {};
@@ -0,0 +1 @@
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";const o=o=>{let{isOpen:r,videoUrl:i,onClose:n}=o;if(!r)return null;const c=i.includes("youtube.com")||i.includes("youtu.be")?i.replace("watch?v=","embed/").replace("youtu.be/","youtube.com/embed/"):i,s=i.includes("youtube.com")||i.includes("youtu.be");return e("div",Object.assign({style:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.9)",zIndex:2e3,display:"flex",justifyContent:"center",alignItems:"center",padding:"20px"},onClick:e=>{e.target===e.currentTarget&&n()}},{children:t("div",Object.assign({style:{position:"relative",width:"90vw",height:"90vh",maxWidth:"1200px",maxHeight:"800px",backgroundColor:"black",borderRadius:"12px",overflow:"hidden",boxShadow:"0 25px 50px rgba(0, 0, 0, 0.8)"},onClick:e=>e.stopPropagation()},{children:[e("button",Object.assign({onClick:n,style:{position:"absolute",top:"20px",right:"20px",background:"rgba(0, 0, 0, 0.7)",border:"none",color:"white",fontSize:"24px",width:"40px",height:"40px",borderRadius:"50%",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",zIndex:10,transition:"background-color 0.2s"},onMouseOver:e=>{e.currentTarget.style.backgroundColor="rgba(0, 0, 0, 0.9)"},onMouseOut:e=>{e.currentTarget.style.backgroundColor="rgba(0, 0, 0, 0.7)"}},{children:"×"})),e("div",Object.assign({style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center"}},{children:i?s?e("iframe",{width:"100%",height:"100%",src:c,title:"Product Video",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",allowFullScreen:!0,style:{borderRadius:"12px"}}):t("video",Object.assign({controls:!0,autoPlay:!0,style:{width:"100%",height:"100%",objectFit:"contain",borderRadius:"12px"}},{children:[e("source",{src:i,type:"video/mp4"}),e("source",{src:i,type:"video/webm"}),e("source",{src:i,type:"video/ogg"}),"Your browser does not support the video tag."]})):e("div",Object.assign({style:{color:"white",fontSize:"18px",textAlign:"center"}},{children:"No video available"}))}))]}))}))};export{o as VideoModal};
@@ -0,0 +1,4 @@
1
+ export { default as FeatureAnnouncementProvider } from './FeatureAnnouncementProvider';
2
+ export { VideoModal } from './VideoModal';
3
+ export { default as MajorUpdatePopup } from './MajorUpdatePopup';
4
+ export { default as MinorUpdatePopup } from './MinorUpdatePopup';
@@ -0,0 +1 @@
1
+ export * from './feature-announcements';
@@ -65,8 +65,5 @@ export interface InputProps {
65
65
  hightlightInputColor?: string;
66
66
  onKeyDownEvent?: (e: Event) => void;
67
67
  hideInputHeader?: boolean;
68
- hideBorder?: boolean;
69
- inputWrapperStyles?: React.CSSProperties;
70
- minCharLimit?: number;
71
68
  }
72
69
  export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
@@ -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,validateInput as u}from"./Input-helper.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as p}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as x}from"./context/InputStyleProvider.js";import{RootContainer as b,InputFooter as f,MaxCharStyle as y,InputWrapper as j,IconHolder as C,PrefixHolder as O,InputContainer as T,InputContainerSmall as w,SuffixHolder as I,InputHeader as k}from"./Input.styled.js";const L=l(((l,L)=>{var B,H,E,M,P,S,D,z;const{placeholder:A,leftIcon:F,rightIcon:K,labelText:N,maxCharLimit:R,isRequired:G,hintText:W,type:_,state:q,validate:V,variant:$,button:J,suffixText:Q,prefixText:U,onChangeText:X,value:Y,noErrorHint:Z,reset:ee,rangeValidation:te,noKeyDownChange:ie,version:ne,noMaxCharCheck:le,labelElement:re,autoGrow:oe,minHeight:ae,maxHeight:se,labelTextBold:ce,truncateText:he,maxCharLimitPosition:ue,hightlightInputColor:de,onKeyDownEvent:ve,hideInputHeader:pe,hideBorder:ge,inputWrapperStyles:me,minCharLimit:xe}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharLimit:0},l),be=null==F?void 0:F.icon,fe=null==K?void 0:K.icon,[ye,je]=r(!1),[Ce,Oe]=r(!1),[Te,we]=r(),Ie="x-small"===$?"12px":"small"===$?"18px":"22px",ke=o(x),[Le,Be]=r(),He=a(null),Ee=null!=L?L:He;s((()=>{Be(Y),!Y&&oe&&(Ee.current.style.height=ae||"48px")}),[Y]),s((()=>{var e;Ee.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Ee.current))}),[Ee]),s((()=>{const e=Ee.current;if(e&&["phonenumber","zip","number"].includes(_))return e.addEventListener("wheel",De,{passive:!1}),()=>{e.removeEventListener("wheel",De)}}),[]),s((()=>{ee&&Be("")}),[ee]),s((()=>{var e;Oe(!!l.isActive),l.isActive&&(null===(e=Ee.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{we(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;je(!1),("invalid"===l.state||Te||"disabled-invalid"===l.state)&&je(!0),"active"===l.state&&(null===(e=Ee.current)||void 0===e||e.focus())}),[l.state,Te]),s((()=>{je(!!Te||"invalid"===l.state)}),[Te,l.state]);const Me=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)}},Pe=()=>"zip"===_?6:2e3,Se=e=>{const t=0!==R?R:Pe(),i=xe,n=e.target.value;ve&&(!n.length||n.length>=i)&&ve(e),ie||n.length&&!(n.length>=i)||X(Y||"",e),le||![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},De=e=>{e.preventDefault()},ze=e=>{let t=e.target.value;const i=0!==R?R+1:Pe(),n=xe;if(!le&&i>0&&t.length>=i&&(t=t.substring(0,i-1)),l.textControl||Be(t),n&&t&&t.length<n)return;X(t,e),oe&&(Ee.current.style.height=`${Ee.current.scrollHeight}px`,t||(Ee.current.style.height=ae||"48px"));const r=V||u;if(!r||!h(r))return;const[o,a]=r(t,_,te);je(!o),we(l.errorMessage?l.errorMessage:a)},Ae=e=>{var t;l.skipFocus||Oe(!0),Me(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},Fe=e=>{var t;l.skipFocus||Oe(!1),Me(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},Ke=()=>{var n;return e(i,{children:["multiline"!==_&&t("input",{className:he?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(n=null==ke?void 0:ke.input)&&void 0!==n?n:{},ref:Ee,type:["phonenumber","zip","number"].includes(_)?"number":_,value:Le,onFocus:e=>Ae(e),onBlur:e=>Fe(e),placeholder:A||"Enter here",onChange:ze,onClick:e=>Me(l.onClick),onKeyDown:e=>Se(e)}),"multiline"===_&&t("textarea",{"data-test":l["data-test"],value:Le,ref:Ee,onFocus:e=>Ae(e),onBlur:e=>Fe(e),onClick:e=>Me(l.onClick),placeholder:A||"Enter here",onChange:ze,onKeyDown:e=>Se(e),maxLength:R>0?R:void 0})]})};return e(b,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(B=null==ke?void 0:ke.RootContainer)&&void 0!==B?B:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!Z&&(!!W||!!Te)&&e(f,Object.assign({invalid:!!Te},{children:[!!Te&&t(m,{width:16,height:16}),Te||W]})),R>0&&"BOTTOM"===ue&&e(y,Object.assign({position:"BOTTOM"},{children:[null!==(E=null===(H=(null!=Y?Y:"").toString())||void 0===H?void 0:H.length)&&void 0!==E?E:0,"/",R]}))]})),e(j,Object.assign({variant:$,state:q,width:l.width,isActive:"active"===q||Ce,isInvalid:ye,style:null!==(P=null!==(M=null==ke?void 0:ke.InputWrapper)&&void 0!==M?M:me)&&void 0!==P?P:{},version:ne,height:l.height,hightlightInputColor:de,hideBorder:ge},{children:[!!be&&t(C,Object.assign({variant:$,iconSize:Ie,onClick:()=>Me(null==F?void 0:F.callback),isLeft:!0,style:null!==(S=null==ke?void 0:ke.IconHolder)&&void 0!==S?S:{}},{children:t(be,{})})),!!U&&t(O,Object.assign({variant:$},{children:U})),"default"===$&&t(T,Object.assign({height:l.height,type:l.type,minHeight:ae,maxHeight:se,autoGrow:oe},{children:Ke()})),["x-small","small"].includes($)&&t(w,Object.assign({height:l.height,type:l.type},{children:Ke()})),!!fe&&t(C,Object.assign({variant:$,iconSize:Ie,onClick:()=>Me(null==K?void 0:K.callback),isLeft:!1},{children:t(fe,{})})),!!Q&&t(I,Object.assign({variant:$},{children:Q})),J&&J.text&&t(c,{buttonText:J.text,onClick:()=>Me(null==J?void 0:J.onClick)}),J&&J.buttonProps&&t(c,Object.assign({},J.buttonProps))]})),!pe&&(!!N||!!R)&&e(k,Object.assign({invalid:ye},{children:[re&&re,e("div",Object.assign({className:"label__container"},{children:[e(ce?v:p,{children:[N,G?t("span",{children:"*"}):""]}),l.tooltipText&&t(d,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(n,{style:{marginTop:-3},width:18,height:18,color:ye?g.content.negative:g.content.primary})})}))]})),R>0&&"TOP"===ue&&e(y,{children:[null!==(z=null===(D=(null!=Y?Y:"").toString())||void 0===D?void 0:D.length)&&void 0!==z?z:0,"/",R]})]}))]}))}));L.displayName="Input";export{L 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,validateInput as u}from"./Input-helper.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as p}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as x}from"./context/InputStyleProvider.js";import{RootContainer as b,InputFooter as f,MaxCharStyle as y,InputWrapper as j,IconHolder as C,PrefixHolder as O,InputContainer as T,InputContainerSmall as w,SuffixHolder as I,InputHeader as k}from"./Input.styled.js";const L=l(((l,L)=>{var H,B,E,M,P,D,S;const{placeholder:z,leftIcon:A,rightIcon:F,labelText:K,maxCharLimit:N,isRequired:R,hintText:G,type:_,state:q,validate:V,variant:W,button:$,suffixText:J,prefixText:Q,onChangeText:U,value:X,noErrorHint:Y,reset:Z,rangeValidation:ee,noKeyDownChange:te,version:ne,noMaxCharCheck:ie,labelElement:le,autoGrow:re,minHeight:oe,maxHeight:ae,labelTextBold:se,truncateText:ce,maxCharLimitPosition:he,hightlightInputColor:ue,onKeyDownEvent:de,hideInputHeader:ve}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP"},l),pe=null==A?void 0:A.icon,ge=null==F?void 0:F.icon,[me,xe]=r(!1),[be,fe]=r(!1),[ye,je]=r(),Ce="x-small"===W?"12px":"small"===W?"18px":"22px",Oe=o(x),[Te,we]=r(),Ie=a(null),ke=null!=L?L:Ie;s((()=>{we(X),!X&&re&&(ke.current.style.height=oe||"48px")}),[X]),s((()=>{var e;ke.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,ke.current))}),[ke]),s((()=>{const e=ke.current;if(e&&["phonenumber","zip","number"].includes(_))return e.addEventListener("wheel",Ee,{passive:!1}),()=>{e.removeEventListener("wheel",Ee)}}),[]),s((()=>{Z&&we("")}),[Z]),s((()=>{var e;fe(!!l.isActive),l.isActive&&(null===(e=ke.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{je(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;xe(!1),("invalid"===l.state||ye||"disabled-invalid"===l.state)&&xe(!0),"active"===l.state&&(null===(e=ke.current)||void 0===e||e.focus())}),[l.state,ye]),s((()=>{xe(!!ye||"invalid"===l.state)}),[ye,l.state]);const Le=function(e){if(h(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},He=()=>"zip"===_?6:2e3,Be=e=>{const t=0!==N?N:He();if(de&&de(e),te||U(X||"",e),ie)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},Ee=e=>{e.preventDefault()},Me=e=>{let t=e.target.value;const n=0!==N?N+1:He();!ie&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),U(t,e),l.textControl||we(t),re&&(ke.current.style.height=`${ke.current.scrollHeight}px`,t||(ke.current.style.height=oe||"48px"));const i=V||u;if(!i||!h(i))return;const[r,o]=i(t,_,ee);xe(!r),je(l.errorMessage?l.errorMessage:o)},Pe=e=>{var t;l.skipFocus||fe(!0),Le(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},De=e=>{var t;l.skipFocus||fe(!1),Le(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},Se=()=>{var i;return e(n,{children:["multiline"!==_&&t("input",{className:ce?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(i=null==Oe?void 0:Oe.input)&&void 0!==i?i:{},ref:ke,type:["phonenumber","zip","number"].includes(_)?"number":_,value:Te,onFocus:e=>Pe(e),onBlur:e=>De(e),placeholder:z||"Enter here",onChange:Me,onClick:e=>Le(l.onClick),onKeyDown:e=>Be(e)}),"multiline"===_&&t("textarea",{"data-test":l["data-test"],value:Te,ref:ke,onFocus:e=>Pe(e),onBlur:e=>De(e),onClick:e=>Le(l.onClick),placeholder:z||"Enter here",onChange:Me,onKeyDown:e=>Be(e),maxLength:N>0?N:void 0})]})};return e(b,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(H=null==Oe?void 0:Oe.RootContainer)&&void 0!==H?H:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!Y&&(!!G||!!ye)&&e(f,Object.assign({invalid:!!ye},{children:[!!ye&&t(m,{width:16,height:16}),ye||G]})),N>0&&"BOTTOM"===he&&e(y,Object.assign({position:"BOTTOM"},{children:[null!==(E=null===(B=(null!=X?X:"").toString())||void 0===B?void 0:B.length)&&void 0!==E?E:0,"/",N]}))]})),e(j,Object.assign({variant:W,state:q,width:l.width,isActive:"active"===q||be,isInvalid:me,style:null!==(M=null==Oe?void 0:Oe.InputWrapper)&&void 0!==M?M:{},version:ne,height:l.height,hightlightInputColor:ue},{children:[!!pe&&t(C,Object.assign({variant:W,iconSize:Ce,onClick:()=>Le(null==A?void 0:A.callback),isLeft:!0,style:null!==(P=null==Oe?void 0:Oe.IconHolder)&&void 0!==P?P:{}},{children:t(pe,{})})),!!Q&&t(O,Object.assign({variant:W},{children:Q})),"default"===W&&t(T,Object.assign({height:l.height,type:l.type,minHeight:oe,maxHeight:ae,autoGrow:re},{children:Se()})),["x-small","small"].includes(W)&&t(w,Object.assign({height:l.height,type:l.type},{children:Se()})),!!ge&&t(C,Object.assign({variant:W,iconSize:Ce,onClick:()=>Le(null==F?void 0:F.callback),isLeft:!1},{children:t(ge,{})})),!!J&&t(I,Object.assign({variant:W},{children:J})),$&&$.text&&t(c,{buttonText:$.text,onClick:()=>Le(null==$?void 0:$.onClick)}),$&&$.buttonProps&&t(c,Object.assign({},$.buttonProps))]})),!ve&&(!!K||!!N)&&e(k,Object.assign({invalid:me},{children:[le&&le,e("div",Object.assign({className:"label__container"},{children:[e(se?v:p,{children:[K,R?t("span",{children:"*"}):""]}),l.tooltipText&&t(d,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(i,{style:{marginTop:-3},width:18,height:18,color:me?g.content.negative:g.content.primary})})}))]})),N>0&&"TOP"===he&&e(y,{children:[null!==(S=null===(D=(null!=X?X:"").toString())||void 0===D?void 0:D.length)&&void 0!==S?S:0,"/",N]})]}))]}))}));L.displayName="Input";export{L as Input};
@@ -12,7 +12,6 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
12
12
  variant?: InputVariant | undefined;
13
13
  version?: "1.0" | "2.0" | undefined;
14
14
  hightlightInputColor?: string | undefined;
15
- hideBorder?: boolean | undefined;
16
15
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
17
16
  export declare const IconHolder: import("@emotion/styled").StyledComponent<{
18
17
  theme?: import("@emotion/react").Theme | undefined;