@bikdotai/bik-component-library 0.0.581-aidd-beta.17 → 0.0.581-beta-01

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js

@@ -1,13 +1,5 @@
-import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import n from"../../../../../assets/icons/chevronRight.svg.js";import{forwardRef as i,useState as r}from"react";import s from"styled-components";import{CheckBox as l}from"../../../../checkBox/CheckBox.js";import{ListItem as c}from"../../../../list-item/ListItem.js";import{Tooltip as a}from"../../../../tooltips/Tooltip.js";import{BodyCaption as d}from"../../../../TypographyStyle.js";import{DEFAULT_THEME as p,COLORS as m}from"../../../../../constants/Theme.js";import{FreeFormContainer as u}from"./FreeFormMenu.styled.js";const g=s(c)`
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import i from"styled-components";import{CheckBox as o}from"../../../../checkBox/CheckBox.js";import{ListItem as s}from"../../../../list-item/ListItem.js";import{BodyCaption as r}from"../../../../TypographyStyle.js";import{COLORS as l}from"../../../../../constants/Theme.js";import{FreeFormContainer as c}from"./FreeFormMenu.styled.js";const a=i(s)`
 	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
-`,v=s.div`
-	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
-	border-radius: ${e=>{let{version:t}=e;return"1.0"===t?"0":"8px"}};
-	padding: ${e=>{let{version:t}=e;return"1.0"===t?"0":"4px"}};
-	min-width: 148px;
-	border: ${e=>{let{version:t}=e;return"1.0"===t?`1px solid ${p.colorsV2.stroke.primary}`:"none"}};
-	max-height: 248px;
-	overflow-y: auto;
-`,h=i(((i,s)=>{let{option:c,isMultiSelect:h,showDescription:b,onSelect:x,last:f,version:j,onDropdownItemClick:y}=i;var I;const[C,O]=r(c.selected),k=(e,t)=>{if(!e.children){T(!e.selected);const o=t?Object.assign(Object.assign({},e),{parent:t}):e;null==y||y(o)}},T=e=>{c.disabled||x(Object.assign(Object.assign({},c),{selected:e}))};return e(t,{children:e(a,Object.assign({body:"",tooltipContent:c.children?e("div",Object.assign({style:{backgroundColor:p.colorsV2.surface.standard},ref:s,onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1)},{children:e(v,Object.assign({version:null!=j?j:"2.0"},{children:c.children.map((t=>{var o;return e(g,{version:j,style:(null!==(o=null==c?void 0:c.children)&&void 0!==o?o:[]).length-1?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),k(t,c)},listItem:{value:t.value,label:t.label},subText:t.subText,leadingIcon:t.leadingIcon||void 0,customComponent:t.customComponent,trailingIcon:t.trailingIcon||void 0,variant:c.disabled?"inactive":t.selected?"selected":"default"},t.value)}))}))})):e(t,{}),placement:"right-start",hideArrow:!0},{children:e(g,{version:j,style:f?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),k(c)},onMouseOver:()=>{c.description?b(c.label,c.description):b()},listItem:{value:c.value,label:c.label},subText:c.subText,leadingIcon:h?o("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e(l,{size:"2.0"===j?"SMALL":"DEFAULT",isDisabled:null!==(I=c.disabled)&&void 0!==I&&I,isChecked:!!c.selected,onValueChange:T}),e("div",Object.assign({style:{marginRight:"-4px"}},{children:c.leadingIcon}))]})):c.leadingIcon?e(t,{children:c.leadingIcon}):void 0,customComponent:c.customComponent,trailingIcon:c.isFreeForm?e(u,{children:e(d,Object.assign({style:{color:m.content.secondary}},{children:"Freeform"}))}):c.children?e(n,{width:12,height:12}):c.trailingIcon?e(t,{children:c.trailingIcon}):void 0,variant:c.disabled?"inactive":c.selected||!h&&C?"selected":"default"})}))})}));export{h as MenuItem};
+`,d=i=>{let{option:s,isMultiSelect:d,showDescription:m,onSelect:p,last:g,version:u,onDropdownItemClick:b}=i;var f;function h(e){s.disabled||p(Object.assign(Object.assign({},s),{selected:e}))}return e(a,{version:u,style:g?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),h(!s.selected),null==b||b(s)},onMouseOver:function(){s.description?m(s.label,s.description):m()},listItem:{value:s.value,label:s.label},subText:s.subText,leadingIcon:d?t("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e(o,{size:"2.0"===u?"SMALL":"DEFAULT",isDisabled:null!==(f=s.disabled)&&void 0!==f&&f,isChecked:!!s.selected,onValueChange:h}),e("div",Object.assign({style:{marginRight:"-4px"}},{children:s.leadingIcon}))]})):s.leadingIcon?e(n,{children:s.leadingIcon}):e(n,{}),customComponent:s.customComponent,trailingIcon:s.isFreeForm?e(c,{children:e(r,Object.assign({style:{color:l.content.secondary}},{children:"Freeform"}))}):s.trailingIcon?e(n,{children:s.trailingIcon}):e(n,{}),variant:s.disabled?"inactive":s.selected?"selected":"default"})};export{d as MenuItem};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { DropdownOption, SingleOption } from '../../../type';
 interface MenuListProps {
     options: DropdownOption[];
@@ -9,5 +9,5 @@ interface MenuListProps {
     onInfiniteScroll?: () => void;
     onDropdownItemClick?: (option: DropdownOption) => void;
 }
-export declare const MenuList: import("react").ForwardRefExoticComponent<MenuListProps & import("react").RefAttributes<HTMLDivElement[]>>;
+export declare const MenuList: React.FC<MenuListProps>;
 export {};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js

@@ -1 +1 @@
-import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useCallback as i,useEffect as c}from"react";import{MenuItem as s}from"./MenuItem.js";import{StyledGroupedLabel as l}from"./MenuList.styled.js";const u=r(((r,u)=>{let{options:p,isMultiSelect:a,showDescription:m,onSelect:d,version:f,onInfiniteScroll:g,onDropdownItemClick:h}=r;const I=o(null),b=o(null),j=i((()=>{I.current&&I.current.disconnect(),I.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==g||g())})),b.current&&I.current.observe(b.current)}),[g]);return c((()=>(j(),()=>{I.current&&I.current.disconnect()})),[j,p]),e(n,{children:p.map(((n,r)=>{const o=r===p.length-1;if(n.options){const i=n;return t("div",Object.assign({style:{marginTop:"2.0"===f?2:0}},{children:[t(l,Object.assign({version:f},{children:[i.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:i.leadingIcon})):null,i.label]})),i.options.map(((n,t)=>e(s,{version:f,last:t===i.options.length-1,onSelect:d,showDescription:m,onDropdownItemClick:h,isMultiSelect:a,option:n,ref:e=>{u&&"object"==typeof u&&u.current&&e&&e&&e&&e&&(u.current[r]=e)}},`${r}-${t}`))),o?e("span",{ref:b}):null]}),r)}return t("div",{children:[e(s,{version:f,last:o,onSelect:d,showDescription:m,onDropdownItemClick:h,isMultiSelect:a,option:n,ref:e=>{u&&"object"==typeof u&&u.current&&e&&e&&e&&e&&(u.current[r]=e)}},r),o?e("span",{ref:b}):null]},r)}))})}));export{u as MenuList};
+import{jsx as n,Fragment as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useCallback as o,useEffect as i}from"react";import{MenuItem as s}from"./MenuItem.js";import{StyledGroupedLabel as c}from"./MenuList.styled.js";const l=l=>{let{options:p,isMultiSelect:u,showDescription:a,onSelect:m,version:d,onInfiniteScroll:g,onDropdownItemClick:h}=l;const I=r(null),f=r(null),v=o((()=>{I.current&&I.current.disconnect(),I.current=new IntersectionObserver((n=>{n[0].isIntersecting&&(null==g||g())})),f.current&&I.current.observe(f.current)}),[g]);return i((()=>(v(),()=>{I.current&&I.current.disconnect()})),[v,p]),n(e,{children:p.map(((r,o)=>{const i=o===p.length-1;if(r.options){const l=r;return t("div",Object.assign({style:{marginTop:"2.0"===d?2:0}},{children:[t(c,Object.assign({version:d},{children:[l.leadingIcon?n("span",Object.assign({style:{marginRight:8}},{children:l.leadingIcon})):n(e,{}),l.label]})),l.options.map(((e,t)=>n(s,{version:d,last:t===l.options.length-1,onSelect:m,showDescription:a,onDropdownItemClick:h,isMultiSelect:u,option:e},`${o}-${t}`))),i?n("span",{ref:f}):null]}),o)}return t("div",{children:[n(s,{version:d,last:i,onSelect:m,showDescription:a,onDropdownItemClick:h,isMultiSelect:u,option:r},o),i?n("span",{ref:f}):null]},o)}))})};export{l as MenuList};

