@bikdotai/bik-component-library 0.0.488-qrb.6 → 0.0.489-beta.0

package/dist/cjs/components/QueryBuilder/Filters/Segment/components/SegmentFilter.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),l=require("../../../components/AllowedListDropdown.js"),r=require("../../../helpers/ApiResponse.helper.js"),i=require("../../../hooks/useQueryBuilder.js"),s=require("../../../hooks/useQueryBuilderCache.js"),n=require("../../../components/DropdownWrapper.js"),d=require("../../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js");const t=new r.ApiResponseHelper;exports.default=r=>{let{node:a,allowedNodes:u,apiHandler:c,mode:v,selectorKey:p}=r;var y,m,g,h,f,j,S,w,x;const{updateMeta:B,selectType:k,createMeta:A}=i.useQueryBuilder(p),{cacheWrap:D}=s.useQueryBuilderCache(),[b,q]=o.useState(!1),[I,M]=o.useState([]),Q=a.metas.find((e=>"segmentID"===e.key));return o.useEffect((()=>{console.log({options:I})}),[I]),o.useEffect((()=>{Q||A({key:"segmentID"},a._id),console.log({segmentNameMeta:Q}),D((()=>c({})),"SEGMENT_FILTER").then((e=>{if(e&&Array.isArray(e))M([...e.map((e=>({label:e.name,value:e.id,description:e.description,selected:!!(null==Q?void 0:Q.value)&&Q.value===e.id})))]);else{const o=t.convertToGroupOptions(e,(null==Q?void 0:Q.value)?[Q.value]:void 0);M([...o])}q(!1)}))}),[]),e.jsx(d.BaseQueryBuilderNode,Object.assign({node:a,mode:v},{children:e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(l.default,{disabled:"view"===v,loading:b,selectedType:a.type,allowedList:u,onSelect:function(e){console.log("handleTypeSelection option : ",e),Array.isArray(e)||(q(!0),k(e.value,a._id),console.log("handleTypeSelection createMeta",e),A({key:"segmentID"},a._id)),q(!1)}}),(null===(m=null===(y=null==a?void 0:a.metas)||void 0===y?void 0:y[0])||void 0===m?void 0:m.key)&&e.jsx(n.default,{selectedValues:(null==Q?void 0:Q.value)?[Q.value]:void 0,isSearchable:!0,isLoading:b,disabled:"view"===v,width:"200px",dropdownLabel:"Select segment",options:I,onSelect:function(e){console.log("handleSegmentIDSelection option : ",e),Array.isArray(e)||(console.log("handleSegmentIDSelection updateMeta",e),B({key:"segmentID",value:e.value,error:{}},a._id))},error:null!==(w=null!==(j=null===(f=null===(h=null===(g=a.metas)||void 0===g?void 0:g[0])||void 0===h?void 0:h.error)||void 0===f?void 0:f.key)&&void 0!==j?j:null===(S=null==Q?void 0:Q.error)||void 0===S?void 0:S.key)&&void 0!==w?w:null===(x=null==Q?void 0:Q.error)||void 0===x?void 0:x.value})]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("../../../components/AllowedListDropdown.js"),i=require("../../../helpers/ApiResponse.helper.js"),o=require("../../../hooks/useQueryBuilder.js"),d=require("../../../hooks/useQueryBuilderCache.js"),s=require("../../../components/DropdownWrapper.js"),u=require("../../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js");const a=new i.ApiResponseHelper;exports.default=i=>{let{node:n,allowedNodes:t,apiHandler:v,mode:c,selectorKey:p}=i;var y,m,j,f,h,w,g,x,B;const{updateMeta:k,selectType:A,createMeta:b}=o.useQueryBuilder(p),{cacheWrap:q}=d.useQueryBuilderCache(),[D,Q]=r.useState(!1),[S,_]=r.useState([]),I=n.metas.find((e=>"segmentID"===e.key));return r.useEffect((()=>{b({key:"segmentID"},n._id),q((()=>v({})),"SEGMENT_FILTER").then((e=>{if(e&&Array.isArray(e))_([...e.map((e=>({label:e.name,value:e.id,description:e.description,selected:"create"!==c&&(!!(null==I?void 0:I.value)&&I.value===e.id)})))]);else{const r=a.convertToGroupOptions(e,(null==I?void 0:I.value)?[I.value]:void 0);_([...r])}Q(!1)}))}),[]),e.jsx(u.BaseQueryBuilderNode,Object.assign({node:n,mode:c},{children:e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(l.default,{disabled:"view"===c,loading:D,selectedType:n.type,allowedList:t,onSelect:function(e){Array.isArray(e)||(Q(!0),A(e.value,n._id),b({key:"segmentID"},n._id)),Q(!1)}}),(null===(m=null===(y=null==n?void 0:n.metas)||void 0===y?void 0:y[0])||void 0===m?void 0:m.key)&&e.jsx(s.default,{selectedValues:(null==I?void 0:I.value)?[I.value]:void 0,isSearchable:!0,isLoading:D,disabled:"view"===c,width:"200px",dropdownLabel:"Select segment",options:S,onSelect:function(e){Array.isArray(e)||k({key:"segmentID",value:e.value,error:{}},n._id)},error:null!==(x=null!==(w=null===(h=null===(f=null===(j=n.metas)||void 0===j?void 0:j[0])||void 0===f?void 0:f.error)||void 0===h?void 0:h.key)&&void 0!==w?w:null===(g=null==I?void 0:I.error)||void 0===g?void 0:g.key)&&void 0!==x?x:null===(B=null==I?void 0:I.error)||void 0===B?void 0:B.value})]}))}))};

