@capillarytech/creatives-library 8.0.319 → 8.0.321

package/constants/unified.js

@@ -159,6 +159,20 @@ export const TAG_CONTENT_REGEX = /{{([^}]+)}}/g;
 export const ENTRY_TRIGGER_TAG_REGEX = /\bentryTrigger\.\w+(?:\.\w+)?(?:\(\w+\))?/g;
 export const SKIP_TAGS_REGEX_GROUPS = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)", "Link_to_[a-zA-Z]", "SURVEY.*.TOKEN", "^[A-Za-z].*\\([a-zA-Z\\d]*\\)", "referral_unique_(code|url).*userid"];
 
+// --- Template variable tokens (`{{var}}`, DLT `{#var#}`) ---
+/** Global: all `{{…}}` placeholders in a string. */
+export const DEFAULT_MUSTACHE_VAR_REGEX = /\{\{[^}]+\}\}/g;
+/** Global: `{{…}}` or DLT `{#…#}` tokens (SMS combined mode). */
+export const COMBINED_SMS_TEMPLATE_VAR_REGEX = /\{\{[^}]+\}\}|\{\#[^#]*\#\}/g;
+/** Full-string check: one mustache token. */
+export const MUSTACHE_VAR_TOKEN_FULL_STRING_REGEX = /^\{\{[^}]+\}\}$/;
+/** Full-string check: one DLT hash token. */
+export const DLT_HASH_VAR_TOKEN_FULL_STRING_REGEX = /^\{\#[^#]*\#\}$/;
+/** Global with capture group: inner name inside `{{name}}`. */
+export const MUSTACHE_VAR_NAME_CAPTURE_REGEX = /\{\{([^}]+)\}\}/g;
+/** Global with capture group: inner body inside `{#body#}`. */
+export const DLT_VAR_BODY_CAPTURE_REGEX = /\{\#([^#]*)\#\}/g;
+
 export const GET_TRANSLATION_MAPPED = {
   'en': 'en-US',
   'zh-cn': 'zh',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.319",
+  "version": "8.0.321",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/templateVarUtils.js

@@ -0,0 +1,172 @@
+/**
+ * Shared utilities for templates containing {{var}} and DLT `{#var#}` tokens.
+ * Same split process used by WhatsApp/RCS: match vars with regex, then split content at each var.
+ */
+
+import {
+  COMBINED_SMS_TEMPLATE_VAR_REGEX,
+  DEFAULT_MUSTACHE_VAR_REGEX,
+  DLT_HASH_VAR_TOKEN_FULL_STRING_REGEX,
+  DLT_VAR_BODY_CAPTURE_REGEX,
+  MUSTACHE_VAR_NAME_CAPTURE_REGEX,
+  MUSTACHE_VAR_TOKEN_FULL_STRING_REGEX,
+} from '../constants/unified';
+
+export { COMBINED_SMS_TEMPLATE_VAR_REGEX, DEFAULT_MUSTACHE_VAR_REGEX } from '../constants/unified';
+
+const isMustacheVarToken = (s) =>
+  typeof s === 'string' && MUSTACHE_VAR_TOKEN_FULL_STRING_REGEX.test(s);
+
+export const isDltHashVarToken = (s) =>
+  typeof s === 'string' && DLT_HASH_VAR_TOKEN_FULL_STRING_REGEX.test(s);
+
+export const isAnyTemplateVarToken = (s) => isMustacheVarToken(s) || isDltHashVarToken(s);
+
+/**
+ * `RegExp.prototype.exec` only advances `lastIndex` when the `g` and/or `y` flag is set.
+ * A non-global regex in a `while ((m = re.exec(s)) !== null)` loop never advances and can run forever.
+ *
+ * @param {RegExp} regex
+ * @returns {RegExp} Same instance if already global; otherwise a new RegExp with `g` appended to flags.
+ */
+function ensureGlobalRegexForExecLoop(regex) {
+  if (!regex || !(regex instanceof RegExp) || regex.global) {
+    return regex;
+  }
+  return new RegExp(regex.source, `${regex.flags}g`);
+}
+
+/**
+ * Splits `content` into alternating plain-text segments and variable tokens, using the order of
+ * matches in `matchedVariableTokens` (e.g. from `String.prototype.match` with a global regex).
+ *
+ * @param {string[]} matchedVariableTokens - Matched tokens in left-to-right order
+ * @param {string} content - Full template string
+ * @returns {string[]}
+ */
+export const splitContentByOrderedVarTokens = (matchedVariableTokens, content) => {
+  const segmentList = [];
+  const tokenQueue = [...(matchedVariableTokens ?? [])];
+  let remainder = content ?? '';
+  while ((remainder?.length ?? 0) > 0) {
+    const nextVarToken = tokenQueue?.[0];
+    if (nextVarToken == null || nextVarToken === '') {
+      segmentList.push(remainder);
+      break;
+    }
+    const varStartIndex = remainder.indexOf(nextVarToken);
+    if (varStartIndex !== -1) {
+      segmentList.push(remainder.substring(0, varStartIndex));
+      segmentList.push(nextVarToken);
+      const afterVar = varStartIndex + (nextVarToken?.length ?? 0);
+      remainder = remainder.substring(afterVar, remainder?.length ?? 0);
+      tokenQueue.shift();
+    } else {
+      segmentList.push(remainder);
+      break;
+    }
+  }
+  return segmentList;
+};
+
+/**
+ * Splits a template string into an array of text + {{var}} segments using the given regex.
+ *
+ * @param {string} str - Template string
+ * @param {RegExp} [varRegex] - Regex that matches var tokens; defaults to DEFAULT_MUSTACHE_VAR_REGEX
+ * @returns {string[]}
+ */
+export const splitTemplateVarString = (str = '', varRegex = DEFAULT_MUSTACHE_VAR_REGEX) => {
+  if (!str) return [];
+  const matchedVariableTokens = str.match(varRegex) || [];
+  return splitContentByOrderedVarTokens(matchedVariableTokens, str).filter(
+    (segment) => segment === 0 || segment
+  );
+};
+
+/**
+ * Extracts unique variable names from `{{var}}` (and, when using default capture, `{#var#}`) strings.
+ *
+ * @param {string} templateStr
+ * @param {RegExp} [captureRegex] - regex with a single capture group for the var name; if omitted, also scans DLT `{#…#}`.
+ * @returns {string[]}
+ */
+export const extractTemplateVariables = (templateStr = '', captureRegex) => {
+  if (!templateStr) return [];
+  const variables = [];
+  const add = (name) => {
+    const n = (name || '').trim();
+    if (n && !variables.includes(n)) variables.push(n);
+  };
+  const mustacheRe = ensureGlobalRegexForExecLoop(
+    captureRegex || MUSTACHE_VAR_NAME_CAPTURE_REGEX,
+  );
+  let match;
+  while ((match = mustacheRe.exec(templateStr)) !== null) {
+    add(match?.[1]);
+  }
+  if (!captureRegex) {
+    const dltRe = new RegExp(DLT_VAR_BODY_CAPTURE_REGEX.source, DLT_VAR_BODY_CAPTURE_REGEX.flags);
+    let dltMatch;
+    while ((dltMatch = dltRe.exec(templateStr)) !== null) {
+      add(dltMatch?.[1] || 'var');
+    }
+  }
+  return variables;
+};
+
+/**
+ * SMS / DLT template preview: replace `{{…}}` / `{#…#}` tokens using `varMapData` keys `${token}_${index}`.
+ * Used by SmsTraiEdit (RCS SMS fallback) and UnifiedPreview fallback SMS bubble.
+ * DLT `{#…#}`: empty / unset slot values show the raw token (matches DLT preview UX); mustache `{{…}}` still
+ * resolves to empty when the slot is cleared.
+ */
+export const getFallbackResolvedContent = (templateStr = '', varMapData = {}) => {
+  const fallbackVarSlotMap = varMapData ?? {};
+  const templateSegments = splitTemplateVarString(templateStr, COMBINED_SMS_TEMPLATE_VAR_REGEX);
+  return templateSegments
+    .map((segment, segmentIndex) => {
+      const isVariableToken = typeof segment === 'string' && isAnyTemplateVarToken(segment);
+      if (!isVariableToken) return segment;
+      const slotKey = `${segment}_${segmentIndex}`;
+      if (Object.prototype.hasOwnProperty.call(fallbackVarSlotMap, slotKey)) {
+        const slotValue = fallbackVarSlotMap[slotKey];
+        if (isDltHashVarToken(segment)) {
+          if (slotValue == null) return segment;
+          const str = String(slotValue);
+          if (str.trim() === '') return segment;
+          return str;
+        }
+        return slotValue == null ? '' : String(slotValue);
+      }
+      if (isDltHashVarToken(segment)) return segment;
+      return '';
+    })
+    .join('');
+};
+
+/**
+ * SMS fallback **card** (library list): show filled slot text; if a slot is empty, unset, or
+ * whitespace-only, show the raw `{{…}}` / `{#…#}` token so “save without labels” still shows
+ * `{#var#}` in the card. {@link getFallbackResolvedContent} keeps DLT placeholders in preview when
+ * slots are empty; mustache cleared slots can still render empty.
+ */
+export const getFallbackResolvedContentForCardDisplay = (templateStr = '', varMapData = {}) => {
+  const fallbackVarSlotMap = varMapData ?? {};
+  const templateSegments = splitTemplateVarString(templateStr, COMBINED_SMS_TEMPLATE_VAR_REGEX);
+  return templateSegments
+    .map((segment, segmentIndex) => {
+      const isVariableToken = typeof segment === 'string' && isAnyTemplateVarToken(segment);
+      if (!isVariableToken) return segment;
+      const slotKey = `${segment}_${segmentIndex}`;
+      if (Object.prototype.hasOwnProperty.call(fallbackVarSlotMap, slotKey)) {
+        const slotValue = fallbackVarSlotMap[slotKey];
+        if (slotValue == null) return segment;
+        const str = String(slotValue);
+        if (str.trim() === '') return segment;
+        return str;
+      }
+      return segment;
+    })
+    .join('');
+};

package/utils/tests/tagValidations.test.js

@@ -242,6 +242,7 @@ describe("validateTags", () => {
       tagsParam,
       location,
       tagModule,
+      waitEventContextTags: {},
     });
 
     expect(result.valid).toEqual(true);
@@ -273,6 +274,7 @@ describe("validateTags", () => {
       tagsParam: tagsParamLocal,
       location,
       tagModule,
+      waitEventContextTags: {},
     });
 
     expect(result.valid).toEqual(true);
@@ -310,6 +312,7 @@ describe("validateTags", () => {
       tagsParam: tagsParamLocal,
       location,
       tagModule,
+      waitEventContextTags: {},
     });
 
     expect(result.valid).toEqual(false);
@@ -335,6 +338,7 @@ describe("validateTags", () => {
       tagsParam: tagsParamUnsubscribe,
       location,
       tagModule,
+      waitEventContextTags: {},
     });
     expect(resultMissing.missingTags).toContain("unsubscribe");
     expect(resultMissing.valid).toBe(false);
@@ -345,6 +349,7 @@ describe("validateTags", () => {
       tagsParam: tagsParamUnsubscribe,
       location,
       tagModule,
+      waitEventContextTags: {},
     });
     expect(resultSkipped.missingTags).not.toContain("unsubscribe");
     expect(resultSkipped.valid).toBe(true);
@@ -360,6 +365,35 @@ describe("validateTags", () => {
     expect(resultWhitespace.valid).toBe(true);
     expect(resultWhitespace.unsupportedTags ?? []).toEqual([]);
   });
+
+  it('should treat tags from waitEventContextTags as supported', () => {
+    const content = 'Hello {{waitEvent.orderId}}';
+    const tagsParam = [];
+    const injectedTagsParams = [];
+    const location = { query: { module: 'DEFAULT' } };
+    const tagModule = null;
+    const waitEventContextTags = {
+      block1: {
+        eventName: 'Order Placed',
+        blockName: 'Wait Block',
+        tags: [{ tagName: 'waitEvent.orderId', label: 'Order ID' }],
+      },
+    };
+
+    const result = validateTags({
+      content,
+      tagsParam,
+      injectedTagsParams,
+      location,
+      tagModule,
+      eventContextTags: [],
+      waitEventContextTags,
+    });
+
+    expect(result.valid).toEqual(true);
+    expect(result.missingTags).toEqual([]);
+    expect(result.isBraceError).toEqual(false);
+  });
 });
 
 describe('validateTags wrapper (v2 consumers)', () => {

package/utils/tests/templateVarUtils.test.js

@@ -0,0 +1,160 @@
+import {
+  extractTemplateVariables,
+  splitTemplateVarString,
+  splitContentByOrderedVarTokens,
+  getFallbackResolvedContent,
+  getFallbackResolvedContentForCardDisplay,
+  isDltHashVarToken,
+  isAnyTemplateVarToken,
+} from '../templateVarUtils';
+
+describe('templateVarUtils', () => {
+  describe('splitContentByOrderedVarTokens', () => {
+    it('pushes remainder when next token is not found in string', () => {
+      expect(splitContentByOrderedVarTokens(['{{b}}'], 'hello')).toEqual(['hello']);
+    });
+
+    it('handles empty token queue by pushing remainder', () => {
+      expect(splitContentByOrderedVarTokens([], 'rest')).toEqual(['rest']);
+    });
+
+    it('handles null matchedVariableTokens as empty queue', () => {
+      expect(splitContentByOrderedVarTokens(null, 'abc')).toEqual(['abc']);
+    });
+
+    it('stops and pushes remainder when next token in queue is empty string', () => {
+      expect(splitContentByOrderedVarTokens(['{{a}}', ''], 'x{{a}}y')).toEqual(['x', '{{a}}', 'y']);
+    });
+
+    it('splits multiple ordered tokens across content', () => {
+      expect(splitContentByOrderedVarTokens(['{{a}}', '{{b}}'], 'p{{a}}q{{b}}r')).toEqual([
+        'p',
+        '{{a}}',
+        'q',
+        '{{b}}',
+        'r',
+      ]);
+    });
+
+    it('returns empty segment list when content is null and queue is empty', () => {
+      expect(splitContentByOrderedVarTokens([], null)).toEqual([]);
+    });
+  });
+
+  describe('splitTemplateVarString', () => {
+    it('returns empty array for falsy string', () => {
+      expect(splitTemplateVarString('')).toEqual([]);
+      expect(splitTemplateVarString(null)).toEqual([]);
+    });
+
+    it('splits mustache segments', () => {
+      const parts = splitTemplateVarString('Hi {{name}}!');
+      expect(parts.some((p) => p.includes('name'))).toBe(true);
+    });
+
+    it('omits empty segments after filtering', () => {
+      expect(splitTemplateVarString('a{{x}}b')).toEqual(['a', '{{x}}', 'b']);
+    });
+  });
+
+  describe('getFallbackResolvedContent', () => {
+    it('replaces var segments from varMapData', () => {
+      const out = getFallbackResolvedContent('{{a}}', { '{{a}}_0': 'X' });
+      expect(out).toBe('X');
+    });
+
+    it('keeps DLT token string when slot empty', () => {
+      const out = getFallbackResolvedContent('{#v#}', {});
+      expect(out).toContain('#');
+    });
+
+    it('returns empty string for mustache slot when map has no value', () => {
+      const out = getFallbackResolvedContent('Hi {{missing}}', {});
+      expect(out).toBe('Hi ');
+    });
+
+    it('treats null as empty; explicit empty string is kept (cleared input)', () => {
+      expect(getFallbackResolvedContent('{{a}}', { '{{a}}_0': null })).toBe('');
+      expect(getFallbackResolvedContent('{{a}}', { '{{a}}_0': '' })).toBe('');
+    });
+
+    it('keeps DLT token in preview when slot map has empty string (no tag yet)', () => {
+      expect(getFallbackResolvedContent('{#v#}', { '{#v#}_0': '' })).toBe('{#v#}');
+    });
+
+    it('keeps DLT token in preview when slot map has null', () => {
+      expect(getFallbackResolvedContent('{#v#}', { '{#v#}_0': null })).toBe('{#v#}');
+    });
+
+    it('uses slot replacement when value is non-empty string', () => {
+      expect(getFallbackResolvedContent('A{{b}}C', { '{{b}}_1': 'ok' })).toBe('AokC');
+    });
+  });
+
+  describe('getFallbackResolvedContentForCardDisplay', () => {
+    it('shows raw tokens when map is empty or slots unset', () => {
+      expect(getFallbackResolvedContentForCardDisplay('Hi {{name}}', {})).toBe('Hi {{name}}');
+      expect(getFallbackResolvedContentForCardDisplay('{#var#}', {})).toBe('{#var#}');
+    });
+
+    it('shows raw token when slot key exists but value is empty (no labels)', () => {
+      expect(getFallbackResolvedContentForCardDisplay('{#var#}', { '{#var#}_0': '' })).toBe('{#var#}');
+      expect(getFallbackResolvedContentForCardDisplay('{{a}}', { '{{a}}_0': '' })).toBe('{{a}}');
+    });
+
+    it('replaces when slot has non-empty value', () => {
+      expect(getFallbackResolvedContentForCardDisplay('Hi {{name}}', { '{{name}}_1': 'Pat' })).toBe('Hi Pat');
+    });
+  });
+
+  describe('isDltHashVarToken / isAnyTemplateVarToken', () => {
+    it('detects DLT hash token', () => {
+      expect(isDltHashVarToken('{#x#}')).toBe(true);
+      expect(isDltHashVarToken('plain')).toBe(false);
+    });
+
+    it('isAnyTemplateVarToken combines mustache and DLT', () => {
+      expect(isAnyTemplateVarToken('{{a}}')).toBe(true);
+      expect(isAnyTemplateVarToken('{#x#}')).toBe(true);
+    });
+  });
+
+  describe('extractTemplateVariables', () => {
+    it('returns empty array for empty or missing template', () => {
+      expect(extractTemplateVariables('')).toEqual([]);
+      expect(extractTemplateVariables()).toEqual([]);
+    });
+
+    it('includes DLT {#var#} names when no custom capture regex', () => {
+      const vars = extractTemplateVariables('Hello {#promo#} and {{name}}');
+      expect(vars).toEqual(expect.arrayContaining(['promo', 'name']));
+    });
+
+    it('skips DLT scan when captureRegex is provided', () => {
+      const re = /\{\{([^}]+)\}\}/g;
+      expect(extractTemplateVariables('{#x#} {{y}}', re)).toEqual(['y']);
+    });
+
+    it('dedupes duplicate variable names', () => {
+      expect(extractTemplateVariables('{{a}} {{a}}')).toEqual(['a']);
+    });
+
+    it('uses default name var when DLT body capture is empty', () => {
+      const vars = extractTemplateVariables('{##}');
+      expect(vars).toContain('var');
+    });
+  });
+
+  describe('extractTemplateVariables (regex global)', () => {
+    it('extracts all vars when caller passes a non-global capture regex (avoids infinite exec loop)', () => {
+      const nonGlobal = /\{\{([^}]+)\}\}/;
+      expect(nonGlobal.global).toBe(false);
+      expect(extractTemplateVariables('{{a}} and {{b}}', nonGlobal)).toEqual(['a', 'b']);
+    });
+
+    it('still works when capture regex already has the global flag', () => {
+      const globalRe = /\{\{([^}]+)\}\}/g;
+      expect(extractTemplateVariables('{{x}} {{y}}', globalRe)).toEqual(['x', 'y']);
+    });
+  });
+});

