@arcgis/portal-components 5.1.0-next.13 → 5.1.0-next.131

package/dist/components/arcgis-portal-mentionable-text-area/customElement.d.ts

@@ -0,0 +1,74 @@
+/// <reference path="../../index.d.ts" />
+import type Portal from "@arcgis/core/portal/Portal.js";
+import type PortalUser from "@arcgis/core/portal/PortalUser.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { MentionableEntity } from "./types.js";
+import type { MentionableStarter } from "./utils.js";
+import type { Popover as Popover } from "@esri/calcite-components/components/calcite-popover";
+import type { Input as Input } from "@esri/calcite-components/components/calcite-input";
+
+/** A mention-enabled text area for ArcGIS Portal users, items, and groups. */
+export abstract class ArcgisPortalMentionableTextArea extends LitElement {
+  /** @default false */
+  accessor disabled: boolean | undefined;
+  /** Mirrors the `maxlength` property on the internal native `textarea` */
+  accessor maxLength: number | undefined;
+  /** Creates a placeholder for the calcite-text-area component */
+  accessor placeholder: string | undefined;
+  accessor popoverListLabel: string;
+  /** @default "bottom-start" */
+  accessor popoverPlacement: Popover["placement"];
+  accessor portal: Portal;
+  /**
+   * Flag to enable readOnly
+   *
+   * @default false
+   */
+  accessor readOnly: boolean | undefined;
+  /**
+   * Mirrors the `rows` property on the internal native `textarea`
+   *
+   * @default 3
+   */
+  accessor rows: number | undefined;
+  /**
+   * Decides scale of internal calcite-components
+   *
+   * @default "m"
+   */
+  accessor scale: Input["scale"] | undefined;
+  /** Character(s) that trigger the mention popover (e.g., "@", "#", "$") */
+  accessor starters: MentionableStarter[] | readonly MentionableStarter[];
+  accessor user: PortalUser;
+  /** Current text content */
+  accessor value: string | undefined;
+  /**
+   * Close the mention popover. Exposed as a public method so wrapper components
+   * can programmatically dismiss the popover when needed (e.g. no search results).
+   */
+  closePopover(): Promise<void>;
+  focusTextArea(): Promise<void>;
+  /** @param item */
+  selectItem(item: MentionableEntity): Promise<void>;
+  /** Emitted when the selected item index changes */
+  readonly arcgisMentionableSelectedIndexChange: import("@arcgis/lumina").TargetedEvent<this, number>;
+  /** Emitted when the text content changes */
+  readonly arcgisMentionableTextAreaChange: import("@arcgis/lumina").TargetedEvent<this, string>;
+  /**
+   * Emitted when a key is pressed in the text area
+   *
+   * Use this instead of the native onKeyDown event to avoid conflicts with the popover.
+   */
+  readonly arcgisMentionableTextAreaKeyDown: import("@arcgis/lumina").TargetedEvent<this, KeyboardEvent>;
+  /** Emitted when the text content changes */
+  readonly arcgisUserMentionableTextAreaChange: import("@arcgis/lumina").TargetedEvent<this, string>;
+  /** Emitted when a key is pressed in the text area */
+  readonly arcgisUserMentionableTextAreaKeyDown: import("@arcgis/lumina").TargetedEvent<this, KeyboardEvent>;
+  readonly "@eventTypes": {
+    arcgisMentionableSelectedIndexChange: ArcgisPortalMentionableTextArea["arcgisMentionableSelectedIndexChange"]["detail"];
+    arcgisMentionableTextAreaChange: ArcgisPortalMentionableTextArea["arcgisMentionableTextAreaChange"]["detail"];
+    arcgisMentionableTextAreaKeyDown: ArcgisPortalMentionableTextArea["arcgisMentionableTextAreaKeyDown"]["detail"];
+    arcgisUserMentionableTextAreaChange: ArcgisPortalMentionableTextArea["arcgisUserMentionableTextAreaChange"]["detail"];
+    arcgisUserMentionableTextAreaKeyDown: ArcgisPortalMentionableTextArea["arcgisUserMentionableTextAreaKeyDown"]["detail"];
+  };
+}