package/dist/cjs/components/QueryBuilder/components/AllowedListDropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../types/QueryBuilder.type.js"),l=require("./DropdownWrapper.js");const u={[r.QueryBuilderType.EVENT_FILTER]:{label:"Performed event",value:r.QueryBuilderType.EVENT_FILTER},[r.QueryBuilderType.NO_EVENT_FILTER]:{label:"Didn’t perform event",value:r.QueryBuilderType.NO_EVENT_FILTER},[r.QueryBuilderType.USER_PROPERTY_FILTER]:{label:"Have user property",value:r.QueryBuilderType.USER_PROPERTY_FILTER},[r.QueryBuilderType.SEGMENT_FILTER]:{label:"Part of segment",value:r.QueryBuilderType.SEGMENT_FILTER}};exports.QUERY_TYPE_TO_OPTION_MAP=u,exports.default=r=>{let{allowedList:i,onSelect:t,selectedType:d,loading:o,disabled:a}=r;const n=i.map((e=>{var r;return null!==(r=u[e])&&void 0!==r?r:null})).filter((e=>e)).map((e=>{var r;if(d)return(null==e?void 0:e.value)===(null===(r=u[d])||void 0===r?void 0:r.value)?Object.assign(Object.assign({},e),{selected:!0}):e}));return console.log("AllowedListDropdown options : ",n),e.jsx(l.default,{nativeID:"query-builder-initial-node",disabled:a,width:"200px",isLoading:null!=o&&o,options:n,onSelect:t})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../types/QueryBuilder.type.js"),l=require("./DropdownWrapper.js");const u={[r.QueryBuilderType.EVENT_FILTER]:{label:"Performed event",value:r.QueryBuilderType.EVENT_FILTER},[r.QueryBuilderType.NO_EVENT_FILTER]:{label:"Didn’t perform event",value:r.QueryBuilderType.NO_EVENT_FILTER},[r.QueryBuilderType.USER_PROPERTY_FILTER]:{label:"Have user property",value:r.QueryBuilderType.USER_PROPERTY_FILTER},[r.QueryBuilderType.SEGMENT_FILTER]:{label:"Part of segment",value:r.QueryBuilderType.SEGMENT_FILTER}};exports.QUERY_TYPE_TO_OPTION_MAP=u,exports.default=r=>{let{allowedList:i,onSelect:t,selectedType:d,loading:a,disabled:T}=r;const n=i.map((e=>{var r;return null!==(r=u[e])&&void 0!==r?r:null})).filter((e=>e)).map((e=>{var r;if(d)return(null==e?void 0:e.value)===(null===(r=u[d])||void 0===r?void 0:r.value)?Object.assign(Object.assign({},e),{selected:!0}):e}));return e.jsx(l.default,{nativeID:"query-builder-initial-node",disabled:T,width:"200px",isLoading:null!=a&&a,options:n,onSelect:t})};

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),o=require("../../constants/Theme.js"),r=require("../../assets/icons/chevronDown.svg.js"),i=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./DropdownPopover/index.js");function a(){}const d=d=>{var u,c,p,{placeHolder:h,size:v,onSelect:g,defaultOptions:j,disabled:f,noErrorHint:b}=d,x=e.__rest(d,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint"]);const[S,w]=n.useState(!1),m=null!=v?v:"default",y=n.useRef(),[O,q]=n.useState(null!=j?j:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==x?void 0:x.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),q([...t])}),[x.options]),n.useEffect((()=>{j&&q([...j])}),[j]);const E=O.length?O.map((e=>e.label)).join(", "):void 0;return t.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:{height:"small"===m?32:48,width:null!==(c=null!==(u=x.buttonWidth)&&void 0!==u?u:x.width)&&void 0!==c?c:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:t.jsx(s.DropdownPopover,Object.assign({ref:y,onSelect:function(e){console.log("45 handleSelection",e),Array.isArray(e)?q([...e]):q([e]),console.log("50 handleSelection onSelect",g),null==g||g(e)},disabled:f,onDropdownVisbilityChange:e=>w(e)},x,{children:t.jsx(i.Input,{version:x.version,noErrorHint:b,state:f?"disabled":"none",value:null!=E?E:"",errorMessage:x.error,variant:m,placeholder:null!=h?h:"Select an option",width:null!==(p=x.width)&&void 0!==p?p:"100%",onChangeText:a,rightIcon:{icon:()=>t.jsx(r.default,{style:{transform:S?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===m?20:24,height:"small"===m?20:24,color:o.COLORS.content.primary})}})}))}))};d.displayName="Dropdown",exports.Dropdown=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/chevronDown.svg.js"),i=require("../input/Input.js"),s=require("../input/context/InputStyleProvider.js"),l=require("./DropdownPopover/index.js");function a(){}const u=u=>{var d,c,p,{placeHolder:h,size:v,onSelect:j,defaultOptions:f,disabled:g,noErrorHint:b}=u,x=e.__rest(u,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint"]);const[w,m]=n.useState(!1),y=null!=v?v:"default",O=n.useRef(),[S,q]=n.useState(null!=f?f:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==x?void 0:x.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),q([...t])}),[x.options]),n.useEffect((()=>{f&&q([...f])}),[f]);const E=S.length?S.map((e=>e.label)).join(", "):void 0;return t.jsx(s.InputStyleContext.Provider,Object.assign({value:{InputWrapper:{height:"small"===y?32:48,width:null!==(c=null!==(d=x.buttonWidth)&&void 0!==d?d:x.width)&&void 0!==c?c:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:t.jsx(l.DropdownPopover,Object.assign({ref:O,onSelect:function(e){Array.isArray(e)?q([...e]):q([e]),null==j||j(e)},disabled:g,onDropdownVisbilityChange:e=>m(e)},x,{children:t.jsx(i.Input,{version:x.version,noErrorHint:b,state:g?"disabled":"none",value:null!=E?E:"",errorMessage:x.error,variant:y,placeholder:null!=h?h:"Select an option",width:null!==(p=x.width)&&void 0!==p?p:"100%",onChangeText:a,rightIcon:{icon:()=>t.jsx(o.default,{style:{transform:w?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===y?20:24,height:"small"===y?20:24,color:r.COLORS.content.primary})}})}))}))};u.displayName="Dropdown",exports.Dropdown=u;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),n=require("react"),r=require("react-popper"),l=require("../../dropShadow/DropShadow.js"),t=require("../Common.styled.js"),s=require("../OpenedDropdown/components/OpennedDropdown.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=i(n).default.forwardRef(((i,d)=>{var{children:p,onDropdownVisbilityChange:a,version:c="1.0"}=i,u=e.__rest(i,["children","onDropdownVisbilityChange","version"]);const v=d,[j,b]=n.useState(!1),[f,w]=n.useState(null),[D,g]=n.useState(null),{styles:O,attributes:y}=r.usePopper(f,D,{placement:u.placement,strategy:u.strategy});return n.useImperativeHandle(v,(()=>({openDropdown:j})),[]),n.useEffect((()=>{(null==v?void 0:v.current)&&(v.current.openDropdown=j)}),[j]),n.useEffect((()=>{null==a||a(j)}),[j]),o.jsxs(o.Fragment,{children:[o.jsxs("div",Object.assign({style:{position:"relative"},ref:w},{children:[o.jsx(t.OverLapAbs,{disabled:u.disabled,onClick:e=>{var o;null===(o=u.onDropdownOpen)||void 0===o||o.call(u),j?e.preventDefault():u.disabled||b(!0)}}),p]})),j&&o.jsx(t.OpenDropdownContainer,Object.assign({ref:g,style:Object.assign(Object.assign({},O.popper),{zIndex:3})},y.popper,{children:o.jsx(l.default,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:o.jsx(s.OpenedDropdown,Object.assign({},u,{onSelect:e=>{var o;"2.0"===c&&u.isMultiSelect?console.log("if openDropdownProps.onSelect"):(console.log("openDropdownProps.onSelect"),null===(o=u.onSelect)||void 0===o||o.call(u,e),b(!1))},onClose:e=>{var o,n;"2.0"===c&&u.isMultiSelect&&e&&(null===(o=u.onSelect)||void 0===o||o.call(u,[...e])),b(!1),null===(n=null==u?void 0:u.onClose)||void 0===n||n.call(u)},version:c}))}))}))]})}));d.displayName="DropdownPopover",exports.DropdownPopover=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),n=require("react"),o=require("react-popper"),t=require("../../dropShadow/DropShadow.js"),l=require("../Common.styled.js"),s=require("../OpenedDropdown/components/OpennedDropdown.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=i(n).default.forwardRef(((i,a)=>{var{children:d,onDropdownVisbilityChange:p,version:u="1.0"}=i,c=e.__rest(i,["children","onDropdownVisbilityChange","version"]);const v=a,[j,b]=n.useState(!1),[f,w]=n.useState(null),[D,O]=n.useState(null),{styles:y,attributes:g}=o.usePopper(f,D,{placement:c.placement,strategy:c.strategy});return n.useImperativeHandle(v,(()=>({openDropdown:j})),[]),n.useEffect((()=>{(null==v?void 0:v.current)&&(v.current.openDropdown=j)}),[j]),n.useEffect((()=>{null==p||p(j)}),[j]),r.jsxs(r.Fragment,{children:[r.jsxs("div",Object.assign({style:{position:"relative"},ref:w},{children:[r.jsx(l.OverLapAbs,{disabled:c.disabled,onClick:e=>{var r;null===(r=c.onDropdownOpen)||void 0===r||r.call(c),j?e.preventDefault():c.disabled||b(!0)}}),d]})),j&&r.jsx(l.OpenDropdownContainer,Object.assign({ref:O,style:Object.assign(Object.assign({},y.popper),{zIndex:3})},g.popper,{children:r.jsx(t.default,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:r.jsx(s.OpenedDropdown,Object.assign({},c,{onSelect:e=>{var r;"2.0"===u&&c.isMultiSelect||(null===(r=c.onSelect)||void 0===r||r.call(c,e),b(!1))},onClose:e=>{var r,n;"2.0"===u&&c.isMultiSelect&&e&&(null===(r=c.onSelect)||void 0===r||r.call(c,[...e])),b(!1),null===(n=null==c?void 0:c.onClose)||void 0===n||n.call(c)},version:u}))}))}))]})}));a.displayName="DropdownPopover",exports.DropdownPopover=a;

