@vonage/vivid 4.16.2 → 4.18.0

package/shared/definition60.js

@@ -1,12 +1,10 @@
-import { V as VividElement, D as DOM, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
-import { T as TreeItem, i as isTreeItemElement, t as treeItemDefinition } from './definition59.js';
-import { k as keyEnter, e as keyArrowUp, f as keyArrowDown, i as keyArrowRight, h as keyArrowLeft, d as keyEnd, g as keyHome } from './key-codes.js';
-import { i as isHTMLElement } from './dom.js';
-import { r as ref } from './ref.js';
-import { s as slotted } from './slotted.js';
+import { P as Popup, p as popupDefinition } from './definition65.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { A as Anchored, a as anchorSlotTemplateFactory } from './anchored.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".control{position:relative;display:flex;flex-direction:column;gap:4px}";
+const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);max-inline-size:var(--tooltip-max-inline-size, 30ch)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -17,277 +15,107 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-function getDisplayedNodes(rootNode, selector) {
-  if (isHTMLElement(rootNode)) {
-    const nodes = Array.from(
-      rootNode.querySelectorAll(selector)
-    );
-    const visibleNodes = nodes.filter((node) => {
-      if (node.parentElement instanceof TreeItem) {
-        if (node.parentElement.getAttribute("aria-expanded") === "true")
-          return true;
-      } else {
-        return true;
-      }
-      return false;
-    });
-    return visibleNodes;
-  }
-  return [];
-}
-class TreeView extends VividElement {
+class Tooltip extends Anchored(VividElement) {
   constructor() {
     super(...arguments);
-    /**
-     * The tree item that is designated to be in the tab queue.
-     *
-     * @internal
-     */
-    this.currentFocused = null;
-    /**
-     * Handle focus events
-     *
-     * @internal
-     */
-    this.handleFocus = (e) => {
-      if (this.slottedTreeItems.length > 0) {
-        if (e.target === this) {
-          if (this.currentFocused !== null) {
-            TreeItem.focusItem(this.currentFocused);
-          }
-          return;
-        }
-        if (this.contains(e.target)) {
-          this.setAttribute("tabindex", "-1");
-          this.currentFocused = e.target;
-        }
-      }
-    };
-    /**
-     * Handle blur events
-     *
-     * @internal
-     */
-    this.handleBlur = (e) => {
-      if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
-        this.setAttribute("tabindex", "0");
-      }
-    };
-    /**
-     * KeyDown handler
-     *
-     *  @internal
-     */
-    this.handleKeyDown = (e) => {
-      if (this.slottedTreeItems.length < 1) {
-        return true;
-      }
-      if (!e.defaultPrevented) {
-        const treeItems = this.getVisibleNodes();
-        switch (e.key) {
-          case keyHome:
-            if (treeItems.length) {
-              TreeItem.focusItem(treeItems[0]);
-            }
-            return;
-          case keyEnd:
-            if (treeItems.length) {
-              TreeItem.focusItem(treeItems[treeItems.length - 1]);
-            }
-            return;
-          case keyArrowLeft:
-            if (e.target && this.isFocusableElement(e.target)) {
-              const item = e.target;
-              if (item instanceof TreeItem && item.childItemLength() > 0 && item.expanded) {
-                item.expanded = false;
-              } else if (item instanceof TreeItem && item.parentElement instanceof TreeItem) {
-                TreeItem.focusItem(item.parentElement);
-              }
-            }
-            return false;
-          case keyArrowRight:
-            if (e.target && this.isFocusableElement(e.target)) {
-              const item = e.target;
-              if (item instanceof TreeItem && item.childItemLength() > 0 && !item.expanded) {
-                item.expanded = true;
-              } else if (item instanceof TreeItem && item.childItemLength() > 0) {
-                this.focusNextNode(1, e.target);
-              }
-            }
-            return;
-          case keyArrowDown:
-            if (e.target && this.isFocusableElement(e.target)) {
-              this.focusNextNode(1, e.target);
-            }
-            return;
-          case keyArrowUp:
-            if (e.target && this.isFocusableElement(e.target)) {
-              this.focusNextNode(-1, e.target);
-            }
-            return;
-          case keyEnter:
-            this.handleClick(e);
-            return;
-        }
-      }
-      return true;
-    };
-    /**
-     * Handles the selected-changed events bubbling up
-     * from child tree items
-     *
-     *  @internal
-     */
-    this.handleSelectedChange = (e) => {
-      if (!e.defaultPrevented) {
-        if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
-          return true;
-        }
-        const item = e.target;
-        if (item.selected) {
-          if (this.currentSelected && this.currentSelected !== item) {
-            this.currentSelected.selected = false;
-          }
-          this.currentSelected = item;
-        } else if (!item.selected && this.currentSelected === item) {
-          this.currentSelected = null;
-        }
-        return;
-      }
+    this.open = false;
+    this.#show = () => {
+      this.open = true;
     };
-    /**
-     * Updates the tree view when slottedTreeItems changes
-     */
-    this.setItems = () => {
-      const selectedItem = this.treeView.querySelector(
-        "[aria-selected='true']"
-      );
-      this.currentSelected = selectedItem;
-      if (this.currentFocused === null || !this.contains(this.currentFocused)) {
-        this.currentFocused = this.getValidFocusableItem();
-      }
-      this.nested = this.checkForNestedItems();
-      const treeItems = this.getVisibleNodes();
-      treeItems.forEach((node) => {
-        if (isTreeItemElement(node)) {
-          node.nested = this.nested;
-        }
-      });
+    this.#hide = () => {
+      this.open = false;
     };
-    /**
-     * check if the item is focusable
-     */
-    this.isFocusableElement = (el) => {
-      return isTreeItemElement(el);
+    this.#closeOnEscape = (e) => {
+      if (e.key === "Escape") this.#hide();
     };
-    this.isSelectedElement = (el) => {
-      return el.selected;
-    };
-  }
-  slottedTreeItemsChanged() {
-    if (this.$fastController.isConnected) {
-      this.setItems();
-    }
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("tabindex", "0");
-    DOM.queueUpdate(() => {
-      this.setItems();
-    });
+    this.#updateListeners();
   }
