@vonage/vivid 5.3.0 → 5.4.0

package/unbundled/definition4.cjs

@@ -1,11 +1,13 @@
 'use strict';
 
-const button_definition = require('./definition.cjs');
-const elevation_definition = require('./definition5.cjs');
+const icon_definition = require('../icon/definition.cjs');
 const vividElement = require('./vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const dom = require('@floating-ui/dom');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const fastElement = require('@microsoft/fast-element');
+const affix = require('./affix.cjs');
+const hostSemantics = require('./host-semantics.cjs');
+
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-tree-item-accent-firm, var(--vvd-color-canvas-text))}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}@media (hover: hover){.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}}.items{display:flex;flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,283 +18,191 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const PlacementStrategy = {
-  Flip: "flip",
-  AutoPlacementHorizontal: "auto-placement-horizontal",
-  AutoPlacementVertical: "auto-placement-vertical"
-};
-const placementStrategyMiddlewares = {
-  [PlacementStrategy.Flip]: dom.flip(),
-  [PlacementStrategy.AutoPlacementHorizontal]: dom.autoPlacement({
-    allowedPlacements: [
-      "bottom",
-      "top",
-      "bottom-start",
-      "bottom-end",
-      "top-start",
-      "top-end"
-    ]
-  }),
-  [PlacementStrategy.AutoPlacementVertical]: dom.autoPlacement({
-    allowedPlacements: [
-      "left",
-      "right",
-      "left-start",
-      "left-end",
-      "right-start",
-      "right-end"
-    ]
-  })
-};
-class Popup extends vividElement.VividElement {
+function isTreeItemElement(el) {
+  return fastWebUtilities.isHTMLElement(el) && (el.getAttribute("role") === "treeitem" || el instanceof TreeItem);
+}
+class TreeItem extends hostSemantics.HostSemantics(affix.AffixIcon(vividElement.VividElement)) {
   constructor() {
     super(...arguments);
-    this.open = false;
-    this.dismissible = false;
-    this.arrow = false;
-    this.alternate = false;
+    this.expanded = false;
+    this.selected = false;
+    this.disabled = false;
+    this.focusable = false;
     /**
-     * The placement strategy of the popup.
+     * Whether the tree is nested
      *
      * @public
      */
-    this.placementStrategy = PlacementStrategy.Flip;
-    this.animationFrame = false;
-    this.strategy = "fixed";
-    this.offset = null;
-    this.#autoUpdateCallback = () => {
-      this.#lastPositionUpdate = this.updatePosition();
-      return this.#lastPositionUpdate;
+    this.isNestedItem = () => {
+      return isTreeItemElement(this.parentElement);
+    };
+    /**
+     * Handle expand button click
+     *
+     * @internal
+     */
+    this.handleExpandCollapseButtonClick = (e) => {
+      if (!this.disabled && !e.defaultPrevented) {
+        this.expanded = !this.expanded;
+      }
+    };
+    /**
+     * Handle focus events
+     *
+     * @internal
+     */
+    this.handleFocus = (_e) => {
+      this.setAttribute("tabindex", "0");
+    };
+    /**
+     * Handle blur events
+     *
+     * @internal
+     */
+    this.handleBlur = (_e) => {
+      this.setAttribute("tabindex", "-1");
     };
   }
-  get #middleware() {
-    let middleware = [
-      dom.inline(),
-      placementStrategyMiddlewares[this.placementStrategy],
-      dom.hide(),
-      dom.size({
-        apply({ availableWidth, availableHeight, elements }) {
-          Object.assign(elements.floating.style, {
-            maxWidth: `${availableWidth}px`,
-            maxHeight: `${availableHeight}px`
-          });
-        }
-      })
-    ];
-    let offsetValue = this.offset ?? 0;
-    if (this.arrow) {
-      offsetValue += 12;
-      middleware = [
-        ...middleware,
-        dom.arrow({ element: this.arrowEl, padding: 10 })
-      ];
-    }
-    if (offsetValue > 0) {
-      middleware.unshift(dom.offset(offsetValue));
+  expandedChanged() {
+    if (this.$fastController.isConnected) {
+      this.$emit("expanded-change", this);
     }
-    return middleware;
   }
-  #cleanup;
-  openChanged(_, newValue) {
-    this.#togglePopover();
-    this.#updateAutoUpdate();
-    this.$emit(newValue ? "vwc-popup:open" : "vwc-popup:close");
-  }
-  /**
-   * @internal
-   */
-  animationFrameChanged() {
-    this.#updateAutoUpdate();
-  }
-  /**
-   * @internal
-   */
-  anchorChanged() {
-    this.#updateAutoUpdate();
-  }
-  /**
-   * @internal
-   */
-  strategyChanged() {
-    this.#togglePopover();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#togglePopover();
-    this.#updateAutoUpdate();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#updateAutoUpdate();
-  }
-  #updateAutoUpdate() {
-    this.#cleanup?.();
-    if (this.open && this.controlEl) {
-      this.controlEl.classList.add("open");
-    }
-    if (this.anchorEl && this.open && this.popupEl) {
-      this.#cleanup = dom.autoUpdate(
-        this.anchorEl,
-        this.popupEl,
-        this.#autoUpdateCallback,
-        {
-          animationFrame: this.animationFrame
-        }
-      );
+  selectedChanged() {
+    if (this.$fastController.isConnected) {
+      this.$emit("selected-change", this);
     }
   }
-  #togglePopover() {
-    if (this.popupEl && this.strategy === "fixed") {
-      if (this.open) {
-        this.popupEl.showPopover();
-      } else {
-        this.popupEl.hidePopover();
-      }
+  itemsChanged() {
+    if (this.$fastController.isConnected) {
+      this.items.forEach((node) => {
+        if (isTreeItemElement(node)) {
+          node.nested = true;
+        }
+      });
     }
   }
-  #lastPositionUpdate;
-  #autoUpdateCallback;
   /**
-   * Updates popup's position
+   * Places document focus on a tree item
    *
    * @public
+   * @param el - the element to focus
    */
-  async updatePosition() {
-    if (!this.open || !this.anchorEl) {
-      return;
-    }
-    const positionData = await dom.computePosition(this.anchorEl, this.popupEl, {
-      placement: this.placement,
-      strategy: this.strategy,
-      middleware: this.#middleware
-    });
-    this.#assignPopupPosition(positionData);
-    if (this.arrow) {
-      this.#assignArrowPosition(positionData);
-    }
-  }
-  #assignPopupPosition(data) {
-    const { x: popupX, y: popupY } = data;
-    const { referenceHidden } = data.middlewareData.hide;
-    Object.assign(this.popupEl.style, {
-      left: `${popupX}px`,
-      top: `${popupY}px`,
-      visibility: referenceHidden ? "hidden" : "visible"
-    });
-  }
-  #assignArrowPosition(data) {
-    const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
-    const styles = {
-      left: "calc(100% - 4px)",
-      right: "-4px",
-      top: "calc(100% - 4px)",
-      bottom: "-4px"
-    };
-    const staticAxis = data.placement.split("-")[0];
-    Object.assign(this.arrowEl.style, {
-      left: arrowX ? `${arrowX}px` : styles[staticAxis],
-      top: arrowY ? `${arrowY}px` : styles[staticAxis]
-    });
-  }
-  get anchorEl() {
-    return this.anchor ?? null;
+  static focusItem(el) {
+    el.focusable = true;
+    el.focus();
   }
   /**
-   * Shows the popup.
-   * Unlike toggling the `open` attribute, show() will wait for the popup to become visible and positioned correctly.
+   * Gets number of children
+   *
+   * @internal
    */
-  show() {
-    this.open = true;
-    return this.#lastPositionUpdate ?? Promise.resolve();
-  }
-  hide() {
-    this.open = false;
+  childItemLength() {
+    const treeChildren = this.childItems.filter(
+      (item) => {
+        return isTreeItemElement(item);
+      }
+    );
+    return treeChildren.length;
   }
 }
 __decorateClass([
-  fastElement.attr({
-    mode: "boolean"
-  })
-], Popup.prototype, "open");
+  fastElement.attr
+], TreeItem.prototype, "text");
 __decorateClass([
-  fastElement.attr({
-    mode: "boolean"
-  })
-], Popup.prototype, "dismissible");
+  fastElement.attr({ mode: "boolean" })
+], TreeItem.prototype, "expanded");
 __decorateClass([
   fastElement.attr({
     mode: "boolean"
   })
-], Popup.prototype, "arrow");
+], TreeItem.prototype, "selected");
 __decorateClass([
-  fastElement.attr({
-    mode: "boolean"
-  })
-], Popup.prototype, "alternate");
+  fastElement.attr({ mode: "boolean" })
+], TreeItem.prototype, "disabled");
 __decorateClass([
-  fastElement.attr({ mode: "fromView" })
-], Popup.prototype, "placement");
+  fastElement.observable
+], TreeItem.prototype, "focusable");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  fastElement.attr({ mode: "boolean", attribute: "animation-frame" })
-], Popup.prototype, "animationFrame");
+  fastElement.observable
+], TreeItem.prototype, "childItems");
 __decorateClass([
-  fastElement.attr({ mode: "fromView" })
-], Popup.prototype, "strategy");
+  fastElement.observable
+], TreeItem.prototype, "items");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  fastElement.attr({ attribute: "offset", converter: fastElement.nullableNumberConverter })
-], Popup.prototype, "offset");
+  fastElement.observable
+], TreeItem.prototype, "nested");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
   fastElement.observable
