@aquera/nile-elements 2.0.8 → 2.0.10

package/src/nile-virtual-select/nile-virtual-select.ts

@@ -15,12 +15,14 @@ import { styles } from './nile-virtual-select.css';
 import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
+import '../nile-lite-tooltip/nile-lite-tooltip';
 import '../nile-checkbox/nile-checkbox';
 import '../nile-loader/nile-loader';
 import { animateTo, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
 import { query, state } from 'lit/decorators.js';
 import { defaultValue } from '../internal/default-value';
+import { KeyCode } from '../internal/enum';
 import { FormControlController } from '../internal/form';
 import {
   getAnimation,
@@ -92,6 +94,10 @@ import { VisibilityManager } from '../utilities/visibility-manager.js';
  * @csspart listbox - The listbox container where options are slotted.
  * @csspart tags - The container that houses option tags when `multiple` is used.
  * @csspart tag - The individual tags that represent each multiselect option.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @csspart tag__remove-button__base - The tag's remove button base part.
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The container that wraps the expand icon.
  * @csspart footer - The footer container with show selected and clear all options.
@@ -155,8 +161,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** Placeholder text to show as a hint when the select is empty. */
   @property() placeholder = 'Select...';
 
-    /** Enable automatic resizing of tags area */
-    @property({ type: Boolean }) autoResize = false;
+  /** Re-runs the fitted-chip layout when the control's own width changes. */
+  @property({ type: Boolean, attribute: true, reflect: true }) autoResize = false;
 
   /** Current search value */
   @state() searchValue: string = '';
@@ -264,10 +270,49 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
    * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
    * indicate the number of additional items that are selected. Set to 0 to remove the limit.
    */
+  private _maxOptionsVisible = 3;
+
+  private maxOptionsVisibleExplicit = false;
+
   @property({ attribute: 'max-options-visible', type: Number })
-  maxOptionsVisible = 3;
+  get maxOptionsVisible(): number {
+    return this._maxOptionsVisible;
+  }
+
+  set maxOptionsVisible(value: number) {
+    const previous = this._maxOptionsVisible;
+    this._maxOptionsVisible = value;
+    // Any assignment opts this instance out of automatic chip fitting.
+    this.maxOptionsVisibleExplicit = true;
+    this.requestUpdate('maxOptionsVisible', previous);
+  }
+
+  private get chipFittingEnabled(): boolean {
+    return !!this.multiple && !this.maxOptionsVisibleExplicit;
+  }
+
+  /** Minimum width, in px, of a squeezed chip. Needs `showtooltip`. */
+  @property({ type: Number, reflect: true, attribute: true }) chipMinWidth = 110;
 
-  @state() oldMaxOptionsVisible: number = 1;
+  /** Maximum width, in px, of a squeezed chip. Needs `showtooltip`. */
+  @property({ type: Number, reflect: true, attribute: true }) chipMaxWidth = 180;
+
+  /**
+   * Shows a chip's full value in a tooltip when its text is clipped, and is
+   * what allows a chip to be truncated at all.
+   */
+  @property({ type: Boolean, attribute: true, reflect: true }) showTooltip = false;
+
+
+  @state() private hiddenChipCount = 0;
+
+  /** Last measured width of the overflow button, in px. */
+  private lastOverflowWidth = 0;
+
+  private chipFitFrame = 0;
+  private lastChipLayout = { hidden: -1, visible: -1 };
+  @state() private clippedChips: boolean[] = [];
+  private clipFrame = 0;
 
   @property({ type: Boolean, reflect: true, attribute: true }) enableTabClose = false;
 
@@ -326,19 +371,31 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }
     // Clean up body append elements
     this.portalManager.cleanupPortalAppend();
+    this.destroyChipFit();
   }
 
   protected updated(changedProperties: PropertyValues): void {
       if(changedProperties.has('value')) {
          this.selectionChanged();
       }
-      if (changedProperties.has('autoResize')) {
-        const tagsDiv = this.shadowRoot?.querySelector('.select__tags') as HTMLElement;
-        if (this.autoResize && tagsDiv) {
-          this.resizeController.observe(tagsDiv);
-        } else if (tagsDiv) {
-          this.resizeController.unobserve(tagsDiv);
+      if (
+        changedProperties.has('autoResize') ||
+        changedProperties.has('multiple') ||
+        changedProperties.has('maxOptionsVisible')
+      ) {
+        this.setupResizeObserver();
+      }
+      if (
+        changedProperties.has('chipMinWidth') ||
+        changedProperties.has('chipMaxWidth')
+      ) {
+        this.destroyChipFit();
         }
+      if (this.chipFittingEnabled) {
+        this.calculateTotalWidthOfTags();
+      }
+      if (this.multiple && this.showTooltip) {
+        this.scheduleClipCheck();
       }
   }
 
@@ -632,6 +689,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.open = !this.open;
   }
 
+  private observedTagsContainer?: Element;
+
   private resizeController = new ResizeController(this, {
     callback: (entries: ResizeObserverEntry[]) => {
       for (const entry of entries) {
@@ -648,7 +707,12 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       el =>
         el instanceof Element && el.tagName.toLowerCase() === 'nile-icon-button'
     );
-    return this.disabled || isIconButton;
+    const isOverflowButton = path.some(
+      el =>
+        el instanceof HTMLButtonElement &&
+        el.classList.contains('select__tags-count')
+    );
+    return this.disabled || isIconButton || isOverflowButton;
   }
 
   private handleComboboxKeyDown(event: KeyboardEvent): void {
@@ -1310,7 +1374,65 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     `;
   }
 
+  private renderFittedTags(): TemplateResult {
+    return html`
+      <div part="tags" class="select__tags select__tags--fitted">
+        ${this.selectedOptions.map((option, index) => {
+          const label = this.getChipLabel(option);
+          return html`
+            <nile-lite-tooltip
+              class="select__tag-tip"
+              .content=${label}
+              ?disabled=${this.chipTooltipDisabled(index)}
+            >
+            <nile-tag
+              part="tag"
+              exportparts="
+                  base:tag__base,
+                  content:tag__content,
+                  remove-button:tag__remove-button,
+                  remove-button__base:tag__remove-button__base,
+                  prefix:tag__prefix,
+                  prefix_content_wrapper:tag__prefix_content_wrapper
+                "
+              ?pill=${this.pill}
+              size=${this.size}
+              removable
+              tabindex="0"
+              aria-label=${`${label}. Press Backspace or Delete to remove.`}
+              @nile-remove=${(event: NileRemoveEvent) =>
+                this.handleTagRemove(event, option)}
+              @keydown=${(event: KeyboardEvent) =>
+                this.handleChipKeyDown(event, option)}
+            >
+              ${label}
+            </nile-tag>
+            </nile-lite-tooltip>
+          `;
+        })}
+        ${this.hiddenChipCount > 0
+          ? html`<button
+              type="button"
+              class="select__tags-count"
+              ?disabled=${this.disabled}
+              aria-controls="listbox"
+              aria-expanded=${this.open ? 'true' : 'false'}
+              aria-haspopup="listbox"
+              aria-label=${`${this.hiddenChipCount} more selected`}
+              @click=${this.handleOverflowActivate}
+              @keydown=${this.handleOverflowKeyDown}
+              >+${this.hiddenChipCount}</button
+            >`
+          : ''}
+      </div>
+    `;
+  }
+
   private renderTags(): TemplateResult {
+    if (this.chipFittingEnabled) {
+      return this.renderFittedTags();
+    }
+
     return this.multiple
       ? html`
           <div part="tags" class="select__tags">
@@ -1319,14 +1441,13 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
                 index < this.maxOptionsVisible ||
                 this.maxOptionsVisible <= 0
               ) {
-                const classes = {
-                  select__invisible:
-                    index + 1 > this.oldMaxOptionsVisible &&
-                    this.maxOptionsVisible === Infinity,
-                };
                 return html`
+                  <nile-lite-tooltip
+                    class="select__tag-tip"
+                    .content=${option.getTextLabel()}
+                    ?disabled=${this.chipTooltipDisabled(index)}
+                  >
                   <nile-tag
-                    class=${classMap(classes)}
                     part="tag"
                     exportparts="
                         base:tag__base,
@@ -1334,6 +1455,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
                         remove-button:tag__remove-button,
                         remove-button__base:tag__remove-button__base
                       "
+                    style="max-width:${this.chipMaxWidth}px"
                     ?pill=${this.pill}
                     size=${this.size}
                     removable
@@ -1342,6 +1464,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
                   >
                     ${option.getTextLabel()}
                   </nile-tag>
+                  </nile-lite-tooltip>
                 `;
               } else if (index === this.maxOptionsVisible) {
                 return html`
@@ -1496,14 +1619,16 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
             @click="${this.handleFooterClick}"
           >
             <span
+              class="select__footer-action"
               @click="${this.toggleShowSelected}"
               style="cursor: pointer;"
+              title="Show selected"
             >
               <nile-checkbox
                 ?disabled="${this.selectedOptions.length === 0}"
                 ?checked="${this.showSelected}"
               >
-                &nbsp; Show Selected</nile-checkbox
+                              <span class="select__footer-label">Selected</span></nile-checkbox
               >
             </span>
             ${this.selectedOptions.length !== 0
@@ -1511,8 +1636,16 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
                   <span
                     class="select__clear"
                     @click="${this.unSelectAll}"
+                    title="Clear"
                   >
-                    Clear All
+                    <nile-glyph
+                      class="select__footer-glyph"
+                      name="ng-eraser"
+                      size="16"
+                      method="var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))"
+                      color="var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700))"
+                    ></nile-glyph
+                    ><span class="select__footer-label">Clear</span>
                   </span>
                 `
               : ``}
@@ -1573,59 +1706,331 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     });
   }
 
