@api-client/ui 0.5.7 → 0.5.9

package/demo/elements/mention-textarea/index.ts

@@ -0,0 +1,205 @@
+import { html, TemplateResult } from 'lit'
+import reactive from '../../../src/decorators/reactive.js'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import type {
+  MentionTextAreaElement,
+  MentionSuggestion,
+  MentionInsertEvent,
+  MentionRemoveEvent,
+} from '../../../src/elements/mention-textarea/ui-mention-textarea.js'
+import '../../../src/elements/mention-textarea/ui-mention-textarea.js'
+
+class ComponentDemoPage extends DemoPage {
+  override accessor componentName = 'Mention Textarea'
+
+  @reactive() accessor value = 'Hello @{john-doe}, please review the document with @{jane-smith}.'
+
+  @reactive() accessor suggestions: MentionSuggestion[] = [
+    {
+      id: 'john-doe',
+      label: 'John Doe',
+      description: 'Senior Developer',
+      suffix: 'Engineering',
+    },
+    {
+      id: 'jane-smith',
+      label: 'Jane Smith',
+      description: 'Product Manager',
+      suffix: 'Product',
+    },
+    {
+      id: 'bob-wilson',
+      label: 'Bob Wilson',
+      description: 'UI/UX Designer',
+      suffix: 'Design',
+    },
+    {
+      id: 'alice-johnson',
+      label: 'Alice Johnson',
+      description: 'Quality Assurance Engineer',
+      suffix: 'QA',
+    },
+    {
+      id: 'mike-brown',
+      label: 'Mike Brown',
+      description: 'DevOps Engineer',
+      suffix: 'Infrastructure',
+    },
+    {
+      id: 'sarah-davis',
+      label: 'Sarah Davis',
+      description: 'Technical Writer',
+      suffix: 'Documentation',
+    },
+  ]
+
+  handleMentionInsert(event: CustomEvent<MentionInsertEvent>): void {
+    console.log('Mention inserted:', event.detail)
+  }
+
+  handleMentionRemove(event: CustomEvent<MentionRemoveEvent>): void {
+    console.log('Mention removed:', event.detail)
+  }
+
+  handleInput(event: Event): void {
+    const target = event.target as MentionTextAreaElement
+    this.value = target.value
+    console.log('Value changed:', this.value)
+  }
+
+  contentTemplate(): TemplateResult {
+    return html`
+      <a href="../">Back</a>
+
+      <section class="demo-section">
+        <h2 class="display-large">Basic Usage</h2>
+        <p>
+          Type @ to trigger mentions. The component supports rich suggestions with headline, description, and suffix.
+        </p>
+
+        <mention-textarea
+          label="Message"
+          supporting-text="Type @ to mention someone"
+          .value="${this.value}"
+          .suggestions="${this.suggestions}"
+          @mention-insert="${this.handleMentionInsert}"
+          @mention-remove="${this.handleMentionRemove}"
+          @input="${this.handleInput}"
+        ></mention-textarea>
+
+        <h3 class="title-large">Current Value:</h3>
+        <pre
+          style="background: var(--md-sys-color-surface-variant); padding: 16px; border-radius: 8px; overflow-x: auto;"
+        >
+${this.value}
+        </pre
+        >
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Different States</h2>
+
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
+          <mention-textarea label="Default" .suggestions="${this.suggestions}"></mention-textarea>
+
+          <mention-textarea
+            label="With placeholder"
+            placeholder="Start typing..."
+            .suggestions="${this.suggestions}"
+          ></mention-textarea>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
+          <mention-textarea label="Required" required .suggestions="${this.suggestions}"></mention-textarea>
+
+          <mention-textarea
+            label="Invalid"
+            invalid
+            supporting-text="This field has an error"
+            .suggestions="${this.suggestions}"
+          ></mention-textarea>
+        </div>
+
+        <mention-textarea
+          label="Disabled"
+          disabled
+          value="This is disabled"
+          .suggestions="${this.suggestions}"
+        ></mention-textarea>
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Custom Trigger</h2>
+        <p>This example uses '#' as the mention trigger instead of '@'.</p>
+
+        <mention-textarea
+          label="Tags"
+          supporting-text="Type # to add tags"
+          mention-trigger="#"
+          .suggestions="${this.suggestions.map((s) => ({ ...s, label: s.label.toLowerCase().replace(' ', '-') }))}"
+        ></mention-textarea>
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Minimum Query Length</h2>
+        <p>This example requires at least 2 characters after @ before showing suggestions.</p>
+
+        <mention-textarea
+          label="Message with min query"
+          supporting-text="Type @+ at least 2 characters"
+          min-query-length="2"
+          .suggestions="${this.suggestions}"
+        ></mention-textarea>
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Overflow: Hidden Test</h2>
+        <p>
+          This test ensures the popover works correctly even inside containers with overflow: hidden. The Popover API
+          should handle this properly.
+        </p>
+
+        <div
+          style="height: 150px; overflow: hidden; border: 2px solid var(--md-sys-color-outline); border-radius: 8px; padding: 16px;"
+        >
+          <p>Container with overflow: hidden (height: 150px)</p>
+          <mention-textarea
+            label="Test @mentions here"
+            supporting-text="Type @ - the suggestions should appear outside this container"
+            .suggestions="${this.suggestions}"
+          ></mention-textarea>
+        </div>
+
+        <div
+          style="height: 100px; width: 300px; overflow: hidden; border: 2px solid var(--md-sys-color-outline); border-radius: 8px; padding: 16px; margin-top: 20px;"
+        >
+          <p>Small container with overflow: hidden</p>
+          <mention-textarea label="Constrained" .suggestions="${this.suggestions}"></mention-textarea>
+        </div>
+      </section>
+
+      <style>
+        .demo-section {
+          max-width: 900px;
+          margin: 40px auto;
+          padding: 0 20px;
+        }
+
+        mention-textarea {
+          width: 100%;
+          margin-bottom: 20px;
+        }
+
+        pre {
+          font-family: 'Courier New', monospace;
+          font-size: 14px;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
+      </style>
+    `
+  }
+}
+
+const instance = new ComponentDemoPage()
+instance.render()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",
@@ -222,7 +222,7 @@
     "oauth2-mock-server": "^8.0.0",
     "prettier": "^3.5.1",
     "sinon": "^21.0.0",
