@bikdotai/bik-component-library 0.0.489-beta.0 → 0.0.490

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),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})]}))}))};
1
+ "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((()=>{I||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})]}))}))};
@@ -3,4 +3,4 @@
3
3
  input {
4
4
  color: ${e=>e.isVar?i.COLORS.stroke.brand:"black"};
5
5
  }
6
- `;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))}})]})};
6
+ `;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))}})]})};
@@ -1 +1 @@
1
- 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};
1
+ 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((()=>{Q||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};
@@ -1,4 +1,4 @@
1
- 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`
1
+ 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`
2
2
  margin-bottom: 16px;
3
3
  input {
4
4
  color: ${e=>e.isVar?s.stroke.brand:"black"};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.489-beta.0",
3
+ "version": "0.0.490",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",