package/dist/components/arcgis-portal-mentionable-text-area/customElement.js

@@ -0,0 +1,198 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as A } from "../../chunks/runtime.js";
+import { safeClassMap as T, LitElement as S, createEvent as b } from "@arcgis/lumina";
+import { html as u, css as k } from "lit";
+import { ref as M, createRef as E } from "lit/directives/ref.js";
+import { makeGenericController as P } from "@arcgis/lumina/controllers";
+import { debounce as R } from "@arcgis/toolkit/function";
+import { q as L, s as U } from "../../chunks/groups.js";
+import { a as w, b as D } from "../../chunks/user2.js";
+import { keyed as q } from "lit/directives/keyed.js";
+const v = ["@", "#", "$"], O = 400;
+function _(i, e) {
+  let s = null;
+  for (const n of e) {
+    const r = n.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&"), l = new RegExp(`${r}"([^"\\n]*)"?$`, "u"), t = i.match(l);
+    if (t) {
+      const o = t[0], h = i.length - o.length, m = t[1] ?? "";
+      (!s || h > s.startIndex) && (s = {
+        starter: n,
+        mentionText: o,
+        query: m,
+        startIndex: h
+      });
+    }
+    const a = new RegExp(`${r}[\\p{L}\\p{N}_-]+$`, "u"), c = i.match(a);
+    if (c) {
+      const o = c[0], h = i.length - o.length, m = o.slice(n.length);
+      (!s || h > s.startIndex) && (s = {
+        starter: n,
+        mentionText: o,
+        query: m,
+        startIndex: h
+      });
+    }
+  }
+  return s;
+}
+const y = (i) => v.includes(i) ? i : "@", F = P((i) => {
+  let e = [];
+  const s = async (a) => await w({
+    requester: async () => await U(i.portal, a, { num: 3 }),
+    key: "items",
+    id: a
+  }), n = async (a) => await w({
+    requester: async () => await L(i.portal, { query: `title:${a}`, num: 3 }),
+    key: "groups",
+    id: a
+  }), r = R(async (a, c) => {
+    i.isFetchingEntities = !0;
+    const o = a.toLowerCase();
+    switch (y(c)) {
+      case "@":
+        const p = 10;
+        i.filteredItemsInfo = {
+          type: "user",
+          items: e.filter(
+            (f) => f.username?.toLowerCase().includes(o) || f.fullName?.toLowerCase().includes(o)
+          ).slice(0, p)
+        };
+        break;
+      case "#":
+        const { result: d } = await s(o);
+        i.filteredItemsInfo = { type: "item", items: d?.results ?? [] };
+        break;
+      case "$":
+        const { results: I } = await n(o);
+        i.filteredItemsInfo = { type: "group", items: I };
+        break;
+    }
+    (i.filteredItemsInfo?.items?.length ?? 0) === 0 && await i.closePopover(), i.isFetchingEntities = !1;
+  }, O);
+  return { fetchUsers: async () => {
+    try {
+      const { users: a } = await D(i.portal);
+      e = a ?? [];
+    } catch (a) {
+      e = [], console.error("error fetching org users:", a);
+    }
+  }, filterItems: r, getItemText: (a, c) => {
+    let o = "";
+    switch (y(c)) {
+      case "@":
+        o = a.username;
+        break;
+      case "#":
+        o = a.title ?? "";
+        break;
+      case "$":
+        o = a.title ?? "";
+        break;
+    }
+    return o.trim();
+  } };
+}), g = ({ id: i, label: e, selected: s, description: n, contentStart: r, onSelect: l }) => q(i, u`<calcite-list-item class=${T({ selected: s })} .label=${e} .description=${n} .selected=${s} @pointerdown=${async (t) => {
+  t.preventDefault(), t.stopPropagation(), await l();
+}} ${M((t) => {
+  s && t && t.scrollIntoView({ block: "nearest", behavior: "smooth" });
+})}>${r}</calcite-list-item>`), N = k`.selected{--calcite-list-background-color: var(--calcite-color-foreground-2)}.mentionable-list{max-height:13rem;overflow-y:auto;padding:.25rem;width:min(100vw,24rem)}.mentionable-list--loading{min-height:10rem}`;
+class Q extends S {
+  constructor() {
+    super(...arguments), this.calciteTextAreaRef = E(), this.mentionableEntityController = F(this), this.handleInput = (e) => {
+      const { bubbleNewValueChange: s, checkForMention: n } = this, l = e.target.value;
+      this._value = l, s(this._value);
+      const t = this.nativeTextAreaRef?.selectionStart ?? 0;
+      n(l, t);
+    }, this.handleKeyDown = (e) => {
+      if (!this.popoverOpen) {
+        this.arcgisUserMentionableTextAreaKeyDown.emit(e), this.arcgisMentionableTextAreaKeyDown.emit(e);
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), this.selectedItemIndex = Math.min(this.selectedItemIndex + 1, this.filteredItems.length - 1);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), this.selectedItemIndex = Math.max(this.selectedItemIndex - 1, 0);
+          break;
+        case "Enter":
+          e.preventDefault(), this.selectItem(this.filteredItems[this.selectedItemIndex]);
+          break;
+        case "Escape":
+          e.preventDefault(), this.closePopover.bind(this)();
+          break;
+      }
+    }, this.handleClosePopover = () => {
+      this.popoverOpen = !1, this.currentMentionQuery = "", this.selectedItemIndex = 0, this.currentStarter = null;
+    }, this.bubbleNewValueChange = (e) => {
+      this.arcgisUserMentionableTextAreaChange.emit(e), this.arcgisMentionableTextAreaChange.emit(e);
+    }, this.checkForMention = (e, s) => {
+      const n = e.substring(0, s), r = _(n, this.starters ?? v);
+      if (r) {
+        const { starter: l } = r;
+        this.currentStarter = l, this.filterMentionItems(r), this.popoverOpen = !0;
+        return;
+      }
+      this.handleClosePopover();
+    }, this.filterMentionItems = (e) => {
+      const { mentionText: s, query: n, starter: r, startIndex: l } = e;
+      this.currentMentionQuery = s, this.mentionStartPosition = l;
+      const t = n.toLowerCase();
+      this.mentionableEntityController.filterItems(t, r), this.selectedItemIndex = 0;
+    }, this.popoverOpen = !1, this.currentMentionQuery = "", this.mentionStartPosition = 0, this.selectedItemIndex = 0, this.currentStarter = null, this._value = "", this.filteredItemsInfo = null, this.isFetchingEntities = !1, this.popoverPlacement = "bottom-start", this.disabled = !1, this.scale = "m", this.rows = 3, this.starters = v, this.readOnly = !1, this.arcgisMentionableSelectedIndexChange = b(), this.arcgisMentionableTextAreaChange = b(), this.arcgisMentionableTextAreaKeyDown = b(), this.arcgisUserMentionableTextAreaChange = b(), this.arcgisUserMentionableTextAreaKeyDown = b(), this.renderItemInfo = () => {
+      const { filteredItemsInfo: e, selectedItemIndex: s, portal: n } = this;
+      if (!e)
+        return null;
+      const { items: r, type: l } = e;
+      switch (l) {
+        case "user":
+          return r.map((t, a) => g({ id: t.id, label: `@${t.username}`, description: t.fullName, selected: a === s, contentStart: u`<arcgis-portal-user-avatar slot=content-start .user=${t} .portal=${n} scale=m></arcgis-portal-user-avatar>`, onSelect: async () => await this.selectItem(t) }));
+        case "item":
+          return r.map((t, a) => g({ id: t.id ?? `item-${a}`, label: `#${t.title}`, description: t.id ?? void 0, selected: a === s, onSelect: async () => await this.selectItem(t), contentStart: u`<calcite-avatar slot=content-start .fullName=${t.title ?? void 0} .thumbnail=${t.thumbnailUrl ?? void 0} scale=m></calcite-avatar>` }));
+        case "group":
+          return r.map((t, a) => g({ id: t.id ?? `group-${a}`, label: `${t.title}`, description: t.id ?? void 0, selected: a === s, onSelect: async () => await this.selectItem(t), contentStart: u`<calcite-avatar slot=content-start .fullName=${t.title ?? void 0} .thumbnail=${t.thumbnailUrl ?? void 0} scale=m></calcite-avatar>` }));
+      }
+    };
+  }
+  static {
+    this.properties = { popoverOpen: 16, currentMentionQuery: 16, mentionStartPosition: 16, selectedItemIndex: 16, currentStarter: 16, _value: 16, filteredItemsInfo: 16, isFetchingEntities: 16, popoverListLabel: 1, popoverPlacement: 1, disabled: 5, portal: 0, user: 0, scale: 1, value: 1, maxLength: 9, rows: 9, starters: 0, placeholder: 1, readOnly: 5 };
+  }
+  static {
+    this.styles = N;
+  }
+  get filteredItems() {
+    return this.filteredItemsInfo?.items ?? [];
+  }
+  async closePopover() {
+    this.handleClosePopover();
+  }
+  async focusTextArea() {
+    await this.calciteTextAreaRef.value?.setFocus();
+  }
+  async selectItem(e) {
+    const { currentStarter: s, _value: n, mentionStartPosition: r, currentMentionQuery: l, handleClosePopover: t, calciteTextAreaRef: a, nativeTextAreaRef: c, bubbleNewValueChange: o } = this;
+    if (!e || !s)
+      return;
+    const m = this.mentionableEntityController.getItemText(e, s).replaceAll('"', "").trim(), p = /\s/u.test(m) ? `${s}"${m}"` : `${s}${m}`, d = (n ?? "").substring(0, r), I = (n ?? "").substring(r + l.length), f = `${d}${p} ${I}`;
+    this._value = f, o(this._value);
+    const x = r + p.length + 1;
+    t(), await this.updateComplete, a.value?.setFocus(), c && (c.selectionEnd = x);
+  }
+  willUpdate(e) {
+    e.has("value") && (this._value = this.value ?? ""), e.has("selectedItemIndex") && this.arcgisMentionableSelectedIndexChange.emit(this.selectedItemIndex);
+  }
+  loaded() {
+    this.updateComplete.then(() => {
+      const e = this.calciteTextAreaRef.value?.shadowRoot?.querySelector("textarea");
+      e && (this.nativeTextAreaRef = e);
+    }), this.mentionableEntityController.fetchUsers();
+  }
+  render() {
+    const { popoverPlacement: e, scale: s, _value: n, maxLength: r, rows: l, placeholder: t, readOnly: a, popoverOpen: c, closePopover: o, handleInput: h, handleKeyDown: m, disabled: p, isFetchingEntities: d, filteredItemsInfo: I, renderItemInfo: f, popoverListLabel: x } = this, $ = this.calciteTextAreaRef.value, C = I?.items ?? [];
+    return u`<calcite-text-area .placeholder=${t} .value=${n} .maxLength=${r} .rows=${l} .scale=${s} .readOnly=${a} .disabled=${p} @blur=${o} @calciteTextAreaInput=${h} @keydown=${m} ${M(this.calciteTextAreaRef)}></calcite-text-area>${$ && u`<calcite-popover .open=${c} .placement=${e} class="mention-popover" .label=${x} .referenceElement=${$} trigger-disabled pointer-disabled focus-trap-disabled><div class=${T({ "mentionable-list": !0, "mentionable-list--loading": d })}>${d && u`<calcite-scrim .loading=${d}></calcite-scrim>` || ""}${C.length > 0 && u`<calcite-list .label=${x}>${f()}</calcite-list>` || ""}</div></calcite-popover>` || ""}`;
+  }
+}
+A("arcgis-portal-mentionable-text-area", Q);
+export {
+  Q as ArcgisPortalMentionableTextArea
+};