-  /**
-   * Handles click events bubbling up
-   *
-   *  @internal
-   */
-  handleClick(e) {
-    if (!e.defaultPrevented) {
-      if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
-        return true;
-      }
-      const item = e.target;
-      if (!item.disabled) {
-        item.selected = !item.selected;
-      }
-      return;
-    }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#updateListeners();
   }
   /**
-   * Move focus to a tree item based on its offset from the provided item
+   * @internal
    */
-  focusNextNode(delta, item) {
-    const visibleNodes = this.getVisibleNodes();
-    if (visibleNodes) {
-      const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
-      if (isHTMLElement(focusItem)) {
-        TreeItem.focusItem(focusItem);
-      }
-    }
+  _anchorElChanged(oldValue, newValue) {
+    if (oldValue) this.#cleanupAnchor(oldValue);
+    if (newValue) this.#setupAnchor(newValue);
   }
-  /**
-   * checks if there are any nested tree items
-   */
-  getValidFocusableItem() {
-    const treeItems = this.getVisibleNodes();
-    let focusIndex = treeItems.findIndex(this.isSelectedElement);
-    if (focusIndex === -1) {
-      focusIndex = treeItems.findIndex(this.isFocusableElement);
-    }
-    if (focusIndex !== -1) {
-      return treeItems[focusIndex];
+  #setupAnchor(a) {
+    a.addEventListener("mouseover", this.#show);
+    a.addEventListener("mouseout", this.#hide);
+    a.addEventListener("focusin", this.#show);
+    a.addEventListener("focusout", this.#hide);
+  }
+  #cleanupAnchor(a) {
+    a.removeEventListener("mouseover", this.#show);
+    a.removeEventListener("mouseout", this.#hide);
+    a.removeEventListener("focusin", this.#show);
+    a.removeEventListener("focusout", this.#hide);
+  }
+  #show;
+  #hide;
+  #updateListeners() {
+    document.removeEventListener("keydown", this.#closeOnEscape);
+    if (this.open && this.isConnected) {
+      document.addEventListener("keydown", this.#closeOnEscape);
     }
-    return null;
   }
+  #closeOnEscape;
   /**
-   * checks if there are any nested tree items
+   * @internal
    */
-  checkForNestedItems() {
-    return this.slottedTreeItems.some((node) => {
-      return isTreeItemElement(node) && node.querySelector("[role='treeitem']");
-    });
-  }
-  getVisibleNodes() {
-    return getDisplayedNodes(this, "[role='treeitem']");
+  openChanged(oldValue) {
+    if (oldValue === void 0) return;
+    this.#updateListeners();
   }
 }
-// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  attr({ attribute: "render-collapsed-nodes" })
-], TreeView.prototype, "renderCollapsedNodes");
-// @ts-expect-error Type is incorrectly non-optional
+  attr
+], Tooltip.prototype, "text");
 __decorateClass([
-  observable
-], TreeView.prototype, "currentSelected");
-// @ts-expect-error Type is incorrectly non-optional
+  attr({ mode: "fromView" })
+], Tooltip.prototype, "placement");
 __decorateClass([
-  observable
-], TreeView.prototype, "slottedTreeItems");
+  attr({ mode: "boolean" })
+], Tooltip.prototype, "open");
 
-const getClasses = (_) => classNames("control");
-const TreeViewTemplate = html` <template
-	role="tree"
-	${ref("treeView")}
-	@keydown="${(x, c) => x.handleKeyDown(c.event)}"
-	@focusin="${(x, c) => x.handleFocus(c.event)}"
-	@focusout="${(x, c) => x.handleBlur(c.event)}"
-	@click="${(x, c) => x.handleClick(c.event)}"
-	@selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
->
-	<div class="${getClasses}">
-		<slot ${slotted("slottedTreeItems")}></slot>
-	</div>
-</template>`;
+const getClasses = ({ open }) => classNames("control", ["open", Boolean(open)]);
+const TooltipTemplate = (context) => {
+  const popupTag = context.tagFor(Popup);
+  const anchorSlotTemplate = anchorSlotTemplateFactory();
+  return html`
+${anchorSlotTemplate}
+<${popupTag} class="${getClasses}" arrow alternate
+	:placement=${(x) => x.placement}
+	:anchor="${(x) => x._anchorEl}"
+	:open="${(x) => x.open}"
+	@keydown="${(x, c) => {
+    if (x.open && handleEscapeKeyAndStopPropogation(c.event)) {
+      x.open = false;
+    }
+  }}"
+  exportparts="vvd-theme-alternate">
+  <div class="tooltip" role="tooltip">
+    <header part="vvd-theme-alternate" class="tooltip-header">
+      <div class="tooltip-text">${(x) => x.text}</div>
+    </header>
+  </div>
+</${popupTag}>`;
+};
 
-const treeViewDefinition = defineVividComponent(
-  "tree-view",
-  TreeView,
-  TreeViewTemplate,
-  [treeItemDefinition],
+const tooltipDefinition = defineVividComponent(
+  "tooltip",
+  Tooltip,
+  TooltipTemplate,
+  [popupDefinition],
   {
     styles
   }
 );
-const registerTreeView = createRegisterFunction(treeViewDefinition);
+const registerTooltip = createRegisterFunction(tooltipDefinition);
 
-export { registerTreeView as r, treeViewDefinition as t };
+export { Tooltip as T, registerTooltip as r, tooltipDefinition as t };