@vonage/vivid 5.15.1 → 5.17.0

package/tree-view/index.js

@@ -1,177 +1,148 @@
-import { V as h, U as m, a as g, o as u, h as p, c as I, d as b } from "../bundled/vivid-element.js";
-import { T as n, i as l, t as v } from "../bundled/definition22.js";
-import { H as y, a as E } from "../bundled/host-semantics.js";
-import { f as x, c as F, b as N, g as k, h as S, k as T, a as w } from "../bundled/key-codes.js";
-import { i as f } from "../bundled/dom.js";
-import { r as V } from "../bundled/ref.js";
-import { s as C } from "../bundled/slotted.js";
-import { c as $ } from "../bundled/class-names.js";
-const A = ".control{position:relative;display:flex;flex-direction:column;gap:4px}";
-var D = Object.defineProperty, c = (r, e, t, s) => {
-  for (var i = void 0, o = r.length - 1, d; o >= 0; o--)
-    (d = r[o]) && (i = d(e, t, i) || i);
-  return i && D(e, t, i), i;
-};
-function H(r, e) {
-  return f(r) ? Array.from(
-    r.querySelectorAll(e)
-  ).filter((i) => {
-    if (i.parentElement instanceof n) {
-      if (i.parentElement.expanded) return !0;
-    } else
-      return !0;
-    return !1;
-  }) : [];
-}
-class a extends y(h) {
-  constructor() {
-    super(...arguments), this.currentFocused = null, this.handleFocus = (e) => {
-      if (this.slottedTreeItems.length > 0) {
-        if (e.target === this) {
-          this.currentFocused !== null && n.focusItem(this.currentFocused);
-          return;
-        }
-        this.contains(e.target) && (this.setAttribute("tabindex", "-1"), this.currentFocused = e.target);
-      }
-    }, this.handleBlur = (e) => {
-      e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget)) && this.setAttribute("tabindex", "0");
-    }, this.handleKeyDown = (e) => {
-      if (this.slottedTreeItems.length < 1)
-        return !0;
-      if (!e.defaultPrevented) {
-        const t = this.getVisibleNodes();
-        switch (e.key) {
-          case w: {
-            t.length && n.focusItem(t[0]);
-            return;
-          }
-          case T: {
-            t.length && n.focusItem(t[t.length - 1]);
-            return;
-          }
-          case S: {
-            if (e.target && this.isFocusableElement(e.target)) {
-              const s = e.target;
-              s instanceof n && s.childItemLength() > 0 && s.expanded ? s.expanded = !1 : s instanceof n && s.parentElement instanceof n && n.focusItem(s.parentElement);
-            }
-            return !1;
-          }
-          case k: {
-            if (e.target && this.isFocusableElement(e.target)) {
-              const s = e.target;
-              s instanceof n && s.childItemLength() > 0 && !s.expanded ? s.expanded = !0 : s instanceof n && s.childItemLength() > 0 && this.focusNextNode(1, e.target);
-            }
-            return;
-          }
-          case N: {
-            e.target && this.isFocusableElement(e.target) && this.focusNextNode(1, e.target);
-            return;
-          }
-          case F: {
-            e.target && this.isFocusableElement(e.target) && this.focusNextNode(-1, e.target);
-            return;
-          }
-          case x:
-            this.handleClick(e);
-            return;
-        }
-      }
-      return !0;
-    }, this.handleSelectedChange = (e) => {
-      if (!e.defaultPrevented) {
-        if (!(e.target instanceof Element) || !l(e.target))
-          return !0;
-        const t = e.target;
-        t.selected ? (this.currentSelected && this.currentSelected !== t && (this.currentSelected.selected = !1), this.currentSelected = t) : !t.selected && this.currentSelected === t && (this.currentSelected = null);
-        return;
-      }
-    }, this.setItems = () => {
-      const e = this.treeView.querySelector("[selected]");
-      this.currentSelected = e, (this.currentFocused === null || !this.contains(this.currentFocused)) && (this.currentFocused = this.getValidFocusableItem()), this.nested = this.checkForNestedItems(), this.getVisibleNodes().forEach((s) => {
-        l(s) && (s.nested = this.nested);
-      });
-    }, this.isFocusableElement = (e) => l(e), this.isSelectedElement = (e) => e.selected;
-  }
-  slottedTreeItemsChanged() {
-    this.$fastController.isConnected && this.setItems();
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("tabindex", "0"), m.enqueue(() => {
-      this.setItems();
-    });
-  }
-  /**
-   * Handles click events bubbling up
-   *
-   *  @internal
-   */
-  handleClick(e) {
-    if (!e.defaultPrevented) {
-      if (!(e.target instanceof Element) || !l(e.target))
-        return !0;
-      const t = e.target;
-      t.disabled || (t.selected = !t.selected);
-      return;
-    }
-  }
-  /**
-   * Move focus to a tree item based on its offset from the provided item
-   */
-  focusNextNode(e, t) {
-    const s = this.getVisibleNodes();
-    if (s) {
-      const i = s[s.indexOf(t) + e];
-      f(i) && n.focusItem(i);
-    }
-  }
-  /**
-   * checks if there are any nested tree items
-   */
-  getValidFocusableItem() {
-    const e = this.getVisibleNodes();
-    let t = e.findIndex(this.isSelectedElement);
-    return t === -1 && (t = e.findIndex(this.isFocusableElement)), t !== -1 ? e[t] : null;
-  }
-  /**
-   * checks if there are any nested tree items
-   */
-  checkForNestedItems() {
-    return this.slottedTreeItems.some((e) => l(e) && e.querySelector("[data-vvd-component='tree-item']"));
-  }
-  getVisibleNodes() {
-    return H(this, "[data-vvd-component='tree-item']");
-  }
+import { O as e, T as t, d as n, l as r, o as i, s as a, t as o } from "../bundled/vivid-element.js";
+import { t as s } from "../bundled/ref.js";
+import { t as c } from "../bundled/slotted.js";
+import "../bundled/definition2.js";
+import { t as l } from "../bundled/decorate.js";
+import { t as u } from "../bundled/class-names.js";
+import { t as d } from "../bundled/dom.js";
+import { a as f, i as p, n as m, r as h, s as g, t as _ } from "../bundled/key-codes.js";
+import { i as v, n as y, r as b } from "../bundled/definition4.js";
+import { n as x, t as S } from "../bundled/host-semantics.js";
+//#region src/lib/tree-view/tree-view.scss?inline
+var C = ".control{flex-direction:column;gap:4px;display:flex;position:relative}";
+//#endregion
+//#region src/lib/tree-view/tree-view.ts
+function w(e, t) {
+	return d(e) ? Array.from(e.querySelectorAll(t)).filter((e) => {
+		if (e.parentElement instanceof b) {
+			if (e.parentElement.expanded) return !0;
+		} else return !0;
+		return !1;
+	}) : [];
 }
