@aquera/nile-elements 2.0.8 → 2.0.9

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -195,7 +195,7 @@ export const styles = css`
     display: flex;
     flex: 1;
     align-items: center;
-    flex-wrap: no-wrap;
+    flex-wrap: nowrap;
     margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));
     width: 100%;
     overflow: hidden;
@@ -216,6 +216,98 @@ export const styles = css`
     margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
   }
 
+  button.select__tags-count {
+    appearance: none;
+    -webkit-appearance: none;
+    background: none;
+    text-align: inherit;
+  }
+
+  button.select__tags-count:disabled {
+    cursor: not-allowed;
+  }
+
+  .select__tags--fitted {
+    min-width: 0;
+  }
+
+  .select__tags nile-lite-tooltip.select__tag-tip {
+    display: contents;
+  }
+
+  .select__tags nile-tag {
+    flex: 0 1 auto;
+    cursor: pointer;
+    min-width: 0;
+  }
+
+  /* A chip is capped - and so truncated - only when a tooltip can reveal the
+     full value. Without one it keeps its natural width and the fit pass moves
+     the surplus into the +N button instead. */
+  :host([showtooltip]) .select__tags nile-tag {
+    max-width: var(--nile-width-180px, var(--ng-height-180px));
+  }
+
+  /* Only the fitted layout can move a chip into the +N button, so only there
+     can a chip refuse to shrink. */
+  :host(:not([showtooltip])) .select__tags--fitted nile-tag {
+    flex-shrink: 0;
+  }
+
+  .select__tags nile-tag::part(base) {
+    max-width: 100%;
+  }
+
+  .select__tags nile-tag::part(prefix_content_wrapper) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .select__tags nile-tag::part(content) {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    /* The tag's line-height of 1 leaves the clip box shorter than the glyph
+       box, so descenders are cut. Pad the clip box, negate it in layout. */
+    padding-block: 3px;
+    margin-block: -3px;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  :host([showtooltip]) .select__tags nile-tag::part(content) {
+    text-overflow: ellipsis;
+  }
+
+  .select__tags nile-tag::part(remove-button) {
+    flex: 0 0 auto;
+  }
+
+  .select__tags--fitted nile-tag:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    outline-offset: 1px;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
+
+  .select__tags--fitted .select__tags-count {
+    flex: 0 0 auto;
+    margin: 0;
+    padding: 0 var(--nile-spacing-xsmall, var(--ng-spacing-md));
+    height: var(--nile-height-26px, var(--ng-height-26px));
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    cursor: pointer;
+    border: 1px dashed
+      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
+
+  .select__tags--fitted .select__tags-count:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    outline-offset: 1px;
+  }
+
   .select__tags::slotted(nile-tag) {
     cursor: pointer !important;
   }
@@ -443,6 +535,8 @@ export const styles = css`
     bottom: 0;
     z-index: 1;
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    container-type: inline-size;
+    container-name: nile-select-footer;
   }
 
   .select__custom-footer {
@@ -469,10 +563,40 @@ export const styles = css`
     flex-direction: row;
     align-items: center;
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    gap: var(--nile-spacing-none, var(--ng-spacing-none));
     justify-content: space-between;
   }
 
