@bikdotai/bik-component-library 0.0.456 → 0.0.457-bata.0
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.
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/cjs/components/input-with-vars/InputWithVariables.js +3 -3
- package/dist/cjs/components/searchBar/searchBar.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/input-with-vars/InputWithVariables.js +2 -2
- package/dist/esm/components/searchBar/searchBar.js +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),i=require("uuid"),t=require("../../constants/Theme.js"),d=require("../add-variableV2/AddVariableV2SideModal.js"),s=require("../add-variableV2/AddVariableV2.js"),u=require("../add-variableV2/AddVariableBox.styled.js"),n=require("../input/Input.js"),o=require("../TypographyStyle.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const v=c(r).default.div`
|
|
2
2
|
margin-bottom: 16px;
|
|
3
3
|
input {
|
|
4
|
-
color: ${e=>e.isVar?
|
|
4
|
+
color: ${e=>e.isVar?t.COLORS.stroke.brand:"black"};
|
|
5
5
|
}
|
|
6
|
-
`;exports.InputWithVariables=r=>{let{addVarBoxRight:
|
|
6
|
+
`;exports.InputWithVariables=r=>{let{addVarBoxRight:t,allowMix:c,onChange:b,prevVariable:h,variablesList:g,onBlur:V,onlyVariables:p,placeHolder:x,showAddButton:T=!0,showHelp:j,showSideVariablePanel:y,errorMessage:f,showSideModal:m,maxCharLimit:S,noMaxCharCheck:C,labelText:q,labelElement:w}=r;const A=l.useRef(null),[O,k]=l.useState(!1),[B]=l.useState(i.v4()),[M,L]=l.useState(),[N,E]=l.useState(h),[I,F]=l.useState(!1),[R,P]=l.useState(!1),[Z,$]=l.useState(f||""),[z,H]=l.useState(0);return l.useEffect((()=>{if(M&&M.actualValue)if(c){if(E((e=>{return{actualValue:(a=e.actualValue,l=" "+M.actualValue+" ",r=z,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),A.current){H(A.current.selectionStart);const e=z+M.actualValue.length+2;A.current.setSelectionRange(e,e),H(e)}}else E((e=>({actualValue:M.actualValue,variableType:M.variableType,needsFetching:M.needsFetching})))}),[M]),l.useEffect((()=>{b(N)}),[N]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(N.actualValue)},{children:[e.jsx(n.Input,{id:B,ref:A,skipFocus:!0,isActive:O,value:N.actualValue,validate:e=>[!0,""],errorMessage:Z,noMaxCharCheck:C,maxCharLimit:S,labelText:q,labelElement:w,placeholder:x||"Add a value",onClick:e=>{A.current&&H(A.current.selectionStart)},onChangeText:(e,a)=>{if(A.current&&H(A.current.selectionStart),$(""),p){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||E({actualValue:"",variableType:"string"})}else E(c?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{k(!0),P(!0),document.getElementById("varList")&&!I&&F(!0)},onBlur:e=>{var a,l,r,i,t,d,s;null==V||V(e,N),"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 "))?(A.current&&A.current.focus(),k(!0)):"search-bar"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.id)?k(!0):(k(!1),F(!1),P(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[N.actualValue&&j&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(o.BodyCaption,{children:`This value is of type ${N.variableType}`})})),T&&R&&e.jsx("div",Object.assign({style:{marginTop:f?"-24px":"0px"}},{children:e.jsx(u.AddVariableStyled,Object.assign({right:t,id:"addVar",onClick:()=>{F(!I)}},{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"}))]}))}))}))]})),!y&&I&&e.jsx(s.AddVariableV2,{data:g,showVariable:!0,setShowVariable:()=>{F(!1)},variableValue:M,setVariableValue:L,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 "))?A.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==B&&(F(!1),P(!1),k(!1)):(F(!1),P(!1),k(!1))}})]})),y&&I&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:I,setShowVariable:()=>{F(!1)},placeholder:"Add a variable",customTrigger:e=>{L({actualValue:e.actualValue,variableType:"string"}),E(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 "))?A.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==B&&(F(!1),P(!1),k(!1)):(F(!1),P(!1),k(!1))}})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/searchIcon.js"),s=require("react"),a=require("../../assets/icons/cross.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/searchIcon.js"),s=require("react"),a=require("../../assets/icons/cross.svg.js"),r=require("../input/Input.js");exports.SearchBar=n=>{const{isEnabled:c,onEnter:i,placeholder:o,width:l,variant:u,validate:d,isActive:h}=n,[v,f]=s.useState("search"),[p,g]=s.useState("default"),[C,b]=s.useState(h?"active":c?"none":"disabled"),[j,k]=s.useState(n.initialValue||"");s.useEffect((()=>{b(h?"active":c?"none":"disabled")}),[c,h]),s.useEffect((()=>{n.reset&&S()}),[null==n?void 0:n.reset]);const I=e=>{c&&i(e)},S=()=>{f("search"),g("default"),k(""),n.onChange(""),b("none"),i("")};return e.jsx(r.Input,{id:"search-bar",validate:d,onFocus:()=>{j.length&&f("cross"),"default"===p&&c&&(g("clicked"),b("active"))},width:l,state:C,leftIcon:"search"===v&&"default"===p?{icon:t.SearchIcon}:void 0,rightIcon:"cross"===v?{icon:a.default,callback:()=>{S(),n.onClickCross&&n.onClickCross()}}:void 0,onChangeText:(e,t)=>{n.onChange(e),k(e),"keydown"!==(null==t?void 0:t.type)||13!==t.which&&13!==t.keyCode?e.trim().length?f("cross"):f("search"):I(e)},placeholder:o,variant:u,value:j,onBlur:()=>{j.length||g("default"),b("none")}})};
|
|
@@ -1,6 +1,6 @@
|
|
|
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
|
|
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 h}from"../input/Input.js";import{BodyCaption as m}from"../TypographyStyle.js";const p=o=>{let{addVarBoxRight:s,allowMix:p,onChange:g,prevVariable:V,variablesList:T,onBlur:f,onlyVariables:y,placeHolder:x,showAddButton:j=!0,showHelp:C,showSideVariablePanel:S,errorMessage:w,showSideModal:k,maxCharLimit:A,noMaxCharCheck:B,labelText:N,labelElement:L}=o;const M=i(null),[O,E]=t(!1),[I]=t(n()),[F,q]=t(),[R,Z]=t(V),[$,z]=t(!1),[H,P]=t(!1),[D,W]=t(w||""),[G,J]=t(0);return d((()=>{if(F&&F.actualValue)if(p){if(Z((e=>{return{actualValue:(a=e.actualValue,l=" "+F.actualValue+" ",r=G,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),M.current){J(M.current.selectionStart);const e=G+F.actualValue.length+2;M.current.setSelectionRange(e,e),J(e)}}else Z((e=>({actualValue:F.actualValue,variableType:F.variableType,needsFetching:F.needsFetching})))}),[F]),d((()=>{g(R)}),[R]),e(a,{children:[e(b,Object.assign({isVar:/^{{.*}}$/.test(R.actualValue)},{children:[l(h,{id:I,ref:M,skipFocus:!0,isActive:O,value:R.actualValue,validate:e=>[!0,""],errorMessage:D,noMaxCharCheck:B,maxCharLimit:A,labelText:N,labelElement:L,placeholder:x||"Add a value",onClick:e=>{M.current&&J(M.current.selectionStart)},onChangeText:(e,a)=>{if(M.current&&J(M.current.selectionStart),W(""),y){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||Z({actualValue:"",variableType:"string"})}else Z(p?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{E(!0),P(!0),document.getElementById("varList")&&!$&&z(!0)},onBlur:e=>{var a,l,r,i,t,d,o;null==f||f(e,R),"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 "))?(M.current&&M.current.focus(),E(!0)):"search-bar"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.id)?E(!0):(E(!1),z(!1),P(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[R.actualValue&&C&&l("div",Object.assign({style:{marginTop:4}},{children:l(m,{children:`This value is of type ${R.variableType}`})})),j&&H&&l("div",Object.assign({style:{marginTop:w?"-24px":"0px"}},{children:l(v,Object.assign({right:s,id:"addVar",onClick:()=>{z(!$)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!S&&$&&l(u,{data:T,showVariable:!0,setShowVariable:()=>{z(!1)},variableValue:F,setVariableValue:q,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 "))?M.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==I&&(z(!1),P(!1),E(!1)):(z(!1),P(!1),E(!1))}})]})),S&&$&&l(c,{zIndex:2e3,data:null!=T?T:[],showVariable:$,setShowVariable:()=>{z(!1)},placeholder:"Add a variable",customTrigger:e=>{q({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 "))?M.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==I&&(z(!1),P(!1),E(!1)):(z(!1),P(!1),E(!1))}})]})},b=o.div`
|
|
2
2
|
margin-bottom: 16px;
|
|
3
3
|
input {
|
|
4
4
|
color: ${e=>e.isVar?s.stroke.brand:"black"};
|
|
5
5
|
}
|
|
6
|
-
`;export{
|
|
6
|
+
`;export{p as InputWithVariables};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{SearchIcon as o}from"../../assets/icons/searchIcon.js";import{useState as t,useEffect as n}from"react";import s from"../../assets/icons/cross.svg.js";import{Input as a}from"../input/Input.js";const i=i=>{const{isEnabled:r,onEnter:c,placeholder:l,width:d,variant:h,validate:u,isActive:v}=i,[m,f]=t("search"),[p,g]=t("default"),[C,k]=t(v?"active":r?"none":"disabled"),[b,j]=t(i.initialValue||"");n((()=>{k(v?"active":r?"none":"disabled")}),[r,v]),n((()=>{i.reset&&I()}),[null==i?void 0:i.reset]);const w=e=>{r&&c(e)},I=()=>{f("search"),g("default"),j(""),i.onChange(""),k("none"),c("")};return e(a,{validate:u,onFocus:()=>{b.length&&f("cross"),"default"===p&&r&&(g("clicked"),k("active"))},width:d,state:C,leftIcon:"search"===m&&"default"===p?{icon:o}:void 0,rightIcon:"cross"===m?{icon:s,callback:()=>{I(),i.onClickCross&&i.onClickCross()}}:void 0,onChangeText:(e,o)=>{i.onChange(e),j(e),"keydown"!==(null==o?void 0:o.type)||13!==o.which&&13!==o.keyCode?e.trim().length?f("cross"):f("search"):w(e)},placeholder:l,variant:h,value:b,onBlur:()=>{b.length||g("default"),k("none")}})};export{i as SearchBar};
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{SearchIcon as o}from"../../assets/icons/searchIcon.js";import{useState as t,useEffect as n}from"react";import s from"../../assets/icons/cross.svg.js";import{Input as a}from"../input/Input.js";const i=i=>{const{isEnabled:r,onEnter:c,placeholder:l,width:d,variant:h,validate:u,isActive:v}=i,[m,f]=t("search"),[p,g]=t("default"),[C,k]=t(v?"active":r?"none":"disabled"),[b,j]=t(i.initialValue||"");n((()=>{k(v?"active":r?"none":"disabled")}),[r,v]),n((()=>{i.reset&&I()}),[null==i?void 0:i.reset]);const w=e=>{r&&c(e)},I=()=>{f("search"),g("default"),j(""),i.onChange(""),k("none"),c("")};return e(a,{id:"search-bar",validate:u,onFocus:()=>{b.length&&f("cross"),"default"===p&&r&&(g("clicked"),k("active"))},width:d,state:C,leftIcon:"search"===m&&"default"===p?{icon:o}:void 0,rightIcon:"cross"===m?{icon:s,callback:()=>{I(),i.onClickCross&&i.onClickCross()}}:void 0,onChangeText:(e,o)=>{i.onChange(e),j(e),"keydown"!==(null==o?void 0:o.type)||13!==o.which&&13!==o.keyCode?e.trim().length?f("cross"):f("search"):w(e)},placeholder:l,variant:h,value:b,onBlur:()=>{b.length||g("default"),k("none")}})};export{i as SearchBar};
|