@jackuait/blok 0.4.1-beta.5 → 0.4.1-beta.6

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

@@ -0,0 +1,338 @@
+import { isMobileScreen, keyCodes } from '../../utils';
+import type { PopoverItem } from './components/popover-item';
+import { PopoverItemDefault, PopoverItemType } from './components/popover-item';
+import { PopoverItemHtml } from './components/popover-item/popover-item-html/popover-item-html';
+import { PopoverDesktop } from './popover-desktop';
+import { css, cssInline, CSSVariables, getNestedLevelAttrValue } from './popover.const';
+import { DATA_ATTR } from '../../constants/data-attributes';
+import type { PopoverParams } from '@/types/utils/popover/popover';
+import { PopoverEvent } from '@/types/utils/popover/popover-event';
+import { twMerge } from '../tw';
+import { Flipper } from '../../flipper';
+import { css as popoverItemCls } from './components/popover-item';
+
+/**
+ * Inline popover height CSS variables
+ */
+const INLINE_HEIGHT = '38px';
+const INLINE_HEIGHT_MOBILE = '46px';
+
+/**
+ * Horizontal popover that is displayed inline with the content
+ * @internal
+ */
+export class PopoverInline extends PopoverDesktop {
+  /**
+   * Returns true if a nested popover is currently open
+   */
+  public get hasNestedPopoverOpen(): boolean {
+    return this.nestedPopover !== null && this.nestedPopover !== undefined;
+  }
+
+  /**
+   * Closes the nested popover if one is open
+   */
+  public closeNestedPopover(): void {
+    this.destroyNestedPopoverIfExists();
+  }
+
+  /**
+   * Closes popover - override as arrow function to match parent
+   */
+  public override hide = (): void => {
+    // Call parent hide logic manually (can't use super for arrow functions)
+    this.setOpenTop(false);
+    this.setOpenLeft(false);
+
+    this.itemsDefault.forEach(item => item.reset());
+
+    if (this.search !== undefined) {
+      this.search.clear();
+    }
+
+    this.destroyNestedPopoverIfExists();
+    this.flipper?.deactivate();
+
+    // Reset to closed inline styles
+    this.nodes.popover.className = twMerge(cssInline.popover);
+    if (this.nodes.popoverContainer) {
+      this.nodes.popoverContainer.className = twMerge(
+        css.popoverContainer,
+        cssInline.popoverContainer
+      );
+      this.nodes.popoverContainer.style.height = '';
+    }
+
+    // Emit closed event (from abstract)
+    this.emit(PopoverEvent.Closed);
+  };
+
+  /**
+   * Constructs the instance
+   * @param params - instance parameters
+   */
+  constructor(params: PopoverParams) {
+    const isHintEnabled = !isMobileScreen();
+
+    /**
+     * Create a custom Flipper for inline toolbar that only responds to vertical navigation.
+     * Left/Right arrow keys should have no effect in the inline toolbar.
+     * Navigation is done via Up/Down arrows and Tab/Shift+Tab.
+     */
+    const inlineFlipper = new Flipper({
+      focusedItemClass: popoverItemCls.focused,
+      allowedKeys: [
+        keyCodes.TAB,
+        keyCodes.UP,
+        keyCodes.DOWN,
+        keyCodes.ENTER,
+      ],
+    });
+
+    super(
+      {
+        ...params,
+        flipper: inlineFlipper,
+      },
+      {
+        [PopoverItemType.Default]: {
+          /**
+           * We use button instead of div here to fix bug associated with focus loss (which leads to selection change) on click in safari
+           * @todo figure out better way to solve the issue
+           */
+          wrapperTag: 'button',
+          hint: {
+            position: 'top',
+            alignment: 'center',
+            enabled: isHintEnabled,
+          },
+          /**
+           * Inline tools display icons without titles, so no gap is needed
+           */
+          iconWithGap: false,
+          /**
+           * Mark items as inline for styling
+           */
+          isInline: true,
+        },
+        [PopoverItemType.Html]: {
+          hint: {
+            position: 'top',
+            alignment: 'center',
+            enabled: isHintEnabled,
+          },
+          isInline: true,
+        },
+        [PopoverItemType.Separator]: {
+          isInline: true,
+        },
+      }
+    );
+
+    // Apply inline popover root styles
+    this.nodes.popover.className = twMerge(cssInline.popover);
+
+    // Apply inline container styles
+    if (this.nodes.popoverContainer) {
+      this.nodes.popoverContainer.className = twMerge(
+        css.popoverContainer,
+        cssInline.popoverContainer
+      );
+    }
+
+    // Apply inline items container styles
+    if (this.nodes.items) {
+      this.nodes.items.className = twMerge(css.items, 'flex');
+    }
+
+    // Set inline height CSS variables
+    this.nodes.popover.style.setProperty('--height', INLINE_HEIGHT);
+    this.nodes.popover.style.setProperty('--height-mobile', INLINE_HEIGHT_MOBILE);
+
+    // Mark as inline popover for any remaining CSS (deprecated, but kept for backwards compatibility)
+    this.nodes.popover.setAttribute(DATA_ATTR.popoverInline, '');
+
+    this.flipper?.setHandleContentEditableTargets(true);
+
+    /**
+     * If active popover item has children, show them.
+     * This is needed to display link url text (which is displayed as a nested popover content)
+     * once you select <a> tag content in text
+     */
+    this.items
+      .forEach((item) => {
+        if (!(item instanceof PopoverItemDefault) && !(item instanceof PopoverItemHtml)) {
+          return;
+        }
+
+        if (item.hasChildren && item.isChildrenOpen) {
+          this.showNestedItems(item);
+        }
+      });
+
+  }
+
+  /**
+   * Returns visible element offset top
+   */
+  public get offsetLeft(): number {
+    if (this.nodes.popoverContainer === null) {
+      return 0;
+    }
+
+    return this.nodes.popoverContainer.offsetLeft;
+  }
+
+  /**
+   * Open popover
+   */
+  public override show(): void {
+    super.show();
+
+    // Apply inline opened styles to root
+    this.nodes.popover.className = twMerge(cssInline.popover, 'inline-block');
+
+    // Apply inline container opened styles (no animation for inline)
+    if (this.nodes.popoverContainer) {
+      this.nodes.popoverContainer.className = twMerge(
+        css.popoverContainer,
+        css.popoverContainerOpened,
+        cssInline.popoverContainer,
+        'animate-none'
+      );
+
+      // Set height based on screen
+      const height = isMobileScreen() ? 'var(--height-mobile)' : 'var(--height)';
+      this.nodes.popoverContainer.style.height = height;
+    }
+
+    const containerRect = this.nestingLevel === 0
+      ? this.nodes.popoverContainer?.getBoundingClientRect()
+      : undefined;
+
+    if (containerRect !== undefined) {
+      const width = `${containerRect.width}px`;
+      const heightPx = `${containerRect.height}px`;
+
+      this.nodes.popover.style.setProperty(CSSVariables.InlinePopoverWidth, width);
+      this.nodes.popover.style.width = width;
+      this.nodes.popover.style.height = heightPx;
+    }
+
+    requestAnimationFrame(() => {
+      this.flipper?.deactivate();
+      this.flipper?.activate(this.flippableElements);
+    });
+  }
+
+  /**
+   * Disable hover event handling.
+   * Overrides parent's class behavior
+   */
+  protected override handleHover(): void {
+    return;
+  }
+
+  /**
+   * Sets CSS variable with position of item near which nested popover should be displayed.
+   * Is used to position nested popover right below clicked item
+   * @param nestedPopoverEl - nested popover element
+   * @param item – item near which nested popover should be displayed
+   */
+  protected override setTriggerItemPosition(
+    nestedPopoverEl: HTMLElement,
+    item: PopoverItemDefault
+  ): void {
+    const itemEl = item.getElement();
+    const itemOffsetLeft = itemEl ? itemEl.offsetLeft : 0;
+    const totalLeftOffset = this.offsetLeft + itemOffsetLeft;
+
+    nestedPopoverEl.style.setProperty(
+      CSSVariables.TriggerItemLeft,
+      totalLeftOffset + 'px'
+    );
+  }
+
+  /**
+   * Handles displaying nested items for the item.
+   * Overriding in order to add toggling behaviour
+   * @param item – item to toggle nested popover for
+   */
+  protected override showNestedItems(item: PopoverItemDefault | PopoverItemHtml): void {
+    if (this.nestedPopoverTriggerItem === item) {
+      this.destroyNestedPopoverIfExists();
+
+      this.nestedPopoverTriggerItem = null;
+
+      return;
+    }
+
+    super.showNestedItems(item);
+  }
+
+  /**
+   * Creates and displays nested popover for specified item.
+   * Is used only on desktop
+   * @param item - item to display nested popover by
+   */
+  protected showNestedPopoverForItem(item: PopoverItem): PopoverDesktop {
+    const nestedPopover = super.showNestedPopoverForItem(item);
+    const nestedPopoverEl = nestedPopover.getElement();
+
+    nestedPopover.flipper?.setHandleContentEditableTargets(true);
+
+    // Apply nested inline styles to the nested popover container
+    const nestedContainer = nestedPopoverEl.querySelector(`[${DATA_ATTR.popoverContainer}]`) as HTMLElement | null;
+    if (nestedContainer) {
+      nestedContainer.className = twMerge(
+        nestedContainer.className,
+        'h-fit p-1.5 flex-col',
+      );
+    }
+
+    // Apply nested inline styles to the items container
+    const nestedItems = nestedPopoverEl.querySelector(`[${DATA_ATTR.popoverItems}]`) as HTMLElement | null;
+    if (nestedItems) {
+      nestedItems.className = twMerge(nestedItems.className, 'block w-full');
+    }
+
+    /**
+     * We need to add data attribute with nesting level, which will help position nested popover.
+     * Currently only 'level-1' is used
+     */
+    nestedPopoverEl.setAttribute(DATA_ATTR.nestedLevel, getNestedLevelAttrValue(nestedPopover.nestingLevel));
+
+    // Apply level-1 specific positioning styles
+    if (nestedPopover.nestingLevel === 1 && nestedContainer) {
+      nestedContainer.className = twMerge(nestedContainer.className, 'left-0');
+      // Set top position based on height
+      const topOffset = isMobileScreen() ? 'calc(var(--height-mobile) + 3px)' : 'calc(var(--height) + 3px)';
+      nestedContainer.style.top = topOffset;
+    }
+
+    return nestedPopover;
+  }
+
+  /**
+   * Overrides default item click handling.
+   * Helps to close nested popover once other item is clicked.
+   * @param item - clicked item
+   */
+  protected override handleItemClick(item: PopoverItem): void {
+    if (item !== this.nestedPopoverTriggerItem) {
+      /**
+       * In case tool had special handling for toggling button (like link tool which modifies selection)
+       * we need to call handleClick on nested popover trigger item
+       */
+      this.nestedPopoverTriggerItem?.handleClick();
+
+      /**
+       * Then close the nested popover
+       */
+      super.destroyNestedPopoverIfExists();
+    }
+
+    super.handleItemClick(item);
+  }
+
+}

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

