@bikdotai/bik-component-library 0.0.796-beta.8 → 0.0.796

package/dist/esm/components/avatar/Avatar.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as s}from"react";import{BodyTiny as i,TitleSmall as o,TitleMedium as r}from"../TypographyStyle.js";import{COLORS as a}from"../../constants/Theme.js";import n from"../../assets/icons/bik_livechat.svg.js";import c from"../../assets/icons/email-channel.svg.js";import l from"../../assets/icons/facebook_channel.svg.js";import d from"../../assets/icons/gmail.svg.js";import h from"../../assets/icons/instagram-channel.svg.js";import p from"../../assets/icons/task.svg.js";import m from"../../assets/icons/whatsapp_color.svg.js";import{AvatarStyle as g}from"./Avatar.styled.js";import{SIZE as u,AVATAR_BACKGROUND as b,AVATAR_TYPES as A,AVATAR_SIZE_MAP as I}from"./AvatarHelper.js";const S={[u.EXTRA_SMALL]:10,[u.SMALL]:16,[u.MEDIUM]:20,[u.INBOX]:24,[u.LARGE]:32},y={[b.LIGHT]:a.content.secondary,[b.WHITE]:a.content.secondary,[b.DARK]:a.surface.standard};var E;!function(e){e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat"}(E||(E={}));const f=b=>{const[f,j]=s(!1),v=()=>{const e=(b.name||"").split(".").join(" ").split(" ").map((e=>e.charAt(0).toUpperCase())).slice(0,2).join("");return b.size===u.EXTRA_SMALL||b.size===u.SMALL?t(i,Object.assign({style:{color:y[b.background]}},{children:e})):b.size===u.MEDIUM||b.size===u.INBOX?t(o,Object.assign({style:{color:y[b.background]}},{children:e})):b.size===u.LARGE?t(r,Object.assign({style:{color:y[b.background]}},{children:e})):void 0};return e("div",Object.assign({style:{position:"relative"}},{children:[e(g,Object.assign({type:b.type===A.IMAGE&&(f||!b.photoUrl)&&b.useNameFallback&&b.name?A.INITIALS:b.type,size:b.size,background:b.background},{children:[b.type===A.IMAGE&&(b.useNameFallback&&(!b.photoUrl||f)&&b.name?t("div",{children:v()}):b.useNameFallback&&b.photoUrl&&!f?t("img",{alt:"",width:I[b.size],height:I[b.size],style:{borderRadius:(null==b?void 0:b.borderRadius)||"50%",objectFit:"contain"},src:b.photoUrl,onError:()=>{j(!0)}}):t("img",{alt:"",width:I[b.size],height:I[b.size],style:{borderRadius:(null==b?void 0:b.borderRadius)||"50%",objectFit:"contain"},src:b.photoUrl})),b.type===A.INITIALS&&t("div",{children:v()}),b.type===A.ICON&&b.icon&&t(b.icon,{width:S[b.size],height:S[b.size],color:y[b.background]})]})),b.inboxSettings&&t("div",Object.assign({style:{position:"absolute",left:S[b.size]+"px",top:S[b.size]+"px",width:14,height:14,borderRadius:(null==b?void 0:b.borderRadius)||"50%",display:"flex",justifyContent:"center",backgroundColor:b.inboxSettings.isSelected?b.inboxSettings.isComments?a.content.primary:a.background.brandLight:b.inboxSettings.isComments?a.content.primary:a.surface.standard,alignItems:"center"}},{children:(()=>{switch(b.channelName){case E.EMAIL:case E.SMTP:return t(c,{width:11,height:11});case E.FACEBOOK:case E.FACEBOOK_CATALOG:case E.MESSENGER:return t(l,{width:11,height:11});case E.INSTAGRAM:return t(h,{width:11,height:11});case E.WHATSAPP:return t(m,{width:11,height:11});case E.GMAIL:return t(d,{width:11,height:11});case E.TASKS:return t(p,{width:11,height:11});case E.BIK_LIVECHAT:return t(n,{width:11,height:11})}})()})),b.status&&t("div",Object.assign({style:{position:"absolute",left:S[b.size]+"px",top:S[b.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.surface.standard,alignItems:"center"}},{children:b.status?t("div",{style:{backgroundColor:"ONLINE"===b.status?a.special.whatsapp.brand:a.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null}))]}))};export{S as AVATAR_SIZE_VS_ICON_SIZE_MAP,f as Avatar,y as BACKGROUND_VS_TEXT_COLOR_MAP,E as MESSAGE_CHANNELS};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as s}from"react";import{AvatarStyle as i}from"./Avatar.styled.js";import{SIZE as o,AVATAR_BACKGROUND as r,AVATAR_TYPES as a,AVATAR_SIZE_MAP as n}from"./AvatarHelper.js";import{BodyTiny as c,TitleSmall as l,TitleMedium as d}from"../TypographyStyle.js";import{COLORS as h}from"../../constants/Theme.js";import p from"../../assets/icons/bik_livechat.svg.js";import m from"../../assets/icons/email-channel.svg.js";import g from"../../assets/icons/facebook_channel.svg.js";import u from"../../assets/icons/gmail.svg.js";import b from"../../assets/icons/instagram-channel.svg.js";import A from"../../assets/icons/task.svg.js";import I from"../../assets/icons/whatsapp_color.svg.js";const y={[o.SMALL]:16,[o.MEDIUM]:20,[o.INBOX]:24,[o.LARGE]:32},S={[r.LIGHT]:h.content.secondary,[r.WHITE]:h.content.secondary,[r.DARK]:h.surface.standard};var f;!function(t){t.INSTAGRAM="instagram",t.MESSENGER="messenger",t.WHATSAPP="whatsapp",t.GMAIL="gmail",t.LIVECHAT="livechat",t.GOOGLE_BUSINESS_CHAT="gbm",t.SHOPIFY="shopify",t.FACEBOOK="facebook",t.EMAIL="email",t.SMTP="smtp",t.FACEBOOK_CATALOG="facebook-catalog",t.TASKS="tasks",t.BIK_LIVECHAT="livechat"}(f||(f={}));const E=r=>{const[E,j]=s(!1),v=()=>{const t=(r.name||"").split(".").join(" ").split(" ").map((t=>t.charAt(0).toUpperCase())).slice(0,2).join("");return r.size===o.SMALL?e(c,Object.assign({style:{color:S[r.background]}},{children:t})):r.size===o.MEDIUM||r.size===o.INBOX?e(l,Object.assign({style:{color:S[r.background]}},{children:t})):r.size===o.LARGE?e(d,Object.assign({style:{color:S[r.background]}},{children:t})):void 0};return t("div",Object.assign({style:{position:"relative"}},{children:[t(i,Object.assign({type:r.type===a.IMAGE&&(E||!r.photoUrl)&&r.useNameFallback&&r.name?a.INITIALS:r.type,size:r.size,background:r.background},{children:[r.type===a.IMAGE&&(r.useNameFallback&&(!r.photoUrl||E)&&r.name?e("div",{children:v()}):r.useNameFallback&&r.photoUrl&&!E?e("img",{alt:"",width:n[r.size],height:n[r.size],style:{borderRadius:(null==r?void 0:r.borderRadius)||"50%",objectFit:"contain"},src:r.photoUrl,onError:()=>{j(!0)}}):e("img",{alt:"",width:n[r.size],height:n[r.size],style:{borderRadius:(null==r?void 0:r.borderRadius)||"50%",objectFit:"contain"},src:r.photoUrl})),r.type===a.INITIALS&&e("div",{children:v()}),r.type===a.ICON&&r.icon&&e(r.icon,{width:y[r.size],height:y[r.size],color:S[r.background]})]})),r.inboxSettings&&e("div",Object.assign({style:{position:"absolute",left:y[r.size]+"px",top:y[r.size]+"px",width:14,height:14,borderRadius:(null==r?void 0:r.borderRadius)||"50%",display:"flex",justifyContent:"center",backgroundColor:r.inboxSettings.isSelected?r.inboxSettings.isComments?h.content.primary:h.background.brandLight:r.inboxSettings.isComments?h.content.primary:h.surface.standard,alignItems:"center"}},{children:(()=>{switch(r.channelName){case f.EMAIL:case f.SMTP:return e(m,{width:11,height:11});case f.FACEBOOK:case f.FACEBOOK_CATALOG:case f.MESSENGER:return e(g,{width:11,height:11});case f.INSTAGRAM:return e(b,{width:11,height:11});case f.WHATSAPP:return e(I,{width:11,height:11});case f.GMAIL:return e(u,{width:11,height:11});case f.TASKS:return e(A,{width:11,height:11});case f.BIK_LIVECHAT:return e(p,{width:11,height:11})}})()})),r.status&&e("div",Object.assign({style:{position:"absolute",left:y[r.size]+"px",top:y[r.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:h.surface.standard,alignItems:"center"}},{children:r.status?e("div",{style:{backgroundColor:"ONLINE"===r.status?h.special.whatsapp.brand:h.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null}))]}))};export{y as AVATAR_SIZE_VS_ICON_SIZE_MAP,E as Avatar,S as BACKGROUND_VS_TEXT_COLOR_MAP,f as MESSAGE_CHANNELS};

package/dist/esm/components/avatar/AvatarHelper.d.ts

@@ -4,7 +4,6 @@ export declare enum AVATAR_TYPES {
     ICON = "ICON"
 }
 export declare enum SIZE {
-    EXTRA_SMALL = "EXTRA_SMALL",
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE",
@@ -16,7 +15,6 @@ export declare enum AVATAR_BACKGROUND {
     WHITE = "WHITE"
 }
 export declare const AVATAR_SIZE_MAP: {
-    EXTRA_SMALL: number;
     SMALL: number;
     MEDIUM: number;
     LARGE: number;

package/dist/esm/components/avatar/AvatarHelper.js

@@ -1 +1 @@
-var I,L,A;!function(I){I.IMAGE="IMAGE",I.INITIALS="INITIALS",I.ICON="ICON"}(I||(I={})),function(I){I.EXTRA_SMALL="EXTRA_SMALL",I.SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX"}(L||(L={})),function(I){I.LIGHT="LIGHT",I.DARK="DARK",I.WHITE="WHITE"}(A||(A={}));const M={[L.EXTRA_SMALL]:16,[L.SMALL]:24,[L.MEDIUM]:40,[L.LARGE]:64,[L.INBOX]:30};export{A as AVATAR_BACKGROUND,M as AVATAR_SIZE_MAP,I as AVATAR_TYPES,L as SIZE};
+var I,L,A;!function(I){I.IMAGE="IMAGE",I.INITIALS="INITIALS",I.ICON="ICON"}(I||(I={})),function(I){I.SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX"}(L||(L={})),function(I){I.LIGHT="LIGHT",I.DARK="DARK",I.WHITE="WHITE"}(A||(A={}));const M={[L.SMALL]:24,[L.MEDIUM]:40,[L.LARGE]:64,[L.INBOX]:30};export{A as AVATAR_BACKGROUND,M as AVATAR_SIZE_MAP,I as AVATAR_TYPES,L as SIZE};

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

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

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

@@ -3,8 +3,6 @@ export * from './BikLayout';
 export * from './BikProfile';
 export * from './SimpleSidebar';
 export * from './BikSidebar';
-export * from './BikSidebarV2/BikSidebarV2';
-export * from './BikSidebarV2/SidebarV2.model';
 export * from './FeatureModal';
 export * from './SidebarSkeleton';
 export * from './ShowShopifyRestrictedModal';

package/dist/esm/components/button/Button.styled.d.ts

@@ -10,7 +10,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     inverse?: boolean | undefined;
     disabled?: boolean | undefined;
     matchParentWidth?: boolean | undefined;
-    version?: "1.0" | "2.0" | "3.0" | undefined;
+    version?: "1.0" | "2.0" | undefined;
     darkMode?: boolean | undefined;
     activated?: boolean | undefined;
     error?: boolean | undefined;

package/dist/esm/components/button/model.d.ts

@@ -66,7 +66,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      */
     matchParentWidth?: boolean;
     subtitle?: string;
-    version?: '1.0' | '2.0' | '3.0';
+    version?: '1.0' | '2.0';
     darkMode?: boolean;
     activated?: boolean;
     error?: boolean;

package/dist/esm/components/button/themes.d.ts

@@ -8,7 +8,7 @@ export declare const GetButtonTextComponent: (size: Size, type: Type, disabled?:
     color?: string | undefined;
 }, never>;
 export declare const getBorderColor: (type: Type, inverse?: boolean, error?: boolean) => string;
-export declare const getBorder: (version: '1.0' | '2.0' | '3.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
+export declare const getBorder: (version: '1.0' | '2.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
 export declare const getLinearGradientValue: (size: Size) => string;
 /**
  * Adjusts the brightness of a given hex color by a specified percentage.

package/dist/esm/components/country-code-picker/CountryCodePicker.d.ts

@@ -2,7 +2,7 @@ import { Placement, PositioningStrategy } from '@popperjs/core';
 import React from 'react';
 import { CountryCode } from "./CountryCodePicker.modal";
 export declare const CountryCodePicker: React.FC<{
-    version: '1.0' | '2.0' | '3.0';
+    version: '1.0' | '2.0';
     onCountrySelect: (country: CountryCode) => void;
     selectedCountry: CountryCode;
     popoverWidth?: string;

package/dist/esm/components/country-code-picker/CountryPicker.d.ts

@@ -8,7 +8,7 @@ export interface CountryPickerProps {
     /**
      * Version of the dropdown popover to use
      */
-    version: '1.0' | '2.0' | '3.0';
+    version: '1.0' | '2.0';
     /**
      * Callback function when a country is selected
      */

package/dist/esm/components/dropdown/Dropdown.js

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,Fragment as n,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as r,useEffect as l}from"react";import{COLORS as s,BASE_COLORS as a}from"../../constants/Theme.js";import d from"../../assets/icons/chevronDown.svg.js";import{Input as c}from"../input/Input.js";import{InputStyleContext as p}from"../input/context/InputStyleProvider.js";import h from"./ChipInput.js";import{DropdownPopover as u}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as v}from"./OpenedDropdown/utils/iterationOnOptions.js";function m(){}const g=g=>{var w,f,b,x,j,{placeHolder:O,size:I,onSelect:y,defaultOptions:S,disabled:H,noErrorHint:T,placeHolderHeight:D,showPlaceholderWhenSelected:P=!1,inputStyle:C={},inputType:M="default",onDeleteChip:W,truncatedText:E,showLeadingIconInPlaceholder:L=!1,showTrailingIconPlaceholder:k=!1,showLabelsOnMoreHover:z=!1,value:A,showSelected:_=!1}=g,N=e(g,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected"]);const[U,V]=i(!1),[q,B]=i(!1),F=null!=I?I:"default",G=r(),[J,K]=i(null!=S?S:[]);l((()=>{var e;const o=[];null===(e=null==N?void 0:N.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),K([...o])}),[N.options]),l((()=>{S&&K([...S])}),[S]);const Q=v(J),R=P?O:null!==(w=null!=Q?Q:O)&&void 0!==w?w:"Select an option",X=N.buttonWidth,Y=null!==(f=null!=X?X:N.width)&&void 0!==f?f:"100%",Z=null!==(b=N.dropdownWidth)&&void 0!==b?b:Y;return o(n,{children:o(p.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:D||("x-small"===F?24:"small"===F?32:48),width:Y},X?{maxWidth:X}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===F?"4px 8px":"6px 8px",backgroundColor:"3.0"===N.version?U||q?s.surface.hovered:s.surface.standard:_&&void 0!==A?a.positive[100]:q?s.background.inactive:s.surface.standard,transition:"background-color 0.3s ease"}),C),input:{minHeight:"100%",maxWidth:"100%",color:_&&void 0!==A?s.content.positive:"inherit"}}},{children:o("div",Object.assign({onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1),style:N.width?{width:N.width}:void 0},{children:t(u,Object.assign({"data-test":N["data-test"],ref:G,onSelect:function(e){Array.isArray(e)?K([...e]):K([e]),null==y||y(e)},disabled:H,onDropdownVisbilityChange:e=>V(e)},N,{width:Z},{children:["default"==M&&o(c,{version:N.version,noErrorHint:T,state:H?"disabled":"none",value:void 0===A?R:A,errorMessage:N.error,variant:F,placeholder:null!=O?O:"Select an option",onChangeText:m,leftIcon:L&&(null===(x=J[0])||void 0===x?void 0:x.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=J[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t("div",Object.assign({style:{display:"flex"}},{children:[k&&(null===(e=J[0])||void 0===e?void 0:e.trailingIcon),o(d,{style:{transform:U?"rotate(180deg)":"rotate(0deg)"},onClick:m,width:"x-small"===F?16:"small"===F?20:24,height:"x-small"===F?16:"small"===F?20:24,color:_?s.content.positive:s.content.primary})]}))}},truncateText:null==E||E}),"chip"==M&&o(h,{placeholder:null!=O?O:"Select options",chips:J,onDeleteChip:e=>{null==W||W(e)},errorMessage:N.error,isDropdownOpened:U,sizeToUse:F,containerStyle:{width:null!==(j=N.width)&&void 0!==j?j:"100%",cursor:"pointer"},showLabelsOnMoreHover:z})]}))}))}))})};g.displayName="Dropdown";export{g as Dropdown};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,Fragment as n,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as l,useEffect as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import a from"../../assets/icons/chevronDown.svg.js";import{Input as d}from"../input/Input.js";import{InputStyleContext as c}from"../input/context/InputStyleProvider.js";import p from"./ChipInput.js";import{DropdownPopover as h}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u}from"./OpenedDropdown/utils/iterationOnOptions.js";function v(){}const m=m=>{var g,f,w,b,x,{placeHolder:j,size:O,onSelect:I,defaultOptions:y,disabled:S,noErrorHint:H,placeHolderHeight:T,showPlaceholderWhenSelected:D=!1,inputStyle:E={},inputType:P="default",onDeleteChip:C,truncatedText:M,showLeadingIconInPlaceholder:W=!1,showTrailingIconPlaceholder:L=!1,showLabelsOnMoreHover:k=!1,value:z,showSelected:A=!1}=m,_=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected"]);const[N,U]=i(!1),[V,q]=i(!1),B=null!=O?O:"default",F=l(),[G,J]=i(null!=y?y:[]);r((()=>{var e;const o=[];null===(e=null==_?void 0:_.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),J([...o])}),[_.options]),r((()=>{y&&J([...y])}),[y]);const K=u(G),Q=D?j:null!==(g=null!=K?K:j)&&void 0!==g?g:"Select an option",R=_.buttonWidth,X=null!==(f=null!=R?R:_.width)&&void 0!==f?f:"100%",Y=null!==(w=_.dropdownWidth)&&void 0!==w?w:X;return o(n,{children:o(c.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:T||("x-small"===B?24:"small"===B?32:48),width:X},R?{maxWidth:R}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===B?"4px 8px":"6px 8px",backgroundColor:A&&void 0!==z?s.background.positive.light:V?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease"}),E),input:{minHeight:"100%",maxWidth:"100%",color:A&&void 0!==z?s.content.positive:"inherit"}}},{children:o("div",Object.assign({onMouseEnter:()=>q(!0),onMouseLeave:()=>q(!1),style:_.width?{width:_.width}:void 0},{children:t(h,Object.assign({"data-test":_["data-test"],ref:F,onSelect:function(e){Array.isArray(e)?J([...e]):J([e]),null==I||I(e)},disabled:S,onDropdownVisbilityChange:e=>U(e)},_,{width:Y},{children:["default"==P&&o(d,{version:_.version,noErrorHint:H,state:S?"disabled":"none",value:void 0===z?Q:z,errorMessage:_.error,variant:B,placeholder:null!=j?j:"Select an option",onChangeText:v,leftIcon:W&&(null===(b=G[0])||void 0===b?void 0:b.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=G[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t("div",Object.assign({style:{display:"flex"}},{children:[L&&(null===(e=G[0])||void 0===e?void 0:e.trailingIcon),o(a,{style:{transform:N?"rotate(180deg)":"rotate(0deg)"},onClick:v,width:"x-small"===B?16:"small"===B?20:24,height:"x-small"===B?16:"small"===B?20:24,color:A?s.content.positive:s.content.primary})]}))}},truncateText:null==M||M}),"chip"==P&&o(p,{placeholder:null!=j?j:"Select options",chips:G,onDeleteChip:e=>{null==C||C(e)},errorMessage:_.error,isDropdownOpened:N,sizeToUse:B,containerStyle:{width:null!==(x=_.width)&&void 0!==x?x:"100%",cursor:"pointer"},showLabelsOnMoreHover:k})]}))}))}))})};m.displayName="Dropdown";export{m as Dropdown};

package/dist/esm/components/dropdown/DropdownPopover/index.js

@@ -1 +1 @@
-import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import r,{useState as i,useRef as l,useImperativeHandle as s,useEffect as a}from"react";import{usePopper as d}from"react-popper";import{DropShadow as p}from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{COLORS as u}from"../../../constants/Theme.js";import{OverLapAbs as v,OpenDropdownContainer as m}from"../Common.styled.js";import{OpenedDropdown as b}from"../OpenedDropdown/components/OpennedDropdown.js";const g=r.forwardRef(((r,g)=>{var{children:h,onDropdownVisbilityChange:w,version:f="1.0",tooltipContent:j,tooltipDirection:O,showTooltipArrow:D,isChildLoading:C,forceOpen:y}=r,S=o(r,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const x=g,[R,E]=i(!1),[z,L]=i(!1),[M,T]=i(null),[k,A]=i(null),I=l(null),{styles:V,attributes:_}=d(M,k,{placement:S.placement,strategy:S.strategy}),N=o=>{var e,n;"2.0"===f&&S.isMultiSelect&&o&&(null===(e=S.onSelect)||void 0===e||e.call(S,[...o])),E(!1),null===(n=null==S?void 0:S.onClose)||void 0===n||n.call(S)};s(x,(()=>({openDropdown:R})),[]),a((()=>{(null==x?void 0:x.current)&&(x.current.openDropdown=R)}),[R]),a((()=>{null==w||w(R)}),[R]);const P=()=>{var o;return t(n,{children:[t("div",Object.assign({style:Object.assign({position:"relative"},"3.0"===f&&{backgroundColor:R||z?u.surface.hovered:u.surface.standard,transition:"background-color 0.3s ease",borderRadius:4}),ref:T,onMouseEnter:"3.0"===f?()=>L(!0):void 0,onMouseLeave:"3.0"===f?()=>L(!1):void 0},{children:[e(v,Object.assign({ref:I,allowEvents:S.allowEvents,disabled:S.disabled,onClick:o=>{var e;null===(e=S.onDropdownOpen)||void 0===e||e.call(S),R?(E(!1),o.preventDefault()):S.disabled||E(!0)},isChildLoading:C},{children:S.allowEvents?h:null})),S.allowEvents?null:h]})),(R||y)&&e(m,Object.assign({ref:A,style:Object.assign(Object.assign({},V.popper),{zIndex:null!==(o=S.dropdownZIndex)&&void 0!==o?o:3})},_.popper,{"data-test":S["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:"3.0"===f?4:8,boxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.12)"}},{children:e(b,Object.assign({},S,{onSelect:o=>{var e;"2.0"===f&&S.isMultiSelect||(null===(e=S.onSelect)||void 0===e||e.call(S,o),E(!1))},onClose:N,version:f,headerRef:I,zeroState:null==S?void 0:S.zeroState,isDraggable:S.isDraggable,onOptionsReorder:S.onOptionsReorder}))}))}))]})};return e(n,{children:R||y||void 0===j?P():e(c,Object.assign({body:j,placement:O,hideArrow:!D},{children:e("div",Object.assign({"data-test":S["data-test"]},{children:P()}))}))})}));g.displayName="DropdownPopover";export{g as DropdownPopover};
+import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import l,{useState as r,useRef as i,useImperativeHandle as s,useEffect as d}from"react";import{usePopper as a}from"react-popper";import{DropShadow as p}from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{OverLapAbs as v,OpenDropdownContainer as u}from"../Common.styled.js";import{OpenedDropdown as m}from"../OpenedDropdown/components/OpennedDropdown.js";const w=l.forwardRef(((l,w)=>{var{children:h,onDropdownVisbilityChange:b,version:g="1.0",tooltipContent:f,tooltipDirection:O,showTooltipArrow:j,isChildLoading:D,forceOpen:y}=l,C=o(l,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const S=w,[R,x]=r(!1),[z,E]=r(null),[A,L]=r(null),T=i(null),{styles:I,attributes:M}=a(z,A,{placement:C.placement,strategy:C.strategy}),V=o=>{var e,t;"2.0"===g&&C.isMultiSelect&&o&&(null===(e=C.onSelect)||void 0===e||e.call(C,[...o])),x(!1),null===(t=null==C?void 0:C.onClose)||void 0===t||t.call(C)};s(S,(()=>({openDropdown:R})),[]),d((()=>{(null==S?void 0:S.current)&&(S.current.openDropdown=R)}),[R]),d((()=>{null==b||b(R)}),[R]);const _=()=>{var o;return n(t,{children:[n("div",Object.assign({style:{position:"relative"},ref:E},{children:[e(v,Object.assign({ref:T,allowEvents:C.allowEvents,disabled:C.disabled,onClick:o=>{var e;null===(e=C.onDropdownOpen)||void 0===e||e.call(C),R?(x(!1),o.preventDefault()):C.disabled||x(!0)},isChildLoading:D},{children:C.allowEvents?h:null})),C.allowEvents?null:h]})),(R||y)&&e(u,Object.assign({ref:L,style:Object.assign(Object.assign({},I.popper),{zIndex:null!==(o=C.dropdownZIndex)&&void 0!==o?o:3})},M.popper,{"data-test":C["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(m,Object.assign({},C,{onSelect:o=>{var e;"2.0"===g&&C.isMultiSelect||(null===(e=C.onSelect)||void 0===e||e.call(C,o),x(!1))},onClose:V,version:g,headerRef:T,zeroState:null==C?void 0:C.zeroState,isDraggable:C.isDraggable,onOptionsReorder:C.onOptionsReorder}))}))}))]})};return e(t,{children:R||y||void 0===f?_():e(c,Object.assign({body:f,placement:O,hideArrow:!j},{children:e("div",Object.assign({"data-test":C["data-test"]},{children:_()}))}))})}));w.displayName="DropdownPopover";export{w as DropdownPopover};

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"../../../../assets/icons/errorInfo.svg.js";import n from"../../../../assets/icons/refresh-purple.svg.js";import{useCallback as r,useState as i,useRef as s,useEffect as l}from"react";import{ZeroState as c}from"../../../zeroState/ZeroState.js";import{useOutside as a}from"../../../../hooks/useOutside.js";import{COLORS as u}from"../../../../constants/Theme.js";import{useDropdown as d}from"../../hooks/useDropdown.js";import{Description as p}from"./description/Description.js";import{FreeFormMenu as h}from"./menu/FreeFormMenu.js";import{MenuList as g}from"./menu/MenuList.js";import{SelectAllMenu as m}from"./menu/SelectAllMenu.js";import f from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as b,MenuListContainer as v}from"./OpennedDropdown.styled.js";import{SearchBox as S}from"./searchbox/SearchBox.js";import{SearchZeroState as j}from"./searchbox/SearchZeroState.js";const w=304,O=290,y=y=>{let{options:x,isSearchable:C,isMultiSelect:k,maxSelections:D,width:L,allowFreeForm:I,height:T,onClose:E,onSelect:M,onSearch:F,version:A,skipSorting:B,headerRef:H,hideSelectAll:R,primaryButtonText:q,onInfiniteScroll:z,onMultiSelectClear:P,onDropdownItemClick:V,buttonOptions:W,isSearchLoading:Z,isOptionsLoading:$,optionsErrorState:K,disableSearchOptions:N,disableSearchedOptionExcept:U,useDefaultCursor:G,containerStyle:J={},zeroState:Q,isDraggable:X=!1,onOptionsReorder:Y,hideClearButton:_=!1,showCheckboxForCustomElement:ee=!1}=y;var te;const oe=r((e=>{if(!X||!k)return e;const t=[],o=[];return e.forEach((e=>{if(e.options)o.push(e);else{e.selected?t.push(e):o.push(e)}})),[...t,...o]}),[X,k]),[ne,re]=i((()=>oe(x))),ie=s(ne),se=s(!1),le=s(Y);l((()=>{re(oe(x))}),[x,oe]),l((()=>{ie.current=ne}),[ne]),l((()=>{le.current=Y}),[Y]),l((()=>()=>{se.current&&le.current&&le.current(ie.current)}),[]);const ce=r((e=>{re(e),"2.0"===A?null==Y||Y(e):se.current=!0}),[Y,A]),ae=X?ne:x,{dropdownOptions:ue,search:de,searchedString:pe,searchedOptions:he,searchError:ge,retrySearch:me,onApplyHandler:fe,selectAllHandler:be,onMultiSelectClear:ve,onFreeFormSelect:Se,onMultiSelectApply:je,latestDropdownOptionsRef:we,getSelectedOptions:Oe,getCurrentSelectionCount:ye}=d(A,ae,M,B||X,k,F,N,U,D),[xe,Ce]=i(null!=L?L:O),[ke,De]=i(null),[Le,Ie]=i(-1),Te=s(null),Ee=s([]),Me=s(null);a(Te,(()=>{if(De(null),k&&"2.0"===A){const e=Oe(we.current);null==E||E(e)}else null==E||E(ue)}),[H,Ee]),l((()=>{const e=setTimeout((()=>{Te.current&&Te.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);l((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const o=e;o.disabled||t.push(o)}})),t})(pe&&F?he:ue);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),Ie((e=>{const o=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("ArrowUp"===e.key)e.preventDefault(),Ie((e=>{const o=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("Enter"===e.key&&Le>=0){e.preventDefault();const o=t[Le];o&&(fe(Object.assign(Object.assign({},o),{selected:!o.selected})),V&&V(o))}},t=Te.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[Le,pe,he,ue,F,fe,V]);const Fe=null!=T?T:w,Ae="number"==typeof Fe?C&&k?Fe-96:C&&!k||!C&&k?Fe-48:Fe:Fe;l((()=>{const e=null!=L?L:O;if(null===ke)Ce(e);else if("number"==typeof e)Ce(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));Ce(t)}}),[ke]);const Be=[],He=(e=>{if(!k||!D&&0!==D)return e;const t=ye(ue)>=D;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const o=e;return Object.assign(Object.assign({},o),{disabled:o.disabled||!o.selected&&t})}})):e})((pe&&F?he:ue).map((e=>{var t,o;if(pe&&!F){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))&&(Be.push(!pe||e.label===pe),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(pe.toLowerCase()))?(Be.push(!pe||e.label===pe),e):null}return e})).filter((e=>null!==e))),Re=!!C&&pe&&0===He.length,qe=!pe&&!!$,ze=!pe&&!!K&&!qe,Pe=!(pe||He.length||qe||ze),Ve=qe||ze||Pe,We=(null==Q?void 0:Q.title)||"No results found",Ze=(null==Q?void 0:Q.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance.",$e=(null==K?void 0:K.title)||"Failed to load options",Ke=(null==K?void 0:K.subTitle)||"Something went wrong while fetching the list. Please try again",Ne={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:u.background.inverseLight,customIconColor:u.background.inverseLight,LeadingIcon:n},Ue=Object.assign({IconHolderStyle:{background:u.background.negative.light},Icon:e(o,{color:u.content.negative,width:24,height:24})},K);Ue.actionButton=Object.assign(Object.assign({},Ne),null!==(te=null==K?void 0:K.actionButton)&&void 0!==te?te:{});const Ge=qe?void 0:ze?Ue:Q;return t(b,Object.assign({version:A,ref:Te,tabIndex:-1,style:Object.assign(Object.assign({width:xe},J),{outline:"none"})},{children:[t("div",Object.assign({style:{width:ke?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!C&&e(S,{onSearch:de,version:A}),Ve?e("div",Object.assign({style:{height:Fe,display:"flex",background:u.background.base}},{children:e(c,Object.assign({},null!=Ge?Ge:{},{isLoading:qe,title:ze?$e:We,subTitle:ze?Ke:Ze}))})):t(v,Object.assign({minHeight:Fe,maxHeight:Ae,ref:Me},{children:[!!k&&!Re&&!R&&e(m,{version:A,options:pe&&F?he:ue,onSelect:be}),!I&&Re&&e(j,{isLoading:Z,errorMessage:ge,onRetry:me,height:Ae,searchedString:pe,containerWidth:L,version:A}),I&&(Re||!!Be.length&&Be.every((e=>!1===e)))&&e(h,{version:A,isMultiSelect:k,onSelect:Se,searchedString:pe}),e(g,{onInfiniteScroll:z,onDropdownItemClick:V,version:A,onSelect:fe,showDescription:function(e,t){De(e&&t?{title:e,description:t}:null)},isMultiSelect:k,options:He,useDefaultCursor:G,ref:Ee,focusedIndex:Le,isDraggable:X,onOptionsReorder:ce,showCheckboxForCustomElement:ee})]})),!!k&&!Ve&&"2.0"!==A&&e(f,{onClear:()=>{ve(),null==P||P()},onApply:je,list:pe&&F?he:ue,buttonText:q,buttonOptions:W,hideClearButton:_})]})),!!ke&&e(p,{title:ke.title,description:ke.description,version:A})]}))};export{y as OpenedDropdown};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"../../../../assets/icons/errorInfo.svg.js";import n from"../../../../assets/icons/refresh-purple.svg.js";import{useCallback as r,useState as i,useRef as s,useEffect as l}from"react";import{ZeroState as c}from"../../../zeroState/ZeroState.js";import{useOutside as a}from"../../../../hooks/useOutside.js";import{COLORS as u}from"../../../../constants/Theme.js";import{useDropdown as d}from"../../hooks/useDropdown.js";import{Description as p}from"./description/Description.js";import{FreeFormMenu as h}from"./menu/FreeFormMenu.js";import{MenuList as g}from"./menu/MenuList.js";import{SelectAllMenu as m}from"./menu/SelectAllMenu.js";import f from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as b,MenuListContainer as v}from"./OpennedDropdown.styled.js";import{SearchBox as S}from"./searchbox/SearchBox.js";import{SearchZeroState as j}from"./searchbox/SearchZeroState.js";const w=304,O=290,y=y=>{let{options:x,isSearchable:C,isMultiSelect:k,maxSelections:D,width:L,allowFreeForm:I,height:T,onClose:E,onSelect:M,onSearch:F,version:A,skipSorting:B,headerRef:H,hideSelectAll:R,primaryButtonText:q,onInfiniteScroll:z,onMultiSelectClear:P,onDropdownItemClick:V,buttonOptions:W,isSearchLoading:Z,isOptionsLoading:$,optionsErrorState:K,disableSearchOptions:N,disableSearchedOptionExcept:U,useDefaultCursor:G,containerStyle:J={},zeroState:Q,isDraggable:X=!1,onOptionsReorder:Y,hideClearButton:_=!1,showCheckboxForCustomElement:ee=!1}=y;var te;const oe=r((e=>{if(!X||!k)return e;const t=[],o=[];return e.forEach((e=>{if(e.options)o.push(e);else{e.selected?t.push(e):o.push(e)}})),[...t,...o]}),[X,k]),[ne,re]=i((()=>oe(x))),ie=s(ne),se=s(!1),le=s(Y);l((()=>{re(oe(x))}),[x,oe]),l((()=>{ie.current=ne}),[ne]),l((()=>{le.current=Y}),[Y]),l((()=>()=>{se.current&&le.current&&le.current(ie.current)}),[]);const ce=r((e=>{re(e),"2.0"===A?null==Y||Y(e):se.current=!0}),[Y,A]),ae=X?ne:x,{dropdownOptions:ue,search:de,searchedString:pe,searchedOptions:he,searchError:ge,retrySearch:me,onApplyHandler:fe,selectAllHandler:be,onMultiSelectClear:ve,onFreeFormSelect:Se,onMultiSelectApply:je,latestDropdownOptionsRef:we,getSelectedOptions:Oe,getCurrentSelectionCount:ye}=d(A,ae,M,B||X,k,F,N,U,D),[xe,Ce]=i(null!=L?L:O),[ke,De]=i(null),[Le,Ie]=i(-1),Te=s(null),Ee=s([]),Me=s(null);a(Te,(()=>{if(De(null),k&&"2.0"===A){const e=Oe(we.current);null==E||E(e)}else null==E||E(ue)}),[H,Ee]),l((()=>{const e=setTimeout((()=>{Te.current&&Te.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);l((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const o=e;o.disabled||t.push(o)}})),t})(pe&&F?he:ue);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),Ie((e=>{const o=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("ArrowUp"===e.key)e.preventDefault(),Ie((e=>{const o=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("Enter"===e.key&&Le>=0){e.preventDefault();const o=t[Le];o&&(fe(Object.assign(Object.assign({},o),{selected:!o.selected})),V&&V(o))}},t=Te.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[Le,pe,he,ue,F,fe,V]);const Fe=null!=T?T:w,Ae="number"==typeof Fe?C&&k?Fe-96:C&&!k||!C&&k?Fe-48:Fe:Fe;l((()=>{const e=null!=L?L:O;if(null===ke)Ce(e);else if("number"==typeof e)Ce(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));Ce(t)}}),[ke]);const Be=[],He=(e=>{if(!k||!D&&0!==D)return e;const t=ye(ue)>=D;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const o=e;return Object.assign(Object.assign({},o),{disabled:o.disabled||!o.selected&&t})}})):e})((pe&&F?he:ue).map((e=>{var t,o;if(pe&&!F){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))&&(Be.push(!pe||e.label===pe),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(pe.toLowerCase()))?(Be.push(!pe||e.label===pe),e):null}return e})).filter((e=>null!==e))),Re=!!C&&pe&&0===He.length,qe=!pe&&!!$,ze=!pe&&!!K&&!qe,Pe=!(pe||He.length||qe||ze),Ve=qe||ze||Pe,We=(null==Q?void 0:Q.title)||"No results found",Ze=(null==Q?void 0:Q.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance.",$e=(null==K?void 0:K.title)||"Failed to load options",Ke=(null==K?void 0:K.subTitle)||"Something went wrong while fetching the list. Please try again",Ne={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:u.background.inverseLight,customIconColor:u.background.inverseLight,LeadingIcon:n},Ue=Object.assign({IconHolderStyle:{background:u.background.negative.light},Icon:e(o,{color:u.content.negative,width:24,height:24})},K);Ue.actionButton=Object.assign(Object.assign({},Ne),null!==(te=null==K?void 0:K.actionButton)&&void 0!==te?te:{});const Ge=qe?void 0:ze?Ue:Q;return t(b,Object.assign({version:A,ref:Te,tabIndex:-1,style:Object.assign(Object.assign({width:xe},J),{outline:"none"})},{children:[t("div",Object.assign({style:{width:ke?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!C&&e(S,{onSearch:de,version:A}),Ve?e("div",Object.assign({style:{height:Fe,display:"flex",background:u.background.base}},{children:e(c,Object.assign({},null!=Ge?Ge:{},{isLoading:qe,title:ze?$e:We,subTitle:ze?Ke:Ze}))})):t(v,Object.assign({minHeight:Fe,maxHeight:Ae,ref:Me},{children:[!!k&&!Re&&!R&&e(m,{version:A,options:pe&&F?he:ue,onSelect:be}),!I&&Re&&e(j,{isLoading:Z,errorMessage:ge,onRetry:me,height:Ae,searchedString:pe,containerWidth:L}),I&&(Re||!!Be.length&&Be.every((e=>!1===e)))&&e(h,{version:A,isMultiSelect:k,onSelect:Se,searchedString:pe}),e(g,{onInfiniteScroll:z,onDropdownItemClick:V,version:A,onSelect:fe,showDescription:function(e,t){De(e&&t?{title:e,description:t}:null)},isMultiSelect:k,options:He,useDefaultCursor:G,ref:Ee,focusedIndex:Le,isDraggable:X,onOptionsReorder:ce,showCheckboxForCustomElement:ee})]})),!!k&&!Ve&&"2.0"!==A&&e(f,{onClear:()=>{ve(),null==P||P()},onApply:je,list:pe&&F?he:ue,buttonText:q,buttonOptions:W,hideClearButton:_})]})),!!ke&&e(p,{title:ke.title,description:ke.description,version:A})]}))};export{y as OpenedDropdown};

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.d.ts

@@ -1,5 +1,5 @@
 export declare const OpennedDropdownContainer: import("styled-components").StyledComponent<"div", any, {
-    version?: "1.0" | "2.0" | "3.0" | undefined;
+    version?: "1.0" | "2.0" | undefined;
 }, never>;
 export declare const ItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuListContainer: import("styled-components").StyledComponent<"div", any, {

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js

@@ -1,8 +1,7 @@
 import o from"styled-components";import{COLORS as r}from"../../../../constants/Theme.js";const e=o.div`
 	border-radius: ${o=>"2.0"===o.version?8:4}px;
-	border: ${o=>"2.0"===o.version||"3.0"===o.version?0:1}px
-		solid ${r.stroke.primary};
-	box-shadow: ${o=>"3.0"===o.version?"0px 2px 8px 0px rgba(0, 0, 0, 0.12)":"none"};
+	border: ${o=>"2.0"===o.version?0:1}px solid
+		${r.stroke.primary};
 	max-height: 480px;
 	overflow: hidden;
 	display: flex;

package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export declare const Description: React.FC<{
     title: string;
     description: string;
-    version?: '1.0' | '2.0' | '3.0';
+    version?: '1.0' | '2.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.styled.d.ts

@@ -1,3 +1,3 @@
 export declare const DescriptionContainer: import("styled-components").StyledComponent<"div", any, {
-    version?: "1.0" | "2.0" | "3.0" | undefined;
+    version?: "1.0" | "2.0" | undefined;
 }, never>;

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

@@ -3,5 +3,5 @@ export declare const FreeFormMenu: React.FC<{
     isMultiSelect?: boolean;
     searchedString: string;
     onSelect: (isChecked: boolean) => void;
-    version?: '1.0' | '2.0' | '3.0';
+    version?: '1.0' | '2.0';
 }>;

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

@@ -7,7 +7,7 @@ interface MenuItemProps {
     onSelect: (option: SingleOption) => void;
     onDropdownItemClick?: (option: SingleOption) => void;
     last?: boolean;
-    version?: '1.0' | '2.0' | '3.0';
+    version?: '1.0' | '2.0';
     useDefaultCursor?: boolean;
     isFocused?: boolean;
     dataIndex?: number;

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

@@ -1,5 +1,5 @@
 import{jsx as e,Fragment as o,jsxs as n}from"react/jsx-runtime";import t from"../../../../../assets/icons/chevronRight.svg.js";import{forwardRef as r,useState as i}from"react";import s from"styled-components";import{CheckBox as l}from"../../../../checkBox/CheckBox.js";import{ListItem as a}from"../../../../list-item/ListItem.js";import{Tooltip as d}from"../../../../tooltips/Tooltip.js";import{BodyCaption as c}from"../../../../TypographyStyle.js";import{DEFAULT_THEME as p,COLORS as g}from"../../../../../constants/Theme.js";import{FreeFormContainer as m}from"./FreeFormMenu.styled.js";const u=s(a)`
-	padding: ${e=>"3.0"===e.version?"8px":"2.0"===e.version?"8px 12px":"14px 16px"} !important;
+	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
 `,h=s.div`

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

@@ -5,7 +5,7 @@ interface MenuListProps {
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (optionSelect: SingleOption) => void;
-    version?: '1.0' | '2.0' | '3.0';
+    version?: '1.0' | '2.0';
     onInfiniteScroll?: () => void;
     onDropdownItemClick?: (option: DropdownOption) => void;
     useDefaultCursor?: boolean;

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

@@ -2,5 +2,5 @@ export declare const StyledGroupedLabel: import("styled-components").StyledCompo
     numberOfLines?: number | undefined;
     color?: string | undefined;
 } & {
-    version?: "1.0" | "2.0" | "3.0" | undefined;
+    version?: "1.0" | "2.0" | undefined;
 }, never>;

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

@@ -4,5 +4,5 @@ export type SelectAllCheckboxState = 'notSelected' | 'selectAll' | 'partiallySel
 export declare const SelectAllMenu: React.FC<{
     options: DropdownOption[];
     onSelect: (newState: SelectAllCheckboxState) => void;
-    version?: '1.0' | '2.0' | '3.0';
+    version?: '1.0' | '2.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const SearchBox: React.FC<{
     onSearch: (searchString: string) => void;
-    version?: '1.0' | '2.0' | '3.0';
+    version?: '1.0' | '2.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js

@@ -1 +1 @@
-import{jsx as o,Fragment as r}from"react/jsx-runtime";import{useState as t}from"react";import{IconButton as e}from"../../../../icon-button/IconButton.js";import{Input as n}from"../../../../input/Input.js";import{InputStyleContext as i}from"../../../../input/context/InputStyleProvider.js";import{COLORS as s}from"../../../../../constants/Theme.js";import c from"../../../../../assets/icons/cross.svg.js";import p from"../../../../../assets/icons/search.svg.js";const a=a=>{let{onSearch:m,version:l}=a;const[h,d]=t(""),[u,f]=t(!1);return o(i.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:`${"2.0"===l||"3.0"===l?.5:1}px solid ${s.stroke.primary}`,padding:""+("2.0"===l||"3.0"===l?"6px 8px":"14px 16px")},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:o(n,{noKeyDownChange:!0,skipFocus:!0,placeholder:"Search",variant:"2.0"===l||"3.0"===l?"small":"default",leftIcon:{icon:()=>o(p,{width:"2.0"===l||"3.0"===l?18:24,height:"2.0"===l||"3.0"===l?18:24,color:s.content.placeholder})},rightIcon:{icon:()=>h?o(e,{onClick:()=>{f(!0),m(""),d("")},Icon:c,width:"2.0"===l||"3.0"===l?18:24,height:"2.0"===l||"3.0"===l?18:24,iconColor:s.content.placeholder}):o(r,{})},reset:u,onChangeText:o=>{f(!1),d(o),m(o)}})}))};export{a as SearchBox};
+import{jsx as o,Fragment as r}from"react/jsx-runtime";import{useState as t}from"react";import{IconButton as e}from"../../../../icon-button/IconButton.js";import{Input as n}from"../../../../input/Input.js";import{InputStyleContext as i}from"../../../../input/context/InputStyleProvider.js";import{COLORS as s}from"../../../../../constants/Theme.js";import c from"../../../../../assets/icons/cross.svg.js";import p from"../../../../../assets/icons/search.svg.js";const a=a=>{let{onSearch:m,version:l}=a;const[h,d]=t(""),[u,f]=t(!1);return o(i.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:`${"2.0"===l?.5:1}px solid ${s.stroke.primary}`,padding:""+("2.0"===l?"6px 8px":"14px 16px")},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:o(n,{noKeyDownChange:!0,skipFocus:!0,placeholder:"Search",variant:"2.0"===l?"small":"default",leftIcon:{icon:()=>o(p,{width:"2.0"===l?18:24,height:"2.0"===l?18:24,color:s.content.placeholder})},rightIcon:{icon:()=>h?o(e,{onClick:()=>{f(!0),m(""),d("")},Icon:c,width:"2.0"===l?18:24,height:"2.0"===l?18:24,iconColor:s.content.placeholder}):o(r,{})},reset:u,onChangeText:o=>{f(!1),d(o),m(o)}})}))};export{a as SearchBox};

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts

@@ -6,5 +6,4 @@ export declare const SearchZeroState: React.FC<{
     containerWidth?: string;
     errorMessage?: string;
     onRetry?: () => void;
-    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{ZeroState as e}from"../../../../zeroState/ZeroState.js";import{COLORS as n}from"../../../../../constants/Theme.js";const o=o=>{let{searchedString:i,height:r,isLoading:s,containerWidth:l,errorMessage:a,onRetry:c,version:d}=o;const h=!!a&&!s;return t("div","3.0"!==d||h||s?Object.assign({style:{height:r,display:"flex",alignItems:"center"}},{children:t(e,{isLoading:s,title:h?"Failed to load options":"No results found",subTitle:h?a:`Sorry we could not find any results for "${null!=i?i:""}"`,actionButton:h?{buttonText:"Try again",buttonType:"text",onClick:c}:void 0,containerWidth:l})}):Object.assign({style:{height:r,display:"flex",alignItems:"center",justifyContent:"center"}},{children:t("span",Object.assign({style:{fontFamily:"Inter",fontSize:"12px",fontWeight:400,lineHeight:"16px",color:n.content.placeholder,whiteSpace:"nowrap"}},{children:"No results found!"}))}))};export{o as SearchZeroState};
+import{jsx as t}from"react/jsx-runtime";import{ZeroState as e}from"../../../../zeroState/ZeroState.js";const o=o=>{let{searchedString:i,height:n,isLoading:r,containerWidth:s,errorMessage:a,onRetry:l}=o;const d=!!a&&!r;return t("div",Object.assign({style:{height:n,display:"flex",alignItems:"center"}},{children:t(e,{isLoading:r,title:d?"Failed to load options":"No results found",subTitle:d?a:`Sorry we could not find any results for "${null!=i?i:""}"`,actionButton:d?{buttonText:"Try again",buttonType:"text",onClick:l}:void 0,containerWidth:s})}))};export{o as SearchZeroState};

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

@@ -17,7 +17,7 @@ export interface OpenDropdownProps {
     placement?: Placement;
     strategy?: PositioningStrategy;
     onSearch?: (key: string) => Promise<DropdownOption[]>;
-    version?: '1.0' | '2.0' | '3.0';
+    version?: '1.0' | '2.0';
     skipSorting?: boolean;
     headerRef?: any;
     hideSelectAll?: boolean;

package/dist/esm/components/fab-menu/FABMenu.d.ts

@@ -21,5 +21,5 @@ export declare const FABMenu: React.FC<{
     isRound?: boolean;
     dropPosition?: DROP_POSITION;
     menuAligment?: MENU_ALIGNMENT;
-    version?: '1.0' | '2.0' | '3.0';
+    version?: '1.0' | '2.0';
 }>;

package/dist/esm/components/icon-button/IconButton.js

@@ -1 +1 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{Tooltip as d}from"../tooltips/Tooltip.js";import{IconButton as l}from"./IconButton.styled.js";import{getIconColor as n}from"./theme.js";const s=i(((i,s)=>{var{id:r,iconButtonType:c="default",Icon:a,height:p=20,width:b=20,bordered:m,disabled:y,isSelected:h,style:g,svgStyle:u,iconColor:j,iconPadding:f,disabledTooltip:B}=i,T=t(i,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","iconPadding","disabledTooltip"]);const I=n(c,y,h),S=e(l,Object.assign({id:r,ref:s,style:g,iconButtonType:c,bordered:m,disabled:y,isSelected:h,iconPadding:f},T,{children:o.createElement(a,{height:p,width:b,color:j||I,style:Object.assign({display:"block"},null!=u?u:{})})}));return y&&B?e(d,Object.assign({body:B},{children:e("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:S}))})):S}));s.displayName="IconButton";export{s as IconButton};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{Tooltip as l}from"../tooltips/Tooltip.js";import{IconButton as s}from"./IconButton.styled.js";import{getIconColor as r}from"./theme.js";const d=i(((i,d)=>{var{id:n,iconButtonType:c="default",Icon:a,height:p=20,width:b=20,bordered:m,disabled:y,isSelected:h,style:u,svgStyle:g,iconColor:j,disabledTooltip:f}=i,B=t(i,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip"]);const T=r(c,y,h),I=e(s,Object.assign({id:n,ref:d,style:u,iconButtonType:c,bordered:m,disabled:y,isSelected:h},B,{children:o.createElement(a,{height:p,width:b,color:j||T,style:Object.assign({display:"block"},null!=g?g:{})})}));return y&&f?e(l,Object.assign({body:f},{children:e("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:I}))})):I}));d.displayName="IconButton";export{d as IconButton};

package/dist/esm/components/icon-button/IconButton.styled.d.ts

@@ -3,5 +3,4 @@ export declare const IconButton: import("styled-components").StyledComponent<"bu
     bordered?: boolean | undefined;
     iconButtonType: IconButtonType;
     isSelected?: boolean | undefined;
-    iconPadding?: number | undefined;
 }, never>;

