@jackuait/blok 0.6.0-beta.0 → 0.6.0-beta.10

package/src/tools/table/table-row-col-controls.ts

@@ -1,25 +1,17 @@
-import {
-  IconInsertAbove,
-  IconInsertBelow,
-  IconInsertLeft,
-  IconInsertRight,
-  IconTrash,
-  IconHeading,
-} from '../../components/icons';
-import { PopoverDesktop, PopoverItemType } from '../../components/utils/popover';
+import type { I18n } from '../../../types/api';
 import { twMerge } from '../../components/utils/tw';
 
-import { CELL_ATTR, ROW_ATTR } from './table-core';
+import { BORDER_WIDTH, CELL_ATTR, ROW_ATTR } from './table-core';
+import { collapseGrip, createGripDotsSvg, expandGrip, GRIP_HOVER_SIZE } from './table-grip-visuals';
 import { getCumulativeColEdges, TableRowColDrag } from './table-row-col-drag';
-
-import { PopoverEvent } from '@/types/utils/popover/popover-event';
-import type { PopoverItemParams } from '@/types/utils/popover/popover-item';
+import { createGripPopover } from './table-row-col-popover';
+import type { PopoverState } from './table-row-col-popover';
 
 const GRIP_ATTR = 'data-blok-table-grip';
 const GRIP_COL_ATTR = 'data-blok-table-grip-col';
 const GRIP_ROW_ATTR = 'data-blok-table-grip-row';
 const HIDE_DELAY_MS = 150;
-const COL_PILL_WIDTH = 32;
+const COL_PILL_WIDTH = 24;
 const COL_PILL_HEIGHT = 4;
 const ROW_PILL_WIDTH = 4;
 const ROW_PILL_HEIGHT = 20;
@@ -36,25 +28,35 @@ export type RowColAction =
   | { type: 'move-col'; fromIndex: number; toIndex: number }
   | { type: 'delete-row'; index: number }
   | { type: 'delete-col'; index: number }
