feat: nested popover (#2649)

* Move popover types to separate file

* tmp

* open top

* Fix bug with keyboard navigation

* Fix bug with scroll

* Fix mobile

* Add popover header class

* Display nested items on mobile

* Refactor history

* Fix positioning on desktop

* Fix tests

* Fix child popover indent left

* Fix ts errors in popover files

* Move files

* Rename cn to bem

* Clarify comments and rename method

* Refactor popover css classes

* Rename cls to css

* Split popover desktop and mobile classes

* Add ability to open popover to the left if not enough space to open to the right

* Add nested popover test

* Add popover test for mobile screens

* Fix tests

* Add union type for both popovers

* Add global window resize event

* Multiple fixes

* Move nodes initialization to constructor

* Rename handleShowingNestedItems to showNestedItems

* Replace WindowResize with EditorMobileLayoutToggled

* New doze of fixes

* Review fixes

* Fixes

* Fixes

* Make each nested popover decide itself if it should open top

* Update changelog

* Update changelog

* Update changelog

Author: TatianaFomina

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.30.1
+
+– `New` – Block Tunes now supports nesting items
+
 ### 2.30.0
 
 - `Improvement` — The ability to merge blocks of different types (if both tools provide the conversionConfig)

src/components/dom.ts

@@ -52,11 +52,13 @@ export default class Dom {
    * @param  {object} [attributes] - any attributes
    * @returns {HTMLElement}
    */
-  public static make(tagName: string, classNames: string | string[] | null = null, attributes: object = {}): HTMLElement {
+  public static make(tagName: string, classNames: string | (string | undefined)[] | null = null, attributes: object = {}): HTMLElement {
     const el = document.createElement(tagName);
 
     if (Array.isArray(classNames)) {
-      el.classList.add(...classNames);
+      const validClassnames = classNames.filter(className => className !== undefined) as string[];
+
+      el.classList.add(...validClassnames);
     } else if (classNames) {
       el.classList.add(classNames);
     }

src/components/events/EditorMobileLayoutToggled.ts

@@ -0,0 +1,15 @@
+/**
+ * Fired when editor mobile layout toggled
+ */
+export const EditorMobileLayoutToggled = 'editor mobile layout toggled';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface EditorMobileLayoutToggledPayload {
+  /**
+   * True, if mobile layout enabled
+   */
+  isEnabled: boolean;
+}
+

src/components/events/index.ts

@@ -3,6 +3,7 @@ import { BlockChanged, BlockChangedPayload } from './BlockChanged';
 import { BlockHovered, BlockHoveredPayload } from './BlockHovered';
 import { FakeCursorAboutToBeToggled, FakeCursorAboutToBeToggledPayload } from './FakeCursorAboutToBeToggled';
 import { FakeCursorHaveBeenSet, FakeCursorHaveBeenSetPayload } from './FakeCursorHaveBeenSet';
+import { EditorMobileLayoutToggled, EditorMobileLayoutToggledPayload } from './EditorMobileLayoutToggled';
 
 /**
  * Events fired by Editor Event Dispatcher
@@ -11,7 +12,8 @@ export {
   RedactorDomChanged,
   BlockChanged,
   FakeCursorAboutToBeToggled,
-  FakeCursorHaveBeenSet
+  FakeCursorHaveBeenSet,
+  EditorMobileLayoutToggled
 };
 
 /**
@@ -23,4 +25,5 @@ export interface EditorEventMap {
   [BlockChanged]: BlockChangedPayload;
   [FakeCursorAboutToBeToggled]: FakeCursorAboutToBeToggledPayload;
   [FakeCursorHaveBeenSet]: FakeCursorHaveBeenSetPayload;
+  [EditorMobileLayoutToggled]: EditorMobileLayoutToggledPayload
 }

src/components/flipper.ts

@@ -49,15 +49,11 @@ export default class Flipper {
 
   /**
    * Instance of flipper iterator
-   *
-   * @type {DomIterator|null}
    */
-  private readonly iterator: DomIterator = null;
+  private readonly iterator: DomIterator | null = null;
 
   /**
    * Flag that defines activation status
-   *
-   * @type {boolean}
    */
   private activated = false;
 
@@ -77,7 +73,7 @@ export default class Flipper {
   private flipCallbacks: Array<() => void> = [];
 
   /**
-   * @param {FlipperOptions} options - different constructing settings
+   * @param options - different constructing settings
    */
   constructor(options: FlipperOptions) {
     this.iterator = new DomIterator(options.items, options.focusedItemClass);
@@ -110,7 +106,6 @@ export default class Flipper {
    */
   public activate(items?: HTMLElement[], cursorPosition?: number): void {
     this.activated = true;
-
     if (items) {
       this.iterator.setItems(items);
     }

src/components/modules/toolbar/blockSettings.ts

@@ -7,7 +7,10 @@ import { I18nInternalNS } from '../../i18n/namespace-internal';
 import Flipper from '../../flipper';
 import { TunesMenuConfigItem } from '../../../../types/tools';
 import { resolveAliases } from '../../utils/resolve-aliases';
-import Popover, { PopoverEvent } from '../../utils/popover';
+import { type Popover, PopoverDesktop, PopoverMobile } from '../../utils/popover';
+import { PopoverEvent } from '../../utils/popover/popover.types';
+import { isMobileScreen } from '../../utils';
+import { EditorMobileLayoutToggled } from '../../events';
 
 /**
  * HTML Elements that used for BlockSettings
@@ -27,8 +30,6 @@ interface BlockSettingsNodes {
 export default class BlockSettings extends Module<BlockSettingsNodes> {
   /**
    * Module Events
-   *
-   * @returns {{opened: string, closed: string}}
    */
   public get events(): { opened: string; closed: string } {
     return {
@@ -56,8 +57,12 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
    *
    * @todo remove once BlockSettings becomes standalone non-module class
    */
-  public get flipper(): Flipper {
-    return this.popover?.flipper;
+  public get flipper(): Flipper | undefined {
+    if (this.popover === null) {
+      return;
+    }
+
+    return 'flipper' in this.popover ? this.popover?.flipper : undefined;
   }
 
   /**
@@ -67,9 +72,9 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
 
   /**
    * Popover instance. There is a util for vertical lists.
+   * Null until popover is not initialized
    */
-  private popover: Popover | undefined;
-
+  private popover: Popover | null = null;
 
   /**
    * Panel with block settings with 2 sections:
@@ -82,13 +87,17 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
     if (import.meta.env.MODE === 'test') {
       this.nodes.wrapper.setAttribute('data-cy', 'block-tunes');
     }
+
+    this.eventsDispatcher.on(EditorMobileLayoutToggled, this.close);
   }
 
   /**
    * Destroys module
    */
   public destroy(): void {
     this.removeAllNodes();
+    this.listeners.destroy();
+    this.eventsDispatcher.off(EditorMobileLayoutToggled, this.close);
   }
 
   /**
@@ -118,7 +127,10 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
 
     /** Tell to subscribers that block settings is opened */
     this.eventsDispatcher.emit(this.events.opened);
-    this.popover = new Popover({
+
+    const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
+
+    this.popover = new PopoverClass({
       searchable: true,
       items: tunesItems.map(tune => this.resolveTuneAliases(tune)),
       customContent: customHtmlTunesContainer,
@@ -132,22 +144,22 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
 
     this.popover.on(PopoverEvent.Close, this.onPopoverClose);
 
-    this.nodes.wrapper.append(this.popover.getElement());
+    this.nodes.wrapper?.append(this.popover.getElement());
 
     this.popover.show();
   }
 
   /**
    * Returns root block settings element
    */
-  public getElement(): HTMLElement {
+  public getElement(): HTMLElement | undefined {
     return this.nodes.wrapper;
   }
 
   /**
    * Close Block Settings pane
    */
-  public close(): void {
+  public close = (): void => {
     if (!this.opened) {
       return;
     }
@@ -183,7 +195,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
       this.popover.getElement().remove();
       this.popover = null;
     }
-  }
+  };
 
   /**
    * Handles popover close event

src/components/modules/toolbar/index.ts

@@ -220,6 +220,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
     };
   }
 
+
   /**
    * Toggles read-only mode
    *
@@ -479,9 +480,10 @@ export default class Toolbar extends Module<ToolbarNodes> {
       }
     });
 
-    return this.toolboxInstance.make();
+    return this.toolboxInstance.getElement();
   }
 
+
   /**
    * Handler for Plus Button
    */

src/components/modules/ui.ts

@@ -16,6 +16,7 @@ import { mobileScreenBreakpoint } from '../utils';
 import styles from '../../styles/main.css?inline';
 import { BlockHovered } from '../events/BlockHovered';
 import { selectionChangeDebounceTimeout } from '../constants';
+import { EditorMobileLayoutToggled } from '../events';
 /**
  * HTML Elements used for UI
  */
@@ -121,7 +122,7 @@ export default class UI extends Module<UINodes> {
     /**
      * Detect mobile version
      */
-    this.checkIsMobile();
+    this.setIsMobile();
 
     /**
      * Make main UI elements
@@ -234,10 +235,21 @@ export default class UI extends Module<UINodes> {
   }
 
   /**
-   * Check for mobile mode and cache a result
+   * Check for mobile mode and save the result
    */
-  private checkIsMobile(): void {
-    this.isMobile = window.innerWidth < mobileScreenBreakpoint;
+  private setIsMobile(): void {
+    const isMobile = window.innerWidth < mobileScreenBreakpoint;
+
+    if (isMobile !== this.isMobile) {
+      /**
+       * Dispatch global event
+       */
+      this.eventsDispatcher.emit(EditorMobileLayoutToggled, {
+        isEnabled: this.isMobile,
+      });
+    }
+
+    this.isMobile = isMobile;
   }
 
   /**
@@ -426,7 +438,7 @@ export default class UI extends Module<UINodes> {
     /**
      * Detect mobile version
      */
-    this.checkIsMobile();
+    this.setIsMobile();
   }
 
   /**