-c([
-  g({ attribute: "render-collapsed-nodes" })
-], a.prototype, "renderCollapsedNodes");
-c([
-  u
-], a.prototype, "currentSelected");
-c([
-  u
-], a.prototype, "slottedTreeItems");
-const L = (r) => $("control"), P = p` <template
-	${V("treeView")}
-	${E({
-  role: "tree"
-})}
-	@keydown="${(r, e) => r.handleKeyDown(e.event)}"
-	@focusin="${(r, e) => r.handleFocus(e.event)}"
-	@focusout="${(r, e) => r.handleBlur(e.event)}"
-	@click="${(r, e) => r.handleClick(e.event)}"
-	@selected-change="${(r, e) => r.handleSelectedChange(e.event)}"
+var T = class extends S(o) {
+	constructor(...e) {
+		super(...e), this.currentFocused = null, this.handleFocus = (e) => {
+			if (this.slottedTreeItems.length > 0) {
+				if (e.target === this) {
+					/* v8 ignore else -- @preserve */
+					this.currentFocused !== null && b.focusItem(this.currentFocused);
+					return;
+				}
+				/* v8 ignore else -- @preserve */
+				this.contains(e.target) && (this.setAttribute("tabindex", "-1"), this.currentFocused = e.target);
+			}
+		}, this.handleBlur = (e) => {
+			e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget)) && this.setAttribute("tabindex", "0");
+		}, this.handleKeyDown = (e) => {
+			if (this.slottedTreeItems.length < 1) return !0;
+			/* v8 ignore else -- @preserve */
+			if (!e.defaultPrevented) {
+				let t = this.getVisibleNodes();
+				switch (e.key) {
+					case g:
+						/* v8 ignore else -- @preserve */
+						t.length && b.focusItem(t[0]);
+						return;
+					case "End":
+						/* v8 ignore else -- @preserve */
+						t.length && b.focusItem(t[t.length - 1]);
+						return;
+					case m:
+						/* v8 ignore else -- @preserve */
+						if (e.target && this.isFocusableElement(e.target)) {
+							let t = e.target;
+							/* v8 ignore else -- @preserve */
+							t instanceof b && t.childItemLength() > 0 && t.expanded ? t.expanded = !1 : t instanceof b && t.parentElement instanceof b && b.focusItem(t.parentElement);
+						}
+						return !1;
+					case h:
+						/* v8 ignore else -- @preserve */
+						if (e.target && this.isFocusableElement(e.target)) {
+							let t = e.target;
+							/* v8 ignore else -- @preserve */
+							t instanceof b && t.childItemLength() > 0 && !t.expanded ? t.expanded = !0 : t instanceof b && t.childItemLength() > 0 && this.focusNextNode(1, e.target);
+						}
+						return;
+					case _:
+						/* v8 ignore else -- @preserve */
+						e.target && this.isFocusableElement(e.target) && this.focusNextNode(1, e.target);
+						return;
+					case p:
+						/* v8 ignore else -- @preserve */
+						e.target && this.isFocusableElement(e.target) && this.focusNextNode(-1, e.target);
+						return;
+					case f:
+						this.handleClick(e);
+						return;
+				}
+			}
+			return !0;
+		}, this.handleSelectedChange = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (!e.defaultPrevented) {
+				if (!(e.target instanceof Element) || !v(e.target)) return !0;
+				let t = e.target;
+				/* v8 ignore else -- @preserve */
+				t.selected ? (this.currentSelected && this.currentSelected !== t && (this.currentSelected.selected = !1), this.currentSelected = t) : !t.selected && this.currentSelected === t && (this.currentSelected = null);
+				return;
+			}
+		}, this.setItems = () => {
+			this.currentSelected = this.treeView.querySelector("[selected]"), (this.currentFocused === null || !this.contains(this.currentFocused)) && (this.currentFocused = this.getValidFocusableItem()), this.nested = this.checkForNestedItems(), this.getVisibleNodes().forEach((e) => {
+				/* v8 ignore else -- @preserve */
+				v(e) && (e.nested = this.nested);
+			});
+		}, this.isFocusableElement = (e) => v(e), this.isSelectedElement = (e) => e.selected;
+	}
+	slottedTreeItemsChanged() {
+		this.$fastController.isConnected && this.setItems();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("tabindex", "0"), e.enqueue(() => {
+			this.setItems();
+		});
+	}
+	handleClick(e) {
+		if (!e.defaultPrevented) {
+			if (!(e.target instanceof Element) || !v(e.target)) return !0;
+			let t = e.target;
+			t.disabled || (t.selected = !t.selected);
+			return;
+		}
+	}
+	focusNextNode(e, t) {
+		let n = this.getVisibleNodes();
+		/* v8 ignore else -- @preserve */
+		if (n) {
+			let r = n[n.indexOf(t) + e];
+			/* v8 ignore else -- @preserve */
+			d(r) && b.focusItem(r);
+		}
+	}
+	getValidFocusableItem() {
+		let e = this.getVisibleNodes(), t = e.findIndex(this.isSelectedElement);
+		return t === -1 && (t = e.findIndex(this.isFocusableElement)), t === -1 ? null : e[t];
+	}
+	checkForNestedItems() {
+		return this.slottedTreeItems.some((e) => v(e) && e.querySelector("[data-vvd-component='tree-item']"));
+	}
+	getVisibleNodes() {
+		return w(this, "[data-vvd-component='tree-item']");
+	}
+};
+//#endregion
+//#region src/lib/tree-view/index.ts
+l([r({ attribute: "render-collapsed-nodes" })], T.prototype, "renderCollapsedNodes", void 0), l([t], T.prototype, "currentSelected", void 0), l([t], T.prototype, "slottedTreeItems", void 0), a(i("tree-view", T, n` <template
+	${s("treeView")}
+	${x({ role: "tree" })}
+	@keydown="${(e, t) => e.handleKeyDown(t.event)}"
+	@focusin="${(e, t) => e.handleFocus(t.event)}"
+	@focusout="${(e, t) => e.handleBlur(t.event)}"
+	@click="${(e, t) => e.handleClick(t.event)}"
+	@selected-change="${(e, t) => e.handleSelectedChange(t.event)}"
 >