package/dist/esm/components/icon-button/IconButton.styled.js

@@ -1,3 +1,3 @@
 import t from"styled-components";import{COLORS as n}from"../../constants/Theme.js";import{generateBackgroundColor as o}from"./theme.js";const r=t.button`
-	${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${void 0!==t.iconPadding?t.iconPadding:6}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${n.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${o(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
+	${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${n.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${o(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
 `;export{r as IconButton};

package/dist/esm/components/icon-button/model.d.ts

@@ -40,10 +40,5 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      */
     isSelected?: boolean;
     iconColor?: string;
-    /**
-     * Custom padding for the icon button container
-     * @default 6
-     */
-    iconPadding?: number;
     disabledTooltip?: string;
 }

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

@@ -1 +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 p}from"../tooltips/Tooltip.js";import{TitleSmall as v,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,InputContainerXSmall as B,SuffixHolder as L,InputHeader as A}from"./Input.styled.js";const H=l(((l,H)=>{var S,D,E,M,P,z,F,K;const{placeholder:N,leftIcon:R,rightIcon:G,labelText:W,maxCharLimit:_,isRequired:q,hintText:U,type:V,state:$,validate:J,variant:Q,button:X,suffixText:Y,prefixText:Z,onChangeText:ee,value:te,noErrorHint:ne,reset:ie,rangeValidation:le,noKeyDownChange:re,version:oe,noMaxCharCheck:ae,labelElement:se,autoGrow:ce,minHeight:he,maxHeight:de,labelTextBold:ue,truncateText:ge,maxCharLimitPosition:pe,hightlightInputColor:ve,onKeyDownEvent:me,hideInputHeader:be,hideBorder:xe,inputWrapperStyles:fe,minCharsToTrigger:ye,maxCharAlignment:je,isDisabled:Ce=!1,allowUnsafeInput:Te,leftIconStyle:Oe}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1},l),we=null==R?void 0:R.icon,Ie=null==G?void 0:G.icon,[ke,Be]=r(!1),[Le,Ae]=r(!1),[He,Se]=r(),De="x-small"===Q?"12px":"small"===Q?"18px":"22px",Ee=o(f),[Me,Pe]=r(""),ze=a(null),Fe=null!=H?H:ze;s((()=>{Pe(te||""),!te&&ce&&(Fe.current.style.height=he||"48px")}),[te]),s((()=>{var e;Fe.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Fe.current))}),[Fe]),s((()=>{const e=Fe.current;if(e&&["phonenumber","zip","number"].includes(V))return e.addEventListener("wheel",Ge,{passive:!1}),()=>{e.removeEventListener("wheel",Ge)}}),[]),s((()=>{ie&&Pe("")}),[ie]),s((()=>{var e;Ae(!!l.isActive),l.isActive&&(null===(e=Fe.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{Se(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;Be(!1),("invalid"===l.state||He||"disabled-invalid"===l.state)&&Be(!0),"active"===l.state&&(null===(e=Fe.current)||void 0===e||e.focus())}),[l.state,He]),s((()=>{Be(!!He||"invalid"===l.state)}),[He,l.state]);const Ke=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)}},Ne=()=>"zip"===V?6:2e3,Re=e=>{const t=0!==_?_:Ne(),n=ye,i=e.target.value;me&&(!i.length||i.length>=n)&&me(e),re||i.length&&!(i.length>=n)||ee(te||"",e),ae||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},Ge=e=>{e.preventDefault()},We=e=>{let t=e.target.value;const n=0!==_?_+1:Ne(),i=ye;if(!Te&&d(V)&&(t=u(t)),!ae&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),l.textControl||Pe(t||""),i&&t&&t.length<i)return;ee(t,e),ce&&(Fe.current.style.height=`${Fe.current.scrollHeight}px`,t||(Fe.current.style.height=he||"48px"));const r=J||g;if(!r||!h(r))return;const[o,a]=r(t,V,le);Be(!o),Se(l.errorMessage?l.errorMessage:a)},_e=e=>{var t;l.skipFocus||Ae(!0),Ke(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},qe=e=>{var t;l.skipFocus||Ae(!1),Ke(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},Ue=()=>{var i;return e(n,{children:["multiline"!==V&&t("input",{className:ge?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(i=null==Ee?void 0:Ee.input)&&void 0!==i?i:{},ref:Fe,disabled:Ce,type:["phonenumber","zip","number"].includes(V)?"number":V,value:Me,onFocus:e=>_e(e),onBlur:e=>qe(e),placeholder:N||"Enter here",onChange:We,onClick:e=>Ke(l.onClick),onKeyDown:e=>Re(e)}),"multiline"===V&&t("textarea",{"data-test":l["data-test"],value:Me,ref:Fe,onFocus:e=>_e(e),onBlur:e=>qe(e),onClick:e=>Ke(l.onClick),disabled:Ce,placeholder:N||"Enter here",onChange:We,onKeyDown:e=>Re(e),maxLength:_>0?_:void 0})]})};return e(y,Object.assign({width:l.width,height:l.height,state:$,type:V,style:null!==(S=null==Ee?void 0:Ee.RootContainer)&&void 0!==S?S:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!ne&&(!!U||!!He)&&e(j,Object.assign({invalid:!!He},{children:[!!He&&t(x,{width:16,height:16}),He||U]})),_>0&&"BOTTOM"===pe&&e(C,Object.assign({position:"BOTTOM"},{children:[null!==(E=null===(D=(null!=te?te:"").toString())||void 0===D?void 0:D.length)&&void 0!==E?E:0,"/",_]}))]})),e(T,Object.assign({variant:Q,state:$,width:l.width,isActive:"active"===$||Le,isInvalid:ke,style:null!==(P=null!==(M=null==Ee?void 0:Ee.InputWrapper)&&void 0!==M?M:fe)&&void 0!==P?P:{},version:oe,height:l.height,hightlightInputColor:ve,hideBorder:xe},{children:[!!we&&t(O,Object.assign({variant:Q,iconSize:De,onClick:()=>Ke(null==R?void 0:R.callback),isLeft:!0,style:Object.assign(Object.assign({},null!==(z=null==Ee?void 0:Ee.IconHolder)&&void 0!==z?z:{}),Oe)},{children:t(we,{})})),!!Z&&t(w,Object.assign({variant:Q},{children:Z})),"default"===Q&&t(I,Object.assign({height:l.height,type:l.type,minHeight:he,maxHeight:de,autoGrow:ce},{children:Ue()})),"small"===Q&&t(k,Object.assign({height:l.height,type:l.type},{children:Ue()})),"x-small"===Q&&t(B,Object.assign({height:l.height,type:l.type},{children:Ue()})),!!Ie&&t(O,Object.assign({variant:Q,iconSize:De,onClick:()=>Ke(null==G?void 0:G.callback),isLeft:!1},{children:t(Ie,{})})),!!Y&&t(L,Object.assign({variant:Q},{children:Y})),X&&X.text&&t(c,{buttonText:X.text,buttonType:X.buttonType,onClick:()=>Ke(null==X?void 0:X.onClick)}),X&&X.buttonProps&&t(c,Object.assign({},X.buttonProps))]})),!be&&(!!W||!!_)&&e(A,Object.assign({invalid:ke,maxCharAlignment:je},{children:[se&&se,e("div",Object.assign({className:"label__container"},{children:[e(ue?v:m,{children:[W,q?t("span",{children:"*"}):""]}),l.tooltipText&&t(p,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(i,{style:{marginTop:-3},width:18,height:18,color:ke?b.content.negative:b.content.primary})})}))]})),_>0&&"TOP"===pe&&e(C,{children:[null!==(K=null===(F=(null!=te?te:"").toString())||void 0===F?void 0:F.length)&&void 0!==K?K:0,"/",_]})]}))]}))}));H.displayName="Input";export{H 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 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 x from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as f}from"./context/InputStyleProvider.js";import{RootContainer as y,InputFooter as C,MaxCharStyle as j,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 A=l(((l,A)=>{var H,D,E,M,P,S,z,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:xe,minCharsToTrigger:fe,maxCharAlignment:ye,isDisabled:Ce=!1,allowUnsafeInput:je}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1},l),Te=null==N?void 0:N.icon,Oe=null==R?void 0:R.icon,[we,Ie]=r(!1),[ke,Be]=r(!1),[Le,Ae]=r(),He="x-small"===J?"12px":"small"===J?"18px":"22px",De=o(f),[Ee,Me]=r(""),Pe=a(null),Se=null!=A?A: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",Ne,{passive:!1}),()=>{e.removeEventListener("wheel",Ne)}}),[]),s((()=>{ne&&Me("")}),[ne]),s((()=>{var e;Be(!!l.isActive),l.isActive&&(null===(e=Se.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{Ae(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;Ie(!1),("invalid"===l.state||Le||"disabled-invalid"===l.state)&&Ie(!0),"active"===l.state&&(null===(e=Se.current)||void 0===e||e.focus())}),[l.state,Le]),s((()=>{Ie(!!Le||"invalid"===l.state)}),[Le,l.state]);const ze=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=fe,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=fe;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&&(Se.current.style.height=`${Se.current.scrollHeight}px`,t||(Se.current.style.height=ce||"48px"));const r=$||g;if(!r||!h(r))return;const[o,a]=r(t,U,ie);Ie(!o),Ae(l.errorMessage?l.errorMessage:a)},Ge=e=>{var t;l.skipFocus||Be(!0),ze(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},We=e=>{var t;l.skipFocus||Be(!1),ze(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:Se,disabled:Ce,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=>ze(l.onClick),onKeyDown:e=>Ke(e)}),"multiline"===U&&t("textarea",{"data-test":l["data-test"],value:Ee,ref:Se,onFocus:e=>Ge(e),onBlur:e=>We(e),onClick:e=>ze(l.onClick),disabled:Ce,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!==(H=null==De?void 0:De.RootContainer)&&void 0!==H?H:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!te&&(!!q||!!Le)&&e(C,Object.assign({invalid:!!Le},{children:[!!Le&&t(x,{width:16,height:16}),Le||q]})),W>0&&"BOTTOM"===ge&&e(j,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(T,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:xe)&&void 0!==P?P:{},version:re,height:l.height,hightlightInputColor:ve,hideBorder:be},{children:[!!Te&&t(O,Object.assign({variant:J,iconSize:He,onClick:()=>ze(null==N?void 0:N.callback),isLeft:!0,style:null!==(S=null==De?void 0:De.IconHolder)&&void 0!==S?S:{}},{children:t(Te,{})})),!!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()})),!!Oe&&t(O,Object.assign({variant:J,iconSize:He,onClick:()=>ze(null==R?void 0:R.callback),isLeft:!1},{children:t(Oe,{})})),!!X&&t(B,Object.assign({variant:J},{children:X})),Q&&Q.text&&t(c,{buttonText:Q.text,buttonType:Q.buttonType,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:we,maxCharAlignment:ye},{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(j,{children:[null!==(F=null===(z=(null!=ee?ee:"").toString())||void 0===z?void 0:z.length)&&void 0!==F?F:0,"/",W]})]}))]}))}));A.displayName="Input";export{A as Input};

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

@@ -15,7 +15,6 @@ export interface InputProps {
         icon: React.FC;
         callback?: () => void;
     };
-    leftIconStyle?: React.CSSProperties;
     rightIcon?: {
         icon: React.FC;
         callback?: () => void;
@@ -55,7 +54,7 @@ export interface InputProps {
     };
     noKeyDownChange?: boolean;
     skipFocus?: boolean;
-    version?: '1.0' | '2.0' | '3.0';
+    version?: '1.0' | '2.0';
     textControl?: boolean;
     noMaxCharCheck?: boolean;
     tooltipText?: string;

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

@@ -10,7 +10,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     isInvalid?: boolean | undefined;
     state?: InputStateI | undefined;
     variant?: InputVariant | undefined;
-    version?: "1.0" | "2.0" | "3.0" | undefined;
+    version?: "1.0" | "2.0" | undefined;
     hightlightInputColor?: string | undefined;
     hideBorder?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -55,21 +55,6 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
     height?: string | undefined;
     type?: InputTypeI | undefined;
 }, {}, {}>;
-export declare const InputContainerXSmall: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    height?: string | undefined;
-    type?: InputTypeI | undefined;
-}, {}, {}>;
 export declare const InputHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;