@jackuait/blok 0.4.1 → 0.4.3-beta.1

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

@@ -0,0 +1,136 @@
+import { PopoverItem } from '../popover-item';
+import type { PopoverItemHtmlParams, PopoverItemRenderParamsMap, PopoverItemType } from '@/types/utils/popover/popover-item';
+import { Dom } from '../../../../../dom';
+import { css, cssInline } from './popover-item-html.const';
+import { DATA_ATTR } from '../../../../../constants/data-attributes';
+import { twMerge } from '../../../../tw';
+
+/**
+ * Represents popover item with custom html content
+ */
+export class PopoverItemHtml extends PopoverItem {
+  /**
+   * Item html elements
+   */
+  private nodes: { root: HTMLElement | null } = { root: null };
+
+  /**
+   * Whether the item is currently hidden
+   */
+  private isHidden = false;
+
+  /**
+   * Whether this item is in an inline popover context
+   */
+  private readonly isInline: boolean;
+
+  /**
+   * Constructs the instance
+   * @param params – instance parameters
+   * @param renderParams – popover item render params.
+   * The parameters that are not set by user via popover api but rather depend on technical implementation
+   */
+  constructor(params: PopoverItemHtmlParams, renderParams?: PopoverItemRenderParamsMap[PopoverItemType.Html]) {
+    super(params);
+
+    this.isInline = renderParams?.isInline ?? false;
+
+    this.nodes.root = this.createRootElement(params, renderParams);
+  }
+
+  /**
+   * Returns popover item root element
+   */
+  public getElement(): HTMLElement {
+    return this.nodes.root as HTMLElement;
+  }
+
+  /**
+   * Toggles item hidden state
+   * @param isHidden - true if item should be hidden
+   */
+  public toggleHidden(isHidden: boolean): void {
+    this.isHidden = isHidden;
+    this.updateRootClasses();
+
+    if (!this.nodes.root) {
+      return;
+    }
+
+    if (isHidden) {
+      this.nodes.root.setAttribute(DATA_ATTR.hidden, 'true');
+    } else {
+      this.nodes.root.removeAttribute(DATA_ATTR.hidden);
+    }
+  }
+
+  /**
+   * Returns list of buttons and inputs inside custom content
+   */
+  public getControls(): HTMLElement[] {
+    if (!this.nodes.root) {
+      return [];
+    }
+
+    const controls = this.nodes.root.querySelectorAll<HTMLElement>(
+      `button, ${Dom.allInputsSelector}`
+    );
+
+    return Array.from(controls);
+  }
+
+  /**
+   * Updates the root element's class list based on current state
+   */
+  private updateRootClasses(): void {
+    if (!this.nodes.root) {
+      return;
+    }
+
+    this.nodes.root.className = twMerge(
+      css.root,
+      this.isInline && cssInline.root,
+      this.isHidden && css.rootHidden
+    );
+  }
+
+  /**
+   * Creates the root container element
+   * @param params - item params
+   * @param renderParams - render configuration
+   */
+  private createRootElement(
+    params: PopoverItemHtmlParams,
+    renderParams?: PopoverItemRenderParamsMap[PopoverItemType.Html]
+  ): HTMLElement {
+    const root = document.createElement('div');
+
+    // Set initial classes
+    root.className = twMerge(
+      css.root,
+      this.isInline && cssInline.root
+    );
+
+    // Set data attributes
+    root.setAttribute(DATA_ATTR.popoverItemHtml, '');
+    root.setAttribute('data-blok-testid', 'popover-item-html');
+
+    if (params.name) {
+      root.setAttribute('data-blok-item-name', params.name);
+    }
+
+    // Append the custom element
+    root.appendChild(params.element);
+
+    // Add hint if configured
+    if (params.hint !== undefined && renderParams?.hint?.enabled !== false) {
+      this.addHint(root, {
+        ...params.hint,
+        position: renderParams?.hint?.position || 'right',
+        alignment: renderParams?.hint?.alignment || 'center',
+      });
+    }
+
+    return root;
+  }
+}

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