-  private calculateWidthOfSelectTagsDiv(): number | null {
-    if (this.shadowRoot) {
-      const selectTagsDiv = this.shadowRoot.querySelector('.select__tags') as HTMLElement;
-      if (selectTagsDiv) {
-        const width = selectTagsDiv.offsetWidth;
-        return width - 70;
+  private setupResizeObserver(): void {
+    const wanted =
+      this.autoResize && this.chipFittingEnabled
+        ? (this.shadowRoot?.querySelector('.select__tags') as HTMLElement | null) ??
+          undefined
+        : undefined;
+
+    if (wanted === this.observedTagsContainer) {
+      if (!this.chipFittingEnabled) this.destroyChipFit();
+      return;
+    }
+
+    if (this.observedTagsContainer) {
+      this.resizeController.unobserve(this.observedTagsContainer);
+      this.observedTagsContainer = undefined;
       }
+
+    if (wanted) {
+      this.resizeController.observe(wanted);
+      this.observedTagsContainer = wanted;
+      return;
+    }
+
+    if (!this.chipFittingEnabled) {
+      this.destroyChipFit();
     }
-    return null;
   }
 
   private calculateTotalWidthOfTags(): void {
-    if (this.maxOptionsVisible !== Infinity) {
-      this.oldMaxOptionsVisible = this.maxOptionsVisible;
-    }
-
-    this.maxOptionsVisible = Infinity;
-    setTimeout(() => {
-      let widths: number[] = [];
-      if (this.shadowRoot) {
-        const tags = this.shadowRoot.querySelectorAll('nile-tag');
-        tags.forEach(tag => {
-          if (tag instanceof HTMLElement) {
-            widths.push(tag.offsetWidth);
+    if (!this.chipFittingEnabled) return;
+
+    if (this.chipFitFrame) cancelAnimationFrame(this.chipFitFrame);
+    this.chipFitFrame = requestAnimationFrame(() => {
+      this.chipFitFrame = 0;
+      this.layoutChips();
+    });
+  }
+
+  private allocateChipWidths(
+    natural: number[],
+    available: number
+  ): number[] | null {
+    const min = this.chipMinWidth;
+    const max = this.chipMaxWidth;
+    const total = natural.reduce((sum, w) => sum + w, 0);
+
+    if (total <= available) {
+      return natural.slice();
+    }
+
+    // Nothing reveals a truncated value without a tooltip, so chips keep their
+    // natural width and the surplus moves into the +N button instead.
+    if (!this.showTooltip) return null;
+
+    const capped = natural.map(w => Math.min(w, max));
+    const cappedTotal = capped.reduce((sum, w) => sum + w, 0);
+    if (cappedTotal <= available) {
+      return capped;
           }
-        });
+
+    const widths = new Array<number>(natural.length).fill(0);
+    let pool = capped.map((_, i) => i);
+    let remaining = available;
+
+    for (;;) {
+      if (pool.length === 0) break;
+      const share = remaining / pool.length;
+      const settled = pool.filter(i => capped[i] <= share);
+      if (settled.length === 0) break;
+      for (const i of settled) {
+        widths[i] = capped[i];
+        remaining -= capped[i];
       }
-      if (this.value.length !== widths.length) {
-        return;
+      pool = pool.filter(i => capped[i] > share);
+    }
+
+    if (pool.length > 0) {
+      const share = remaining / pool.length;
+
+      if (share < min) {
+        return null;
+      }
+
+      const width = Math.floor(share);
+      for (const i of pool) {
+        widths[i] = width;
       }
+    }
+
+    return widths;
+  }
+
+  private computeChipFit(
+    natural: number[],
+    available: number,
+    overflowWidth: number,
+    gap: number
+  ): { visibleCount: number; widths: number[]; hiddenCount: number } {
+    const total = natural.length;
+
+    if (total === 0) {
+      return { visibleCount: 0, widths: [], hiddenCount: 0 };
+    }
+
+    for (let count = total; count >= 1; count--) {
+      const hidden = total - count;
+      const reserved = hidden > 0 ? overflowWidth + gap : 0;
+      const row = available - reserved - gap * (count - 1);
+
+      if (row <= 0) continue;
 
-      let sum = widths.reduce(
-        (accumulator, currentValue) => accumulator + currentValue,
-        0
+      const widths = this.allocateChipWidths(natural.slice(0, count), row);
+      if (widths) {
+        return { visibleCount: count, widths, hiddenCount: hidden };
+      }
+    }
+
+    const room = available - overflowWidth - gap;
+    const fallback = Math.max(
+      0,
+      // A single chip too wide for the row has to be clipped either way; only
+      // the tooltip variant squeezes it to chipMinWidth.
+      Math.min(natural[0], this.showTooltip ? Math.max(this.chipMinWidth, room) : room)
       );
-      const widthOfSelectTagsDiv = this.calculateWidthOfSelectTagsDiv();
-      if (!widthOfSelectTagsDiv) {
+    return { visibleCount: 1, widths: [fallback], hiddenCount: total - 1 };
+  }
+
+  private layoutChips(): void {
+    const root = this.shadowRoot;
+    if (!root) return;
+
+    const container = root.querySelector('.select__tags') as HTMLElement | null;
+    if (!container) return;
+
+    const chips = Array.from(
+      container.querySelectorAll('nile-tag')
+    ) as HTMLElement[];
+    if (chips.length === 0) {
+      this.hiddenChipCount = 0;
         return;
       }
 
-      let summ = 0;
-      let lastindex = 0;
+    const overflowEl = container.querySelector(
+      '.select__tags-count'
+    ) as HTMLElement | null;
 
-      for (let i = 0; i < widths.length; i++) {
-        summ += widths[i];
+    for (const chip of chips) {
+      chip.style.display = '';
+      chip.style.width = 'auto';
+      chip.style.maxWidth = 'none';
+      chip.style.minWidth = '0';
+      chip.style.flex = '0 0 auto';
+    }
+    const natural = chips.map(chip =>
+      Math.ceil(chip.getBoundingClientRect().width)
+    );
+    // Not rendered yet on the pass that first finds an overflow; reuse the last width.
+    const overflowWidth = overflowEl
+      ? Math.ceil(overflowEl.getBoundingClientRect().width)
+      : this.lastOverflowWidth;
+    if (overflowEl) this.lastOverflowWidth = overflowWidth;
+
+    const containerStyles = getComputedStyle(container);
+    const gap =
+      parseFloat(containerStyles.columnGap || containerStyles.gap || '0') || 0;
+
+    const fit = this.computeChipFit(
+      natural,
+      container.clientWidth,
+      overflowWidth,
+      gap
+    );
 
-        if (summ > widthOfSelectTagsDiv) {
-          lastindex = i;
-          break;
+    chips.forEach((chip, index) => {
+      if (index < fit.visibleCount) {
+        // Never squeeze a chip below chipMinWidth: narrower than that it is
+        // also narrower than the tag's own box - the label is already at zero
+        // while the remove button is fixed - so the box overflows the chip and
+        // paints the X over the next chip or the +N button. A chip whose
+        // natural width is already smaller is left alone, not padded out.
+        const width = Math.min(
+          natural[index],
+          Math.max(fit.widths[index], this.chipMinWidth)
+        );
+        chip.style.display = '';
+        chip.style.width = `${width}px`;
+        chip.style.maxWidth = `${width}px`;
+        chip.style.flex = '0 0 auto';
+      } else {
+        chip.style.display = 'none';
         }
+    });
+
+    if (
+      this.lastChipLayout.hidden !== fit.hiddenCount ||
+      this.lastChipLayout.visible !== fit.visibleCount
+    ) {
+      this.lastChipLayout = {
+        hidden: fit.hiddenCount,
+        visible: fit.visibleCount
+      };
+      this.hiddenChipCount = fit.hiddenCount;
+    }
+
+    this.refreshClippedChips();
+  }
+
+  private isChipClipped(el: HTMLElement | null | undefined): boolean {
+    if (!el) return false;
+
+    const root = el.shadowRoot;
+    if (root) {
+      const content = root.querySelector(
+        '[part="content"]'
+      ) as HTMLElement | null;
+      if (content && content.scrollWidth > content.clientWidth + 1) return true;
+
+      const inner = root.querySelector(
+        '[part="prefix_content_wrapper"]'
+      ) as HTMLElement | null;
+      if (inner && inner.scrollWidth > inner.clientWidth + 1) return true;
+    }
+
+    return el.scrollWidth > el.clientWidth + 1;
+  }
+
+  private refreshClippedChips(): void {
+    if (!this.multiple) return;
+
+    const root = this.shadowRoot;
+    if (!root) return;
+
+    const chips = Array.from(
+      root.querySelectorAll('.select__tags nile-tag')
+    ) as HTMLElement[];
+
+    const next = chips.map(chip => this.isChipClipped(chip));
+
+    const same =
+      next.length === this.clippedChips.length &&
+      next.every((v, i) => v === this.clippedChips[i]);
+
+    if (!same) {
+      this.clippedChips = next;
       }
-      this.maxOptionsVisible = lastindex;
-    }, 1);
+  }
+
+  private scheduleClipCheck(): void {
+    if (this.clipFrame) cancelAnimationFrame(this.clipFrame);
+    this.clipFrame = requestAnimationFrame(() => {
+      this.clipFrame = 0;
+      this.refreshClippedChips();
+    });
+  }
+
+  /** A chip gets a tooltip only while its text is measured as clipped. */
+  private chipTooltipDisabled(index: number): boolean {
+    return !this.showTooltip || !(this.clippedChips[index] ?? false);
+  }
+
+  private destroyChipFit(): void {
+    if (this.chipFitFrame) cancelAnimationFrame(this.chipFitFrame);
+    this.chipFitFrame = 0;
+    if (this.clipFrame) cancelAnimationFrame(this.clipFrame);
+    this.clipFrame = 0;
+    this.lastChipLayout = { hidden: -1, visible: -1 };
+  }
+
+  private getChipLabel(option: VirtualOption): string {
+    return (option.getTextLabel?.() ?? '').trim();
+  }
+
+  private handleChipKeyDown(event: KeyboardEvent, option: VirtualOption): void {
+    if (event.key !== KeyCode.BACKSPACE && event.key !== KeyCode.DELETE) return;
+    if (this.disabled) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const removedIndex = this.selectedOptions.indexOf(option);
+
+    this.handleTagRemove(
+      new CustomEvent('nile-remove') as unknown as NileRemoveEvent,
+      option
+    );
+
+    this.restoreFocusAfterChipRemoval(removedIndex);
+  }
+
+  /** Moves focus to the next chip, the last chip, or the field after a removal. */
+  private async restoreFocusAfterChipRemoval(
+    removedIndex: number
+  ): Promise<void> {
+    if (removedIndex < 0) return;
+
+    await this.updateComplete;
+
+    // Wait for the fit pass so hidden chips are not focused.
+    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
+
+    const visibleChips = Array.from(
+      this.shadowRoot?.querySelectorAll<HTMLElement>('.select__tags nile-tag') ??
+        []
+    ).filter(chip => chip.style.display !== 'none');
+
+    const target =
+      visibleChips[removedIndex] ?? visibleChips[visibleChips.length - 1];
+
+    if (target) {
+      target.focus({ preventScroll: true });
+    } else {
+      this.displayInput?.focus({ preventScroll: true });
+    }
+  }
+
+  private handleOverflowActivate(event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.disabled) return;
+    this.open = !this.open;
+  }
+
+  private handleOverflowKeyDown(event: KeyboardEvent): void {
+    if (event.key !== KeyCode.ENTER && event.key !== KeyCode.SPACE) return;
+    this.handleOverflowActivate(event);
   }
 
   private async resetScrollPosition(): Promise<void> {