@bikdotai/bik-component-library 0.0.821-beta.9 → 0.0.821

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

@@ -1,7 +1,7 @@
-import i, { css as o } from "styled-components";
-import { BodyCaption as r, BodySecondary as h, BodyPrimary as n } from "../TypographyStyle.js";
+import i, { css as l } from "styled-components";
+import { BodyCaption as s, BodySecondary as o, BodyPrimary as n } from "../TypographyStyle.js";
 import { COLORS as e } from "../../constants/Theme.js";
-const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e.stroke.brand : s ? e.stroke.negative.vibrant : e.stroke.primary, x = (t) => t.hideBorder ? 0 : t.version === "2.0" ? 0.5 : 1, p = i.div`
+const d = ({ isActive: t, isInvalid: h, hightlightInputColor: a }) => t ? a || e.stroke.brand : h ? e.stroke.negative.vibrant : e.stroke.primary, x = (t) => t.hideBorder ? 0 : t.version === "2.0" ? 0.5 : 1, p = i.div`
 	border-radius: ${(t) => t.version === "2.0" ? 8 : 4}px;
 	background: ${(t) => ["disabled", "read-only", "disabled-invalid"].includes(t.state) ? e.background.base : "#fff"};
 	border: ${(t) => x(t)}px solid
@@ -30,7 +30,7 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 	justify-content: center;
 	overflow: hidden;
 	${(t) => t.isLeft ? `margin-left:${t.variant && ["small", "x-small"].includes(t.variant) ? "0px" : "8px"}` : `margin-right: ${t.variant && ["small", "x-small"].includes(t.variant) ? "0px" : "8px"}`};
-`, a = o`
+`, r = l`
 	flex-grow: 1;
 	overflow: hidden;
 	height: 100%;
@@ -67,8 +67,8 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		min-height: 100px;
 		resize: none;
 	}
-`, u = i(n)`
-	${a};
+`, f = i(n)`
+	${r};
 	${(t) => t.height && t.type !== "multiline" ? { height: t.height } : {}};
 
 	${(t) => t.autoGrow && t.minHeight && `
@@ -78,8 +78,8 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		max-height: ${t.maxHeight || "100px"};
 	}
 	`}
-`, f = i(h)`
-	${a};
+`, u = i(o)`
+	${r};
 	input {
 		min-height: 20px;
 		&::-webkit-outer-spin-button,
@@ -89,18 +89,7 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		}
 	}
 	${(t) => t.height && t.type !== "multiline" ? { height: t.height } : {}};
-`, $ = i(r)`
-	${a};
-	input {
-		min-height: 16px;
-		&::-webkit-outer-spin-button,
-		&::-webkit-inner-spin-button {
-			-webkit-appearance: none;
-			margin: 0;
-		}
-	}
-	${(t) => t.height && t.type !== "multiline" ? { height: t.height } : {}};
-`, b = i.div`
+`, $ = i.div`
 	display: flex;
 	justify-content: space-between;
 	${(t) => t.maxCharAlignment ? "align-items: flex-end;" : ""}
@@ -118,10 +107,10 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		color: ${e.content.negative};
 		padding-left: 4px;
 	}
-`, w = i(h)`
+`, b = i(o)`
 	color: ${e.content.secondary} !important;
 	margin-top: ${(t) => t.position === "BOTTOM" ? "8px" : "0px"};
-`, y = i(r)`
+`, y = i(s)`
 	white-space: pre-wrap;
 	margin-top: 8px;
 	color: ${(t) => t.invalid ? e.content.negative : e.content.secondary} !important;
@@ -135,10 +124,10 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		width: 16px;
 		height: 16px;
 	}
-`, k = i.div`
+`, w = i.div`
 	${(t) => t.width ? `width: ${t.width}` : ""};
 	${(t) => t.height && t.type == "multiline" ? `height: ${t.height}` : ""};