@@ -0,0 +1,201 @@
+import { PopoverAbstract } from './popover-abstract';
+import { ScrollLocker } from '../scroll-locker';
+import { PopoverHeader } from './components/popover-header';
+import { PopoverStatesHistory } from './utils/popover-states-history';
+import type { PopoverMobileNodes, PopoverParams } from '@/types/utils/popover/popover';
+import type { PopoverItemDefault, PopoverItemParams } from './components/popover-item';
+import { PopoverItemType } from './components/popover-item';
+import { css } from './popover.const';
+import { DATA_ATTR } from '../../constants/data-attributes';
+import { Dom } from '../../dom';
+import { twMerge } from '../tw';
+
+
+/**
+ * Mobile Popover.
+ * On mobile devices Popover behaves like a fixed panel at the bottom of screen. Nested item appears like "pages" with the "back" button
+ */
+export class PopoverMobile extends PopoverAbstract<PopoverMobileNodes> {
+  /**
+   * ScrollLocker instance
+   */
+  private scrollLocker = new ScrollLocker();
+
+  /**
+   * Reference to popover header if exists
+   */
+  private header: PopoverHeader | undefined | null;
+
+  /**
+   * History of popover states for back navigation.
+   * Is used for mobile version of popover,
+   * where we can not display nested popover of the screen and
+   * have to render nested items in the same popover switching to new state
+   */
+  private history = new PopoverStatesHistory();
+
+  /**
+   * Flag that indicates if popover is hidden
+   */
+  private isHidden = true;
+
+  /**
+   * Construct the instance
+   * @param params - popover params
+   */
+  constructor(params: PopoverParams) {
+    super(params, {
+      [PopoverItemType.Default]: {
+        hint: {
+          enabled: false,
+        },
+      },
+      [PopoverItemType.Html]: {
+        hint: {
+          enabled: false,
+        },
+      },
+    });
+
+    this.nodes.overlay = Dom.make('div', [css.popoverOverlay], {
+      [DATA_ATTR.popoverOverlay]: '',
+      [DATA_ATTR.overlayHidden]: '',
+      'data-blok-testid': 'popover-overlay',
+    });
+    this.nodes.popover.insertBefore(this.nodes.overlay, this.nodes.popover.firstChild);
+
+    this.listeners.on(this.nodes.overlay, 'click', () => {
+      this.hide();
+    });
+
+    /* Save state to history for proper navigation between nested and parent popovers */
+    this.history.push({ items: params.items });
+
+    // Set mobile offset CSS variable (moved from popover.css @screen mobile rule)
+    this.nodes.popoverContainer.style.setProperty('--offset', '5px');
+
+    // Apply mobile-specific classes to container
+    this.nodes.popoverContainer.className = twMerge(
+      css.popoverContainer,
+      css.popoverContainerMobile
+    );
+  }
+
+  /**
+   * Open popover
+   */
+  public show(): void {
+    this.nodes.overlay.removeAttribute(DATA_ATTR.overlayHidden);
+    this.nodes.overlay.className = twMerge(css.popoverOverlay, 'fixed inset-0 block visible z-[3] opacity-50 transition-opacity duration-[120ms] ease-in will-change-[opacity]');
+
+    super.show();
+
+    // Apply mobile opened state classes AFTER super.show() to override base class styles
+    // For mobile, we use max-h-none instead of max-h-[var(--max-height)] since mobile popovers
+    // should expand to fit their content
+    // Use z-[4] to ensure container is above the overlay (z-[3])
+    this.nodes.popoverContainer.className = twMerge(
+      css.popoverContainer,
+      css.popoverContainerMobile,
+      css.popoverContainerOpened,
+      'max-h-none z-[4] animate-[panelShowingMobile_250ms_ease]'
+    );
+
+    this.scrollLocker.lock();
+
+    this.isHidden = false;
+  }
+
+  /**
+   * Closes popover
+   */
+  public hide(): void {
+    if (this.isHidden) {
+      return;
+    }
+
+    super.hide();
+    this.nodes.overlay.setAttribute(DATA_ATTR.overlayHidden, '');
+    this.nodes.overlay.className = css.popoverOverlay;
+
+    // Reset to mobile base closed state
+    this.nodes.popoverContainer.className = twMerge(
+      css.popoverContainer,
+      css.popoverContainerMobile
+    );
+
+    this.scrollLocker.unlock();
+
+    this.history.reset();
+
+    this.isHidden = true;
+  }
+
+  /**
+   * Clears memory
+   */
+  public destroy(): void {
+    super.destroy();
+
+    this.scrollLocker.unlock();
+  }
+
+  /**
+   * Handles displaying nested items for the item
+   * @param item – item to show nested popover for
+   */
+  protected override showNestedItems(item: PopoverItemDefault): void {
+    /** Show nested items */
+    this.updateItemsAndHeader(item.children, item.title);
+
+    this.history.push({
+      title: item.title,
+      items: item.children,
+    });
+  }
+
+  /**
+   * Removes rendered popover items and header and displays new ones
+   * @param items - new popover items
+   * @param title - new popover header text
+   */
+  private updateItemsAndHeader(items: PopoverItemParams[], title?: string ): void {
+    /** Re-render header */
+    if (this.header !== null && this.header !== undefined) {
+      this.header.destroy();
+      this.header = null;
+    }
+    const shouldRenderHeader = title !== undefined;
+
+    if (shouldRenderHeader) {
+      this.header = new PopoverHeader({
+        text: title,
+        onBackButtonClick: () => {
+          this.history.pop();
+
+          this.updateItemsAndHeader(this.history.currentItems, this.history.currentTitle);
+        },
+      });
+    }
+
+    const headerElement = this.header?.getElement() ?? null;
+
+    if (shouldRenderHeader && headerElement !== null) {
+      this.nodes.popoverContainer.insertBefore(headerElement, this.nodes.popoverContainer.firstChild);
+    }
+
+    /** Re-render items */
+    this.items.forEach(item => item.getMountElement?.()?.remove());
+
+    this.items = this.buildItems(items);
+
+    this.items.forEach(item => {
+      const itemEl = item.getMountElement?.() ?? item.getElement();
+
+      if (itemEl === null) {
+        return;
+      }
+      this.nodes.items?.appendChild(itemEl);
+    });
+  }
+}