package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts

@@ -13,8 +13,6 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
     selectedLabel?: string | undefined;
-    children?: SingleOption[] | undefined;
-    parent?: SingleOption | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
@@ -28,8 +26,6 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
     selectedLabel?: string | undefined;
-    children?: SingleOption[] | undefined;
-    parent?: SingleOption | undefined;
     options: SingleOption[];
 })[];
 export declare function iterateOnOptionsRaw(options: DropdownOption[], cb: (option: SingleOption) => void): void;

package/dist/esm/components/dropdown/hooks/useDropdown.d.ts

@@ -20,8 +20,6 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
         selectedLabel?: string | undefined;
-        children?: SingleOption[] | undefined;
-        parent?: SingleOption | undefined;
     } | {
         label?: string | undefined;
         value?: string | undefined;
@@ -35,8 +33,6 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
         selectedLabel?: string | undefined;
-        children?: SingleOption[] | undefined;
-        parent?: SingleOption | undefined;
         options: SingleOption[];
     })[] | undefined;
     selectAllHandler: (newState: SelectAllCheckboxState) => void;

package/dist/esm/components/dropdown/type.d.ts

@@ -44,8 +44,6 @@ export type SingleOption = {
     customComponent?: JSX.Element;
     searchKey?: string;
     selectedLabel?: string;
-    children?: SingleOption[];
-    parent?: SingleOption;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-export type FloaterProps = {
+type FloaterProps = {
     children?: React.ReactNode;
     refElement: React.MutableRefObject<any>;
     leftOffset?: number;
-    topOffset?: number;
-    useDefaultOffsets?: boolean;
 };
 export declare const Floater: (props: FloaterProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/components/floater/floater.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{useRef as e,useState as n,useEffect as f}from"react";const i=i=>{const o=e(null),[r,s]=n(0),[l,d]=n(0),[c,u]=n(!1);return f((()=>{if(i.refElement.current){const t=i.refElement.current.getBoundingClientRect();(t=>{if(i.useDefaultOffsets)return void d(t.left);let e=0;e=i.leftOffset?t.left+i.leftOffset:t.left+t.width+30;const n=null==o?void 0:o.current;n?(e>window.innerWidth-n.offsetWidth&&(e=window.innerWidth-n.offsetWidth-50),d(e)):d(e)})(t),(t=>{if(i.useDefaultOffsets)return void s(t.top);let e=t.top;i.topOffset&&(e=t.top+i.topOffset);const n=null==o?void 0:o.current;if(!n)return void s(e);const f=window.innerHeight;t.top+n.offsetHeight>f&&(e=t.top-(t.top+n.offsetHeight-f)-10),s(e)})(t),u(!0)}})),c?t("div",Object.assign({style:{top:r,left:l,position:"fixed",zIndex:1e3}},{children:t("div",Object.assign({ref:o},{children:i.children}))})):null};export{i as Floater};
+import{jsx as t}from"react/jsx-runtime";import{useRef as e,useState as n,useEffect as i}from"react";const o=o=>{const r=e(null),[f,l]=n(0),[s,c]=n(0),[d,u]=n(!1);return i((()=>{if(o.refElement.current){const t=o.refElement.current.getBoundingClientRect();(t=>{let e=0;e=o.leftOffset?t.left+o.leftOffset:t.left+t.width+30;const n=null==r?void 0:r.current;n?(e>window.innerWidth-n.offsetWidth&&(e=window.innerWidth-n.offsetWidth-50),c(e)):c(e)})(t),(t=>{let e=t.top;const n=null==r?void 0:r.current;if(!n)return void l(e);const i=window.innerHeight;t.top+n.offsetHeight>i&&(e=t.top-(t.top+n.offsetHeight-i)-10),l(e)})(t),u(!0)}})),d?t("div",Object.assign({style:{top:f,left:s,position:"fixed"}},{children:t("div",Object.assign({ref:r},{children:o.children}))})):null};export{o as Floater};

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

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

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

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

@@ -11,7 +11,6 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     state?: InputStateI | undefined;
     variant?: InputVariant | undefined;
     version?: "1.0" | "2.0" | undefined;
-    hightlightInputColor?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;