-    "ts-lit-plugin": "^2.0.2",
+    "@jarrodek/ts-lit-plugin": "^3.0.0",
     "typescript": "^5.5.2",
     "typescript-eslint": "^8.24.1",
     "wireit": "^0.14.4"

package/src/elements/mention-textarea/internals/MentionTextArea.styles.ts

@@ -0,0 +1,274 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: inline-flex;
+    flex-direction: column;
+    vertical-align: top;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    cursor: text;
+    min-width: 200px;
+    font-family: var(--md-sys-typescale-body-large-font);
+    font-size: var(--md-sys-typescale-body-large-size);
+    letter-spacing: var(--md-sys-typescale-body-large-tracking);
+    line-height: var(--md-sys-typescale-body-large-height);
+  }
+
+  .surface {
+    height: auto;
+    min-height: 56px;
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    cursor: inherit;
+    border-radius: var(--md-sys-shape-corner-extra-small);
+  }
+
+  .container {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    background-color: transparent;
+    border: 1px solid var(--md-sys-color-outline);
+    outline: 0px solid var(--md-sys-color-primary);
+    outline-offset: -1px;
+    transition:
+      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .content {
+    height: inherit;
+    min-height: inherit;
+    display: flex;
+    align-items: flex-start;
+    justify-content: start;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 2;
+    flex: 1;
+    cursor: inherit;
+    padding: 16px;
+  }
+
+  .body {
+    flex: 1;
+    box-sizing: border-box;
+    position: relative;
+    cursor: inherit;
+    min-height: 24px;
+  }
+
+  .label {
+    color: var(--md-sys-color-on-surface-variant);
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    max-width: calc(100% - 32px);
+    pointer-events: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 3;
+    font-family: var(--md-sys-typescale-body-large-font);
+    font-weight: var(--md-sys-typescale-body-large-weight);
+    font-size: var(--md-sys-typescale-body-large-size);
+    letter-spacing: var(--md-sys-typescale-body-large-tracking);
+    line-height: var(--md-sys-typescale-body-large-height);
+    transform-origin: left center;
+    transition:
+      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background-color: var(--md-sys-color-surface);
+    padding: 0 4px;
+    margin-left: -4px;
+  }
+
+  .label.floating {
+    transform: translateY(-28px) scale(0.75);
+    color: var(--md-sys-color-primary);
+  }
+
+  .editor {
+    width: 100%;
+    min-height: 24px;
+    background: transparent;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    color: var(--md-sys-color-on-surface);
+    font-family: inherit;
+    font-size: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+    cursor: inherit;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    resize: none;
+  }
+
+  .editor:empty::before {
+    content: attr(data-placeholder);
+    color: var(--md-sys-color-on-surface-variant);
+    opacity: 0.6;
+  }
+
+  .mention-chip {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 2px;
+    vertical-align: baseline;
+    user-select: none;
+  }
+
+  .mention-chip ui-chip {
+    margin: 0;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  .suggestions-popover {
+    position: fixed;
+    border: none;
+    margin: 0;
+    padding: 0;
+    background: var(--md-sys-color-surface-container);
+    box-shadow: var(--md-sys-elevation-2);
+    border-radius: var(--md-sys-shape-corner-medium);
+    max-height: 300px;
+    overflow-y: auto;
+    min-width: 200px;
+    max-width: 400px;
+    /* Popover API handles z-index and layering automatically */
+  }
+
+  .suggestion-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    cursor: pointer;
+    border: none;
+    background: none;
+    width: 100%;
+    text-align: left;
+    font-family: inherit;
+    color: var(--md-sys-color-on-surface);
+    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .suggestion-item:hover {
+    background-color: var(--md-sys-color-surface-container-highest);
+  }
+
+  .suggestion-item.selected {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  .suggestion-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .suggestion-headline {
+    font-weight: var(--md-sys-typescale-label-large-weight);
+    font-size: var(--md-sys-typescale-label-large-size);
+    line-height: var(--md-sys-typescale-label-large-height);
+    margin-bottom: 2px;
+  }
+
+  .suggestion-supporting-text {
+    font-weight: var(--md-sys-typescale-body-small-weight);
+    font-size: var(--md-sys-typescale-body-small-size);
+    line-height: var(--md-sys-typescale-body-small-height);
+    color: var(--md-sys-color-on-surface-variant);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .suggestion-suffix {
+    margin-left: 8px;
+    font-weight: var(--md-sys-typescale-body-small-weight);
+    font-size: var(--md-sys-typescale-body-small-size);
+    line-height: var(--md-sys-typescale-body-small-height);
+    color: var(--md-sys-color-on-surface-variant);
+    flex-shrink: 0;
+  }
+
+  .supporting-text {
+    margin-top: 4px;
+    padding: 0 16px;
+    color: var(--md-sys-color-on-surface-variant);
+    font-family: var(--md-sys-typescale-body-small-font);
+    font-weight: var(--md-sys-typescale-body-small-weight);
+    font-size: var(--md-sys-typescale-body-small-size);
+    letter-spacing: var(--md-sys-typescale-body-small-tracking);
+    line-height: var(--md-sys-typescale-body-small-height);
+  }
+
+  /* Hover state */
+  :host(:hover:not(:focus-within):not([disabled])) .container {
+    border-color: var(--md-sys-color-on-surface);
+  }
+
+  /* Focus states */
+  :host(:focus-within) .container {
+    border-color: var(--md-sys-color-primary);
+    outline-width: 2px;
+    outline-offset: -2px;
+  }
+
+  :host(:focus-within) .label {
+    color: var(--md-sys-color-primary);
+  }
+
+  /* Disabled state */
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  :host([disabled]) .container {
+    border-color: var(--md-sys-color-on-surface);
+    opacity: 0.12;
+  }
+
+  :host([disabled]) .label,
+  :host([disabled]) .editor {
+    color: var(--md-sys-color-on-surface);
+    opacity: 0.38;
+  }
+
+  /* Invalid state */
+  :host([invalid]) .container {
+    border-color: var(--md-sys-color-error);
+  }
+
+  :host([invalid]:focus-within) .container {
+    outline-color: var(--md-sys-color-error);
+  }
+
+  :host([invalid]) .label,
+  :host([invalid]:focus-within) .label {
+    color: var(--md-sys-color-error);
+  }
+
+  :host([invalid]) .supporting-text {
+    color: var(--md-sys-color-error);
+  }
+
+  /* Empty state for label floating */
+  .label:not(.floating) {
+    opacity: 1;
+  }
+
+  .has-content .label:not(.floating) {
+    opacity: 0;
+  }
+`