package/src/components/utils/popover/popover.const.ts

@@ -0,0 +1,81 @@
+/**
+ * Tailwind CSS class names for popover component
+ *
+ * Classes are applied directly in components using twMerge for conflict resolution.
+ */
+export const css = {
+  // Popover container - base styles
+  popoverContainer: 'absolute flex flex-col overflow-hidden box-border opacity-0 pointer-events-none p-0 border-none z-[4] max-h-0 min-w-[var(--width)] w-[var(--width)] rounded-lg shadow-[0_3px_15px_-3px_theme(colors.popover-shadow)] left-[var(--popover-left)] top-[var(--popover-top)] bg-popover-bg',
+
+  // Popover container - mobile styles (applied conditionally)
+  // Reset left/top from base class since inset shorthand may not properly override them in twMerge
+  popoverContainerMobile: 'fixed max-w-none rounded-[10px] min-w-[calc(100%-var(--offset)*2)] left-auto top-auto inset-[auto_var(--offset)_calc(var(--offset)+env(safe-area-inset-bottom))_var(--offset)]',
+
+  // Popover container - opened state
+  popoverContainerOpened: 'opacity-100 pointer-events-auto p-1 max-h-[var(--max-height)] border border-popover-border animate-[panelShowing_100ms_ease]',
+
+  // Popover overlay
+  popoverOverlay: 'hidden bg-dark',
+
+  items: 'overflow-y-auto overscroll-contain',
+};
+
+/**
+ * Tailwind CSS class names for inline popover
+ * These classes override base popover styles when used in inline context
+ */
+export const cssInline = {
+  // Popover root element for inline
+  popover: 'relative',
+
+  // Container for inline popover
+  popoverContainer: 'flex-row top-0 min-w-max w-max p-1 mobile:absolute',
+};
+
+/**
+ * Helper to get nested level attribute value
+ * @param level - nesting level
+ */
+export const getNestedLevelAttrValue = (level: number): string => {
+  return `level-${level}`;
+};
+
+/**
+ * CSS variables names to be used in popover
+ */
+export enum CSSVariables {
+  /**
+   * Stores nesting level of the popover
+   */
+  NestingLevel = '--nesting-level',
+
+  /**
+   * Stores actual popover height. Used for desktop popovers
+   */
+  PopoverHeight = '--popover-height',
+
+  /**
+   * Width of the inline popover
+   */
+  InlinePopoverWidth = '--inline-popover-width',
+
+  /**
+   * Top position of the popover container
+   */
+  PopoverTop = '--popover-top',
+
+  /**
+   * Left position of the popover container
+   */
+  PopoverLeft = '--popover-left',
+
+  /**
+   * Offset from left of the inline popover item click on which triggers the nested popover opening
+   */
+  TriggerItemLeft = '--trigger-item-left',
+
+  /**
+   * Offset from top of the desktop popover item click on which triggers the nested popover opening
+   */
+  TriggerItemTop = '--trigger-item-top',
+}