-	${(t) => t.state === "disabled" || t.state === "disabled-invalid" ? o`
+	${(t) => t.state === "disabled" || t.state === "disabled-invalid" ? l`
 					opacity: 0.5;
 					pointer-events: none;
 			  ` : ""};
@@ -156,12 +145,12 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		align-items: center;
 		justify-content: space-between;
 	}
-`, I = i(n)`
+`, k = i(n)`
 	overflow: unset;
 	margin-left: ${(t) => t.variant && ["small", "x-small"].includes(t.variant) ? "" : "16px"};
 	font-size: ${(t) => t.variant === "x-small" ? "12px" : t.variant === "small" ? "14px" : "16px"};
 	line-height: ${(t) => t.variant === "x-small" ? "16px" : t.variant === "small" ? "20px" : "24px"};
-`, C = i(n)`
+`, I = i(n)`
 	overflow: unset;
 	margin-right: ${(t) => t.variant && ["small", "x-small"].includes(t.variant) ? "" : "16px"};
 	font-size: ${(t) => t.variant === "x-small" ? "12px" : t.variant === "small" ? "14px" : "16px"};
@@ -169,15 +158,14 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 `;
 export {
   v as IconHolder,
-  u as InputContainer,
-  f as InputContainerSmall,
-  $ as InputContainerXSmall,
+  f as InputContainer,
+  u as InputContainerSmall,
   y as InputFooter,
-  b as InputHeader,
+  $ as InputHeader,
   p as InputWrapper,
-  w as MaxCharStyle,
-  I as PrefixHolder,
-  k as RootContainer,
-  C as SuffixHolder
+  b as MaxCharStyle,
+  k as PrefixHolder,
+  w as RootContainer,
+  I as SuffixHolder
 };
 //# sourceMappingURL=Input.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' | '2.0' | '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t  };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height || '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) => (props.state === 'read-only' ? 'opacity: 0.7' : '')};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight || '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; */\n\t/* left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' || props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t  `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","IconHolder","inputCss","css","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}
+{"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' | '2.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' | '2.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t  };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height || '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) => (props.state === 'read-only' ? 'opacity: 0.7' : '')};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight || '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; */\n\t/* left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' || props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t  `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","IconHolder","inputCss","css","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputHeader","MaxCharStyle","InputFooter","BodyCaption","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}

package/dist/esm/components/input-with-vars/InputWithVariables.d.ts

@@ -26,5 +26,7 @@ export interface InputWithVariablesProps {
     showVarHeader?: boolean;
     varHeaderText?: string;
     onPickerToggle?: (isOpen: boolean) => void;
+    showRecommendedBar?: boolean;
+    showSearch?: boolean;
 }
 export declare const InputWithVariables: React.FC<InputWithVariablesProps>;

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

@@ -1,58 +1,60 @@
-import { jsxs as p, Fragment as D, jsx as t } from "react/jsx-runtime";
-import X from "../../assets/icons/PlusIcon.js";
-import { useRef as y, useState as i, useEffect as k } from "react";
-import Y from "styled-components";
-import { v4 as Z } from "uuid";
-import { COLORS as ee } from "../../constants/Theme.js";
-import { AddVariableStyled as te } from "../add-variableV2/AddVariableBox.styled.js";
-import { BodyCaption as ae } from "../TypographyStyle.js";
+import { jsxs as p, Fragment as A, jsx as t } from "react/jsx-runtime";
+import Z from "../../assets/icons/PlusIcon.js";
+import { useRef as y, useState as i, useEffect as F } from "react";
+import ee from "styled-components";
+import { v4 as te } from "uuid";
+import { COLORS as ae } from "../../constants/Theme.js";
+import { AddVariableStyled as re } from "../add-variableV2/AddVariableBox.styled.js";
+import { BodyCaption as le } from "../TypographyStyle.js";
 import { PickerType as m } from "../variable-picker-v3/model.js";
-import { CustomPortal as re } from "./customPortal.js";
-import { Input as le } from "../input/Input.js";
-import { VariablePicker as A } from "../variable-picker-v3/VariablePicker.js";
-import { Floater as ie } from "../floater/floater.js";
-const Te = ({
+import { CustomPortal as ie } from "./customPortal.js";
+import { Input as se } from "../input/Input.js";
+import { VariablePicker as I } from "../variable-picker-v3/VariablePicker.js";
+import { Floater as ne } from "../floater/floater.js";
+const Se = ({
   type: V,
-  allowMix: h,
-  onChange: F,
-  prevVariable: I,
-  variablesList: b,
-  onBlur: w,
+  allowMix: b,
+  onChange: w,
+  prevVariable: O,
+  variablesList: h,
+  onBlur: j,
   onlyVariables: B,
-  placeHolder: O,
-  showAddButton: j = !0,
-  showHelp: N,
+  placeHolder: N,
+  showAddButton: $ = !0,
+  showHelp: z,
   errorMessage: C,
-  maxCharLimit: $,
-  noMaxCharCheck: z,
-  labelText: L,
-  labelElement: M,
-  isRequired: P = !1,
+  maxCharLimit: L,
+  noMaxCharCheck: M,
+  labelText: P,
+  labelElement: H,
+  isRequired: K = !1,
   hintText: T,
-  onEnterPress: H,
-  pickerType: K = m.FLOATER,
-  portalElement: W,
-  showVarHeader: _,
-  varHeaderText: q,
-  onPickerToggle: s
+  onEnterPress: W,
+  pickerType: _ = m.FLOATER,
+  portalElement: q,
+  showVarHeader: G,
+  varHeaderText: J,
+  onPickerToggle: s,
+  showRecommendedBar: x,
+  showSearch: S
 }) => {
-  const S = y(), x = y(!0), a = y(null), [G, d] = i(!1), [J] = i(Z()), [r, E] = i(), [l, c] = i(I), [v, n] = i(!1), [Q, R] = i(!1), [g, u] = i(0);
-  function U(e, f, o) {
+  const E = y(), R = y(!0), a = y(null), [Q, d] = i(!1), [U] = i(te()), [r, g] = i(), [l, c] = i(O), [v, n] = i(!1), [X, D] = i(!1), [k, u] = i(0);
+  function Y(e, f, o) {
     return e.slice(0, o) + f + e.slice(o);
   }
-  return k(() => {
+  return F(() => {
     if (!(!r || !r.actualValue))
-      if (h) {
+      if (b) {
         if (c((e) => ({
-          actualValue: U(
+          actualValue: Y(
             e.actualValue,
             r.actualValue,
-            g
+            k
           ),
           variableType: "string"
         })), a.current) {
           u(a.current.selectionStart);
-          const e = g + r.actualValue.length + 2;
+          const e = k + r.actualValue.length + 2;
           a.current.setSelectionRange(e, e), u(e);
         }
       } else
@@ -61,35 +63,35 @@ const Te = ({
           variableType: r.variableType,
           needsFetching: r.needsFetching
         }));
-  }, [r]), k(() => {
-    x.current ? x.current = !1 : F(l);
-  }, [l]), /* @__PURE__ */ p(D, { children: [
+  }, [r]), F(() => {
+    R.current ? R.current = !1 : w(l);
+  }, [l]), /* @__PURE__ */ p(A, { children: [
     /* @__PURE__ */ p(
-      se,
+      ce,
       {
         isVar: /^{{.*}}$/.test(l.actualValue),
         onKeyDown: (e) => {
-          e.key === "Enter" && H?.(l.actualValue);
+          e.key === "Enter" && W?.(l.actualValue);
         },
         children: [
           /* @__PURE__ */ t(
-            le,
+            se,
             {
-              isRequired: P,
+              isRequired: K,
               hintText: T,
               type: V ?? "text",
-              id: J,
+              id: U,
               ref: a,
               skipFocus: !0,
-              isActive: G,
+              isActive: Q,
               value: l.actualValue,
               validate: (e) => [!0, ""],
               errorMessage: C,
-              noMaxCharCheck: z,
-              maxCharLimit: $,
-              labelText: L,
-              labelElement: M,
-              placeholder: O || "Add a value",
+              noMaxCharCheck: M,
+              maxCharLimit: L,
+              labelText: P,
+              labelElement: H,
+              placeholder: N || "Add a value",
               onClick: (e) => {
                 a.current && u(a.current.selectionStart);
               },
@@ -102,7 +104,7 @@ const Te = ({
                   });
                   return;
                 }
-                c(h ? {
+                c(b ? {
                   actualValue: e,
                   variableType: "string"
                 } : {
@@ -113,10 +115,10 @@ const Te = ({
               onReferenceInit: () => {
               },
               onFocus: (e) => {
-                d(!0), R(!0);
+                d(!0), D(!0);
               },
               onBlur: (e) => {
-                w?.(e, l), e.relatedTarget?.id === "addVar" || e.relatedTarget?.id === "variable-picker-v3" || e.relatedTarget?.className?.includes("accordion") || e.relatedTarget?.id === "back-btn-v3" ? (a.current && a.current.focus(), d(!0)) : e.relatedTarget?.id === "search-bar-v3-picker" ? d(!0) : (d(!1), n(!1), s?.(!1), R(!1));
+                j?.(e, l), e.relatedTarget?.id === "addVar" || e.relatedTarget?.id === "variable-picker-v3" || e.relatedTarget?.className?.includes("accordion") || e.relatedTarget?.id === "back-btn-v3" ? (a.current && a.current.focus(), d(!0)) : e.relatedTarget?.id === "search-bar-v3-picker" ? d(!0) : (d(!1), n(!1), s?.(!1), D(!1));
               }
             }
           ),
@@ -129,29 +131,29 @@ const Te = ({
                 justifyContent: "space-between"
               },
               children: [
-                l.actualValue && N && /* @__PURE__ */ t(
+                l.actualValue && z && /* @__PURE__ */ t(
                   "div",
                   {
                     style: {
                       marginTop: 4
                     },
-                    children: /* @__PURE__ */ t(ae, { children: `This value is of type ${l.variableType}` })
+                    children: /* @__PURE__ */ t(le, { children: `This value is of type ${l.variableType}` })
                   }
                 ),
-                j && Q && /* @__PURE__ */ t(
+                $ && X && /* @__PURE__ */ t(
                   "div",
                   {
                     style: { marginTop: C || T ? "-24px" : "0px" },
                     children: /* @__PURE__ */ t(
-                      te,
+                      re,
                       {
-                        ref: S,
+                        ref: E,
                         id: "addVar",
                         onClick: () => {
                           n(!v), s?.(!v);
                         },
                         children: /* @__PURE__ */ p("div", { className: "add", children: [
-                          /* @__PURE__ */ t(X, { color: "white" }),
+                          /* @__PURE__ */ t(Z, { color: "white" }),
                           /* @__PURE__ */ t("div", { className: "variable", children: "Add variable" })
                         ] })
                       }
@@ -164,43 +166,47 @@ const Te = ({
         ]
       }
     ),
-    v && /* @__PURE__ */ t(D, { children: K === m.EMBEDDED ? /* @__PURE__ */ t(re, { zIndex: 101, element: W ?? document.body, children: /* @__PURE__ */ t(
-      A,
+    v && /* @__PURE__ */ t(A, { children: _ === m.EMBEDDED ? /* @__PURE__ */ t(ie, { zIndex: 101, element: q ?? document.body, children: /* @__PURE__ */ t(
+      I,
       {
         width: "344px",
-        showHeader: _,
-        headerText: q,
+        showRecommendedBar: x,
+        showSearch: S,
+        showHeader: G,
+        headerText: J,
         onClose: () => {
           n(!1), s?.(!1);
         },
         type: m.EMBEDDED,
-        data: b,
+        data: h,
         onSelect: (e) => {
-          E(e), n(!1), s?.(!1);
+          g(e), n(!1), s?.(!1);
         }
       }
-    ) }) : /* @__PURE__ */ t("div", { style: { zIndex: 101, position: "relative" }, children: /* @__PURE__ */ t(ie, { refElement: S, children: /* @__PURE__ */ t("div", { style: { height: 500 }, children: /* @__PURE__ */ t(
-      A,
+    ) }) : /* @__PURE__ */ t("div", { style: { zIndex: 101, position: "relative" }, children: /* @__PURE__ */ t(ne, { refElement: E, children: /* @__PURE__ */ t("div", { style: { height: 500 }, children: /* @__PURE__ */ t(
+      I,
       {
+        showRecommendedBar: x,
+        showSearch: S,
         onClose: () => {
           n(!1), s?.(!1);
         },
         type: m.FLOATER,
-        data: b,
+        data: h,
         onSelect: (e) => {
-          E(e), n(!1), s?.(!1);
+          g(e), n(!1), s?.(!1);
         }
       }
     ) }) }) }) })
   ] });
-}, se = Y.div`
+}, ce = ee.div`
 	position: relative;
 	margin-bottom: 12px;
 	input {
-		color: ${(V) => V.isVar ? ee.stroke.brand : "black"};
+		color: ${(V) => V.isVar ? ae.stroke.brand : "black"};
 	}
 `;
 export {
-  Te as InputWithVariables
+  Se as InputWithVariables
 };
 //# sourceMappingURL=InputWithVariables.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputWithVariables.js","sources":["../../../../src/components/input-with-vars/InputWithVariables.tsx"],"sourcesContent":["import PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { v4 } from 'uuid';\nimport { COLORS } from '@src/constants/Theme';\nimport { AddVariableStyled } from '../add-variableV2/AddVariableBox.styled';\nimport { Variable } from '../add-variableV2/AddVariableV2';\nimport { SelectedVariable } from '../add-variableV2/types';\nimport { Floater } from '../floater';\nimport { Input } from '../input';\nimport { InputTypeI } from '../input/Input.model';\nimport { BodyCaption } from '../TypographyStyle';\nimport { VariablePicker } from '../variable-picker-v3';\nimport { PickerType } from '../variable-picker-v3/model';\nimport { CustomPortal } from './customPortal';\n\nexport interface InputWithVariablesProps {\n\ttype?: InputTypeI;\n\tvariablesList: any;\n\tonChange: (val: SelectedVariable) => void;\n\tonBlur?: (e: Event, val?: SelectedVariable | Variable) => void;\n\tallowMix: boolean;\n\tprevVariable: SelectedVariable;\n\tshowHelp?: boolean;\n\tonlyVariables?: boolean;\n\tplaceHolder?: string;\n\tshowAddButton?: boolean;\n\terrorMessage?: string;\n\tnoMaxCharCheck?: boolean;\n\tmaxCharLimit?: number;\n\tlabelText?: string;\n\tlabelElement?: React.ReactNode;\n\tisRequired?: boolean;\n\thintText?: string;\n\tonEnterPress?: (input: string) => void;\n\tpickerType?: PickerType;\n\tportalElement?: HTMLElement;\n\tshowVarHeader?: boolean;\n\tvarHeaderText?: string;\n\tonPickerToggle?: (isOpen: boolean) => void;\n}\n\nexport const InputWithVariables: React.FC<InputWithVariablesProps> = ({\n\ttype,\n\tallowMix,\n\tonChange,\n\tprevVariable,\n\tvariablesList,\n\tonBlur,\n\tonlyVariables,\n\tplaceHolder,\n\tshowAddButton = true,\n\tshowHelp,\n\terrorMessage,\n\tmaxCharLimit,\n\tnoMaxCharCheck,\n\tlabelText,\n\tlabelElement,\n\tisRequired = false,\n\thintText,\n\tonEnterPress,\n\tpickerType = PickerType.FLOATER,\n\tportalElement,\n\tshowVarHeader,\n\tvarHeaderText,\n\tonPickerToggle,\n}: InputWithVariablesProps) => {\n\tconst superRef = useRef<any>();\n\tconst initialRender = useRef(true);\n\tconst inputRef = useRef(null);\n\tconst [isActive, setIsActive] = useState<boolean>(false);\n\tconst [id] = useState<string>(v4());\n\tconst [selectedVariable, setSelectedVariable] = useState<SelectedVariable>();\n\tconst [displayValue, setDisplayValue] =\n\t\tuseState<SelectedVariable>(prevVariable);\n\tconst [varModalVisible, setVarModalVisible] = useState<boolean>(false);\n\tconst [addVarRefVisible, setAddVarRefVisible] = useState<boolean>(false);\n\tconst [curCursorPosition, setCurCursorPosition] = useState<number>(0);\n\n\tfunction insertString(originalString, stringToInsert, position) {\n\t\tconst modifiedString =\n\t\t\toriginalString.slice(0, position) +\n\t\t\tstringToInsert +\n\t\t\toriginalString.slice(position);\n\t\treturn modifiedString;\n\t}\n\n\tuseEffect(() => {\n\t\tif (!selectedVariable || !selectedVariable.actualValue) {\n\t\t\treturn;\n\t\t}\n\t\tif (allowMix) {\n\t\t\tsetDisplayValue((prev) => ({\n\t\t\t\tactualValue: insertString(\n\t\t\t\t\tprev.actualValue,\n\t\t\t\t\tselectedVariable.actualValue,\n\t\t\t\t\tcurCursorPosition,\n\t\t\t\t),\n\t\t\t\tvariableType: 'string',\n\t\t\t}));\n\t\t\tif (inputRef.current) {\n\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\tconst newPos =\n\t\t\t\t\tcurCursorPosition + selectedVariable.actualValue.length + 2;\n\t\t\t\t(inputRef.current as any).setSelectionRange(newPos, newPos);\n\t\t\t\tsetCurCursorPosition(newPos);\n\t\t\t}\n\t\t} else {\n\t\t\tsetDisplayValue((prev) => ({\n\t\t\t\tactualValue: selectedVariable.actualValue,\n\t\t\t\tvariableType: selectedVariable.variableType,\n\t\t\t\tneedsFetching: selectedVariable.needsFetching,\n\t\t\t}));\n\t\t}\n\t}, [selectedVariable]);\n\n\tuseEffect(() => {\n\t\t// don't call onChange on initial render\n\t\tif (initialRender.current) {\n\t\t\tinitialRender.current = false;\n\t\t} else {\n\t\t\tonChange(displayValue);\n\t\t}\n\t}, [displayValue]);\n\n\treturn (\n\t\t<>\n\t\t\t<StyledInput\n\t\t\t\tisVar={/^{{.*}}$/.test(displayValue.actualValue)}\n\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\tonEnterPress?.(displayValue.actualValue);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tisRequired={isRequired}\n\t\t\t\t\thintText={hintText}\n\t\t\t\t\ttype={type ?? 'text'}\n\t\t\t\t\tid={id}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tskipFocus={true}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tvalue={displayValue.actualValue}\n\t\t\t\t\tvalidate={(_) => [true, '']}\n\t\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t\tnoMaxCharCheck={noMaxCharCheck}\n\t\t\t\t\tmaxCharLimit={maxCharLimit}\n\t\t\t\t\tlabelText={labelText}\n\t\t\t\t\tlabelElement={labelElement}\n\t\t\t\t\tplaceholder={placeHolder || 'Add a value'}\n\t\t\t\t\tonClick={(event?: Event | undefined) => {\n\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonChangeText={(input: string, event?: Event | undefined) => {\n\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (onlyVariables) {\n\t\t\t\t\t\t\tconst key = (event as any)?.keyCode || (event as any)?.charCode;\n\n\t\t\t\t\t\t\tif (key === 8 || key === 46) {\n\t\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\t\tactualValue: '',\n\t\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (!allowMix) {\n\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\tactualValue: input.replace(/{{.*}}/, ''),\n\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\tactualValue: input,\n\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonReferenceInit={() => {\n\t\t\t\t\t\t/* Bypass eslint */\n\t\t\t\t\t}}\n\t\t\t\t\tonFocus={(e: any) => {\n\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\tsetAddVarRefVisible(true);\n\t\t\t\t\t}}\n\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\tonBlur?.(e, displayValue);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\te.relatedTarget?.id === 'addVar' ||\n\t\t\t\t\t\t\te.relatedTarget?.id === 'variable-picker-v3' ||\n\t\t\t\t\t\t\te.relatedTarget?.className?.includes('accordion') ||\n\t\t\t\t\t\t\te.relatedTarget?.id === 'back-btn-v3'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\t\t(inputRef.current as any).focus();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\t} else if (e.relatedTarget?.id === 'search-bar-v3-picker') {\n\t\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetIsActive(false);\n\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\tsetAddVarRefVisible(false);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{displayValue.actualValue && showHelp && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tmarginTop: 4,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BodyCaption>{`This value is of type ${displayValue.variableType}`}</BodyCaption>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{showAddButton && addVarRefVisible && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ marginTop: errorMessage || hintText ? '-24px' : '0px' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AddVariableStyled\n\t\t\t\t\t\t\t\tref={superRef}\n\t\t\t\t\t\t\t\tid={`addVar`}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(!varModalVisible);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(!varModalVisible);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"add\">\n\t\t\t\t\t\t\t\t\t<PlusIcon color=\"white\" />\n\t\t\t\t\t\t\t\t\t<div className=\"variable\">Add variable</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</AddVariableStyled>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</StyledInput>\n\t\t\t{varModalVisible && (\n\t\t\t\t<>\n\t\t\t\t\t{pickerType === PickerType.EMBEDDED ? (\n\t\t\t\t\t\t<CustomPortal zIndex={101} element={portalElement ?? document.body}>\n\t\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\t\twidth={'344px'}\n\t\t\t\t\t\t\t\tshowHeader={showVarHeader}\n\t\t\t\t\t\t\t\theaderText={varHeaderText}\n\t\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttype={PickerType.EMBEDDED}\n\t\t\t\t\t\t\t\tdata={variablesList}\n\t\t\t\t\t\t\t\tonSelect={(variable: any) => {\n\t\t\t\t\t\t\t\t\tsetSelectedVariable(variable);\n\t\t\t\t\t\t\t\t\t// this can be conditional also via a prop\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CustomPortal>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div style={{ zIndex: 101, position: 'relative' }}>\n\t\t\t\t\t\t\t<Floater refElement={superRef}>\n\t\t\t\t\t\t\t\t<div style={{ height: 500 }}>\n\t\t\t\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\ttype={PickerType.FLOATER}\n\t\t\t\t\t\t\t\t\t\tdata={variablesList}\n\t\t\t\t\t\t\t\t\t\tonSelect={(variable: any) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedVariable(variable);\n\t\t\t\t\t\t\t\t\t\t\t// this can be conditional also via a prop\n\t\t\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Floater>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst StyledInput = styled.div<{ isVar: boolean }>`\n\tposition: relative;\n\tmargin-bottom: 12px;\n\tinput {\n\t\tcolor: ${(props) => (props.isVar ? COLORS.stroke.brand : 'black')};\n\t}\n`;\n"],"names":["InputWithVariables","type","allowMix","onChange","prevVariable","variablesList","onBlur","onlyVariables","placeHolder","showAddButton","showHelp","errorMessage","maxCharLimit","noMaxCharCheck","labelText","labelElement","isRequired","hintText","onEnterPress","pickerType","PickerType","portalElement","showVarHeader","varHeaderText","onPickerToggle","superRef","useRef","initialRender","inputRef","isActive","setIsActive","useState","id","v4","selectedVariable","setSelectedVariable","displayValue","setDisplayValue","varModalVisible","setVarModalVisible","addVarRefVisible","setAddVarRefVisible","curCursorPosition","setCurCursorPosition","insertString","originalString","stringToInsert","position","useEffect","prev","newPos","jsxs","Fragment","StyledInput","jsx","Input","_","event","input","key","BodyCaption","AddVariableStyled","PlusIcon","CustomPortal","VariablePicker","variable","Floater","styled","props","COLORS"],"mappings":";;;;;;;;;;;;;AA0CO,MAAMA,KAAwD,CAAC;AAAA,EACrE,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC,IAAaC,EAAW;AAAA,EACxB,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AACD,MAA+B;AAC9B,QAAMC,IAAWC,EAAA,GACXC,IAAgBD,EAAO,EAAI,GAC3BE,IAAWF,EAAO,IAAI,GACtB,CAACG,GAAUC,CAAW,IAAIC,EAAkB,EAAK,GACjD,CAACC,CAAE,IAAID,EAAiBE,GAAI,GAC5B,CAACC,GAAkBC,CAAmB,IAAIJ,EAAA,GAC1C,CAACK,GAAcC,CAAe,IACnCN,EAA2B3B,CAAY,GAClC,CAACkC,GAAiBC,CAAkB,IAAIR,EAAkB,EAAK,GAC/D,CAACS,GAAkBC,CAAmB,IAAIV,EAAkB,EAAK,GACjE,CAACW,GAAmBC,CAAoB,IAAIZ,EAAiB,CAAC;AAEpE,WAASa,EAAaC,GAAgBC,GAAgBC,GAAU;AAK/D,WAHCF,EAAe,MAAM,GAAGE,CAAQ,IAChCD,IACAD,EAAe,MAAME,CAAQ;AAAA,EAE/B;AAEA,SAAAC,EAAU,MAAM;AACf,QAAI,GAACd,KAAoB,CAACA,EAAiB;AAG3C,UAAIhC;AASH,YARAmC,EAAgB,CAACY,OAAU;AAAA,UAC1B,aAAaL;AAAA,YACZK,EAAK;AAAA,YACLf,EAAiB;AAAA,YACjBQ;AAAA,UAAA;AAAA,UAED,cAAc;AAAA,QAAA,EACb,GACEd,EAAS,SAAS;AACrB,UAAAe,EAAsBf,EAAS,QAAgB,cAAc;AAC7D,gBAAMsB,IACLR,IAAoBR,EAAiB,YAAY,SAAS;AAC1D,UAAAN,EAAS,QAAgB,kBAAkBsB,GAAQA,CAAM,GAC1DP,EAAqBO,CAAM;AAAA,QAC5B;AAAA;AAEA,QAAAb,EAAgB,CAACY,OAAU;AAAA,UAC1B,aAAaf,EAAiB;AAAA,UAC9B,cAAcA,EAAiB;AAAA,UAC/B,eAAeA,EAAiB;AAAA,QAAA,EAC/B;AAAA,EAEJ,GAAG,CAACA,CAAgB,CAAC,GAErBc,EAAU,MAAM;AAEf,IAAIrB,EAAc,UACjBA,EAAc,UAAU,KAExBxB,EAASiC,CAAY;AAAA,EAEvB,GAAG,CAACA,CAAY,CAAC,GAGhB,gBAAAe,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,OAAO,WAAW,KAAKjB,EAAa,WAAW;AAAA,QAC/C,WAAW,CAAC,MAAM;AACjB,UAAI,EAAE,QAAQ,WACblB,IAAekB,EAAa,WAAW;AAAA,QAEzC;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAkB;AAAA,YAACC;AAAA,YAAA;AAAA,cACA,YAAAvC;AAAA,cACA,UAAAC;AAAA,cACA,MAAMhB,KAAQ;AAAA,cACd,IAAA+B;AAAA,cACA,KAAKJ;AAAA,cACL,WAAW;AAAA,cACX,UAAAC;AAAA,cACA,OAAOO,EAAa;AAAA,cACpB,UAAU,CAACoB,MAAM,CAAC,IAAM,EAAE;AAAA,cAC1B,cAAA7C;AAAA,cACA,gBAAAE;AAAA,cACA,cAAAD;AAAA,cACA,WAAAE;AAAA,cACA,cAAAC;AAAA,cACA,aAAaP,KAAe;AAAA,cAC5B,SAAS,CAACiD,MAA8B;AACvC,gBAAI7B,EAAS,WACZe,EAAsBf,EAAS,QAAgB,cAAc;AAAA,cAE/D;AAAA,cACA,cAAc,CAAC8B,GAAeD,MAA8B;AAK3D,oBAJI7B,EAAS,WACZe,EAAsBf,EAAS,QAAgB,cAAc,GAG1DrB,GAAe;AAClB,wBAAMoD,IAAOF,GAAe,WAAYA,GAAe;AAEvD,mBAAIE,MAAQ,KAAKA,MAAQ,OACxBtB,EAAgB;AAAA,oBACf,aAAa;AAAA,oBACb,cAAc;AAAA,kBAAA,CACd;AAEF;AAAA,gBACD;AAEA,gBAMCA,EANInC,IAMY;AAAA,kBACf,aAAawD;AAAA,kBACb,cAAc;AAAA,gBAAA,IAPC;AAAA,kBACf,aAAaA,EAAM,QAAQ,UAAU,EAAE;AAAA,kBACvC,cAAc;AAAA,gBAAA,CAMd;AAAA,cAEH;AAAA,cACA,iBAAiB,MAAM;AAAA,cAEvB;AAAA,cACA,SAAS,CAAC,MAAW;AACpB,gBAAA5B,EAAY,EAAI,GAChBW,EAAoB,EAAI;AAAA,cACzB;AAAA,cACA,QAAQ,CAAC,MAAM;AACd,gBAAAnC,IAAS,GAAG8B,CAAY,GAEvB,EAAE,eAAe,OAAO,YACxB,EAAE,eAAe,OAAO,wBACxB,EAAE,eAAe,WAAW,SAAS,WAAW,KAChD,EAAE,eAAe,OAAO,iBAEpBR,EAAS,WACXA,EAAS,QAAgB,MAAA,GAE3BE,EAAY,EAAI,KACN,EAAE,eAAe,OAAO,yBAClCA,EAAY,EAAI,KAEhBA,EAAY,EAAK,GACjBS,EAAmB,EAAK,GACxBf,IAAiB,EAAK,GACtBiB,EAAoB,EAAK;AAAA,cAE3B;AAAA,YAAA;AAAA,UAAA;AAAA,UAGD,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,SAAS;AAAA,gBACT,eAAe;AAAA,gBACf,gBAAgB;AAAA,cAAA;AAAA,cAGhB,UAAA;AAAA,gBAAAf,EAAa,eAAe1B,KAC5B,gBAAA4C;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACA,OAAO;AAAA,sBACN,WAAW;AAAA,oBAAA;AAAA,oBAGZ,UAAA,gBAAAA,EAACM,IAAA,EAAa,UAAA,yBAAyBxB,EAAa,YAAY,GAAA,CAAG;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGpE3B,KAAiB+B,KACjB,gBAAAc;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACA,OAAO,EAAE,WAAW3C,KAAgBM,IAAW,UAAU,MAAA;AAAA,oBAEzD,UAAA,gBAAAqC;AAAA,sBAACO;AAAA,sBAAA;AAAA,wBACA,KAAKpC;AAAA,wBACL,IAAI;AAAA,wBACJ,SAAS,MAAM;AACd,0BAAAc,EAAmB,CAACD,CAAe,GACnCd,IAAiB,CAACc,CAAe;AAAA,wBAClC;AAAA,wBAEA,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,OACd,UAAA;AAAA,0BAAA,gBAAAG,EAACQ,GAAA,EAAS,OAAM,QAAA,CAAQ;AAAA,0BACxB,gBAAAR,EAAC,OAAA,EAAI,WAAU,YAAW,UAAA,eAAA,CAAY;AAAA,wBAAA,EAAA,CACvC;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACD;AAAA,gBAAA;AAAA,cACD;AAAA,YAAA;AAAA,UAAA;AAAA,QAEF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEAhB,KACA,gBAAAgB,EAAAF,GAAA,EACE,UAAAjC,MAAeC,EAAW,WAC1B,gBAAAkC,EAACS,IAAA,EAAa,QAAQ,KAAK,SAAS1C,KAAiB,SAAS,MAC7D,UAAA,gBAAAiC;AAAA,MAACU;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,QACP,YAAY1C;AAAA,QACZ,YAAYC;AAAA,QACZ,SAAS,MAAM;AACd,UAAAgB,EAAmB,EAAK,GACxBf,IAAiB,EAAK;AAAA,QACvB;AAAA,QACA,MAAMJ,EAAW;AAAA,QACjB,MAAMf;AAAA,QACN,UAAU,CAAC4D,MAAkB;AAC5B,UAAA9B,EAAoB8B,CAAQ,GAE5B1B,EAAmB,EAAK,GACxBf,IAAiB,EAAK;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA,EACD,CACD,IAEA,gBAAA8B,EAAC,OAAA,EAAI,OAAO,EAAE,QAAQ,KAAK,UAAU,WAAA,GACpC,UAAA,gBAAAA,EAACY,IAAA,EAAQ,YAAYzC,GACpB,UAAA,gBAAA6B,EAAC,SAAI,OAAO,EAAE,QAAQ,IAAA,GACrB,UAAA,gBAAAA;AAAA,MAACU;AAAA,MAAA;AAAA,QACA,SAAS,MAAM;AACd,UAAAzB,EAAmB,EAAK,GACxBf,IAAiB,EAAK;AAAA,QACvB;AAAA,QACA,MAAMJ,EAAW;AAAA,QACjB,MAAMf;AAAA,QACN,UAAU,CAAC4D,MAAkB;AAC5B,UAAA9B,EAAoB8B,CAAQ,GAE5B1B,EAAmB,EAAK,GACxBf,IAAiB,EAAK;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA,GAEF,EAAA,CACD,EAAA,CACD,EAAA,CAEF;AAAA,EAAA,GAEF;AAEF,GAEM6B,KAAcc,EAAO;AAAA;AAAA;AAAA;AAAA,WAIhB,CAACC,MAAWA,EAAM,QAAQC,GAAO,OAAO,QAAQ,OAAQ;AAAA;AAAA;"}
+{"version":3,"file":"InputWithVariables.js","sources":["../../../../src/components/input-with-vars/InputWithVariables.tsx"],"sourcesContent":["import PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { v4 } from 'uuid';\nimport { COLORS } from '@src/constants/Theme';\nimport { AddVariableStyled } from '../add-variableV2/AddVariableBox.styled';\nimport { Variable } from '../add-variableV2/AddVariableV2';\nimport { SelectedVariable } from '../add-variableV2/types';\nimport { Floater } from '../floater';\nimport { Input } from '../input';\nimport { InputTypeI } from '../input/Input.model';\nimport { BodyCaption } from '../TypographyStyle';\nimport { VariablePicker } from '../variable-picker-v3';\nimport { PickerType } from '../variable-picker-v3/model';\nimport { CustomPortal } from './customPortal';\n\nexport interface InputWithVariablesProps {\n\ttype?: InputTypeI;\n\tvariablesList: any;\n\tonChange: (val: SelectedVariable) => void;\n\tonBlur?: (e: Event, val?: SelectedVariable | Variable) => void;\n\tallowMix: boolean;\n\tprevVariable: SelectedVariable;\n\tshowHelp?: boolean;\n\tonlyVariables?: boolean;\n\tplaceHolder?: string;\n\tshowAddButton?: boolean;\n\terrorMessage?: string;\n\tnoMaxCharCheck?: boolean;\n\tmaxCharLimit?: number;\n\tlabelText?: string;\n\tlabelElement?: React.ReactNode;\n\tisRequired?: boolean;\n\thintText?: string;\n\tonEnterPress?: (input: string) => void;\n\tpickerType?: PickerType;\n\tportalElement?: HTMLElement;\n\tshowVarHeader?: boolean;\n\tvarHeaderText?: string;\n\tonPickerToggle?: (isOpen: boolean) => void;\n\tshowRecommendedBar?: boolean;\n\tshowSearch?: boolean;\n}\n\nexport const InputWithVariables: React.FC<InputWithVariablesProps> = ({\n\ttype,\n\tallowMix,\n\tonChange,\n\tprevVariable,\n\tvariablesList,\n\tonBlur,\n\tonlyVariables,\n\tplaceHolder,\n\tshowAddButton = true,\n\tshowHelp,\n\terrorMessage,\n\tmaxCharLimit,\n\tnoMaxCharCheck,\n\tlabelText,\n\tlabelElement,\n\tisRequired = false,\n\thintText,\n\tonEnterPress,\n\tpickerType = PickerType.FLOATER,\n\tportalElement,\n\tshowVarHeader,\n\tvarHeaderText,\n\tonPickerToggle,\n\tshowRecommendedBar,\n\tshowSearch,\n}: InputWithVariablesProps) => {\n\tconst superRef = useRef<any>();\n\tconst initialRender = useRef(true);\n\tconst inputRef = useRef(null);\n\tconst [isActive, setIsActive] = useState<boolean>(false);\n\tconst [id] = useState<string>(v4());\n\tconst [selectedVariable, setSelectedVariable] = useState<SelectedVariable>();\n\tconst [displayValue, setDisplayValue] =\n\t\tuseState<SelectedVariable>(prevVariable);\n\tconst [varModalVisible, setVarModalVisible] = useState<boolean>(false);\n\tconst [addVarRefVisible, setAddVarRefVisible] = useState<boolean>(false);\n\tconst [curCursorPosition, setCurCursorPosition] = useState<number>(0);\n\n\tfunction insertString(originalString, stringToInsert, position) {\n\t\tconst modifiedString =\n\t\t\toriginalString.slice(0, position) +\n\t\t\tstringToInsert +\n\t\t\toriginalString.slice(position);\n\t\treturn modifiedString;\n\t}\n\n\tuseEffect(() => {\n\t\tif (!selectedVariable || !selectedVariable.actualValue) {\n\t\t\treturn;\n\t\t}\n\t\tif (allowMix) {\n\t\t\tsetDisplayValue((prev) => ({\n\t\t\t\tactualValue: insertString(\n\t\t\t\t\tprev.actualValue,\n\t\t\t\t\tselectedVariable.actualValue,\n\t\t\t\t\tcurCursorPosition,\n\t\t\t\t),\n\t\t\t\tvariableType: 'string',\n\t\t\t}));\n\t\t\tif (inputRef.current) {\n\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\tconst newPos =\n\t\t\t\t\tcurCursorPosition + selectedVariable.actualValue.length + 2;\n\t\t\t\t(inputRef.current as any).setSelectionRange(newPos, newPos);\n\t\t\t\tsetCurCursorPosition(newPos);\n\t\t\t}\n\t\t} else {\n\t\t\tsetDisplayValue((prev) => ({\n\t\t\t\tactualValue: selectedVariable.actualValue,\n\t\t\t\tvariableType: selectedVariable.variableType,\n\t\t\t\tneedsFetching: selectedVariable.needsFetching,\n\t\t\t}));\n\t\t}\n\t}, [selectedVariable]);\n\n\tuseEffect(() => {\n\t\t// don't call onChange on initial render\n\t\tif (initialRender.current) {\n\t\t\tinitialRender.current = false;\n\t\t} else {\n\t\t\tonChange(displayValue);\n\t\t}\n\t}, [displayValue]);\n\n\treturn (\n\t\t<>\n\t\t\t<StyledInput\n\t\t\t\tisVar={/^{{.*}}$/.test(displayValue.actualValue)}\n\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\tonEnterPress?.(displayValue.actualValue);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tisRequired={isRequired}\n\t\t\t\t\thintText={hintText}\n\t\t\t\t\ttype={type ?? 'text'}\n\t\t\t\t\tid={id}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tskipFocus={true}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tvalue={displayValue.actualValue}\n\t\t\t\t\tvalidate={(_) => [true, '']}\n\t\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t\tnoMaxCharCheck={noMaxCharCheck}\n\t\t\t\t\tmaxCharLimit={maxCharLimit}\n\t\t\t\t\tlabelText={labelText}\n\t\t\t\t\tlabelElement={labelElement}\n\t\t\t\t\tplaceholder={placeHolder || 'Add a value'}\n\t\t\t\t\tonClick={(event?: Event | undefined) => {\n\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonChangeText={(input: string, event?: Event | undefined) => {\n\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (onlyVariables) {\n\t\t\t\t\t\t\tconst key = (event as any)?.keyCode || (event as any)?.charCode;\n\n\t\t\t\t\t\t\tif (key === 8 || key === 46) {\n\t\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\t\tactualValue: '',\n\t\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (!allowMix) {\n\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\tactualValue: input.replace(/{{.*}}/, ''),\n\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\tactualValue: input,\n\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonReferenceInit={() => {\n\t\t\t\t\t\t/* Bypass eslint */\n\t\t\t\t\t}}\n\t\t\t\t\tonFocus={(e: any) => {\n\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\tsetAddVarRefVisible(true);\n\t\t\t\t\t}}\n\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\tonBlur?.(e, displayValue);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\te.relatedTarget?.id === 'addVar' ||\n\t\t\t\t\t\t\te.relatedTarget?.id === 'variable-picker-v3' ||\n\t\t\t\t\t\t\te.relatedTarget?.className?.includes('accordion') ||\n\t\t\t\t\t\t\te.relatedTarget?.id === 'back-btn-v3'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\t\t(inputRef.current as any).focus();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\t} else if (e.relatedTarget?.id === 'search-bar-v3-picker') {\n\t\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetIsActive(false);\n\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\tsetAddVarRefVisible(false);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{displayValue.actualValue && showHelp && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tmarginTop: 4,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BodyCaption>{`This value is of type ${displayValue.variableType}`}</BodyCaption>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{showAddButton && addVarRefVisible && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ marginTop: errorMessage || hintText ? '-24px' : '0px' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AddVariableStyled\n\t\t\t\t\t\t\t\tref={superRef}\n\t\t\t\t\t\t\t\tid={`addVar`}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(!varModalVisible);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(!varModalVisible);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"add\">\n\t\t\t\t\t\t\t\t\t<PlusIcon color=\"white\" />\n\t\t\t\t\t\t\t\t\t<div className=\"variable\">Add variable</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</AddVariableStyled>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</StyledInput>\n\t\t\t{varModalVisible && (\n\t\t\t\t<>\n\t\t\t\t\t{pickerType === PickerType.EMBEDDED ? (\n\t\t\t\t\t\t<CustomPortal zIndex={101} element={portalElement ?? document.body}>\n\t\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\t\twidth={'344px'}\n\t\t\t\t\t\t\t\tshowRecommendedBar={showRecommendedBar}\n\t\t\t\t\t\t\t\tshowSearch={showSearch}\n\t\t\t\t\t\t\t\tshowHeader={showVarHeader}\n\t\t\t\t\t\t\t\theaderText={varHeaderText}\n\t\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttype={PickerType.EMBEDDED}\n\t\t\t\t\t\t\t\tdata={variablesList}\n\t\t\t\t\t\t\t\tonSelect={(variable: any) => {\n\t\t\t\t\t\t\t\t\tsetSelectedVariable(variable);\n\t\t\t\t\t\t\t\t\t// this can be conditional also via a prop\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CustomPortal>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div style={{ zIndex: 101, position: 'relative' }}>\n\t\t\t\t\t\t\t<Floater refElement={superRef}>\n\t\t\t\t\t\t\t\t<div style={{ height: 500 }}>\n\t\t\t\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\t\t\t\tshowRecommendedBar={showRecommendedBar}\n\t\t\t\t\t\t\t\t\t\tshowSearch={showSearch}\n\t\t\t\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\ttype={PickerType.FLOATER}\n\t\t\t\t\t\t\t\t\t\tdata={variablesList}\n\t\t\t\t\t\t\t\t\t\tonSelect={(variable: any) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedVariable(variable);\n\t\t\t\t\t\t\t\t\t\t\t// this can be conditional also via a prop\n\t\t\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Floater>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst StyledInput = styled.div<{ isVar: boolean }>`\n\tposition: relative;\n\tmargin-bottom: 12px;\n\tinput {\n\t\tcolor: ${(props) => (props.isVar ? COLORS.stroke.brand : 'black')};\n\t}\n`;\n"],"names":["InputWithVariables","type","allowMix","onChange","prevVariable","variablesList","onBlur","onlyVariables","placeHolder","showAddButton","showHelp","errorMessage","maxCharLimit","noMaxCharCheck","labelText","labelElement","isRequired","hintText","onEnterPress","pickerType","PickerType","portalElement","showVarHeader","varHeaderText","onPickerToggle","showRecommendedBar","showSearch","superRef","useRef","initialRender","inputRef","isActive","setIsActive","useState","id","v4","selectedVariable","setSelectedVariable","displayValue","setDisplayValue","varModalVisible","setVarModalVisible","addVarRefVisible","setAddVarRefVisible","curCursorPosition","setCurCursorPosition","insertString","originalString","stringToInsert","position","useEffect","prev","newPos","jsxs","Fragment","StyledInput","jsx","Input","_","event","input","key","BodyCaption","AddVariableStyled","PlusIcon","CustomPortal","VariablePicker","variable","Floater","styled","props","COLORS"],"mappings":"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"}

package/dist/esm/components/list-item/List.model.d.ts

@@ -14,6 +14,5 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
     borderBottom?: string;
     customComponent?: JSX.Element;
     customListItemLabel?: JSX.Element;
-    version?: '1.0' | '2.0' | '3.0';
-    brandSelectedRow?: boolean;
+    version?: '1.0' | '2.0';
 }