@jackuait/blok 0.11.1 → 0.12.0

package/src/components/ui/toolbox.ts

@@ -59,6 +59,73 @@ export interface ToolboxEventMap {
  */
 type ToolboxTextLabelsKeys = 'filter' | 'nothingFound' | 'slashSearchPlaceholder';
 
+/**
+ * Pick the DOMRect used to anchor the toolbox popover.
+ * - Slash open with a slash-search pill present: use the pill's own rect so
+ *   the popover sits below the pill's visual bottom — the same way plus-button
+ *   anchors at the block's bottom. This keeps the popover-to-field gap equal
+ *   between plus-search and slash-search.
+ * - Slash open without a pill (e.g., nested container where the pill was not
+ *   applied): use the caret rect directly.
+ * - Plus button (or slash with degenerate caret): build a composite rect from
+ *   the block's CONTENT element (horizontal bounds) and the block holder
+ *   (vertical bounds). Using the holder's horizontal bounds would snap the
+ *   popover to the editor's left viewport edge in layouts where the holder is
+ *   wider than the centered content column.
+ * @param params - anchor inputs
+ * @param params.caretRect - current selection rect, if any
+ * @param params.caretRectIsDegenerate - true when the caret rect is {0,0,0,0}
+ * @param params.blockRect - the current block holder rect
+ * @param params.contentElement - the current block's content element, if any
+ * @param params.slashSearchElement - the slash-search pill element, if any
+ */
+const resolveAnchorRect = (params: {
+  caretRect: DOMRect | undefined;
+  caretRectIsDegenerate: boolean;
+  blockRect: DOMRect | undefined;
+  contentElement: HTMLElement | null;
+  slashSearchElement: HTMLElement | null;
+}): DOMRect | undefined => {
+  const { caretRect, caretRectIsDegenerate, blockRect, contentElement, slashSearchElement } = params;
+
+  if (slashSearchElement !== null) {
+    const pillRect = slashSearchElement.getBoundingClientRect();
+
+    if (pillRect.width > 0 || pillRect.height > 0) {
+      /**
+       * Tighten the visual gap below the pill without changing the popover's
+       * own offset constant. The popover anchors at rect.bottom + 8; shrinking
+       * the anchor height by this inset pulls the popover a few pixels closer
+       * to the pill. Affects both slash-search and plus-search (same anchor).
+       */
+      const PILL_BOTTOM_INSET = 2;
+
+      return new DOMRect(
+        pillRect.left,
+        pillRect.top,
+        pillRect.width,
+        Math.max(0, pillRect.height - PILL_BOTTOM_INSET)
+      );
+    }
+  }
+
+  if (caretRect !== undefined && !caretRectIsDegenerate) {
+    return caretRect;
+  }
+
+  if (blockRect === undefined) {
+    return undefined;
+  }
+
+  const contentRect = contentElement?.getBoundingClientRect();
+
+  if (contentRect === undefined) {
+    return blockRect;
+  }
+
+  return new DOMRect(contentRect.left, blockRect.top, contentRect.width, blockRect.height);
+};
+
 /**
  * Toolbox
  * This UI element contains list of Block Tools available to be inserted
@@ -347,13 +414,25 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
      *
      * - Slash open ("/"): anchor at the caret rect so the menu appears next to
      *   what the user is typing, in any block type at any nesting depth.
-     * - Plus button open: anchor at the current block's bounding rect so the
-     *   menu appears below the block regardless of trigger placement.
+     * - Plus button open: build a composite rect that uses the block's CONTENT
+     *   element for horizontal bounds (so the menu aligns with the visible
+     *   content column) and the block holder for vertical bounds (so the menu
+     *   sits below the block). Using the holder rect for horizontal bounds
+     *   snapped the menu to the editor's left viewport edge whenever the holder
+     *   was wider than the centered content column.
      *
      * Set the position BEFORE show() so the first paint is already correct —
      * popover.show() reads `params.position` via calculatePosition() and uses
      * it instead of the trigger rect when present.
      */
+    /**
+     * Attach the slash-search pill styling BEFORE computing the anchor rect so
+     * getBoundingClientRect reflects the pill's applied margin/padding — the
+     * popover gap is calculated from that rect and must not predate the class
+     * application.
+     */
+    this.startListeningToBlockInput();
+
     if (this.popover instanceof PopoverDesktop) {
       const blockRect = currentBlock?.holder.getBoundingClientRect();
       const caretRect = withSlash ? SelectionUtils.rect : undefined;
@@ -362,9 +441,16 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
         && caretRect.height === 0
         && caretRect.x === 0
         && caretRect.y === 0;
-      // Fall back to the block rect when selection is lost or returns a
-      // degenerate {0,0,0,0} rect — never anchor the popover at the page origin.
-      const anchorRect = caretRect !== undefined && !caretRectIsDegenerate ? caretRect : blockRect;
+
+      const anchorRect = resolveAnchorRect({
+        caretRect,
+        caretRectIsDegenerate,
+        blockRect,
+        contentElement: currentBlock?.holder
+          .querySelector<HTMLElement>(`[${DATA_ATTR.elementContent}]`) ?? null,
+        slashSearchElement: currentBlock?.holder
+          .querySelector<HTMLElement>(`[${DATA_ATTR.slashSearch}]`) ?? null,
+      });
 
       if (anchorRect !== undefined) {
         this.popover.updatePosition(anchorRect);
@@ -376,7 +462,6 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     this.openedWithSlash = withSlash;
     this.opened = true;
     this.emit(ToolboxEvent.Opened);
-    this.startListeningToBlockInput();
   }
 
   /**
@@ -440,7 +525,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
       },
       items: this.toolboxItemsToBeDisplayed,
       handleContentEditableNavigation: true,
-      minWidth: '250px',
+      minWidth: '220px',
     });
 
     this.popover.on(PopoverEvent.Closed, this.onPopoverClose);

package/src/components/utils/data-model-transform.ts

@@ -231,6 +231,31 @@ const isLegacyCalloutBlock = (block: OutputBlockData): block is OutputBlockData<
   return typeof data === 'object' && data !== null && 'body' in data;
 };
 
+/**
+ * Check if a block is in legacy image format
+ * Legacy editor.js shape: { type: "image", data: { file: { url: "..." }, caption?, withBorder?, withBackground?, stretched? } }
+ * New shape: { type: "image", data: { url, caption?, ... } }
+ */
+const isLegacyImageBlock = (block: OutputBlockData): boolean => {
+  if (block.type !== 'image') {
+    return false;
+  }
+
+  const data = block.data as Record<string, unknown> | null | undefined;
+
+  if (typeof data !== 'object' || data === null) {
+    return false;
+  }
+
+  const file = (data as { file?: unknown }).file;
+
+  if (typeof file !== 'object' || file === null) {
+    return false;
+  }
+
+  return typeof (file as { url?: unknown }).url === 'string';
+};
+
 /**
  * Check if a block contains nested hierarchy in its items
  */
@@ -269,7 +294,10 @@ export const analyzeDataFormat = (blocks: OutputBlockData[]): DataFormatAnalysis
   // Check if any block uses legacy callout format (has body field)
   const foundLegacyCallout = blocks.some(isLegacyCalloutBlock);
 
-  const hasLegacyBlocks = foundLegacyList || foundLegacyToggle || foundLegacyCallout;
+  // Check if any block uses legacy image format (has data.file.url)
+  const foundLegacyImage = blocks.some(isLegacyImageBlock);
+
+  const hasLegacyBlocks = foundLegacyList || foundLegacyToggle || foundLegacyCallout || foundLegacyImage;
 
   if (foundHierarchicalRefs && !hasLegacyBlocks) {
     return { format: 'hierarchical', hasHierarchy: true };
@@ -527,6 +555,45 @@ const expandCalloutToHierarchical = (
   return blocks;
 };
 
+/**
+ * Expand a legacy image block (editor.js shape with `data.file.url`) into
+ * the new flat image shape understood by Blok's ImageTool (see
+ * types/tools/image.d.ts). Moves `data.file.url` to `data.url`, drops the
+ * `file` wrapper, and maps legacy editor.js flags to ImageData fields:
+ *
+ *   - `withBorder: true`  → `frame: 'border'` (false: drop, default is 'none')
+ *   - `withBackground`    → drop entirely (no Blok equivalent)
+ *   - `stretched: true`   → `size: 'full'`   (false: drop)
+ *
+ * All other unknown fields pass through untouched so future editor.js data
+ * can't silently lose information.
+ */
+const expandImageToHierarchical = (block: OutputBlockData): OutputBlockData => {
+  const rawData = (block.data ?? {}) as Record<string, unknown>;
+  const {
+    file,
+    withBorder,
+    withBackground: _withBackground,
+    stretched,
+    ...rest
+  } = rawData;
+  const fileUrl = typeof file === 'object' && file !== null
+    ? (file as { url?: unknown }).url
+    : undefined;
+  const url = typeof fileUrl === 'string' ? fileUrl : '';
+
+  return {
+    ...block,
+    id: block.id ?? generateBlockId(),
+    data: {
+      url,
+      ...rest,
+      ...(withBorder === true ? { frame: 'border' } : {}),
+      ...(stretched === true ? { size: 'full' } : {}),
+    },
+  };
+};
+
 /**
  * Expand legacy nested format to hierarchical flat-with-references format
  * @param blocks - array of blocks potentially containing nested structures
@@ -552,6 +619,9 @@ export const expandToHierarchical = (blocks: OutputBlockData[]): OutputBlockData
       const expanded = expandCalloutToHierarchical(block);
 
       expandedBlocks.push(...expanded);
+    } else if (isLegacyImageBlock(block)) {
+      // Expand legacy image (data.file.url → data.url) to new flat image shape
+      expandedBlocks.push(expandImageToHierarchical(block));
     } else {
       // Non-list blocks pass through unchanged (with guaranteed ID)
       expandedBlocks.push({

package/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.const.ts

@@ -10,7 +10,7 @@ export const css = {
    * Note: noHover state is handled via [data-blok-popover-item-no-hover] which disables hover
    * Priority order: active < hover < focus (focus wins when navigating with keyboard)
    */
-  item: 'flex items-center select-none border-none bg-transparent rounded-lg px-2 py-1 text-text-primary mb-px outline-hidden max-h-9 overflow-hidden data-blok-popover-item-active:bg-icon-active-bg data-blok-popover-item-active:text-icon-active-text can-hover:hover:cursor-pointer can-hover:hover:bg-item-hover-bg data-blok-force-hover:cursor-pointer data-blok-force-hover:bg-item-hover-bg data-[blok-focused="true"]:bg-item-focus-bg data-blok-popover-item-no-hover:hover:bg-transparent data-blok-popover-item-no-hover:cursor-default can-hover:data-blok-popover-item-destructive:hover:text-item-destructive-text can-hover:data-blok-popover-item-destructive:hover:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-force-hover]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-force-hover]]:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:bg-item-destructive-hover-bg',
+  item: 'flex items-center select-none border-none bg-transparent rounded-lg px-2 py-1 text-text-primary mb-px outline-hidden max-h-8 overflow-hidden data-blok-popover-item-active:bg-icon-active-bg data-blok-popover-item-active:text-icon-active-text can-hover:hover:cursor-pointer can-hover:hover:bg-item-hover-bg data-blok-force-hover:cursor-pointer data-blok-force-hover:bg-item-hover-bg data-[blok-focused="true"]:bg-item-focus-bg data-blok-popover-item-no-hover:hover:bg-transparent data-blok-popover-item-no-hover:cursor-default can-hover:data-blok-popover-item-destructive:hover:text-item-destructive-text can-hover:data-blok-popover-item-destructive:hover:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-force-hover]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-force-hover]]:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:bg-item-destructive-hover-bg',
 
   /**
    * Item disabled state
@@ -21,7 +21,7 @@ export const css = {
   /**
    * Icon container styles
    */
-  icon: 'flex items-center justify-center w-7 h-7 shrink-0 rounded-lg bg-popover-icon-bg [&_svg]:w-icon [&_svg]:h-icon',
+  icon: 'flex items-center justify-center w-6 h-6 shrink-0 rounded-lg bg-popover-icon-bg [&_svg]:w-4 [&_svg]:h-4',
 
   /**
    * Focused state class for DomIterator/Flipper keyboard navigation.
@@ -37,8 +37,9 @@ export const cssInline = {
   /**
    * Item in inline context - more compact styling
    */
-  item: 'rounded-lg p-1',
-  itemIconOnly: 'aspect-square justify-center',
+  item: 'rounded-md px-1 py-1.5',
+  itemIconOnly: 'justify-center',
+  itemWithTitle: 'px-2',
 };
 
 /**

package/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.ts

@@ -351,6 +351,7 @@ export class PopoverItemDefault extends PopoverItem {
       !isInline && !isNestedInline && 'pl-2 pr-3',
       isInline && cssInline.item,
       isInline && this.params.icon && cssInline.itemIconOnly,
+      isInline && this.params.title && cssInline.itemWithTitle,
       isNestedInline && cssNestedInline.item,
       this.params.isDisabled && css.itemDisabled
     );

package/src/components/utils/popover/components/popover-item/popover-item-separator/popover-item-separator.const.ts

@@ -2,7 +2,7 @@
  * Tailwind CSS classes for popover separator component
  */
 export const css = {
-  container: 'py-1.5 px-2 max-h-5 overflow-hidden',
+  container: 'py-1.5 max-h-5 overflow-hidden',
   containerHidden: 'opacity-0 max-h-0! py-0!',
   line: 'h-px w-full bg-popover-border/60',
 };

package/src/components/utils/popover/components/search-input/search-input.const.ts

@@ -2,7 +2,7 @@
  * CSS class names to be used in popover search input class
  */
 export const css = {
-  wrapper: 'bg-search-input-bg border border-search-input-border rounded-lg p-1 grid grid-cols-[auto_1fr] grid-rows-[auto] focus-within:border-search-input-focus-border focus-within:shadow-[0_0_0_2px_rgba(35,131,226,0.15)]',
-  icon: 'w-toolbox-btn h-toolbox-btn flex items-center justify-center mr-2 [&_svg]:w-icon [&_svg]:h-icon [&_svg]:text-gray-text',
-  input: "text-sm outline-hidden font-medium font-inherit border-0 bg-transparent m-0 p-0 leading-[22px] min-w-[calc(100%-(--spacing(6))-10px)] text-text-primary placeholder:text-gray-text/80 placeholder:font-normal",
+  wrapper: 'bg-search-input-bg border border-search-input-border rounded-lg px-2 py-0.5 grid grid-cols-[auto_1fr] grid-rows-[auto] focus-within:border-search-input-focus-border focus-within:shadow-[0_0_0_2px_rgba(35,131,226,0.15)]',
+  icon: 'w-6 h-6 flex items-center justify-center mr-1.5 [&_svg]:w-4 [&_svg]:h-4 [&_svg]:text-gray-text',
+  input: "text-sm outline-hidden font-medium font-inherit border-0 bg-transparent m-0 p-0 leading-[20px] min-w-[calc(100%-(--spacing(6))-6px)] text-text-primary placeholder:text-gray-text/80 placeholder:font-normal",
 };

package/src/components/utils/popover/popover-abstract.ts

@@ -1,6 +1,7 @@
 import { DATA_ATTR } from '../../constants/data-attributes';
 import { EventsDispatcher } from '../events';
 import { Listeners } from '../listeners';
+import { isPromotedToTopLayer, promoteToTopLayer, removeFromTopLayer, supportsPopoverAPI } from '../top-layer';
 import { twMerge } from '../tw';
 
 import { PopoverItemDefault, PopoverItemSeparator, PopoverItemType } from './components/popover-item';
@@ -13,8 +14,6 @@ import { css } from './popover.const';
 import type { PopoverEventMap, PopoverMessages, PopoverParams, PopoverNodes } from '@/types/utils/popover/popover';
 import { PopoverEvent } from '@/types/utils/popover/popover-event';
 
-
-
 /**
  * Class responsible for rendering popover and handling its behaviour.
  * Uses vanilla DOM manipulation for rendering.
@@ -53,6 +52,7 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
   protected messages: PopoverMessages = {
     nothingFound: 'Nothing found',
     search: 'Search',
+    actions: 'Actions',
   };
 
   /**
@@ -124,6 +124,24 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
       document.body.appendChild(mountTarget);
     }
 
+    // Promote ROOT, body-mounted popovers into the CSS Top Layer so they
+    // render above every other element on the page (site headers, drawers,
+    // consumer overlays). Skipped when:
+    //   - the popover is nested inside another popover (descendants render
+    //     inside the same top layer automatically; promoting them would
+    //     change their containing block to the viewport and break
+    //     positioning math that assumes the nested root sits at the
+    //     parent's coordinates);
+    //   - the popover has no `trigger` (inline-toolbar popovers mount
+    //     inside their owning wrapper rather than `<body>`; promotion
+    //     would leave that wrapper empty and zero-sized).
+    const isRoot = (this.params.nestingLevel ?? 0) === 0;
+    const isBodyMounted = this.params.trigger !== undefined;
+
+    if (mountTarget !== null && isRoot && isBodyMounted && supportsPopoverAPI()) {
+      promoteToTopLayer(mountTarget);
+    }
+
     // Update DOM state
     this.nodes.popover.setAttribute(DATA_ATTR.popoverOpened, 'true');
     this.nodes.popoverContainer.className = twMerge(
@@ -164,6 +182,16 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
    * Closes popover
    */
   public hide(): void {
+    const mountTarget = this.nodes.popover;
+
+    if (mountTarget !== null && supportsPopoverAPI() && isPromotedToTopLayer(mountTarget)) {
+      // Centralized helper hides the popover, strips the `popover` attribute
+      // (so UA `[popover]:not(:popover-open)` display:none no longer applies)
+      // and removes the `data-blok-top-layer` marker so the CSS reset rule
+      // turns off too.
+      removeFromTopLayer(mountTarget);
+    }
+
     // Update DOM state
     this.nodes.popover.removeAttribute(DATA_ATTR.popoverOpened);
     this.nodes.popover.removeAttribute(DATA_ATTR.popoverOpenTop);
@@ -188,10 +216,87 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
    * Clears memory
    */
   public destroy(): void {
+    const ghost = this.createCloseGhost();
+
     this.items.forEach(item => item.destroy());
     this.nodes.popover?.remove();
     this.listeners.removeAll();
     this.search?.destroy();
+
+    this.playCloseGhost(ghost);
+  }
+
+  /**
+   * Snapshots the popover so its exit transition can play after the real
+   * element is torn down. Returns null when there is nothing visible to
+   * animate (e.g. popover never opened).
+   */
+  private createCloseGhost(): HTMLElement | null {
+    const popover = this.nodes.popover;
+
+    if (!popover?.isConnected) {
+      return null;
+    }
+
+    const rect = popover.getBoundingClientRect();
+
+    if (rect.width === 0 && rect.height === 0) {
+      return null;
+    }
+
+    const ghost = popover.cloneNode(true) as HTMLElement;
+
+    ghost.removeAttribute('id');
+    ghost.removeAttribute('data-blok-testid');
+    ghost.querySelectorAll('[id]').forEach(el => el.removeAttribute('id'));
+    ghost.querySelectorAll('[data-blok-testid]').forEach(el => el.removeAttribute('data-blok-testid'));
+
+    ghost.setAttribute(DATA_ATTR.popoverOpened, 'true');
+
+    const ghostContainer = ghost.querySelector<HTMLElement>(`[${DATA_ATTR.popoverContainer}]`);
+
+    if (ghostContainer) {
+      ghostContainer.className = twMerge(css.popoverContainer, css.popoverContainerOpened);
+    }
+
+    ghost.style.position = 'absolute';
+    ghost.style.top = `${rect.top + window.scrollY}px`;
+    ghost.style.left = `${rect.left + window.scrollX}px`;
+    ghost.style.pointerEvents = 'none';
+
+    ghost.querySelectorAll<HTMLElement>(`[${DATA_ATTR.popoverContainer}]`).forEach((container) => {
+      container.style.setProperty('pointer-events', 'none');
+    });
+
+    return ghost;
+  }
+
+  /**
+   * Mounts the ghost and triggers the exit transition, then cleans it up
+   * when the transition completes.
+   * @param ghost - element produced by createCloseGhost
+   */
+  private playCloseGhost(ghost: HTMLElement | null): void {
+    if (!ghost) {
+      return;
+    }
+
+    document.body.appendChild(ghost);
+
+    void ghost.offsetHeight;
+
+    ghost.removeAttribute(DATA_ATTR.popoverOpened);
+
+    const ghostContainer = ghost.querySelector<HTMLElement>(`[${DATA_ATTR.popoverContainer}]`);
+
+    if (ghostContainer) {
+      ghostContainer.className = css.popoverContainer;
+    }
+
+    const cleanup = (): void => ghost.remove();
+
+    ghostContainer?.addEventListener('transitionend', cleanup, { once: true });
+    window.setTimeout(cleanup, 400);
   }
 
   /**
@@ -418,9 +523,15 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     if (isDisplayed) {
       this.nodes.nothingFoundMessage.classList.remove('hidden');
       this.nodes.nothingFoundMessage.setAttribute(DATA_ATTR.nothingFoundDisplayed, 'true');
+      this.nodes.items?.classList.remove('pb-1.5');
+      this.nodes.popoverContainer?.classList.remove('px-1.5', 'pt-1.5');
     } else {
       this.nodes.nothingFoundMessage.classList.add('hidden');
       this.nodes.nothingFoundMessage.removeAttribute(DATA_ATTR.nothingFoundDisplayed);
+      this.nodes.items?.classList.add('pb-1.5');
+      if (this.isShown) {
+        this.nodes.popoverContainer?.classList.add('px-1.5', 'pt-1.5');
+      }
     }
   }
 
@@ -491,6 +602,13 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     }
     popover.setAttribute('data-blok-testid', 'popover');
 
+    // Popover attribute is added lazily on show() — adding it at creation
+    // time would invoke UA `[popover]:not(:popover-open)` display:none
+    // styles and, in Chromium, fire synthesized pointer events when the
+    // element is promoted to the top layer (matching the mouse position
+    // left over from the trigger click). Adding it only around the show()
+    // call avoids those synthetic events.
+
     // Set CSS variables
     popover.style.setProperty('--width', this.params.width ?? 'auto');
     popover.style.setProperty('--item-padding', '4px');
@@ -535,8 +653,24 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     scrollHazeBottom.style.background = 'linear-gradient(to top, var(--blok-popover-bg), transparent)';
     scrollHazeBottom.style.opacity = '0';
 
+    const contextLabel = this.params.contextLabel !== undefined
+      ? (() => {
+        const el = document.createElement('div');
+
+        el.className = 'shrink-0 pl-2 pr-3 pt-1 pb-1.5 text-xs font-medium text-gray-text/50 cursor-default bg-popover-bg';
+        el.setAttribute('role', 'status');
+        el.setAttribute('data-blok-testid', 'popover-context-label');
+        el.textContent = this.params.contextLabel;
+
+        return el;
+      })()
+      : undefined;
+
     // Assemble DOM structure
     popoverContainer.appendChild(nothingFoundMessage);
+    if (contextLabel !== undefined) {
+      popoverContainer.appendChild(contextLabel);
+    }
     popoverContainer.appendChild(items);
     popoverContainer.appendChild(scrollHazeTop);
     popoverContainer.appendChild(scrollHazeBottom);
@@ -546,6 +680,7 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
       popover,
       popoverContainer,
       nothingFoundMessage,
+      contextLabel,
       items,
       scrollHazeTop,
       scrollHazeBottom,