package/src/components/utils/popover/utils/popover-states-history.ts

@@ -0,0 +1,72 @@
+import type { PopoverItemParams } from '@/types/utils/popover/popover-item';
+
+/**
+ * Represents single states history item
+ */
+interface PopoverStatesHistoryItem {
+  /**
+   * Popover title
+   */
+  title?: string;
+
+  /**
+   * Popover items
+   */
+  items: PopoverItemParams[]
+}
+
+/**
+ * Manages items history inside popover. Allows to navigate back in history
+ */
+export class PopoverStatesHistory {
+  /**
+   * Previous items states
+   */
+  private history: PopoverStatesHistoryItem[] = [];
+
+  /**
+   * Push new popover state
+   * @param state - new state
+   */
+  public push(state: PopoverStatesHistoryItem): void {
+    this.history.push(state);
+  }
+
+  /**
+   * Pop last popover state
+   */
+  public pop(): PopoverStatesHistoryItem | undefined {
+    return this.history.pop();
+  }
+
+  /**
+   * Title retrieved from the current state
+   */
+  public get currentTitle(): string | undefined {
+    if (this.history.length === 0) {
+      return '';
+    }
+
+    return this.history[this.history.length - 1].title;
+  }
+
+  /**
+   * Items list retrieved from the current state
+   */
+  public get currentItems(): PopoverItemParams[] {
+    if (this.history.length === 0) {
+      return [];
+    }
+
+    return this.history[this.history.length - 1].items;
+  }
+
+  /**
+   * Returns history to initial popover state
+   */
+  public reset(): void  {
+    while (this.history.length > 1) {
+      this.pop();
+    }
+  }
+}