package/dist/cjs/components/input-with-vars/InputWithVariables.js

@@ -3,4 +3,4 @@
 	input {
 		color: ${e=>e.isVar?i.COLORS.stroke.brand:"black"};
 	}
-`;exports.InputWithVariables=r=>{let{type:i,addVarBoxRight:c,allowMix:b,onChange:h,prevVariable:g,variablesList:V,onBlur:p,onlyVariables:x,placeHolder:T,showAddButton:j=!0,showHelp:y,showSideVariablePanel:f,errorMessage:m,showSideModal:S,maxCharLimit:C,noMaxCharCheck:q,labelText:w,labelElement:A}=r;const O=l.useRef(!0),k=l.useRef(null),[B,M]=l.useState(!1),[E]=l.useState(t.v4()),[L,N]=l.useState(),[I,R]=l.useState(g),[F,P]=l.useState(!1),[Z,$]=l.useState(!1),[z,H]=l.useState(m||""),[W,_]=l.useState(0);return l.useEffect((()=>{H(m||"")}),[m]),l.useEffect((()=>{if(L&&L.actualValue)if(b){if(R((e=>{return{actualValue:(a=e.actualValue,l=L.actualValue,r=W,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),k.current){_(k.current.selectionStart);const e=W+L.actualValue.length+2;k.current.setSelectionRange(e,e),_(e)}}else R((e=>({actualValue:L.actualValue,variableType:L.variableType,needsFetching:L.needsFetching})))}),[L]),l.useEffect((()=>{O.current?O.current=!1:h(I)}),[I]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(I.actualValue)},{children:[e.jsx(n.Input,{type:null!=i?i:"text",id:E,ref:k,skipFocus:!0,isActive:B,value:I.actualValue,validate:e=>[!0,""],errorMessage:z,noMaxCharCheck:q,maxCharLimit:C,labelText:w,labelElement:A,placeholder:T||"Add a value",onClick:e=>{k.current&&_(k.current.selectionStart)},onChangeText:(e,a)=>{if(k.current&&_(k.current.selectionStart),H(""),x){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||R({actualValue:"",variableType:"string"})}else R(b?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{M(!0),$(!0),document.getElementById("varList")&&!F&&P(!0)},onBlur:e=>{var a,l,r,t,i,d,s;null==p||p(e,I),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(t=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===t?void 0:t.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(k.current&&k.current.focus(),M(!0)):"search-bar"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.id)?M(!0):(M(!1),P(!1),$(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[I.actualValue&&y&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(o.BodyCaption,{children:`This value is of type ${I.variableType}`})})),j&&Z&&e.jsx("div",Object.assign({style:{marginTop:m?"-24px":"0px"}},{children:e.jsx(u.AddVariableStyled,Object.assign({right:c,id:"addVar",onClick:()=>{P(!F)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!f&&F&&e.jsx(s.AddVariableV2,{data:V,showVariable:!0,setShowVariable:()=>{P(!1)},variableValue:L,setVariableValue:N,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,t,i,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(i=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===i?void 0:i.includes("sc-dZoequ "))?k.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==E&&(P(!1),$(!1),M(!1)):(P(!1),$(!1),M(!1))}})]})),f&&F&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:null!=V?V:[],showVariable:F,setShowVariable:()=>{P(!1)},placeholder:"Add a variable",customTrigger:e=>{N({actualValue:e.actualValue,variableType:"string"}),R(e)},onSearchBlur:e=>{var a,l,r,t,i,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(i=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===i?void 0:i.includes("sc-dZoequ "))?k.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==E&&(P(!1),$(!1),M(!1)):(P(!1),$(!1),M(!1))}})]})};
+`;exports.InputWithVariables=r=>{let{type:i,addVarBoxRight:c,allowMix:b,onChange:h,prevVariable:g,variablesList:V,onBlur:p,onlyVariables:x,placeHolder:T,showAddButton:j=!0,showHelp:y,showSideVariablePanel:f,errorMessage:m,showSideModal:S,maxCharLimit:C,noMaxCharCheck:q,labelText:w,labelElement:A}=r;const O=l.useRef(!0),k=l.useRef(null),[B,M]=l.useState(!1),[L]=l.useState(t.v4()),[N,E]=l.useState(),[I,R]=l.useState(g),[F,P]=l.useState(!1),[Z,$]=l.useState(!1),[z,H]=l.useState(0);return l.useEffect((()=>{if(N&&N.actualValue)if(b){if(R((e=>{return{actualValue:(a=e.actualValue,l=N.actualValue,r=z,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),k.current){H(k.current.selectionStart);const e=z+N.actualValue.length+2;k.current.setSelectionRange(e,e),H(e)}}else R((e=>({actualValue:N.actualValue,variableType:N.variableType,needsFetching:N.needsFetching})))}),[N]),l.useEffect((()=>{O.current?O.current=!1:h(I)}),[I]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(I.actualValue)},{children:[e.jsx(n.Input,{type:null!=i?i:"text",id:L,ref:k,skipFocus:!0,isActive:B,value:I.actualValue,validate:e=>[!0,""],errorMessage:m,noMaxCharCheck:q,maxCharLimit:C,labelText:w,labelElement:A,placeholder:T||"Add a value",onClick:e=>{k.current&&H(k.current.selectionStart)},onChangeText:(e,a)=>{if(k.current&&H(k.current.selectionStart),x){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||R({actualValue:"",variableType:"string"})}else R(b?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{M(!0),$(!0),document.getElementById("varList")&&!F&&P(!0)},onBlur:e=>{var a,l,r,t,i,d,s;null==p||p(e,I),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(t=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===t?void 0:t.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(k.current&&k.current.focus(),M(!0)):"search-bar"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.id)?M(!0):(M(!1),P(!1),$(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[I.actualValue&&y&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(o.BodyCaption,{children:`This value is of type ${I.variableType}`})})),j&&Z&&e.jsx("div",Object.assign({style:{marginTop:m?"-24px":"0px"}},{children:e.jsx(u.AddVariableStyled,Object.assign({right:c,id:"addVar",onClick:()=>{P(!F)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!f&&F&&e.jsx(s.AddVariableV2,{data:V,showVariable:!0,setShowVariable:()=>{P(!1)},variableValue:N,setVariableValue:E,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,t,i,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(i=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===i?void 0:i.includes("sc-dZoequ "))?k.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==L&&(P(!1),$(!1),M(!1)):(P(!1),$(!1),M(!1))}})]})),f&&F&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:null!=V?V:[],showVariable:F,setShowVariable:()=>{P(!1)},placeholder:"Add a variable",customTrigger:e=>{E({actualValue:e.actualValue,variableType:"string"}),R(e)},onSearchBlur:e=>{var a,l,r,t,i,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(i=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===i?void 0:i.includes("sc-dZoequ "))?k.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==L&&(P(!1),$(!1),M(!1)):(P(!1),$(!1),M(!1))}})]})};

package/dist/esm/components/QueryBuilder/Filters/Segment/components/SegmentFilter.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as l,useEffect as i}from"react";import n from"../../../components/AllowedListDropdown.js";import{ApiResponseHelper as r}from"../../../helpers/ApiResponse.helper.js";import{useQueryBuilder as d}from"../../../hooks/useQueryBuilder.js";import{useQueryBuilderCache as t}from"../../../hooks/useQueryBuilderCache.js";import s from"../../../components/DropdownWrapper.js";import{BaseQueryBuilderNode as a}from"../../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js";const u=new r,c=r=>{let{node:c,allowedNodes:p,apiHandler:v,mode:m,selectorKey:y}=r;var g,f,h,w,S,j,k,D,A;const{updateMeta:b,selectType:I,createMeta:T}=d(y),{cacheWrap:B}=t(),[M,x]=l(!1),[L,N]=l([]),_=c.metas.find((e=>"segmentID"===e.key));return i((()=>{console.log({options:L})}),[L]),i((()=>{_||T({key:"segmentID"},c._id),console.log({segmentNameMeta:_}),B((()=>v({})),"SEGMENT_FILTER").then((e=>{if(e&&Array.isArray(e))N([...e.map((e=>({label:e.name,value:e.id,description:e.description,selected:!!(null==_?void 0:_.value)&&_.value===e.id})))]);else{const o=u.convertToGroupOptions(e,(null==_?void 0:_.value)?[_.value]:void 0);N([...o])}x(!1)}))}),[]),e(a,Object.assign({node:c,mode:m},{children:o("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(n,{disabled:"view"===m,loading:M,selectedType:c.type,allowedList:p,onSelect:function(e){console.log("handleTypeSelection option : ",e),Array.isArray(e)||(x(!0),I(e.value,c._id),console.log("handleTypeSelection createMeta",e),T({key:"segmentID"},c._id)),x(!1)}}),(null===(f=null===(g=null==c?void 0:c.metas)||void 0===g?void 0:g[0])||void 0===f?void 0:f.key)&&e(s,{selectedValues:(null==_?void 0:_.value)?[_.value]:void 0,isSearchable:!0,isLoading:M,disabled:"view"===m,width:"200px",dropdownLabel:"Select segment",options:L,onSelect:function(e){console.log("handleSegmentIDSelection option : ",e),Array.isArray(e)||(console.log("handleSegmentIDSelection updateMeta",e),b({key:"segmentID",value:e.value,error:{}},c._id))},error:null!==(D=null!==(j=null===(S=null===(w=null===(h=c.metas)||void 0===h?void 0:h[0])||void 0===w?void 0:w.error)||void 0===S?void 0:S.key)&&void 0!==j?j:null===(k=null==_?void 0:_.error)||void 0===k?void 0:k.key)&&void 0!==D?D:null===(A=null==_?void 0:_.error)||void 0===A?void 0:A.value})]}))}))};export{c as default};
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as l,useEffect as r}from"react";import i from"../../../components/AllowedListDropdown.js";import{ApiResponseHelper as d}from"../../../helpers/ApiResponse.helper.js";import{useQueryBuilder as n}from"../../../hooks/useQueryBuilder.js";import{useQueryBuilderCache as s}from"../../../hooks/useQueryBuilderCache.js";import t from"../../../components/DropdownWrapper.js";import{BaseQueryBuilderNode as a}from"../../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js";const u=new d,v=d=>{let{node:v,allowedNodes:p,apiHandler:c,mode:m,selectorKey:y}=d;var f,h,w,g,j,k,A,b,D;const{updateMeta:B,selectType:x,createMeta:I}=n(y),{cacheWrap:L}=s(),[S,T]=l(!1),[_,N]=l([]),Q=v.metas.find((e=>"segmentID"===e.key));return r((()=>{I({key:"segmentID"},v._id),L((()=>c({})),"SEGMENT_FILTER").then((e=>{if(e&&Array.isArray(e))N([...e.map((e=>({label:e.name,value:e.id,description:e.description,selected:"create"!==m&&(!!(null==Q?void 0:Q.value)&&Q.value===e.id)})))]);else{const o=u.convertToGroupOptions(e,(null==Q?void 0:Q.value)?[Q.value]:void 0);N([...o])}T(!1)}))}),[]),e(a,Object.assign({node:v,mode:m},{children:o("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(i,{disabled:"view"===m,loading:S,selectedType:v.type,allowedList:p,onSelect:function(e){Array.isArray(e)||(T(!0),x(e.value,v._id),I({key:"segmentID"},v._id)),T(!1)}}),(null===(h=null===(f=null==v?void 0:v.metas)||void 0===f?void 0:f[0])||void 0===h?void 0:h.key)&&e(t,{selectedValues:(null==Q?void 0:Q.value)?[Q.value]:void 0,isSearchable:!0,isLoading:S,disabled:"view"===m,width:"200px",dropdownLabel:"Select segment",options:_,onSelect:function(e){Array.isArray(e)||B({key:"segmentID",value:e.value,error:{}},v._id)},error:null!==(b=null!==(k=null===(j=null===(g=null===(w=v.metas)||void 0===w?void 0:w[0])||void 0===g?void 0:g.error)||void 0===j?void 0:j.key)&&void 0!==k?k:null===(A=null==Q?void 0:Q.error)||void 0===A?void 0:A.key)&&void 0!==b?b:null===(D=null==Q?void 0:Q.error)||void 0===D?void 0:D.value})]}))}))};export{v as default};

package/dist/esm/components/QueryBuilder/components/AllowedListDropdown.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{QueryBuilderType as l}from"../types/QueryBuilder.type.js";import o from"./DropdownWrapper.js";const t={[l.EVENT_FILTER]:{label:"Performed event",value:l.EVENT_FILTER},[l.NO_EVENT_FILTER]:{label:"Didn’t perform event",value:l.NO_EVENT_FILTER},[l.USER_PROPERTY_FILTER]:{label:"Have user property",value:l.USER_PROPERTY_FILTER},[l.SEGMENT_FILTER]:{label:"Part of segment",value:l.SEGMENT_FILTER}},r=l=>{let{allowedList:r,onSelect:a,selectedType:i,loading:n,disabled:E}=l;const d=r.map((e=>{var l;return null!==(l=t[e])&&void 0!==l?l:null})).filter((e=>e)).map((e=>{var l;if(i)return(null==e?void 0:e.value)===(null===(l=t[i])||void 0===l?void 0:l.value)?Object.assign(Object.assign({},e),{selected:!0}):e}));return console.log("AllowedListDropdown options : ",d),e(o,{nativeID:"query-builder-initial-node",disabled:E,width:"200px",isLoading:null!=n&&n,options:d,onSelect:a})};export{t as QUERY_TYPE_TO_OPTION_MAP,r as default};
+import{jsx as e}from"react/jsx-runtime";import{QueryBuilderType as l}from"../types/QueryBuilder.type.js";import r from"./DropdownWrapper.js";const t={[l.EVENT_FILTER]:{label:"Performed event",value:l.EVENT_FILTER},[l.NO_EVENT_FILTER]:{label:"Didn’t perform event",value:l.NO_EVENT_FILTER},[l.USER_PROPERTY_FILTER]:{label:"Have user property",value:l.USER_PROPERTY_FILTER},[l.SEGMENT_FILTER]:{label:"Part of segment",value:l.SEGMENT_FILTER}},a=l=>{let{allowedList:a,onSelect:i,selectedType:o,loading:n,disabled:E}=l;const d=a.map((e=>{var l;return null!==(l=t[e])&&void 0!==l?l:null})).filter((e=>e)).map((e=>{var l;if(o)return(null==e?void 0:e.value)===(null===(l=t[o])||void 0===l?void 0:l.value)?Object.assign(Object.assign({},e),{selected:!0}):e}));return e(r,{nativeID:"query-builder-initial-node",disabled:E,width:"200px",isLoading:null!=n&&n,options:d,onSelect:i})};export{t as QUERY_TYPE_TO_OPTION_MAP,a as default};

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

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

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

@@ -1 +1 @@
-import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useState as n,useRef as t,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function c(){}const p=p=>{var u,h,m,{placeHolder:v,size:g,onSelect:f,defaultOptions:b,disabled:j,noErrorHint:w}=p,x=o(p,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint"]);const[S,y]=n(!1),H=null!=g?g:"default",O=t(),[E,I]=n(null!=b?b:[]);r((()=>{var o;const e=[];null===(o=null==x?void 0:x.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&e.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&e.push(o)})),I([...e])}),[x.options]),r((()=>{b&&I([...b])}),[b]);const D=E.length?E.map((o=>o.label)).join(", "):void 0;return e(a.Provider,Object.assign({value:{InputWrapper:{height:"small"===H?32:48,width:null!==(h=null!==(u=x.buttonWidth)&&void 0!==u?u:x.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:e(d,Object.assign({ref:O,onSelect:function(o){console.log("45 handleSelection",o),Array.isArray(o)?I([...o]):I([o]),console.log("50 handleSelection onSelect",f),null==f||f(o)},disabled:j,onDropdownVisbilityChange:o=>y(o)},x,{children:e(s,{version:x.version,noErrorHint:w,state:j?"disabled":"none",value:null!=D?D:"",errorMessage:x.error,variant:H,placeholder:null!=v?v:"Select an option",width:null!==(m=x.width)&&void 0!==m?m:"100%",onChangeText:c,rightIcon:{icon:()=>e(l,{style:{transform:S?"rotate(180deg)":"rotate(0deg)"},onClick:c,width:"small"===H?20:24,height:"small"===H?20:24,color:i.content.primary})}})}))}))};p.displayName="Dropdown";export{p as Dropdown};
+import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useState as e,useRef as n,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function p(){}const c=c=>{var u,m,h,{placeHolder:v,size:f,onSelect:g,defaultOptions:b,disabled:j,noErrorHint:w}=c,x=o(c,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint"]);const[y,H]=e(!1),O=null!=f?f:"default",E=n(),[I,S]=e(null!=b?b:[]);r((()=>{var o;const t=[];null===(o=null==x?void 0:x.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&t.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&t.push(o)})),S([...t])}),[x.options]),r((()=>{b&&S([...b])}),[b]);const D=I.length?I.map((o=>o.label)).join(", "):void 0;return t(a.Provider,Object.assign({value:{InputWrapper:{height:"small"===O?32:48,width:null!==(m=null!==(u=x.buttonWidth)&&void 0!==u?u:x.width)&&void 0!==m?m:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:t(d,Object.assign({ref:E,onSelect:function(o){Array.isArray(o)?S([...o]):S([o]),null==g||g(o)},disabled:j,onDropdownVisbilityChange:o=>H(o)},x,{children:t(s,{version:x.version,noErrorHint:w,state:j?"disabled":"none",value:null!=D?D:"",errorMessage:x.error,variant:O,placeholder:null!=v?v:"Select an option",width:null!==(h=x.width)&&void 0!==h?h:"100%",onChangeText:p,rightIcon:{icon:()=>t(l,{style:{transform:y?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===O?20:24,height:"small"===O?20:24,color:i.content.primary})}})}))}))};c.displayName="Dropdown";export{c as Dropdown};

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

@@ -1 +1 @@
-import{__rest as o}from"../../../_virtual/_tslib.js";import{jsxs as e,Fragment as n,jsx as r}from"react/jsx-runtime";import l,{useState as t,useImperativeHandle as i,useEffect as s}from"react";import{usePopper as p}from"react-popper";import d from"../../dropShadow/DropShadow.js";import{OverLapAbs as a,OpenDropdownContainer as c}from"../Common.styled.js";import{OpenedDropdown as m}from"../OpenedDropdown/components/OpennedDropdown.js";const u=l.forwardRef(((l,u)=>{var{children:v,onDropdownVisbilityChange:b,version:w="1.0"}=l,f=o(l,["children","onDropdownVisbilityChange","version"]);const g=u,[D,j]=t(!1),[h,y]=t(null),[O,S]=t(null),{styles:C,attributes:x}=p(h,O,{placement:f.placement,strategy:f.strategy});return i(g,(()=>({openDropdown:D})),[]),s((()=>{(null==g?void 0:g.current)&&(g.current.openDropdown=D)}),[D]),s((()=>{null==b||b(D)}),[D]),e(n,{children:[e("div",Object.assign({style:{position:"relative"},ref:y},{children:[r(a,{disabled:f.disabled,onClick:o=>{var e;null===(e=f.onDropdownOpen)||void 0===e||e.call(f),D?o.preventDefault():f.disabled||j(!0)}}),v]})),D&&r(c,Object.assign({ref:S,style:Object.assign(Object.assign({},C.popper),{zIndex:3})},x.popper,{children:r(d,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:r(m,Object.assign({},f,{onSelect:o=>{var e;"2.0"===w&&f.isMultiSelect?console.log("if openDropdownProps.onSelect"):(console.log("openDropdownProps.onSelect"),null===(e=f.onSelect)||void 0===e||e.call(f,o),j(!1))},onClose:o=>{var e,n;"2.0"===w&&f.isMultiSelect&&o&&(null===(e=f.onSelect)||void 0===e||e.call(f,[...o])),j(!1),null===(n=null==f?void 0:f.onClose)||void 0===n||n.call(f)},version:w}))}))}))]})}));u.displayName="DropdownPopover";export{u as DropdownPopover};
+import{__rest as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as n,jsx as r}from"react/jsx-runtime";import l,{useState as i,useImperativeHandle as t,useEffect as s}from"react";import{usePopper as p}from"react-popper";import d from"../../dropShadow/DropShadow.js";import{OverLapAbs as a,OpenDropdownContainer as c}from"../Common.styled.js";import{OpenedDropdown as m}from"../OpenedDropdown/components/OpennedDropdown.js";const u=l.forwardRef(((l,u)=>{var{children:v,onDropdownVisbilityChange:b,version:f="1.0"}=l,w=e(l,["children","onDropdownVisbilityChange","version"]);const j=u,[g,h]=i(!1),[y,D]=i(null),[O,S]=i(null),{styles:C,attributes:x}=p(y,O,{placement:w.placement,strategy:w.strategy});return t(j,(()=>({openDropdown:g})),[]),s((()=>{(null==j?void 0:j.current)&&(j.current.openDropdown=g)}),[g]),s((()=>{null==b||b(g)}),[g]),o(n,{children:[o("div",Object.assign({style:{position:"relative"},ref:D},{children:[r(a,{disabled:w.disabled,onClick:e=>{var o;null===(o=w.onDropdownOpen)||void 0===o||o.call(w),g?e.preventDefault():w.disabled||h(!0)}}),v]})),g&&r(c,Object.assign({ref:S,style:Object.assign(Object.assign({},C.popper),{zIndex:3})},x.popper,{children:r(d,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:r(m,Object.assign({},w,{onSelect:e=>{var o;"2.0"===f&&w.isMultiSelect||(null===(o=w.onSelect)||void 0===o||o.call(w,e),h(!1))},onClose:e=>{var o,n;"2.0"===f&&w.isMultiSelect&&e&&(null===(o=w.onSelect)||void 0===o||o.call(w,[...e])),h(!1),null===(n=null==w?void 0:w.onClose)||void 0===n||n.call(w)},version:f}))}))}))]})}));u.displayName="DropdownPopover";export{u as DropdownPopover};

package/dist/esm/components/input-with-vars/InputWithVariables.js

@@ -1,4 +1,4 @@
-import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as t,useEffect as d}from"react";import o from"styled-components";import{v4 as n}from"uuid";import{COLORS as s}from"../../constants/Theme.js";import{AddVariableV2SideModal as c}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as u}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as h}from"../TypographyStyle.js";const m=o=>{let{type:s,addVarBoxRight:m,allowMix:g,onChange:V,prevVariable:T,variablesList:y,onBlur:f,onlyVariables:x,placeHolder:j,showAddButton:C=!0,showHelp:S,showSideVariablePanel:w,errorMessage:k,showSideModal:A,maxCharLimit:B,noMaxCharCheck:N,labelText:L,labelElement:M}=o;const O=i(!0),E=i(null),[I,F]=t(!1),[q]=t(n()),[R,Z]=t(),[$,z]=t(T),[H,P]=t(!1),[D,W]=t(!1),[G,J]=t(k||""),[K,Q]=t(0);return d((()=>{J(k||"")}),[k]),d((()=>{if(R&&R.actualValue)if(g){if(z((e=>{return{actualValue:(a=e.actualValue,l=R.actualValue,r=K,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),E.current){Q(E.current.selectionStart);const e=K+R.actualValue.length+2;E.current.setSelectionRange(e,e),Q(e)}}else z((e=>({actualValue:R.actualValue,variableType:R.variableType,needsFetching:R.needsFetching})))}),[R]),d((()=>{O.current?O.current=!1:V($)}),[$]),e(a,{children:[e(b,Object.assign({isVar:/^{{.*}}$/.test($.actualValue)},{children:[l(p,{type:null!=s?s:"text",id:q,ref:E,skipFocus:!0,isActive:I,value:$.actualValue,validate:e=>[!0,""],errorMessage:G,noMaxCharCheck:N,maxCharLimit:B,labelText:L,labelElement:M,placeholder:j||"Add a value",onClick:e=>{E.current&&Q(E.current.selectionStart)},onChangeText:(e,a)=>{if(E.current&&Q(E.current.selectionStart),J(""),x){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||z({actualValue:"",variableType:"string"})}else z(g?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{F(!0),W(!0),document.getElementById("varList")&&!H&&P(!0)},onBlur:e=>{var a,l,r,i,t,d,o;null==f||f(e,$),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(d=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(E.current&&E.current.focus(),F(!0)):"search-bar"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.id)?F(!0):(F(!1),P(!1),W(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[$.actualValue&&S&&l("div",Object.assign({style:{marginTop:4}},{children:l(h,{children:`This value is of type ${$.variableType}`})})),C&&D&&l("div",Object.assign({style:{marginTop:k?"-24px":"0px"}},{children:l(v,Object.assign({right:m,id:"addVar",onClick:()=>{P(!H)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!w&&H&&l(u,{data:y,showVariable:!0,setShowVariable:()=>{P(!1)},variableValue:R,setVariableValue:Z,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?E.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==q&&(P(!1),W(!1),F(!1)):(P(!1),W(!1),F(!1))}})]})),w&&H&&l(c,{zIndex:2e3,data:null!=y?y:[],showVariable:H,setShowVariable:()=>{P(!1)},placeholder:"Add a variable",customTrigger:e=>{Z({actualValue:e.actualValue,variableType:"string"}),z(e)},onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?E.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==q&&(P(!1),W(!1),F(!1)):(P(!1),W(!1),F(!1))}})]})},b=o.div`
+import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as t,useEffect as d}from"react";import o from"styled-components";import{v4 as n}from"uuid";import{COLORS as s}from"../../constants/Theme.js";import{AddVariableV2SideModal as c}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as u}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as h}from"../TypographyStyle.js";const m=o=>{let{type:s,addVarBoxRight:m,allowMix:g,onChange:V,prevVariable:T,variablesList:y,onBlur:f,onlyVariables:x,placeHolder:j,showAddButton:C=!0,showHelp:S,showSideVariablePanel:w,errorMessage:k,showSideModal:A,maxCharLimit:B,noMaxCharCheck:N,labelText:L,labelElement:M}=o;const O=i(!0),E=i(null),[I,F]=t(!1),[q]=t(n()),[R,Z]=t(),[$,z]=t(T),[H,P]=t(!1),[D,W]=t(!1),[G,J]=t(0);return d((()=>{if(R&&R.actualValue)if(g){if(z((e=>{return{actualValue:(a=e.actualValue,l=R.actualValue,r=G,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),E.current){J(E.current.selectionStart);const e=G+R.actualValue.length+2;E.current.setSelectionRange(e,e),J(e)}}else z((e=>({actualValue:R.actualValue,variableType:R.variableType,needsFetching:R.needsFetching})))}),[R]),d((()=>{O.current?O.current=!1:V($)}),[$]),e(a,{children:[e(b,Object.assign({isVar:/^{{.*}}$/.test($.actualValue)},{children:[l(p,{type:null!=s?s:"text",id:q,ref:E,skipFocus:!0,isActive:I,value:$.actualValue,validate:e=>[!0,""],errorMessage:k,noMaxCharCheck:N,maxCharLimit:B,labelText:L,labelElement:M,placeholder:j||"Add a value",onClick:e=>{E.current&&J(E.current.selectionStart)},onChangeText:(e,a)=>{if(E.current&&J(E.current.selectionStart),x){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||z({actualValue:"",variableType:"string"})}else z(g?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{F(!0),W(!0),document.getElementById("varList")&&!H&&P(!0)},onBlur:e=>{var a,l,r,i,t,d,o;null==f||f(e,$),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(d=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(E.current&&E.current.focus(),F(!0)):"search-bar"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.id)?F(!0):(F(!1),P(!1),W(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[$.actualValue&&S&&l("div",Object.assign({style:{marginTop:4}},{children:l(h,{children:`This value is of type ${$.variableType}`})})),C&&D&&l("div",Object.assign({style:{marginTop:k?"-24px":"0px"}},{children:l(v,Object.assign({right:m,id:"addVar",onClick:()=>{P(!H)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!w&&H&&l(u,{data:y,showVariable:!0,setShowVariable:()=>{P(!1)},variableValue:R,setVariableValue:Z,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?E.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==q&&(P(!1),W(!1),F(!1)):(P(!1),W(!1),F(!1))}})]})),w&&H&&l(c,{zIndex:2e3,data:null!=y?y:[],showVariable:H,setShowVariable:()=>{P(!1)},placeholder:"Add a variable",customTrigger:e=>{Z({actualValue:e.actualValue,variableType:"string"}),z(e)},onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?E.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==q&&(P(!1),W(!1),F(!1)):(P(!1),W(!1),F(!1))}})]})},b=o.div`
 	margin-bottom: 16px;
 	input {
 		color: ${e=>e.isVar?s.stroke.brand:"black"};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.488-qrb.6",
+	"version": "0.0.489-beta.0",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",