package/dist/components/arcgis-portal-mentionable-text-area/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-portal-mentionable-text-area/index.js

@@ -0,0 +1,8 @@
+import "@esri/calcite-components/components/calcite-list-item";
+import "../arcgis-portal-user-avatar/index.js";
+import "@esri/calcite-components/components/calcite-avatar";
+import "@esri/calcite-components/components/calcite-text-area";
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-scrim";
+import "@esri/calcite-components/components/calcite-list";
+export * from "./customElement.js";

package/dist/components/arcgis-portal-mentionable-text-area/types.d.ts

@@ -0,0 +1,5 @@
+import type PortalGroup from "@arcgis/core/portal/PortalGroup.js";
+import type PortalItem from "@arcgis/core/portal/PortalItem.js";
+import type { SearchResultUser } from "../../types/user.js";
+
+export type MentionableEntity = PortalGroup | PortalItem | SearchResultUser;

package/dist/components/arcgis-portal-mentionable-text-area/utils.d.ts

@@ -0,0 +1,7 @@
+export type MentionableStarter = (typeof MentionableStarters)[number];
+
+export const MentionableStarters: readonly [
+    "@",
+    "#",
+    "$"
+];

package/dist/components/arcgis-portal-replacement-item-redirect/customElement.d.ts

@@ -1,5 +1,7 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type PortalItem from "@arcgis/core/portal/PortalItem.js";
+import type Portal from "@arcgis/core/portal/Portal.js";
+import type PortalUser from "@arcgis/core/portal/PortalUser.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
@@ -14,14 +16,15 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
 export abstract class ArcgisPortalReplacementItemRedirect extends LitElement {
   /** The id of a deprecated/retired item to be checked for a replacement */
   accessor itemId: string;
-  /** The portal instance */
-  accessor portal: __esri.Portal;
   /** @internal */
-  protected t9n: {
+  protected messages: {
       replacementAvailable: string;
       replacementUnavailable: string;
       redirectToReplacement: string;
+      retiredTitle: string;
       cancel: string;
+      cancelRedirection: string;
+      ownedBy: string;
       redirect: string;
       deprecatedHasReplacement: string;
       retired: string;
@@ -31,18 +34,23 @@ export abstract class ArcgisPortalReplacementItemRedirect extends LitElement {
       replacementAvailable: string;
       replacementUnavailable: string;
       redirectToReplacement: string;
+      retiredTitle: string;
       cancel: string;
+      cancelRedirection: string;
+      ownedBy: string;
       redirect: string;
       deprecatedHasReplacement: string;
       retired: string;
       retiredReplacementUnavailable: string;
       moreDetails: string;
   }>;
+  /** The portal instance */
+  accessor portal: Portal;
   /** The user. Defaults to `portal.user` if omitted */
-  accessor user: __esri.PortalUser | undefined;
+  accessor user: PortalUser | null | undefined;
   /** Set focus on the component */
   setFocus(): Promise<void>;
-  readonly arcgisPortalReplacementItemFetch: import("@arcgis/lumina").TargetedEvent<this, { replacementItem: __esri.PortalItem | object | null; }>;
+  readonly arcgisPortalReplacementItemFetch: import("@arcgis/lumina").TargetedEvent<this, { replacementItem: PortalItem | object | null; }>;
   readonly "@eventTypes": {
     arcgisPortalReplacementItemFetch: ArcgisPortalReplacementItemRedirect["arcgisPortalReplacementItemFetch"]["detail"];
   };