-	<div class="${L}">
-		<slot ${C("slottedTreeItems")}></slot>
+	<div class="${(e) => u("control")}">
+		<slot ${c("slottedTreeItems")}></slot>
 	</div>
-</template>`, _ = b(
-  "tree-view",
-  a,
-  P,
-  [v],
-  {
-    styles: A
-  }
-), q = I(_);
-q();
+</template>`, [y], { styles: C }))();
+//#endregion

package/unbundled/affix.cjs

@@ -1,65 +1,67 @@
-'use strict';
-
-const fastElement = require('@microsoft/fast-element');
-const icon_definition = require('../icon/definition.cjs');
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
+require("./chunk.cjs");
+const require_definition = require("./definition2.cjs");
+const require_decorate = require("./decorate.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+//#region src/shared/patterns/affix.ts
+/**
+* A mixin class implementing prefix elements.
+* These are generally used to decorate text elements with icons or other visual indicators.
+*/
+var AffixIcon = (Base) => {
+	/**
+	* @testQuery icon affixIcon
+	*/
+	class AffixIconElement extends Base {}
+	require_decorate.__decorate([_microsoft_fast_element.attr], AffixIconElement.prototype, "icon", void 0);
+	require_decorate.__decorate([_microsoft_fast_element.observable], AffixIconElement.prototype, "iconSlottedContent", void 0);
+	return AffixIconElement;
 };
-const AffixIcon = (Base) => {
-  class AffixIconElement extends Base {
-  }
-  __decorateClass([
-    fastElement.attr
-  ], AffixIconElement.prototype, "icon");
-  __decorateClass([
-    fastElement.observable
-  ], AffixIconElement.prototype, "iconSlottedContent");
-  return AffixIconElement;
+/**
+* A mixin class implementing icon affix (prefix or suffix) alignment.
+*/
+var AffixIconWithTrailing = (Base) => {
+	class AffixIconWithTrailingElement extends AffixIcon(Base) {
+		constructor(..._args) {
+			super(..._args);
+			this.iconTrailing = false;
+		}
+	}
+	require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+		mode: "boolean",
+		attribute: "icon-trailing"
+	})], AffixIconWithTrailingElement.prototype, "iconTrailing", void 0);
+	return AffixIconWithTrailingElement;
 };