-  | { type: 'toggle-heading' };
+  | { type: 'toggle-heading' }
+  | { type: 'toggle-heading-column' };
 
 export interface TableRowColControlsOptions {
   grid: HTMLElement;
   getColumnCount: () => number;
   getRowCount: () => number;
   isHeadingRow: () => boolean;
+  isHeadingColumn: () => boolean;
   onAction: (action: RowColAction) => void;
   onDragStateChange?: (isDragging: boolean, dragType: 'row' | 'col' | null) => void;
+  onGripClick?: (type: 'row' | 'col', index: number) => void;
+  onGripPopoverClose?: () => void;
+  i18n: I18n;
 }
 
 const GRIP_CAPSULE_CLASSES = [
   'absolute',
   'z-[3]',
-  'rounded-full',
+  'rounded',
   'cursor-grab',
   'select-none',
-  'transition-[opacity,background-color]',
+  'transition-[opacity,background-color,width,height]',
   'duration-150',
+  'group',
+  'flex',
+  'items-center',
+  'justify-center',
+  'overflow-hidden',
 ];
 
 const GRIP_IDLE_CLASSES = [
@@ -65,7 +67,13 @@ const GRIP_IDLE_CLASSES = [
 
 const GRIP_VISIBLE_CLASSES = [
   'bg-gray-300',
-  'hover:bg-gray-400',
+  'opacity-100',
+  'pointer-events-auto',
+];
+
+const GRIP_ACTIVE_CLASSES = [
+  'bg-blue-500',
+  'text-white',
   'opacity-100',
   'pointer-events-auto',
 ];
@@ -78,28 +86,39 @@ export class TableRowColControls {
   private getColumnCount: () => number;
   private getRowCount: () => number;
   private isHeadingRow: () => boolean;
+  private isHeadingColumn: () => boolean;
   private onAction: (action: RowColAction) => void;
+  private onGripClick: ((type: 'row' | 'col', index: number) => void) | undefined;
+  private onGripPopoverClose: (() => void) | undefined;
+  private i18n: I18n;
 
   private colGrips: HTMLElement[] = [];
   private rowGrips: HTMLElement[] = [];
-  private activePopover: PopoverDesktop | null = null;
+  private popoverState: PopoverState = { popover: null, grip: null };
+  private lockedGrip: HTMLElement | null = null;
+  private boundUnlockGrip: (e: PointerEvent) => void;
   private hideTimeout: ReturnType<typeof setTimeout> | null = null;
   private activeColGripIndex = -1;
   private activeRowGripIndex = -1;
+  private isInsideTable = false;
+  private rowResizeObserver: ResizeObserver | null = null;
 
   private drag: TableRowColDrag;
 
-  private boundFocusIn: (e: FocusEvent) => void;
-  private boundFocusOut: (e: FocusEvent) => void;
+  private boundMouseOver: (e: MouseEvent) => void;
+  private boundMouseLeave: (e: MouseEvent) => void;
   private boundPointerDown: (e: PointerEvent) => void;
-  private boundDocPointerDown: ((e: PointerEvent) => void) | null = null;
 
   constructor(options: TableRowColControlsOptions) {
     this.grid = options.grid;
     this.getColumnCount = options.getColumnCount;
     this.getRowCount = options.getRowCount;
     this.isHeadingRow = options.isHeadingRow;
+    this.isHeadingColumn = options.isHeadingColumn;
     this.onAction = options.onAction;
+    this.onGripClick = options.onGripClick;
+    this.onGripPopoverClose = options.onGripPopoverClose;
+    this.i18n = options.i18n;
 
     this.drag = new TableRowColDrag({
       grid: this.grid,
@@ -110,14 +129,15 @@ export class TableRowColControls {
       },
     });
 
-    this.boundFocusIn = this.handleFocusIn.bind(this);
-    this.boundFocusOut = this.handleFocusOut.bind(this);
+    this.boundMouseOver = this.handleMouseOver.bind(this);
+    this.boundMouseLeave = this.handleMouseLeave.bind(this);
     this.boundPointerDown = this.handlePointerDown.bind(this);
+    this.boundUnlockGrip = this.handleUnlockGrip.bind(this);
 
     this.createGrips();
 
-    this.grid.addEventListener('focusin', this.boundFocusIn);
-    this.grid.addEventListener('focusout', this.boundFocusOut);
+    this.grid.addEventListener('mouseover', this.boundMouseOver);
+    this.grid.addEventListener('mouseleave', this.boundMouseLeave);
   }
 
   /**
@@ -126,14 +146,57 @@ export class TableRowColControls {
   public refresh(): void {
     this.destroyGrips();
     this.createGrips();
-    this.showGripsForFocusedCell();
+  }
+
+  /**
+   * Set a specific grip to active (blue) state without opening the popover.
+   * Hides all other grips.
+   */
+  public setActiveGrip(type: 'row' | 'col', index: number): void {
+    const grip = type === 'col'
+      ? this.colGrips[index]
+      : this.rowGrips[index];
+
+    if (!grip) {
+      return;
+    }
+
+    this.unlockGrip();
+    this.clearHideTimeout();
+    this.hideAllGripsExcept(grip);
+    this.applyActiveClasses(grip);
+
+    if (type === 'col') {
+      grip.style.height = `${GRIP_HOVER_SIZE}px`;
+    } else {
+      grip.style.width = `${GRIP_HOVER_SIZE}px`;
+    }
+
+    this.lockedGrip = grip;
+
+    document.addEventListener('pointerdown', this.boundUnlockGrip);
+  }
+
+  private handleUnlockGrip(): void {
+    document.removeEventListener('pointerdown', this.boundUnlockGrip);
+
+    if (this.lockedGrip) {
+      this.applyIdleClasses(this.lockedGrip);
+      this.lockedGrip = null;
+    }
+  }
+
+  private unlockGrip(): void {
+    document.removeEventListener('pointerdown', this.boundUnlockGrip);
+    this.lockedGrip = null;
   }
 
   public destroy(): void {
     this.destroyPopover();
+    this.unlockGrip();
     this.drag.cleanup();
-    this.grid.removeEventListener('focusin', this.boundFocusIn);
-    this.grid.removeEventListener('focusout', this.boundFocusOut);
+    this.grid.removeEventListener('mouseover', this.boundMouseOver);
+    this.grid.removeEventListener('mouseleave', this.boundMouseLeave);
     this.clearHideTimeout();
     this.destroyGrips();
   }
@@ -157,15 +220,19 @@ export class TableRowColControls {
     });
 
     this.positionGrips();
+    this.observeRowHeights();
   }
 
   private destroyGrips(): void {
+    this.rowResizeObserver?.disconnect();
+    this.rowResizeObserver = null;
     this.colGrips.forEach(g => g.remove());
     this.rowGrips.forEach(g => g.remove());
     this.colGrips = [];
     this.rowGrips = [];
     this.activeColGripIndex = -1;
     this.activeRowGripIndex = -1;
+    this.isInsideTable = false;
   }
 
   private createGripElement(type: 'row' | 'col', index: number): HTMLElement {
@@ -176,23 +243,37 @@ export class TableRowColControls {
     grip.setAttribute(type === 'col' ? GRIP_COL_ATTR : GRIP_ROW_ATTR, String(index));
     grip.setAttribute('contenteditable', 'false');
 
-    if (type === 'col') {
-      grip.style.width = `${COL_PILL_WIDTH}px`;
-      grip.style.height = `${COL_PILL_HEIGHT}px`;
-    } else {
-      grip.style.width = `${ROW_PILL_WIDTH}px`;
-      grip.style.height = `${ROW_PILL_HEIGHT}px`;
-    }
+    const idleWidth = type === 'col' ? COL_PILL_WIDTH : ROW_PILL_WIDTH;
+    const idleHeight = type === 'col' ? COL_PILL_HEIGHT : ROW_PILL_HEIGHT;
+    const pillSize = type === 'col' ? COL_PILL_HEIGHT : ROW_PILL_WIDTH;
+
+    grip.style.width = `${idleWidth}px`;
+    grip.style.height = `${idleHeight}px`;
+    grip.style.transform = 'translate(-50%, -50%)';
+    grip.style.outline = '2px solid white';
+
+    grip.appendChild(createGripDotsSvg(type === 'col' ? 'horizontal' : 'vertical'));
 
     grip.addEventListener('pointerdown', this.boundPointerDown);
+    grip.addEventListener('mouseenter', () => {
+      if (!this.isGripInteractionLocked()) {
+        expandGrip(grip, type);
+      }
+    });
+    grip.addEventListener('mouseleave', () => {
+      if (!this.isGripInteractionLocked()) {
+        collapseGrip(grip, type, pillSize);
+      }
+    });
 
     return grip;
   }
 
   /**
-   * Position grips relative to their row/column
+   * Reposition grips to match current row/column layout.
+   * Called after resize or structural changes.
    */
-  private positionGrips(): void {
+  public positionGrips(): void {
     const rows = this.grid.querySelectorAll(`[${ROW_ATTR}]`);
     const firstRow = rows[0];
 
@@ -210,8 +291,8 @@ export class TableRowColControls {
       const centerX = (edges[i] + edges[i + 1]) / 2;
       const style = grip.style;
 
-      style.top = `${-(COL_PILL_HEIGHT / 2)}px`;
-      style.left = `${centerX - COL_PILL_WIDTH / 2}px`;
+      style.top = `${-BORDER_WIDTH / 2}px`;
+      style.left = `${centerX}px`;
     });
 
     this.rowGrips.forEach((grip, i) => {
@@ -223,12 +304,37 @@ export class TableRowColControls {
       const centerY = rowEl.offsetTop + rowEl.offsetHeight / 2;
       const style = grip.style;
 
-      style.left = `${-(ROW_PILL_WIDTH / 2)}px`;
-      style.top = `${centerY - ROW_PILL_HEIGHT / 2}px`;
+      style.left = `${-BORDER_WIDTH / 2}px`;
+      style.top = `${centerY}px`;
+    });
+  }
+
+  /**
+   * Set up ResizeObserver to watch for row height changes and reposition grips.
+   */
+  private observeRowHeights(): void {
+    this.rowResizeObserver?.disconnect();
+
+    this.rowResizeObserver = new ResizeObserver(() => {
+      this.positionGrips();
+    });
+
+    const rows = this.grid.querySelectorAll(`[${ROW_ATTR}]`);
+
+    rows.forEach(row => {
+      this.rowResizeObserver?.observe(row as HTMLElement);
     });
   }
 
-  private handleFocusIn(e: FocusEvent): void {
+  private isGripInteractionLocked(): boolean {
+    return this.popoverState.popover !== null || this.lockedGrip !== null;
+  }
+
+  private handleMouseOver(e: MouseEvent): void {
+    if (this.isGripInteractionLocked()) {
+      return;
+    }
+
     const target = e.target as HTMLElement;
     const cell = target.closest<HTMLElement>(`[${CELL_ATTR}]`);
 
@@ -246,10 +352,11 @@ export class TableRowColControls {
 
     this.showColGrip(position.col);
     this.showRowGrip(position.row);
+    this.isInsideTable = true;
   }
 
-  private handleFocusOut(_e: FocusEvent): void {
-    if (this.activePopover !== null) {
+  private handleMouseLeave(): void {
+    if (this.isGripInteractionLocked()) {
       return;
     }
 
@@ -280,21 +387,34 @@ export class TableRowColControls {
     return { row: rowIndex, col: colIndex };
   }
 
-  private showGripsForFocusedCell(): void {
-    const focused = this.grid.querySelector<HTMLElement>(`[${CELL_ATTR}]:focus`);
+  /**
+   * Show or hide all grip elements by toggling display.
+   * Used to hide grips during add-button drag operations.
+   * Preserves visibility of the grip with an active popover.
+   */
+  public setGripsDisplay(visible: boolean): void {
+    const display = visible ? '' : 'none';
 
-    if (!focused) {
-      return;
-    }
+    [...this.colGrips, ...this.rowGrips].forEach(grip => {
+      const el: HTMLElement = grip;
 
-    const position = this.getCellPosition(focused);
+      // Don't hide the grip that has an active popover
+      if (!visible && grip === this.popoverState.grip) {
+        return;
+      }
 
-    if (!position) {
-      return;
-    }
+      el.style.display = display;
+    });
+  }
 
-    this.showColGrip(position.col);
-    this.showRowGrip(position.row);
+  /**
+   * Immediately hide all grips (no delay). Used when resize drag starts.
+   */
+  public hideAllGrips(): void {
+    this.clearHideTimeout();
+    this.hideColGrip();
+    this.hideRowGrip();
+    this.isInsideTable = false;
   }
 
   private showColGrip(index: number): void {
@@ -335,33 +455,80 @@ export class TableRowColControls {
 
   private applyVisibleClasses(grip: HTMLElement): void {
     const el = grip;
+    const isCol = el.hasAttribute(GRIP_COL_ATTR);
+    const type: 'col' | 'row' = isCol ? 'col' : 'row';
+    const pillSize = isCol ? COL_PILL_HEIGHT : ROW_PILL_WIDTH;
+
+    // Reset to pill size before making visible
+    collapseGrip(el, type, pillSize);
+
+    if (this.isInsideTable) {
+      el.style.transition = 'none';
+    }
 
     el.className = twMerge(GRIP_CAPSULE_CLASSES, GRIP_VISIBLE_CLASSES);
+    el.setAttribute('data-blok-table-grip-visible', '');
+
+    if (this.isInsideTable) {
+      void el.offsetHeight;
+      el.style.transition = '';
+    }
+
+    const svg = el.querySelector('svg');
+
+    if (svg) {
+      svg.classList.remove('text-white');
+      svg.classList.add('text-gray-400');
+    }
   }
 
-  private applyIdleClasses(grip: HTMLElement): void {
-    const el = grip;
+  private applyActiveClasses(grip: HTMLElement): void {
+    Object.assign(grip, { className: twMerge(GRIP_CAPSULE_CLASSES, GRIP_ACTIVE_CLASSES) });
+    grip.setAttribute('data-blok-table-grip-visible', '');
 
-    el.className = twMerge(GRIP_CAPSULE_CLASSES, GRIP_IDLE_CLASSES);
+    const svg = grip.querySelector('svg');
+
+    if (svg) {
+      svg.classList.remove('text-gray-400', 'opacity-0');
+      svg.classList.add('text-white', 'opacity-100');
+    }
   }
 
-  private handleDragStateChange(isDragging: boolean, dragType: 'row' | 'col' | null): void {
-    if (isDragging) {
-      const gripsToHide = dragType === 'row' ? this.colGrips : this.rowGrips;
+  private hideAllGripsExcept(activeGrip: HTMLElement): void {
+    [...this.colGrips, ...this.rowGrips].forEach(grip => {
+      if (grip !== activeGrip) {
+        this.applyIdleClasses(grip);
+      }
+    });
+  }
 
-      gripsToHide.forEach(grip => {
-        const el: HTMLElement = grip;
+  private applyIdleClasses(grip: HTMLElement): void {
+    const el = grip;
+    const isCol = el.hasAttribute(GRIP_COL_ATTR);
+    const type: 'col' | 'row' = isCol ? 'col' : 'row';
+    // With border-box, pillSize must account for the 12px padding (6px each side)
+    const HIT_AREA_PADDING = 12;
+    const pillSize = isCol ? (COL_PILL_HEIGHT + HIT_AREA_PADDING) : (ROW_PILL_WIDTH + HIT_AREA_PADDING);
+
+    if (this.isInsideTable) {
+      el.style.transition = 'none';
+    }
 
-        el.style.display = 'none';
-      });
+    collapseGrip(el, type, pillSize);
+    el.className = twMerge(GRIP_CAPSULE_CLASSES, GRIP_IDLE_CLASSES);
+    el.removeAttribute('data-blok-table-grip-visible');
 
-      return;
+    if (this.isInsideTable) {
+      void el.offsetHeight;
+      el.style.transition = '';
     }
+  }
 
+  private handleDragStateChange(isDragging: boolean, _dragType: 'row' | 'col' | null): void {
     [...this.colGrips, ...this.rowGrips].forEach(grip => {
       const el: HTMLElement = grip;
 
-      el.style.display = '';
+      el.style.display = isDragging ? 'none' : '';
     });
   }
 
@@ -369,6 +536,7 @@ export class TableRowColControls {
     this.hideTimeout = setTimeout(() => {
       this.hideColGrip();
       this.hideRowGrip();
+      this.isInsideTable = false;
       this.hideTimeout = null;
     }, HIDE_DELAY_MS);
   }
@@ -427,155 +595,41 @@ export class TableRowColControls {
   // ── Popover menus ────────────────────────────────────────────
 
   private openPopover(type: 'row' | 'col', index: number): void {
-    this.destroyPopover();
-    this.clearHideTimeout();
-
-    const grip = type === 'col'
-      ? this.colGrips[index]
-      : this.rowGrips[index];
-
-    if (!grip) {
-      return;
-    }
-
-    const items = type === 'col'
-      ? this.buildColumnMenu(index)
-      : this.buildRowMenu(index);
-
-    this.activePopover = new PopoverDesktop({
-      items,
-      trigger: grip,
-      flippable: true,
-    });
-
-    this.activePopover.on(PopoverEvent.Closed, () => {
-      this.destroyPopover();
-      this.scheduleHideAll();
-    });
-
-    this.activePopover.show();
-    this.addOutsideClickListener(grip);
-  }
-
-  private addOutsideClickListener(grip: HTMLElement): void {
-    this.boundDocPointerDown = (e: PointerEvent): void => {
-      const target = e.target as Node;
-
-      if (grip.contains(target)) {
-        return;
-      }
-
-      if (this.activePopover?.hasNode(target)) {
-        return;
+    this.popoverState = createGripPopover(
+      type,
+      index,
+      { col: this.colGrips, row: this.rowGrips },
+      {
+        getColumnCount: this.getColumnCount,
+        getRowCount: this.getRowCount,
+        isHeadingRow: this.isHeadingRow,
+        isHeadingColumn: this.isHeadingColumn,
+        onAction: this.onAction,
+        i18n: this.i18n,
+      },
+      {
+        clearHideTimeout: () => this.clearHideTimeout(),
+        hideAllGripsExcept: (grip) => this.hideAllGripsExcept(grip),
+        applyActiveClasses: (grip) => this.applyActiveClasses(grip),
+        applyVisibleClasses: (grip) => this.applyVisibleClasses(grip),
+        scheduleHideAll: () => this.scheduleHideAll(),
+        destroyPopover: () => this.destroyPopover(),
+        onGripPopoverClose: this.onGripPopoverClose,
       }
+    );
 
-      this.destroyPopover();
-    };
-
-    document.addEventListener('pointerdown', this.boundDocPointerDown);
-  }
-
-  private removeOutsideClickListener(): void {
-    if (this.boundDocPointerDown !== null) {
-      document.removeEventListener('pointerdown', this.boundDocPointerDown);
-      this.boundDocPointerDown = null;
-    }
+    // Show after storing state so callbacks (e.g. onGripClick → setGripsDisplay)
+    // see the updated popoverState.grip reference
+    this.popoverState.popover?.show();
+    this.onGripClick?.(type, index);
   }
 
   private destroyPopover(): void {
-    if (this.activePopover !== null) {
-      const popover = this.activePopover;
+    if (this.popoverState.popover !== null) {
+      const popoverRef = this.popoverState.popover;
 
-      this.activePopover = null;
-      this.removeOutsideClickListener();
-      popover.destroy();
+      this.popoverState = { popover: null, grip: null };
+      popoverRef.destroy();
     }
   }
-
-  private buildColumnMenu(colIndex: number): PopoverItemParams[] {
-    return [
-      {
-        icon: IconInsertLeft,
-        title: 'Insert Column Left',
-        closeOnActivate: true,
-        onActivate: (): void => {
-          this.onAction({ type: 'insert-col-left', index: colIndex });
-        },
-      },
-      {
-        icon: IconInsertRight,
-        title: 'Insert Column Right',
-        closeOnActivate: true,
-        onActivate: (): void => {
-          this.onAction({ type: 'insert-col-right', index: colIndex });
-        },
-      },
-      { type: PopoverItemType.Separator },
-      {
-        icon: IconTrash,
-        title: 'Delete Column',
-        confirmation: {
-          title: 'Click to confirm',
-          icon: IconTrash,
-          onActivate: (): void => {
-            this.onAction({ type: 'delete-col', index: colIndex });
-          },
-        },
-      },
-    ];
-  }
-
-  private buildRowMenu(rowIndex: number): PopoverItemParams[] {
-    const baseItems: PopoverItemParams[] = [
-      {
-        icon: IconInsertAbove,
-        title: 'Insert Row Above',
-        closeOnActivate: true,
-        onActivate: (): void => {
-          this.onAction({ type: 'insert-row-above', index: rowIndex });
-        },
-      },
-      {
-        icon: IconInsertBelow,
-        title: 'Insert Row Below',
-        closeOnActivate: true,
-        onActivate: (): void => {
-          this.onAction({ type: 'insert-row-below', index: rowIndex });
-        },
-      },
-    ];
-
-    const headingItems: PopoverItemParams[] = rowIndex === 0
-      ? [
-        { type: PopoverItemType.Separator },
-        {
-          icon: IconHeading,
-          title: 'Set as Heading',
-          isActive: this.isHeadingRow(),
-          toggle: true,
-          closeOnActivate: true,
-          onActivate: (): void => {
-            this.onAction({ type: 'toggle-heading' });
-          },
-        },
-      ]
-      : [];
-
-    const deleteItems: PopoverItemParams[] = [
-      { type: PopoverItemType.Separator },
-      {
-        icon: IconTrash,
-        title: 'Delete Row',
-        confirmation: {
-          title: 'Click to confirm',
-          icon: IconTrash,
-          onActivate: (): void => {
-            this.onAction({ type: 'delete-row', index: rowIndex });
-          },
-        },
-      },
-    ];
-
-    return [...baseItems, ...headingItems, ...deleteItems];
-  }
 }

package/src/tools/table/table-row-col-drag.ts

@@ -186,8 +186,8 @@ export class TableRowColDrag {
     cells.forEach(node => {
       const cellEl = node as HTMLElement;
 
-      cellEl.style.backgroundColor = '#dbeafe';
-      cellEl.style.opacity = '0.6';
+      cellEl.style.backgroundColor = '#f3f4f6';
+      cellEl.style.opacity = '0.7';
       this.dragOverlayCells.push(cellEl);
     });
   }
@@ -202,8 +202,8 @@ export class TableRowColDrag {
 
       const cellEl = cells[this.dragFromIndex] as HTMLElement;
 
-      cellEl.style.backgroundColor = '#dbeafe';
-      cellEl.style.opacity = '0.6';
+      cellEl.style.backgroundColor = '#f3f4f6';
+      cellEl.style.opacity = '0.7';
       this.dragOverlayCells.push(cellEl);
     });
   }