@@ -0,0 +1,20 @@
+/**
+ * Tailwind CSS classes for popover separator component
+ */
+export const css = {
+  container: 'py-1 px-[3px]',
+  containerHidden: 'hidden',
+  line: 'h-px w-full bg-popover-border',
+};
+
+/**
+ * Tailwind CSS classes for inline popover separator
+ */
+export const cssInline = {
+  // Inline context: horizontal separator
+  container: 'px-1 py-0',
+  line: 'h-full w-px',
+  // Nested inline context: back to vertical separator
+  nestedContainer: 'py-1 px-[3px]',
+  nestedLine: 'w-full h-px',
+};

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

@@ -0,0 +1,117 @@
+import { twMerge } from '../../../../tw';
+import { PopoverItem } from '../popover-item';
+import type { PopoverItemRenderParamsMap, PopoverItemType } from '@/types/utils/popover/popover-item';
+import { css, cssInline } from './popover-item-separator.const';
+import { DATA_ATTR } from '../../../../../constants/data-attributes';
+
+/**
+ * Represents popover separator node
+ */
+export class PopoverItemSeparator extends PopoverItem {
+  /**
+   * Html elements
+   */
+  private nodes: { root: HTMLElement | null; line: HTMLElement | null } = { root: null, line: null };
+
+  /**
+   * Whether this separator is in an inline popover context
+   */
+  private readonly isInline: boolean;
+
+  /**
+   * Whether this separator is in a nested inline popover context
+   */
+  private readonly isNestedInline: boolean;
+
+  /**
+   * Constructs the instance
+   * @param renderParams - optional render params for styling context
+   */
+  constructor(renderParams?: PopoverItemRenderParamsMap[PopoverItemType.Separator]) {
+    super();
+
+    this.isInline = renderParams?.isInline ?? false;
+    this.isNestedInline = renderParams?.isNestedInline ?? false;
+
+    this.nodes.root = this.createRootElement();
+  }
+
+  /**
+   * Returns popover separator root element
+   */
+  public getElement(): HTMLElement {
+    return this.nodes.root as HTMLElement;
+  }
+
+  /**
+   * Toggles item hidden state
+   * @param isHidden - true if item should be hidden
+   */
+  public toggleHidden(isHidden: boolean): void {
+    if (!this.nodes.root) {
+      return;
+    }
+
+    const baseClass = this.getContainerClass(false);
+    const hiddenClass = this.getContainerClass(true);
+
+    this.nodes.root.className = isHidden ? hiddenClass : baseClass;
+
+    if (isHidden) {
+      this.nodes.root.setAttribute(DATA_ATTR.hidden, 'true');
+    } else {
+      this.nodes.root.removeAttribute(DATA_ATTR.hidden);
+    }
+  }
+
+  /**
+   * Build container class based on context
+   */
+  private getContainerClass(isHidden: boolean): string {
+    const baseClass = css.container;
+
+    if (this.isNestedInline) {
+      return twMerge(baseClass, cssInline.nestedContainer, isHidden && css.containerHidden);
+    }
+    if (this.isInline) {
+      return twMerge(baseClass, cssInline.container, isHidden && css.containerHidden);
+    }
+
+    return twMerge(baseClass, isHidden && css.containerHidden);
+  }
+
+  /**
+   * Build line class based on context
+   */
+  private getLineClass(): string {
+    if (this.isNestedInline) {
+      return twMerge(css.line, cssInline.nestedLine);
+    }
+    if (this.isInline) {
+      return twMerge(css.line, cssInline.line);
+    }
+
+    return css.line;
+  }
+
+  /**
+   * Creates the root container element
+   */
+  private createRootElement(): HTMLElement {
+    const container = document.createElement('div');
+
+    container.className = this.getContainerClass(false);
+    container.setAttribute(DATA_ATTR.popoverItemSeparator, '');
+    container.setAttribute('data-blok-testid', 'popover-item-separator');
+
+    const line = document.createElement('div');
+
+    line.className = this.getLineClass();
+    line.setAttribute(DATA_ATTR.popoverItemSeparatorLine, '');
+
+    container.appendChild(line);
+    this.nodes.line = line;
+
+    return container;
+  }
+}

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