-const AffixIconWithTrailing = (Base) => {
-  class AffixIconWithTrailingElement extends AffixIcon(Base) {
-    constructor() {
-      super(...arguments);
-      this.iconTrailing = false;
-    }
-  }
-  __decorateClass([
-    fastElement.attr({
-      mode: "boolean",
-      attribute: "icon-trailing"
-    })
-  ], AffixIconWithTrailingElement.prototype, "iconTrailing");
-  return AffixIconWithTrailingElement;
+var IconWrapper = {
+	Slot: false,
+	Span: true
 };
-const IconWrapper = {
-  Slot: false,
-  Span: true
+var IconAriaHidden = {
+	Hidden: "true",
+	Visible: "false"
 };
-const IconAriaHidden = {
-  Hidden: "true"};
-const affixIconTemplateFactory = (context) => {
-  const iconTag = context.tagFor(icon_definition.VwcIconElement);
-  return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden, announcement = { label: "", announceOnUpdate: false }) => {
-    if (!icon && !slottedState) {
-      return fastElement.html`<slot
+/**
+* The template for the prefixed element.
+* For use with {@link AffixIcon}
+*
+* @param context - element definition context
+* @public
+*/
+var affixIconTemplateFactory = (context) => {
+	const iconTag = context.tagFor(require_definition.Icon);
+	return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden, announcement = {
+		label: "",
+		announceOnUpdate: false
+	}) => {
+		if (!icon && !slottedState) return _microsoft_fast_element.html`<slot
 				name="icon"
 				aria-hidden="${() => ariaHidden}"
-				${fastElement.slotted("iconSlottedContent")}
+				${(0, _microsoft_fast_element.slotted)("iconSlottedContent")}
 			></slot>`;
-    }
-    if (!icon && slottedState) {
-      return null;
-    }
-    const iconTemplate = fastElement.html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
-    const wrapperTag = fastElement.html.partial(slottedState ? "span" : "slot");
-    return fastElement.html`<${wrapperTag}
+		if (!icon && slottedState) return null;
+		const iconTemplate = _microsoft_fast_element.html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
+		const wrapperTag = _microsoft_fast_element.html.partial(slottedState ? "span" : "slot");
+		return _microsoft_fast_element.html`<${wrapperTag}
 					class="${() => slottedState ? "icon" : void 0}"
 					:name="${() => slottedState ? void 0 : "icon"}"
 					aria-hidden="${() => announcement?.label ? false : ariaHidden}"
@@ -68,11 +70,36 @@ const affixIconTemplateFactory = (context) => {
 			  >
 					${iconTemplate}
 			  </${wrapperTag}>`;
-  };
+	};
 };
-
-exports.AffixIcon = AffixIcon;
-exports.AffixIconWithTrailing = AffixIconWithTrailing;
-exports.IconAriaHidden = IconAriaHidden;
-exports.IconWrapper = IconWrapper;
-exports.affixIconTemplateFactory = affixIconTemplateFactory;
+//#endregion
+Object.defineProperty(exports, "AffixIcon", {
+	enumerable: true,
+	get: function() {
+		return AffixIcon;
+	}
+});
+Object.defineProperty(exports, "AffixIconWithTrailing", {
+	enumerable: true,
+	get: function() {
+		return AffixIconWithTrailing;
+	}
+});
+Object.defineProperty(exports, "IconAriaHidden", {
+	enumerable: true,
+	get: function() {
+		return IconAriaHidden;
+	}
+});
+Object.defineProperty(exports, "IconWrapper", {
+	enumerable: true,
+	get: function() {
+		return IconWrapper;
+	}
+});
+Object.defineProperty(exports, "affixIconTemplateFactory", {
+	enumerable: true,
+	get: function() {
+		return affixIconTemplateFactory;
+	}
+});

package/unbundled/affix.js

@@ -1,63 +1,66 @@
-import { attr, observable, slotted, html } from '@microsoft/fast-element';
-import { VwcIconElement as Icon } from '../icon/definition.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
+import { r as Icon } from "./definition2.js";
+import { t as __decorate } from "./decorate.js";
+import { attr, html, observable, slotted } from "@microsoft/fast-element";
+//#region src/shared/patterns/affix.ts
+/**
+* A mixin class implementing prefix elements.
+* These are generally used to decorate text elements with icons or other visual indicators.
+*/
+var AffixIcon = (Base) => {
+	/**
+	* @testQuery icon affixIcon
+	*/
+	class AffixIconElement extends Base {}
+	__decorate([attr], AffixIconElement.prototype, "icon", void 0);
+	__decorate([observable], AffixIconElement.prototype, "iconSlottedContent", void 0);
+	return AffixIconElement;
 };
-const AffixIcon = (Base) => {
-  class AffixIconElement extends Base {
-  }
-  __decorateClass([
-    attr
-  ], AffixIconElement.prototype, "icon");
-  __decorateClass([
-    observable
-  ], AffixIconElement.prototype, "iconSlottedContent");
-  return AffixIconElement;
+/**
+* A mixin class implementing icon affix (prefix or suffix) alignment.
+*/
+var AffixIconWithTrailing = (Base) => {
+	class AffixIconWithTrailingElement extends AffixIcon(Base) {
+		constructor(..._args) {
+			super(..._args);
+			this.iconTrailing = false;
+		}
+	}
+	__decorate([attr({
+		mode: "boolean",
+		attribute: "icon-trailing"
+	})], AffixIconWithTrailingElement.prototype, "iconTrailing", void 0);
+	return AffixIconWithTrailingElement;
 };
-const AffixIconWithTrailing = (Base) => {
-  class AffixIconWithTrailingElement extends AffixIcon(Base) {
-    constructor() {
-      super(...arguments);
-      this.iconTrailing = false;
-    }
-  }
-  __decorateClass([
-    attr({
-      mode: "boolean",
-      attribute: "icon-trailing"
-    })
-  ], AffixIconWithTrailingElement.prototype, "iconTrailing");
-  return AffixIconWithTrailingElement;
+var IconWrapper = {
+	Slot: false,
+	Span: true
 };
-const IconWrapper = {
-  Slot: false,
-  Span: true
+var IconAriaHidden = {
+	Hidden: "true",
+	Visible: "false"
 };
-const IconAriaHidden = {
-  Hidden: "true"};
-const affixIconTemplateFactory = (context) => {
-  const iconTag = context.tagFor(Icon);
-  return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden, announcement = { label: "", announceOnUpdate: false }) => {
-    if (!icon && !slottedState) {
-      return html`<slot
+/**
+* The template for the prefixed element.
+* For use with {@link AffixIcon}
+*
+* @param context - element definition context
+* @public
+*/
+var affixIconTemplateFactory = (context) => {
+	const iconTag = context.tagFor(Icon);
+	return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden, announcement = {
+		label: "",
+		announceOnUpdate: false
+	}) => {
+		if (!icon && !slottedState) return html`<slot
 				name="icon"
 				aria-hidden="${() => ariaHidden}"
 				${slotted("iconSlottedContent")}
 			></slot>`;
-    }
-    if (!icon && slottedState) {
-      return null;
-    }
-    const iconTemplate = html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
-    const wrapperTag = html.partial(slottedState ? "span" : "slot");
-    return html`<${wrapperTag}
+		if (!icon && slottedState) return null;
+		const iconTemplate = html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
+		const wrapperTag = html.partial(slottedState ? "span" : "slot");
+		return html`<${wrapperTag}
 					class="${() => slottedState ? "icon" : void 0}"
 					:name="${() => slottedState ? void 0 : "icon"}"
 					aria-hidden="${() => announcement?.label ? false : ariaHidden}"
@@ -66,7 +69,7 @@ const affixIconTemplateFactory = (context) => {
 			  >
 					${iconTemplate}
 			  </${wrapperTag}>`;
-  };
+	};
 };
-
-export { AffixIcon as A, IconWrapper as I, affixIconTemplateFactory as a, AffixIconWithTrailing as b, IconAriaHidden as c };
+//#endregion
+export { affixIconTemplateFactory as a, IconWrapper as i, AffixIconWithTrailing as n, IconAriaHidden as r, AffixIcon as t };