@jackuait/blok 0.7.0-beta.1 → 0.7.0-beta.2

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

@@ -391,9 +391,11 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
   protected toggleNothingFoundMessage(isDisplayed: boolean): void {
     if (isDisplayed) {
       this.nodes.nothingFoundMessage.classList.remove('hidden');
+      this.nodes.nothingFoundMessage.classList.add('animate-[fade-in_150ms_ease_forwards]');
       this.nodes.nothingFoundMessage.setAttribute(DATA_ATTR.nothingFoundDisplayed, 'true');
     } else {
       this.nodes.nothingFoundMessage.classList.add('hidden');
+      this.nodes.nothingFoundMessage.classList.remove('animate-[fade-in_150ms_ease_forwards]');
       this.nodes.nothingFoundMessage.removeAttribute(DATA_ATTR.nothingFoundDisplayed);
     }
   }

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

@@ -60,6 +60,12 @@ export class PopoverDesktop extends PopoverAbstract {
    */
   private trigger: HTMLElement | undefined;
 
+  /**
+   * Optional element whose left edge is used for horizontal positioning
+   * instead of the trigger's left edge.
+   */
+  private leftAlignElement: HTMLElement | undefined;
+
   /**
    * Popover size cache
    */
@@ -78,6 +84,10 @@ export class PopoverDesktop extends PopoverAbstract {
       this.trigger = params.trigger;
     }
 
+    if (params.leftAlignElement) {
+      this.leftAlignElement = params.leftAlignElement;
+    }
+
     if (params.nestingLevel !== undefined) {
       this.nestingLevel = params.nestingLevel;
     }
@@ -191,7 +201,13 @@ export class PopoverDesktop extends PopoverAbstract {
       this.nodes.popover.style.setProperty(CSSVariables.PopoverLeft, '0px');
     }
 
-    this.nodes.popover.style.setProperty(CSSVariables.PopoverHeight, this.size.height + 'px');
+    const measuredSize = this.size;
+
+    this.nodes.popover.style.setProperty(CSSVariables.PopoverHeight, measuredSize.height + 'px');
+
+    if (this.params.width === undefined || this.params.width === 'auto') {
+      this.nodes.popover.style.setProperty('--width', measuredSize.width + 'px');
+    }
 
     if (!this.trigger && !this.shouldOpenBottom) {
       this.setOpenTop(true);
@@ -270,7 +286,7 @@ export class PopoverDesktop extends PopoverAbstract {
       (rect.top - offset - popoverRect.height > window.scrollY);
     const top = shouldFlipTop ? rect.top - offset - popoverRect.height + window.scrollY : initialTop;
 
-    const initialLeft = rect.left + window.scrollX;
+    const initialLeft = (this.leftAlignElement?.getBoundingClientRect().left ?? rect.left) + window.scrollX;
     const shouldFlipLeft = initialLeft + popoverRect.width > windowWidth + window.scrollX;
     const left = shouldFlipLeft ? Math.max(0, rect.right - popoverRect.width + window.scrollX) : initialLeft;
 
@@ -695,6 +711,18 @@ export class PopoverDesktop extends PopoverAbstract {
     // Cast data.items to PopoverItemDefault[] since we know that's what filterItems passes
     const matchingItems = data.items as unknown as PopoverItemDefault[];
 
+    /**
+     * When nothing is found, disable transitions so items hide instantly.
+     * The "Nothing found" message fade-in provides the visual transition;
+     * animating the last items' collapse simultaneously causes a jarring
+     * height bounce in the popover container.
+     */
+    if (isNothingFound) {
+      this.items.forEach(item => {
+        item.getElement()?.style.setProperty('transition-duration', '0s');
+      });
+    }
+
     this.items
       .forEach((item) => {
         const isDefaultItem = item instanceof PopoverItemDefault;
@@ -705,6 +733,15 @@ export class PopoverDesktop extends PopoverAbstract {
 
         item.toggleHidden(isHidden);
       });
+
+    if (isNothingFound) {
+      // Force reflow so the instant hide takes effect, then restore transitions
+      this.nodes.popoverContainer.offsetHeight;
+      this.items.forEach(item => {
+        item.getElement()?.style.removeProperty('transition-duration');
+      });
+    }
+
     this.toggleNothingFoundMessage(isNothingFound);
 
     /** List of elements available for keyboard navigation considering search query applied */

package/src/styles/main.css

@@ -108,6 +108,9 @@
   --animate-wobble: wobble 400ms;
   --animate-rotation: rotation 1.2s infinite linear;
   --animate-notify-bounce-in: notifyBounceIn 600ms 1;
+  --animate-notify-slide-in: notifySlideIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  --animate-notify-slide-out: notifySlideOut 250ms cubic-bezier(0.4, 0, 1, 1) both;
+  --animate-notify-progress: notifyProgress linear forwards;
 
   /* Keyframes */
   @keyframes fade-in {
@@ -166,6 +169,22 @@
     70% { transform: scale(0.9); }
     100% { transform: scale(1); }
   }
+
+  @keyframes notifySlideIn {
+    0% { opacity: 0; transform: translateY(16px); }
+    70% { opacity: 1; transform: translateY(-2px); }
+    100% { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes notifySlideOut {
+    0% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(8px); }
+  }
+
+  @keyframes notifyProgress {
+    0% { width: 100%; }
+    100% { width: 0%; }
+  }
 }
 
 /*
@@ -308,6 +327,19 @@
   @apply p-0 m-0 min-h-[1.6em];
 }
 
+/**
+ * Exclude bare 'color' from transition-property inside table cells.
+ * StyleManager applies transition-colors (which includes 'color') for smooth
+ * selection-state changes, but inside table cells inherited text-color changes
+ * trigger a 150ms flash from black → target. Keep all other transition
+ * properties so background-color selection highlighting still animates.
+ */
+[data-blok-table-cell] [data-blok-element-content] {
+  transition-property: background-color, border-color, outline-color,
+    text-decoration-color, fill, stroke, --tw-gradient-from,
+    --tw-gradient-via, --tw-gradient-to;
+}
+
 /**
  * Table heading styles
  * Applied to first row (heading row) and first column (heading column) cells
@@ -324,3 +356,17 @@
 [data-blok-table-haze][data-blok-table-haze-visible] {
   @apply opacity-100;
 }
+
+/**
+ * Slash search input appearance
+ * When the user types "/" to open the toolbox, the contenteditable
+ * transforms to look like a search input with a placeholder.
+ */
+[data-blok-slash-search] {
+  @apply bg-[#F8F8F8] rounded-lg transition-colors duration-150 max-w-[240px];
+}
+
+[data-blok-slash-search]::after {
+  content: attr(data-blok-slash-search);
+  @apply text-gray-text font-medium text-base pointer-events-none;
+}

package/src/tools/header/index.ts

@@ -23,7 +23,8 @@ import { IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconHeading, IconToggle
 import { PLACEHOLDER_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
 import { translateToolTitle } from '../../components/utils/tools';
 import { twMerge } from '../../components/utils/tw';
-import { ARROW_ICON, ARROW_STYLES, TOGGLE_ATTR, TOGGLE_WRAPPER_STYLES } from '../toggle/constants';
+import { ARROW_ICON, TOGGLE_ATTR, TOGGLE_WRAPPER_STYLES } from '../toggle/constants';
+import { buildArrow } from '../toggle/dom-builder';
 import { updateArrowState, updateChildrenVisibility } from '../toggle/toggle-lifecycle';
 
 /**
@@ -216,6 +217,22 @@ export class Header implements BlockTool {
       normalized.isToggleable = true;
     }
 
+    /**
+     * Sanitize text to remove any previously saved arrow HTML (backwards compatibility)
+     */
+    if (normalized.text) {
+      const temp = document.createElement('div');
+
+      temp.innerHTML = normalized.text;
+
+      const arrowEl = temp.querySelector(`[${TOGGLE_ATTR.toggleArrow}]`);
+
+      if (arrowEl) {
+        arrowEl.remove();
+        normalized.text = temp.innerHTML;
+      }
+    }
+
     return normalized;
   }
 
@@ -238,6 +255,42 @@ export class Header implements BlockTool {
     }
   }
 
+  /**
+   * Expand the toggle heading (no-op if not toggleable or already expanded).
+   * Can be called externally via block.call('expand').
+   */
+  public expand(): void {
+    if (!this._data.isToggleable || this._isOpen) {
+      return;
+    }
+
+    this._isOpen = true;
+
+    if (this._arrowElement && this._element) {
+      updateArrowState(this._arrowElement, this._element, this._isOpen);
+    }
+
+    this.updateChildrenVisibility();
+  }
+
+  /**
+   * Collapse the toggle heading (no-op if not toggleable or already collapsed).
+   * Can be called externally via block.call('collapse').
+   */
+  public collapse(): void {
+    if (!this._data.isToggleable || !this._isOpen) {
+      return;
+    }
+
+    this._isOpen = false;
+
+    if (this._arrowElement && this._element) {
+      updateArrowState(this._arrowElement, this._element, this._isOpen);
+    }
+
+    this.updateChildrenVisibility();
+  }
+
   /**
    * Returns header block tunes config
    *
@@ -357,7 +410,34 @@ export class Header implements BlockTool {
    * @param data - saved data to merge with current block
    */
   public merge(data: HeaderData): void {
-    this._element.insertAdjacentHTML('beforeend', data.text);
+    /**
+     * Strip any arrow HTML from incoming data to prevent injection of toggle markup
+     */
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = data.text;
+    const arrowInData = tempDiv.querySelector(`[${TOGGLE_ATTR.toggleArrow}]`);
+
+    if (arrowInData) {
+      arrowInData.remove();
+    }
+
+    const cleanText = tempDiv.innerHTML;
+
+    /**
+     * Strip arrow from current element, append text, then re-add arrow.
+     * This ensures text is appended to the content, not interleaved with toggle markup.
+     */
+    const arrowEl = this._element.querySelector(`[${TOGGLE_ATTR.toggleArrow}]`);
+
+    if (arrowEl) {
+      arrowEl.remove();
+    }
+
+    this._element.insertAdjacentHTML('beforeend', cleanText);
+
+    if (arrowEl && this._data.isToggleable) {
+      this._element.prepend(arrowEl);
+    }
   }
 
   /**
@@ -378,11 +458,27 @@ export class Header implements BlockTool {
    * @returns saved data
    */
   public save(toolsContent: HTMLHeadingElement): HeaderData {
+    /**
+     * Strip arrow element before reading innerHTML to avoid saving toggle markup
+     */
+    const arrowEl = toolsContent.querySelector(`[${TOGGLE_ATTR.toggleArrow}]`);
+
+    if (arrowEl) {
+      arrowEl.remove();
+    }
+
     const data: HeaderData = {
       text: toolsContent.innerHTML,
       level: this.currentLevel.number,
     };
 
+    /**
+     * Re-add arrow after reading so the DOM is not mutated
+     */
+    if (arrowEl && this._data.isToggleable) {
+      toolsContent.prepend(arrowEl);
+    }
+
     if (this._data.isToggleable === true) {
       data.isToggleable = true;
     }
@@ -426,7 +522,24 @@ export class Header implements BlockTool {
    * @returns Current data
    */
   public get data(): HeaderData {
+    /**
+     * Strip arrow element before reading innerHTML to avoid capturing toggle markup
+     */
+    const arrowEl = this._element.querySelector(`[${TOGGLE_ATTR.toggleArrow}]`);
+
+    if (arrowEl) {
+      arrowEl.remove();
+    }
+
     this._data.text = this._element.innerHTML;
+
+    /**
+     * Re-add arrow after reading so the DOM is not mutated
+     */
+    if (arrowEl && this._data.isToggleable) {
+      this._element.prepend(arrowEl);
+    }
+
     this._data.level = this.currentLevel.number;
 
     return this._data;
@@ -568,25 +681,7 @@ export class Header implements BlockTool {
    * @returns The arrow element
    */
   private buildArrow(): HTMLElement {
-    const arrow = document.createElement('div');
-    arrow.className = ARROW_STYLES;
-    arrow.setAttribute(TOGGLE_ATTR.toggleArrow, '');
-    arrow.setAttribute('role', 'button');
-    arrow.setAttribute('tabindex', '-1');
-    arrow.setAttribute('aria-label', 'Expand');
-    arrow.contentEditable = 'false';
-    arrow.innerHTML = ARROW_ICON;
-
-    if (this._isOpen) {
-      arrow.style.transform = 'rotate(90deg)';
-    }
-
-    arrow.addEventListener('click', (event: MouseEvent) => {
-      event.stopPropagation();
-      this.toggleOpen();
-    });
-
-    return arrow;
+    return buildArrow(this._isOpen, () => this.toggleOpen(), { contentEditableFalse: true });
   }
 
   /**
@@ -596,6 +691,14 @@ export class Header implements BlockTool {
   private toggleIsToggleable(): void {
     const wasToggleable = this._data.isToggleable === true;
 
+    /**
+     * If disabling toggle, ensure children are visible before removing toggle state
+     */
+    if (wasToggleable) {
+      updateChildrenVisibility(this.api, this.blockId ?? '', true);
+      this._isOpen = false;
+    }
+
     this.data = {
       level: this._data.level,
       text: this._data.text,

package/src/tools/table/index.ts

@@ -71,6 +71,7 @@ const WRAPPER_EDIT_CLASSES = [
   'after:left-0',
   'after:right-0',
   'after:h-10',
+  'after:pointer-events-none',
 ];
 
 /**
@@ -405,9 +406,7 @@ export class Table implements BlockTool {
     applyCellColors(gridEl, this.model.snapshot().content);
 
     if (this.isNewTable) {
-      const firstEditable = gridEl.querySelector<HTMLElement>('[contenteditable="true"]');
-
-      firstEditable?.focus();
+      this.cellSelection?.selectRange({ minRow: 0, maxRow: 0, minCol: 0, maxCol: 0 });
     }
   }
 

package/src/tools/table/table-add-controls.ts

@@ -79,6 +79,7 @@ export class TableAddControls {
   private dragState: DragState | null = null;
 
   private boundMouseMove: (e: MouseEvent) => void;
+  private boundDocumentMouseMove: (e: MouseEvent) => void;
   private boundMouseLeave: () => void;
   private boundAddRowClick: () => void;
   private boundAddColClick: () => void;
@@ -110,6 +111,7 @@ export class TableAddControls {
     this.onDragEnd = options.onDragEnd;
     this.getNewColumnWidth = options.getNewColumnWidth;
     this.boundMouseMove = this.handleMouseMove.bind(this);
+    this.boundDocumentMouseMove = this.handleDocumentMouseMove.bind(this);
     this.boundMouseLeave = this.handleMouseLeave.bind(this);
     this.boundPointerMove = this.handlePointerMove.bind(this);
     this.boundPointerUp = this.handlePointerUp.bind(this);
@@ -126,10 +128,10 @@ export class TableAddControls {
 
     this.wrapper.addEventListener('mousemove', this.boundMouseMove);
     this.wrapper.addEventListener('mouseleave', this.boundMouseLeave);
+    document.addEventListener('mousemove', this.boundDocumentMouseMove);
 
     this.addRowBtn.addEventListener('pointerdown', this.boundRowPointerDown);
     this.addColBtn.addEventListener('pointerdown', this.boundColPointerDown);
-
   }
 
   /**
@@ -212,6 +214,7 @@ export class TableAddControls {
   public destroy(): void {
     this.wrapper.removeEventListener('mousemove', this.boundMouseMove);
     this.wrapper.removeEventListener('mouseleave', this.boundMouseLeave);
+    document.removeEventListener('mousemove', this.boundDocumentMouseMove);
     this.addRowBtn.removeEventListener('pointerdown', this.boundRowPointerDown);
     this.addColBtn.removeEventListener('pointerdown', this.boundColPointerDown);
 
@@ -399,6 +402,31 @@ export class TableAddControls {
     this.scheduleHideCol();
   }
 
+  /**
+   * Document-level mousemove handler.
+   * Catches mouse movements outside the wrapper (e.g. in the ::after
+   * pseudo-element zone below the grid, which has pointer-events-none).
+   * Only delegates to handleMouseMove when the cursor is within the
+   * proximity zone around the grid to avoid unnecessary work.
+   */
+  private handleDocumentMouseMove(e: MouseEvent): void {
+    if (this.wrapper.contains(e.target as Node)) {
+      return;
+    }
+
+    const gridRect = this.grid.getBoundingClientRect();
+    const margin = PROXIMITY_PX;
+    const nearGrid =
+      e.clientX >= gridRect.left - margin &&
+      e.clientX <= gridRect.right + margin &&
+      e.clientY >= gridRect.top - margin &&
+      e.clientY <= gridRect.bottom + margin;
+
+    if (nearGrid) {
+      this.handleMouseMove(e);
+    }
+  }
+
   private showRow(): void {
     this.clearRowTimeout();
 

package/src/tools/table/table-cell-blocks.ts

@@ -86,6 +86,9 @@ export class TableCellBlocks {
   /** Events deferred during structural operations, replayed or discarded afterward. */
   private deferredEvents: Array<unknown> = [];
 
+  /** When true, handleBlockMutation skips claiming so exitTableForward's new block stays outside the grid. */
+  private isExitingTable = false;
+
   constructor(options: TableCellBlocksOptions) {
     this.api = options.api;
     this.gridElement = options.gridElement;
@@ -140,6 +143,12 @@ export class TableCellBlocks {
 
       return;
     }
+
+    // ArrowDown at last row -> exit table
+    if (event.key === 'ArrowDown' && position.row === this.getRowCount() - 1) {
+      event.preventDefault();
+      this.exitTableForward();
+    }
   }
 
   /**
@@ -161,7 +170,12 @@ export class TableCellBlocks {
 
     if (nextRow < this.getRowCount()) {
       this.navigateToCell({ row: nextRow, col: 0 });
+
+      return;
     }
+
+    // At the very last cell — exit the table by focusing or creating a block below
+    this.exitTableForward();
   }
 
   /**
@@ -182,7 +196,82 @@ export class TableCellBlocks {
 
     if (prevRow >= 0) {
       this.navigateToCell({ row: prevRow, col: this.getColumnCount() - 1 }, true);
+
+      return;
     }
+
+    // At the very first cell — exit the table by focusing the block above
+    this.exitTableBackward();
+  }
+
+  /**
+   * Exit the table by focusing the first block after it, or creating one if none exists.
+   */
+  private exitTableForward(): void {
+    const tableIndex = this.api.blocks.getBlockIndex(this.tableBlockId);
+
+    if (tableIndex === undefined) {
+      return;
+    }
+
+    const blockAfterTable = this.findFirstBlockAfterTable(tableIndex);
+
+    if (blockAfterTable !== null) {
+      this.api.caret.setToBlock(blockAfterTable.id, 'start');
+
+      return;
+    }
+
+    /**
+     * No block after the table — create a new default block.
+     * Set isExitingTable so handleBlockMutation does not claim the new block
+     * into a cell (the block-added event fires synchronously during insert).
+     */
+    this.isExitingTable = true;
+
+    try {
+      const totalBlocks = this.api.blocks.getBlocksCount();
+      const newBlock = this.api.blocks.insert(undefined, {}, {}, totalBlocks, true);
+
+      this.api.caret.setToBlock(newBlock.id, 'start');
+    } finally {
+      this.isExitingTable = false;
+    }
+  }
+
+  /**
+   * Exit the table backward by focusing the block before the table.
+   * If no block exists before the table, do nothing.
+   */
+  private exitTableBackward(): void {
+    const tableIndex = this.api.blocks.getBlockIndex(this.tableBlockId);
+
+    if (tableIndex === undefined || tableIndex === 0) {
+      return;
+    }
+
+    // The block immediately before the table in the flat array
+    const blockBefore = this.api.blocks.getBlockByIndex(tableIndex - 1);
+
+    if (blockBefore) {
+      this.api.caret.setToBlock(blockBefore.id, 'end');
+    }
+  }
+
+  /**
+   * Scan the flat block array starting after the table block, skipping all blocks
+   * whose holder is inside the table grid, and return the first non-child block.
+   * Returns null if no such block exists.
+   */
+  private findFirstBlockAfterTable(tableIndex: number): { id: string } | null {
+    const totalBlocks = this.api.blocks.getBlocksCount();
+    const candidates = Array.from({ length: totalBlocks - tableIndex - 1 }, (_, offset) =>
+      this.api.blocks.getBlockByIndex(tableIndex + 1 + offset)
+    );
+
+    return candidates.find(block =>
+      block !== null && block !== undefined && !this.gridElement.contains(block.holder)
+    ) ?? null;
   }
 
   /**
@@ -481,6 +570,10 @@ export class TableCellBlocks {
       return;
     }
 
+    if (this.isExitingTable) {
+      return;
+    }
+
     if (!this.isBlockMutationEvent(data)) {
       return;
     }

package/src/tools/toggle/constants.ts

@@ -32,12 +32,12 @@ export const TOGGLE_WRAPPER_STYLES = 'flex items-start';
 /**
  * Styles for the toggle arrow button
  */
-export const ARROW_STYLES = 'flex-shrink-0 w-6 h-6 flex items-center justify-center cursor-pointer select-none rounded hover:bg-black/5 transition-all duration-200 ease-in-out mt-px';
+export const ARROW_STYLES = 'flex-shrink-0 w-6 h-6 flex items-center justify-center cursor-pointer select-none rounded hover:bg-black/5 transition-all duration-200 ease-in-out mt-px focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none';
 
 /**
  * SVG icon for the toggle arrow
  */
-export const ARROW_ICON = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 2.5L8.5 6L4.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+export const ARROW_ICON = '<svg aria-hidden="true" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 2.5L8.5 6L4.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 
 /**
  * Data attributes specific to the toggle tool

package/src/tools/toggle/dom-builder.ts

@@ -70,20 +70,39 @@ export const buildToggleItem = (context: ToggleDOMBuilderContext): ToggleBuildRe
   return { wrapper, arrowElement, contentElement };
 };
 
+/**
+ * Options for building arrow element
+ */
+export interface BuildArrowOptions {
+  /** Set contentEditable="false" on the arrow (used by Header to prevent caret entering arrow) */
+  contentEditableFalse?: boolean;
+}
+
 /**
  * Build the arrow element for toggling open/closed state.
  *
  * @param isOpen - Whether the toggle is currently open
  * @param onArrowClick - Callback when arrow is clicked
+ * @param options - Optional configuration
  * @returns The arrow element
  */
-const buildArrow = (isOpen: boolean, onArrowClick: () => void): HTMLElement => {
-  const arrow = document.createElement('div');
+export const buildArrow = (
+  isOpen: boolean,
+  onArrowClick: () => void,
+  options: BuildArrowOptions = {}
+): HTMLElement => {
+  const arrow = document.createElement('span');
   arrow.className = ARROW_STYLES;
   arrow.setAttribute(TOGGLE_ATTR.toggleArrow, '');
   arrow.setAttribute('role', 'button');
-  arrow.setAttribute('tabindex', '-1');
-  arrow.setAttribute('aria-label', 'Toggle');
+  arrow.setAttribute('tabindex', '0');
+  arrow.setAttribute('aria-label', isOpen ? 'Collapse' : 'Expand');
+  arrow.setAttribute('aria-expanded', String(isOpen));
+
+  if (options.contentEditableFalse === true) {
+    arrow.contentEditable = 'false';
+  }
+
   arrow.innerHTML = ARROW_ICON;
 
   if (isOpen) {
@@ -95,6 +114,14 @@ const buildArrow = (isOpen: boolean, onArrowClick: () => void): HTMLElement => {
     onArrowClick();
   });
 
+  arrow.addEventListener('keydown', (event: KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      onArrowClick();
+    }
+  });
+
   return arrow;
 };