@@ -0,0 +1,187 @@
+import { hide, onHover } from '../../../../utils/tooltip';
+import { type HintPosition, Hint } from '../hint';
+import type { PopoverItemParams } from '@/types/utils/popover/popover-item';
+
+/**
+ * Popover item abstract class
+ */
+export abstract class PopoverItem {
+  /**
+   * Constructs the instance
+   * @param params - instance parameters
+   */
+  constructor(protected readonly params?: PopoverItemParams) {}
+
+  /**
+   * Item name if exists
+   */
+  public get name(): string | undefined {
+    if (this.params === undefined) {
+      return;
+    }
+    if ('name' in this.params) {
+      return this.params.name;
+    }
+  }
+
+  /**
+   * Destroys the instance
+   */
+  public destroy(): void {
+    hide();
+  }
+
+  /**
+   * Called when children popover is opened (if exists)
+   */
+  public onChildrenOpen(): void {
+    if (this.params === undefined) {
+      return;
+    }
+
+    if ('children' in this.params && typeof this.params.children?.onOpen === 'function') {
+      this.params.children.onOpen();
+    }
+  }
+
+  /**
+   * Called when children popover is closed (if exists)
+   */
+  public onChildrenClose(): void {
+    if (this.params === undefined) {
+      return;
+    }
+
+    if ('children' in this.params && typeof this.params.children?.onClose === 'function') {
+      this.params.children.onClose();
+    }
+  }
+
+  /**
+   * Called on popover item click
+   */
+  public handleClick(): void {
+    if (this.params === undefined) {
+      return;
+    }
+
+    if (!('onActivate' in this.params)) {
+      return;
+    }
+
+    this.params.onActivate?.(this.params);
+  }
+
+  /**
+   * Adds hint to the item element if hint data is provided
+   * @param itemElement - popover item root element to add hint to
+   * @param hintData - hint data
+   */
+  protected addHint(itemElement: HTMLElement, hintData: { title: string, description?: string; position: HintPosition; alignment?: 'start' | 'center' }): void {
+    const content = new Hint(hintData);
+
+    onHover(itemElement, content.getElement(), {
+      placement: hintData.position,
+      hidingDelay: 100,
+    });
+  }
+
+  /**
+   * Returns popover item root element
+   */
+  public abstract getElement(): HTMLElement | null;
+
+  /**
+   * Returns DOM element that should be mounted into the popover container.
+   * Default implementation returns the main element; subclasses may override
+   * when the mounted element differs from the focusable/root element.
+   */
+  public getMountElement(): HTMLElement | null {
+    return this.getElement();
+  }
+
+  /**
+   * Toggles item hidden state
+   * @param isHidden - true if item should be hidden
+   */
+  public abstract toggleHidden(isHidden: boolean): void;
+
+
+  /**
+   * Returns item children that are represented as popover items
+   */
+  public get children(): PopoverItemParams[] {
+    return this.params !== undefined && 'children' in this.params && this.params.children?.items !== undefined ? this.params.children.items : [];
+  }
+
+  /**
+   * Returns true if item has any type of children
+   */
+  public get hasChildren(): boolean {
+    return this.children.length > 0;
+  }
+
+  /**
+   * Returns true if item children should be open instantly after popover is opened and not on item click/hover
+   */
+  public get isChildrenOpen(): boolean {
+    return this.params !== undefined && 'children' in this.params && this.params.children?.isOpen === true;
+  }
+
+  /**   * Returns true if the chevron icon should be hidden
+   */
+  public get isChevronHidden(): boolean {
+    return this.params !== undefined && 'children' in this.params && this.params.children?.hideChevron === true;
+  }
+
+  /**   * True if item children items should be navigatable via keyboard
+   */
+  public get isChildrenFlippable(): boolean {
+    if (this.params === undefined) {
+      return false;
+    }
+
+    if (!('children' in this.params)) {
+      return false;
+    }
+
+    if (this.params.children?.isFlippable === false) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Returns true if item has children that should be searchable
+   */
+  public get isChildrenSearchable(): boolean {
+    return this.params !== undefined && 'children' in this.params && this.params.children?.searchable === true;
+  }
+
+  /**
+   * True if popover should close once item is activated
+   */
+  public get closeOnActivate(): boolean | undefined {
+    return this.params !== undefined && 'closeOnActivate' in this.params && this.params.closeOnActivate;
+  }
+
+  /**
+   * True if item is active
+   */
+  public get isActive(): boolean {
+    if (this.params === undefined) {
+      return false;
+    }
+
+    if (!('isActive' in this.params)) {
+      return false;
+    }
+
+    if (typeof this.params.isActive === 'function') {
+      return this.params.isActive();
+    }
+
+    return this.params.isActive === true;
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './search-input';
+export * from './search-input.types';

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

@@ -0,0 +1,8 @@
+/**
+ * CSS class names to be used in popover search input class
+ */
+export const css = {
+  wrapper: 'bg-[#F8F8F8] border border-[rgba(226,226,229,0.20)] rounded p-0.5 grid grid-cols-[auto_auto_1fr] grid-rows-[auto]',
+  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-none font-medium font-inherit border-0 bg-transparent m-0 p-0 leading-[22px] min-w-[calc(100%-theme('spacing.6')-10px)] placeholder:text-gray-text placeholder:font-medium",
+};

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

@@ -0,0 +1,181 @@
+import { Dom } from '../../../../dom';
+import { Listeners } from '../../../listeners';
+import { IconSearch } from '../../../../icons';
+import type { SearchInputEventMap, SearchableItem } from './search-input.types';
+import { SearchInputEvent } from './search-input.types';
+import { css } from './search-input.const';
+import { EventsDispatcher } from '../../../events';
+
+/**
+ * Provides search input element and search logic
+ * @internal
+ */
+export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
+  /**
+   * Input wrapper element
+   */
+  private wrapper: HTMLElement;
+
+  /**
+   * Editable input itself
+   */
+  private input: HTMLInputElement;
+
+  /**
+   * The instance of the Listeners util
+   */
+  private listeners: Listeners;
+
+  /**
+   * Items for local search
+   */
+  private items: SearchableItem[];
+
+  /**
+   * Current search query
+   */
+  private searchQuery = '';
+
+  /**
+   * @param options - available config
+   * @param options.items - searchable items list
+   * @param options.placeholder - input placeholder
+   */
+  constructor({ items, placeholder }: {
+    items: SearchableItem[];
+    placeholder?: string;
+  }) {
+    super();
+
+    this.listeners = new Listeners();
+    this.items = items;
+
+    /** Build ui */
+    this.wrapper = Dom.make('div', css.wrapper);
+    this.wrapper.setAttribute('data-blok-testid', 'popover-search-field');
+
+    const iconWrapper = Dom.make('div', css.icon, {
+      innerHTML: IconSearch,
+    });
+
+    this.input = Dom.make('input', css.input, {
+      type: 'search',
+      placeholder,
+      /**
+       * Used to prevent focusing on the input by Tab key
+       * (Popover in the Toolbar lays below the blocks,
+       * so Tab in the last block will focus this hidden input if this property is not set)
+       */
+      tabIndex: -1,
+    }) as HTMLInputElement;
+    this.input.setAttribute('data-blok-flipper-navigation-target', 'true');
+    this.input.setAttribute('data-blok-testid', 'popover-search-input');
+
+    this.wrapper.appendChild(iconWrapper);
+    this.wrapper.appendChild(this.input);
+
+    this.overrideValueProperty();
+
+    const eventsToHandle = ['input', 'keyup', 'search', 'change'] as const;
+
+    eventsToHandle.forEach((eventName) => {
+      this.listeners.on(this.input, eventName, this.handleValueChange);
+    });
+  }
+
+  /**
+   * Returns search field element
+   */
+  public getElement(): HTMLElement {
+    return this.wrapper;
+  }
+
+  /**
+   * Sets focus to the input
+   */
+  public focus(): void {
+    this.input.focus();
+  }
+
+  /**
+   * Clears search query and results
+   */
+  public clear(): void {
+    this.input.value = '';
+  }
+
+  /**
+   * Handles value changes for the input element
+   */
+  private handleValueChange = (): void => {
+    this.applySearch(this.input.value);
+  };
+
+  /**
+   * Applies provided query to the search state and notifies listeners
+   * @param query - search query to apply
+   */
+  private applySearch(query: string): void {
+    if (this.searchQuery === query) {
+      return;
+    }
+
+    this.searchQuery = query;
+
+    this.emit(SearchInputEvent.Search, {
+      query,
+      items: this.foundItems,
+    });
+  }
+
+  /**
+   * Overrides value property setter to catch programmatic changes
+   */
+  private overrideValueProperty(): void {
+    const prototype = Object.getPrototypeOf(this.input);
+    const descriptor = Object.getOwnPropertyDescriptor(prototype, 'value');
+
+    if (descriptor?.set === undefined || descriptor.get === undefined) {
+      return;
+    }
+
+    const applySearch = this.applySearch.bind(this);
+
+    Object.defineProperty(this.input, 'value', {
+      configurable: descriptor.configurable ?? true,
+      enumerable: descriptor.enumerable ?? false,
+      get(): string {
+        return descriptor.get?.call(this) ?? '';
+      },
+      set(value: string): void {
+        descriptor.set?.call(this, value);
+        applySearch(value);
+      },
+    });
+  }
+
+  /**
+   * Clears memory
+   */
+  public destroy(): void {
+    this.listeners.removeAll();
+  }
+
+  /**
+   * Returns list of found items for the current search query
+   */
+  private get foundItems(): SearchableItem[] {
+    return this.items.filter(item => this.checkItem(item));
+  }
+
+  /**
+   * Contains logic for checking whether passed item conforms the search query
+   * @param item - item to be checked
+   */
+  private checkItem(item: SearchableItem): boolean {
+    const text = item.title?.toLowerCase() || '';
+    const query = this.searchQuery?.toLowerCase();
+
+    return query !== undefined ? text.includes(query) : false;
+  }
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Item that could be searched
+ */
+export interface SearchableItem {
+  /**
+   * Items title
+   */
+  title?: string;
+}
+
+
+/**
+ * Event that can be triggered by the Search Input
+ */
+export enum SearchInputEvent {
+  /**
+   * When search query is applied
+   */
+  Search = 'search'
+}
+
+/**
+ * Events fired by the Search Input
+ */
+export interface SearchInputEventMap {
+  /**
+   * Fired when search query is applied
+   */
+  [SearchInputEvent.Search]: { query: string; items: SearchableItem[]};
+}

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

@@ -0,0 +1,13 @@
+import { PopoverDesktop } from './popover-desktop';
+import { PopoverInline } from './popover-inline';
+import { PopoverMobile } from './popover-mobile';
+
+export type * from '@/types/utils/popover';
+export { PopoverItemType } from '@/types/utils/popover/popover-item-type';
+
+/**
+ * Union type for all popovers
+ */
+export type Popover = PopoverDesktop | PopoverMobile | PopoverInline;
+
+export { PopoverDesktop, PopoverMobile, PopoverInline };