+  .select__footer-action,
+  .select__footer .select__clear {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    min-width: 0;
+  }
+
+  .select__footer-glyph {
+    flex: 0 0 auto;
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  .select__footer-label {
+    white-space: nowrap;
+  }
+
+  @container nile-select-footer (max-width: 178px) {
+    .select__clear .select__footer-label {
+      display: none;
+    }
+  }
+
+  @container nile-select-footer (max-width: 137px) {
+    .select__footer-label {
+      display: none;
+    }
+  }
+
   :host([legacy]) .select__footer {
     background: var(--nile-colors-neutral-100);
     border-top: 1px solid var(--nile-colors-neutral-400);
@@ -516,10 +640,6 @@ export const styles = css`
     }
   }
 
-  .select__invisible {
-    opacity: 0;
-  }
-
   .select__prefix--from-options {
     margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
   }

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

@@ -1,5 +1,6 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, nextFrame } from '@open-wc/testing';
 import './nile-select';
+import '../nile-option/nile-option';
 import type { NileSelect } from './nile-select';
 
 describe('NileSelect', () => {
@@ -104,3 +105,479 @@ describe('NileSelect', () => {
   it('99. no nile-card', async () => { const el = await fixture<NileSelect>(html`<nile-select></nile-select>`); expect(el.shadowRoot!.querySelector('nile-card')).to.be.null; });
   it('100. full integration', async () => { const el = await fixture<NileSelect>(html`<nile-select class="sl" id="sl1"></nile-select>`); expect(el.id).to.equal('sl1'); expect(el.shadowRoot).to.not.be.null; expect(el.shadowRoot!.querySelector('slot:not([name])')).to.exist; });
 });
+
+describe('NileSelect chip fitting behaviour matrix', () => {
+  const LABELS = [
+    'Engineering Operations Team',
+    'Human Resources Department',
+    'Finance And Accounting Group',
+    'Customer Success Organisation',
+    'Product Design Studio Unit'
+  ];
+
+  const options = () =>
+    LABELS.map(label => html`<nile-option value=${label}>${label}</nile-option>`);
+
+  async function settle(el: NileSelect) {
+    await el.updateComplete;
+    await nextFrame();
+    await nextFrame();
+    await el.updateComplete;
+  }
+
+  function tagsRoot(el: NileSelect) {
+    return el.shadowRoot!.querySelector('.select__tags');
+  }
+
+  function chips(el: NileSelect) {
+    return Array.from(
+      el.shadowRoot!.querySelectorAll('.select__tags nile-tag')
+    ) as HTMLElement[];
+  }
+
+  function hiddenChips(el: NileSelect) {
+    return chips(el).filter(chip => chip.style.display === 'none');
+  }
+
+  it('M1. multiple + no max-options-visible + autoResize=false renders fitted chips', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 320px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    expect(el.autoResize).to.be.false;
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.true;
+    expect(el.shadowRoot!.querySelector('button.select__tags-count')).to.exist;
+    expect(chips(el).length).to.equal(LABELS.length);
+  });
+
+  it('M2. multiple + no max-options-visible + autoResize=true refits when the container resizes', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 480px">
+        <nile-select multiple autoresize .value=${LABELS}>${options()}</nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    expect(el.autoResize).to.be.true;
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.true;
+    const wideHidden = hiddenChips(el).length;
+
+    host.style.width = '180px';
+    await aTimeout(200);
+    await settle(el);
+
+    expect(hiddenChips(el).length).to.be.at.least(wideHidden);
+  });
+
+  it('M3. explicit max-options-visible switches to fixed-count layout', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 320px">
+        <nile-select multiple max-options-visible="2" .value=${LABELS}>
+          ${options()}
+        </nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    expect(el.maxOptionsVisible).to.equal(2);
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.false;
+    expect(chips(el).length).to.equal(2);
+    expect(el.shadowRoot!.querySelector('span.select__tags-count')).to.exist;
+  });
+
+  it('M3b. max-options-visible set as a property also switches to fixed-count layout', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 320px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.true;
+
+    el.maxOptionsVisible = 1;
+    await settle(el);
+
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.false;
+    expect(chips(el).length).to.equal(1);
+  });
+
+  it('M3c. the default max-options-visible is still 3 and reading it does not opt out', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 320px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    expect(el.maxOptionsVisible).to.equal(3);
+    expect(el.maxOptionsVisible).to.equal(3);
+    await settle(el);
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.true;
+  });
+
+  it('M5. autoresize works as a markup attribute', async () => {
+    const b = await fixture<NileSelect>(
+      html`<nile-select multiple autoresize></nile-select>`
+    );
+    await b.updateComplete;
+    expect(b.autoResize).to.be.true;
+
+    const c = await fixture<NileSelect>(
+      html`<nile-select multiple></nile-select>`
+    );
+    await c.updateComplete;
+    expect(c.autoResize).to.be.false;
+  });
+
+  it('M8. virtual-scroll mode keeps fitted chips when max-options-visible was never set', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 320px">
+        <nile-select
+          multiple
+          enable-virtual-scroll
+          .enableVirtualScroll=${true}
+          .data=${LABELS.map(label => ({ label, value: label }))}
+          .value=${LABELS}
+        ></nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    const inner = el.shadowRoot!.querySelector('nile-virtual-select') as any;
+    expect(inner, 'inner nile-virtual-select should render').to.exist;
+    await inner.updateComplete;
+    await nextFrame();
+
+    const innerTags = inner.shadowRoot.querySelector('.select__tags');
+    expect(innerTags.classList.contains('select__tags--fitted')).to.be.true;
+  });
+
+  it('M9. virtual-scroll mode forwards an explicit max-options-visible', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 320px">
+        <nile-select
+          multiple
+          max-options-visible="2"
+          .enableVirtualScroll=${true}
+          .data=${LABELS.map(label => ({ label, value: label }))}
+          .value=${LABELS}
+        ></nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    const inner = el.shadowRoot!.querySelector('nile-virtual-select') as any;
+    await inner.updateComplete;
+    await nextFrame();
+
+    expect(inner.maxOptionsVisible).to.equal(2);
+    expect(
+      inner.shadowRoot
+        .querySelector('.select__tags')
+        .classList.contains('select__tags--fitted')
+    ).to.be.false;
+  });
+
+  it('M10. autoResize reflects to the autoresize attribute', async () => {
+    const el = await fixture<NileSelect>(
+      html`<nile-select multiple></nile-select>`
+    );
+    await el.updateComplete;
+    expect(el.hasAttribute('autoresize')).to.be.false;
+
+    el.autoResize = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('autoresize')).to.be.true;
+
+    el.autoResize = false;
+    await el.updateComplete;
+    expect(el.hasAttribute('autoresize')).to.be.false;
+  });
+
+  it('M11. toggling max-options-visible does not leak resize observers or lose the observed container', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 480px">
+        <nile-select multiple autoresize .value=${LABELS}>
+          ${options()}
+        </nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    el.maxOptionsVisible = 2;
+    await settle(el);
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.false;
+
+    const observed = (el as any).observedTagsContainer;
+    expect(observed, 'observer detached in fixed-count mode').to.be.undefined;
+  });
+
+  it('M6. the +N button count matches the number of hidden chips', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 220px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    const overflow = el.shadowRoot!.querySelector(
+      'button.select__tags-count'
+    ) as HTMLElement | null;
+    const hidden = hiddenChips(el).length;
+
+    if (hidden > 0) {
+      expect(overflow).to.exist;
+      expect(overflow!.textContent!.trim()).to.equal(`+${hidden}`);
+      expect(overflow!.getAttribute('aria-label')).to.equal(
+        `${hidden} more selected`
+      );
+    } else {
+      // Nothing overflows, so the button is not rendered at all.
+      expect(overflow).to.not.exist;
+    }
+  });
+
+  // The tooltip is opt-in: `showtooltip` present, and the chip's text clipped.
+  function tips(el: NileSelect) {
+    return Array.from(
+      el.shadowRoot!.querySelectorAll('.select__tag-tip')
+    ) as HTMLElement[];
+  }
+
+  function liveTips(el: NileSelect) {
+    return tips(el).filter(tip => !tip.hasAttribute('disabled'));
+  }
+
+  it('M12. no showtooltip attribute hides the chip tooltip', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 200px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    expect(el.showTooltip).to.be.false;
+    expect(el.hasAttribute('showtooltip')).to.be.false;
+    expect(tips(el).length).to.be.greaterThan(0);
+    expect(liveTips(el).length).to.equal(0);
+  });
+
+  it('M13. showtooltip shows the chip tooltip', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 200px">
+        <nile-select multiple showtooltip .value=${LABELS}>
+          ${options()}
+        </nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    expect(el.showTooltip).to.be.true;
+    expect(liveTips(el).length).to.be.greaterThan(0);
+  });
+
+  // Truncation is bound to the tooltip: a clipped chip is only acceptable when
+  // something can reveal the value it hid. A chip wider than the whole field is
+  // the one exception - there is nowhere for it to go.
+  function chipContent(chip: HTMLElement) {
+    return chip.shadowRoot!.querySelector('[part~="content"]') as HTMLElement;
+  }
+
+  function clippedChipCount(el: NileSelect) {
+    return chips(el)
+      .filter(chip => chip.style.display !== 'none')
+      .filter(chip => {
+        const content = chipContent(chip);
+        return content.scrollWidth > content.clientWidth + 1;
+      }).length;
+  }
+
+  it('M16. without showtooltip a fitted chip is never truncated', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 480px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    expect(el.showTooltip).to.be.false;
+    expect(clippedChipCount(el)).to.equal(0);
+    // The chips that could not fit went into the +N button, not into an ellipsis.
+    expect(hiddenChips(el).length).to.be.greaterThan(0);
+  });
+
+  it('M17. showtooltip is what allows a fitted chip to be truncated', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 480px">
+        <nile-select multiple showtooltip .value=${LABELS}>
+          ${options()}
+        </nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    expect(el.showTooltip).to.be.true;
+    expect(clippedChipCount(el)).to.be.greaterThan(0);
+  });
+
+  it('M14. removing showtooltip hides the chip tooltip again', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 200px">
+        <nile-select multiple showtooltip .value=${LABELS}>
+          ${options()}
+        </nile-select>
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`
+    );
+    const [el, control] = Array.from(
+      host.querySelectorAll('nile-select')
+    ) as NileSelect[];
+    await settle(el);
+    await settle(control);
+
+    expect(liveTips(el).length).to.be.greaterThan(0);
+
+    el.removeAttribute('showtooltip');
+    await settle(el);
+
+    expect(el.showTooltip).to.be.false;
+    expect(liveTips(el).length).to.equal(0);
+    // Removing the attribute must land back on the default.
+    expect(tips(el).map(tip => tip.hasAttribute('disabled'))).to.deep.equal(
+      tips(control).map(tip => tip.hasAttribute('disabled'))
+    );
+  });
+
+  it('M15. the overflow button label and text never disagree, including first paint', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 220px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+
+    // Before the layout frame runs, no button may claim a count it cannot back up.
+    await el.updateComplete;
+    const early = el.shadowRoot!.querySelector('button.select__tags-count');
+    if (early) {
+      const shown = early.textContent!.trim().replace('+', '');
+      expect(early.getAttribute('aria-label')).to.equal(
+        `${shown} more selected`
+      );
+    }
+
+    await settle(el);
+
+    const overflow = el.shadowRoot!.querySelector(
+      'button.select__tags-count'
+    ) as HTMLElement | null;
+    expect(overflow).to.exist;
+    const shown = overflow!.textContent!.trim().replace('+', '');
+    expect(overflow!.getAttribute('aria-label')).to.equal(
+      `${shown} more selected`
+    );
+    expect(Number(shown)).to.equal(hiddenChips(el).length);
+  });
+
+  it('M16. no overflow button is rendered when every chip fits', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 1200px">
+        <nile-select multiple .value=${LABELS.slice(0, 1)}>
+          ${options()}
+        </nile-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-select') as NileSelect;
+    await settle(el);
+
+    expect(hiddenChips(el).length).to.equal(0);
+    expect(el.shadowRoot!.querySelector('button.select__tags-count')).to.not
+      .exist;
+  });
+
+  // `<nile-select enableVirtualScroll>` renders a nile-virtual-select in its own
+  // shadow root and hands it the public API by hand. Anything added to one and
+  // not to that list is silently dead on the wrapper form, which is how
+  // showTooltip / chipMinWidth / chipMaxWidth were missed - so assert the whole
+  // chip-fitting surface crosses over, defaults included.
+  function innerVirtual(el: NileSelect) {
+    return el.shadowRoot!.querySelector('nile-virtual-select') as unknown as {
+      showTooltip: boolean;
+      chipMinWidth: number;
+      chipMaxWidth: number;
+      autoResize: boolean;
+    } | null;
+  }
+
+  it('M17. enableVirtualScroll forwards the chip-fitting properties inward', async () => {
+    const el = await fixture<NileSelect>(
+      html`<nile-select
+        multiple
+        enableVirtualScroll
+        showtooltip
+        autoresize
+        chipminwidth="90"
+        chipmaxwidth="160"
+      ></nile-select>`
+    );
+    await el.updateComplete;
+
+    const inner = innerVirtual(el);
+    expect(inner).to.exist;
+    expect(el.showTooltip).to.be.true;
+    expect(el.chipMinWidth).to.equal(90);
+    expect(el.chipMaxWidth).to.equal(160);
+    expect(el.autoResize).to.be.true;
+
+    expect(inner!.showTooltip).to.equal(el.showTooltip);
+    expect(inner!.chipMinWidth).to.equal(el.chipMinWidth);
+    expect(inner!.chipMaxWidth).to.equal(el.chipMaxWidth);
+    expect(inner!.autoResize).to.equal(el.autoResize);
+  });
+
+  it('M18. enableVirtualScroll forwards the chip-fitting defaults too', async () => {
+    const el = await fixture<NileSelect>(
+      html`<nile-select multiple enableVirtualScroll></nile-select>`
+    );
+    await el.updateComplete;
+
+    const inner = innerVirtual(el);
+    expect(inner).to.exist;
+    // chipMinWidth defaults to 110 on both sides, so a missing forward looks
+    // correct here - the other two are what actually catch a dropped property.
+    expect(inner!.showTooltip).to.be.false;
+    expect(inner!.chipMinWidth).to.equal(110);
+    expect(inner!.chipMaxWidth).to.equal(180);
+  });
+
+  it('M19. changing a chip property after first render reaches the inner select', async () => {
+    const el = await fixture<NileSelect>(
+      html`<nile-select multiple enableVirtualScroll></nile-select>`
+    );
+    await el.updateComplete;
+
+    el.showTooltip = true;
+    el.chipMaxWidth = 240;
+    await el.updateComplete;
+
+    const inner = innerVirtual(el);
+    expect(inner!.showTooltip).to.be.true;
+    expect(inner!.chipMaxWidth).to.equal(240);
+  });
+});