-], Popup.prototype, "anchor");
-
-const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.popup-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popup-wrapper{z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
+], TreeItem.prototype, "renderCollapsedChildren");
 
-const getClasses = ({ open, dismissible, alternate }) => fastWebUtilities.classNames(
+const getClasses = ({ disabled, selected }) => fastWebUtilities.classNames(
   "control",
-  ["open", Boolean(open)],
-  ["dismissible", Boolean(dismissible)],
-  ["alternate", Boolean(alternate)]
+  ["disabled", disabled],
+  ["selected", Boolean(selected)]
 );
-function handlePopover(x) {
-  return x.strategy && x.strategy === "fixed" ? "manual" : null;
-}
-const popupTemplate = (context) => {
-  const elevationTag = context.tagFor(elevation_definition.Elevation);
-  const buttonTag = context.tagFor(button_definition.Button);
+const expandCollapseButton = (context) => {
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
   return fastElement.html`
-  <${elevationTag}>
-		<div popover="${handlePopover}" class="popup-wrapper ${(x) => x.strategy}" ${fastElement.ref("popupEl")} part="popup-base">
-			<div ${fastElement.ref("controlEl")} class="${getClasses}" aria-hidden="${(x) => x.open ? "false" : "true"}"
-				part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
-				<div class="popup-content">
-					<slot></slot>
-					${fastElement.when(
-    (x) => x.dismissible,
-    fastElement.html`<${buttonTag} size="condensed" @click="${(x) => x.open = false}"
-						class="dismissible-button" icon="close-small-solid" shape="pill"></${buttonTag}>`
+	<div aria-hidden="true"
+		class="expandCollapseButton"
+		@click="${(x, c) => x.handleExpandCollapseButtonClick(c.event)}"
+			${fastElement.ref("expandCollapseButton")}
+	>
+		<${iconTag} class="expandCollapseIcon" name="${(x) => x.expanded ? "chevron-down-line" : "chevron-right-line"}"></${iconTag}>
+	</div>`;
+};
+const TreeItemTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  const treeItemTagName = context.tagFor(TreeItem, true);
+  return fastElement.html` <template
+		slot="${(x) => x.isNestedItem() ? "item" : void 0}"
+		tabindex="-1"
+		${hostSemantics.applyHostSemantics({
+    role: "treeitem",
+    ariaExpanded: (x) => x.childItems && x.childItems.length > 0 ? x.expanded : void 0,
+    ariaSelected: (x) => x.selected,
+    ariaDisabled: (x) => x.disabled
+  })}
+		@focusin="${(x, c) => x.handleFocus(c.event)}"
+		@focusout="${(x, c) => x.handleBlur(c.event)}"
+		${fastElement.children({
+    property: "childItems",
+    filter: fastElement.elements(treeItemTagName)
+  })}
+	>
+		<div class="${getClasses}">
+			${fastElement.when(
+    (x) => x.childItems && x.childItems.length > 0,
+    expandCollapseButton(context)
   )}
-				</div>
-				${fastElement.when(
-    (x) => x.arrow,
-    fastElement.html`<div class="arrow" ${fastElement.ref("arrowEl")}></div>`
+			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
+			${(x) => x.text}
+		</div>
+		${fastElement.when(
+    (x) => x.childItems && x.childItems.length > 0 && x.expanded,
+    fastElement.html` <div role="group" class="items">
+				<slot name="item" ${fastElement.slotted("items")}></slot>
+			</div>`
   )}
-			</div>
-    </div>
-  </${elevationTag}>`;
+	</template>`;
 };
 
-const popupDefinition = vividElement.defineVividComponent(
-  "popup",
-  Popup,
-  popupTemplate,
-  [elevation_definition.elevationDefinition, button_definition.buttonDefinition],
+const treeItemDefinition = vividElement.defineVividComponent(
+  "tree-item",
+  TreeItem,
+  TreeItemTemplate,
+  [icon_definition.iconDefinition],
   {
     styles
   }
 );
-const registerPopup = vividElement.createRegisterFunction(popupDefinition);
+const registerTreeItem = vividElement.createRegisterFunction(treeItemDefinition);
 
-exports.PlacementStrategy = PlacementStrategy;
-exports.Popup = Popup;
-exports.popupDefinition = popupDefinition;
-exports.registerPopup = registerPopup;
+exports.TreeItem = TreeItem;
+exports.isTreeItemElement = isTreeItemElement;
+exports.registerTreeItem = registerTreeItem;
+exports.treeItemDefinition = treeItemDefinition;