package/v2Components/CapTagList/index.js

@@ -211,6 +211,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       } else if (info && info.selectedNodes && info.selectedNodes.length > 0 && !info.selectedNodes[0].props.isLeaf) {
         this.handleOnExpand(selectedKeys[0]);
       }
+      this.setState({expandedKeys: []})
     }
   };
 
@@ -233,6 +234,13 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     }
   };
 
+  /** Single-line ellipsis within popover width; full label on hover via CapTooltip. */
+  wrapTreeTitle = (displayNode, text) => (
+    <CapTooltip title={displayNode}>
+      <CapLabel.CapLabelInline type="label15" className="cap-tag-list-tree-title-wrap">{text || displayNode}</CapLabel.CapLabelInline>
+    </CapTooltip>
+  );
+
   renderDynamicTagFlow = () => {
     this.setState({showModal: true, visible: false});
   };
@@ -280,7 +288,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         if (temp?.length) {
           const tagValue = (
             <CapTreeNode
-              title={disabled ? <CapTooltip title={loyaltyAttrDisableText}>{val?.name}</CapTooltip> : val?.name}
+              title={disabled ? this.wrapTreeTitle(loyaltyAttrDisableText, val?.name) : this.wrapTreeTitle(val?.name)}
               tag={val}
               key={val?.incentiveSeriesId ? `${key}(${val?.incentiveSeriesId})` : `${key}`}
               disabled={disabled}
@@ -303,17 +311,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
               <CapTreeNode
                 title={
                   childDisabled ? (
-                    <CapTooltip
-                      title={
-                        key === CUSTOMER_BARCODE_TAG
-                          ? customerBarcodeDisableText
-                          : loyaltyAttrDisableText
-                      }
-                    >
-                      {val?.desc || val?.name}
-                    </CapTooltip>
+                    this.wrapTreeTitle(key === CUSTOMER_BARCODE_TAG ? customerBarcodeDisableText : loyaltyAttrDisableText, val?.desc || val?.name)
                   ) : (
-                    val?.desc || val?.name
+                    this.wrapTreeTitle(val?.desc || val?.name)
                   )
                 }
                 tag={val}
@@ -339,17 +339,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             <CapTreeNode
               title={
                 childDisabled ? (
-                  <CapTooltip
-                    title={
-                      key === CUSTOMER_BARCODE_TAG
-                        ? customerBarcodeDisableText
-                        : loyaltyAttrDisableText
-                    }
-                  >
-                    {val?.desc || val?.name}
-                  </CapTooltip>
+                  this.wrapTreeTitle(key === CUSTOMER_BARCODE_TAG ? customerBarcodeDisableText : loyaltyAttrDisableText, val?.desc || val?.name)
                 ) : (
-                  val?.desc || val?.name
+                  this.wrapTreeTitle(val?.desc || val?.name)
                 )
               }
               tag={val}
@@ -382,6 +374,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   render() {
     const {
       hidePopover = false, intl = {}, moduleFilterEnabled, label, modalProps, channel, fetchingSchemaError = false,
+      overlayStyle,
+      overlayClassName,
+      getPopupContainer,
     } = this.props;
     const {formatMessage} = intl;
     const {
@@ -404,7 +399,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       },
     ];
     const contentSection = (
-      <CapRow>
+      <CapRow className="cap-tag-list-popover-inner">
         <CapSpin tip={formatMessage(messages.gettingTags)} spinning={shouldShowLoading}>
           <Search
             style={{ marginBottom: 8, width: '250px'}}
@@ -472,8 +467,12 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             visible={fetchingSchemaError ? false : visible}
             onVisibleChange={this.togglePopoverVisibility}
             content={contentSection}
+            overlayClassName="cap-tag-list-popover-overlay"
             trigger="click"
             placement={this.props.popoverPlacement || (channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop")}
+            overlayStyle={overlayStyle}
+            overlayClassName={overlayClassName}
+            getPopupContainer={getPopupContainer}
           >
             <CapTooltip
               title={
@@ -545,6 +544,10 @@ CapTagList.propTypes = {
   disableTooltipMsg: PropTypes.string,
   fetchingSchemaError: PropTypes.bool,
   popoverPlacement: PropTypes.string,
+  overlayStyle: PropTypes.object,
+  overlayClassName: PropTypes.string,
+  /** e.g. () => document.body — avoids overflow/stacking issues inside slideboxes */
+  getPopupContainer: PropTypes.func,
 };
 
 CapTagList.defaultValue = {

package/v2Components/CapTagList/style.scss

@@ -1,5 +1,53 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables";
 
+// Tag list popover: keep overlay width aligned with search (250px); tree rows ellipsis + tooltip for full text
+.cap-tag-list-popover-overlay.ant-popover {
+  .ant-popover-inner-content {
+    max-width: 20rem;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+}
+
+.cap-tag-list-popover-inner {
+  max-width: 20rem;
+  min-width: 0;
+  box-sizing: border-box;
+
+  .ant-tree.cap-tree-v2.ant-tree-icon-hide {
+    width: 100%;
+    max-width: 100%;
+
+    ul {
+      max-width: 100%;
+    }
+
+    li {
+      overflow: hidden;
+      max-width: 100%;
+    }
+
+    li .ant-tree-node-content-wrapper {
+      width: calc(100% - 3.5rem); // leave room for switcher (~24px)
+      max-width: calc(100% - 3.5rem);
+      overflow: hidden;
+      vertical-align: top;
+      box-sizing: border-box;
+    }
+
+    .cap-tag-list-tree-title-wrap {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+      vertical-align: top;
+      margin-top: 0.5rem;
+    }
+  }
+}
+
 @media (max-height: 25rem) {
   .ant-tree.cap-tree-v2.ant-tree-icon-hide {
     height: 8.5714rem;

package/v2Components/CapTagListWithInput/__tests__/CapTagListWithInput.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import CapTagListWithInput from '../index';
+
+const capturedTagListProps = { current: null };
+
+jest.mock('../../../v2Containers/TagList', () => {
+  const React = require('react');
+  const Mock = (props) => {
+    capturedTagListProps.current = props;
+    return <div data-testid="mock-tag-list">TagList</div>;
+  };
+  return Mock;
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => ({ children }) => <div>{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapColumn', () => ({ children }) => <div>{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapHeading', () => () => null);
+jest.mock('@capillarytech/cap-ui-library/CapInput', () => () => <input data-testid="cap-input" />);
+
+const waitMap = {
+  b1: { eventName: 'Order Placed', blockName: 'Wait', tags: [] },
+};
+
+describe('CapTagListWithInput', () => {
+  beforeEach(() => {
+    capturedTagListProps.current = null;
+  });
+
+  it('forwards waitEventContextTags to TagList', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CapTagListWithInput
+          inputId="test-url"
+          inputOnChange={jest.fn()}
+          waitEventContextTags={waitMap}
+          onTagSelect={jest.fn()}
+          onContextChange={jest.fn()}
+        />
+      </IntlProvider>
+    );
+
+    expect(screen.getByTestId('mock-tag-list')).toBeInTheDocument();
+    expect(capturedTagListProps.current.waitEventContextTags).toEqual(waitMap);
+  });
+
+  it('uses default empty object for waitEventContextTags when omitted', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CapTagListWithInput
+          inputId="test-url"
+          inputOnChange={jest.fn()}
+          onTagSelect={jest.fn()}
+          onContextChange={jest.fn()}
+        />
+      </IntlProvider>
+    );
+
+    expect(capturedTagListProps.current.waitEventContextTags).toEqual({});
+  });
+});