@fusion.dev/helix-headless 0.219.0 → 0.220.0

package/dist/find/root/find-root.js

@@ -0,0 +1,577 @@
+import { __decorate } from "tslib";
+import { customElement, deepActiveElement, deepContains, drawIcon, elementById, findPattern, formatWords, HelixElement, HelixFoundEvent, MIRROR_RULE, MixinControllerOpen, matchesChord, onApple, stopPress, textFinder, words, } from '@fusion.dev/helix-core';
+import { asterisk, caretDown, caretRight, caretUp, textAa, textAUnderline, x, } from '@fusion.dev/helix-icons';
+import { nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { live } from 'lit/directives/live.js';
+import { html } from 'lit/static-html.js';
+import '../../button/index.js';
+import '../../icon-button/index.js';
+import '../../toolbar/index.js';
+const SEARCHED = ['for', 'matchCase', 'open', 'query', 'regex', 'skip', 'wholeWord'];
+let HelixHeadlessFind = class HelixHeadlessFind extends MixinControllerOpen(HelixElement) {
+    constructor() {
+        super(...arguments);
+        this.closeLabel = 'Close find';
+        this.controlsLabel = 'Find controls';
+        this.for = '';
+        this.invalidLabel = 'Not a valid regular expression';
+        this.label = 'Find';
+        this.matchCase = false;
+        this.matchCaseLabel = 'Match case';
+        this.matchesLabel = '{count, plural, =0 {No matches} one {{index} of # match} other {{index} of # matches}}';
+        this.nextLabel = 'Next match';
+        this.options = 'match-case whole-word regex';
+        this.previousLabel = 'Previous match';
+        this.query = '';
+        this.readOnly = false;
+        this.regex = false;
+        this.regexLabel = 'Use regular expression';
+        this.replaceAllLabel = 'Replace all';
+        this.replaceFieldLabel = 'Replace with';
+        this.replaceLabel = 'Replace';
+        this.replacement = '';
+        this.replaceToggleLabel = 'Find and replace';
+        this.shortcut = 'mod+f';
+        this.skip = '';
+        this.wholeWord = false;
+        this.wholeWordLabel = 'Match whole word';
+        this.result = undefined;
+        this.replaceOpen = false;
+        this.attached = undefined;
+        this.announcement = '';
+        this.said = 0;
+        this.inside = false;
+        this.handleWhere = (event) => {
+            this.inside = this.within(event);
+        };
+        this.handleShortcut = (event) => {
+            if (event.defaultPrevented ||
+                event.isComposing ||
+                this.shortcut === '' ||
+                !matchesChord(event, this.shortcut, onApple()) ||
+                !(this.inside || this.within(event)) ||
+                this.finder === undefined) {
+                return;
+            }
+            event.preventDefault();
+            void this.show();
+        };
+        this.handleInput = (event) => {
+            this.query = event.target.value;
+        };
+        this.handleReplaceInput = (event) => {
+            this.replacement = event.target.value;
+        };
+        this.handleKeys = (event) => {
+            if (event.defaultPrevented || event.isComposing) {
+                return;
+            }
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.hide();
+                return;
+            }
+            if (event.key !== 'Enter') {
+                return;
+            }
+            const origin = event.composedPath()[0];
+            if (!(origin instanceof HTMLInputElement)) {
+                return;
+            }
+            event.preventDefault();
+            if (origin.getAttribute('part') === 'replace-field') {
+                this.replace(event.metaKey || event.ctrlKey);
+            }
+            else {
+                this.search(event.shiftKey ? 'previous' : 'next');
+            }
+        };
+    }
+    static { this.markRules = [MIRROR_RULE]; }
+    static { this.words = 'helix-find'; }
+    attach(finder) {
+        this.endSearch();
+        this.attached = finder;
+        this.replaceOpen = this.replaceOpen && finder.replace !== undefined;
+        if (this.open) {
+            queueMicrotask(() => this.search('first'));
+        }
+        return {
+            detach: () => {
+                if (this.attached === finder) {
+                    this.endSearch();
+                    this.attached = undefined;
+                }
+            },
+            found: (result) => {
+                if (this.attached === finder) {
+                    this.report(result);
+                }
+            },
+        };
+    }
+    async show() {
+        const active = deepActiveElement();
+        if (active !== null && !deepContains(this, active)) {
+            this.returnTo = active;
+        }
+        const selected = this.attached ? '' : this.selectedText();
+        if (selected !== '') {
+            this.query = selected;
+        }
+        if (!this.requestOpen(true)) {
+            return;
+        }
+        await this.updateComplete;
+        const field = this.partNamed('field');
+        field?.focus();
+        field?.select();
+    }
+    hide() {
+        const active = deepActiveElement();
+        const focused = active !== null && deepContains(this, active);
+        if (!this.requestOpen(false)) {
+            return;
+        }
+        const back = this.returnTo;
+        this.returnTo = undefined;
+        if (focused && back?.isConnected) {
+            ;
+            back.focus();
+        }
+    }
+    next() {
+        if (this.open) {
+            this.search('next');
+        }
+    }
+    previous() {
+        if (this.open) {
+            this.search('previous');
+        }
+    }
+    refresh() {
+        if (this.open) {
+            this.search('first');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const document = this.ownerDocument;
+        document.addEventListener('keydown', this.handleShortcut, true);
+        document.addEventListener('pointerdown', this.handleWhere, true);
+        document.addEventListener('focusin', this.handleWhere, true);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        const document = this.ownerDocument;
+        document.removeEventListener('keydown', this.handleShortcut, true);
+        document.removeEventListener('pointerdown', this.handleWhere, true);
+        document.removeEventListener('focusin', this.handleWhere, true);
+        this.endSearch();
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('replace-open', this.replacing);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (!this.open) {
+            if (changed.has('open')) {
+                this.endSearch();
+            }
+            return;
+        }
+        if (SEARCHED.some((name) => changed.has(name))) {
+            queueMicrotask(() => this.search('first'));
+        }
+    }
+    get target() {
+        return this.for === '' ? null : elementById(this, this.for);
+    }
+    get finder() {
+        if (this.attached) {
+            return this.attached;
+        }
+        const root = this.target;
+        if (root === null) {
+            return undefined;
+        }
+        if (this.own?.root !== root || this.own.skip !== this.skip) {
+            this.own?.finder.end();
+            this.own = {
+                finder: textFinder(root, { found: (result) => this.report(result), skip: this.skip }),
+                root,
+                skip: this.skip,
+            };
+        }
+        return this.own.finder;
+    }
+    get findQuery() {
+        return {
+            caseSensitive: this.matchCase,
+            regex: this.regex,
+            replace: this.replacement,
+            search: this.query,
+            wholeWord: this.wholeWord,
+        };
+    }
+    get readable() {
+        return this.query === '' || findPattern(this.findQuery) !== undefined;
+    }
+    get replaceable() {
+        return !this.hydrating && !this.readOnly && this.attached?.replace !== undefined;
+    }
+    get replacing() {
+        return this.replaceOpen && this.replaceable;
+    }
+    get countText() {
+        if (!this.readable) {
+            return this.invalidLabel;
+        }
+        return this.result === undefined
+            ? ''
+            : formatWords(this, 'matchesLabel', {
+                count: this.result.count,
+                index: Math.max(this.result.index, 0) + 1,
+            });
+    }
+    offers(option) {
+        return this.options.split(/\s+/).includes(option);
+    }
+    selectedText() {
+        const selection = this.ownerDocument.getSelection?.();
+        const root = this.target;
+        const text = selection?.toString() ?? '';
+        const anchor = selection?.anchorNode ?? null;
+        return root !== null &&
+            anchor !== null &&
+            root.contains(anchor) &&
+            text.trim() !== '' &&
+            !/[\r\n]/.test(text)
+            ? text
+            : '';
+    }
+    search(direction) {
+        const finder = this.finder;
+        if (!finder) {
+            return;
+        }
+        if (this.marking !== finder) {
+            this.endSearch();
+        }
+        if (this.query === '' || !this.readable) {
+            this.endSearch();
+            if (!this.readable) {
+                this.say(this.invalidLabel);
+            }
+            return;
+        }
+        this.marking = finder;
+        const result = finder.find(this.findQuery, direction);
+        if (result) {
+            this.report(result);
+        }
+    }
+    endSearch() {
+        this.marking?.end();
+        this.marking = undefined;
+        this.result = undefined;
+    }
+    report(result) {
+        if (!this.open) {
+            return;
+        }
+        this.result = result;
+        this.say(this.countText);
+        this.dispatchEvent(new HelixFoundEvent({ count: result.count, index: result.index }));
+    }
+    replace(all) {
+        const finder = this.finder;
+        if (!finder?.replace || this.readOnly || this.query === '' || !this.readable) {
+            return;
+        }
+        const result = finder.replace(this.findQuery, all);
+        if (result) {
+            this.report(result);
+        }
+    }
+    say(text) {
+        this.announcement = text;
+        this.said += 1;
+    }
+    within(event) {
+        const path = event.composedPath();
+        const root = this.target;
+        return path.includes(this) || (root !== null && path.includes(root));
+    }
+    toggleOption(option) {
+        this[option] = !this[option];
+    }
+    renderReplaceToggle() {
+        if (!this.replaceable) {
+            return nothing;
+        }
+        const button = this.tag('icon-button');
+        return html `<${button}
+      part="replace-toggle"
+      exportparts="button: replace-toggle-button, live: replace-toggle-live, spinner: replace-toggle-spinner, text: replace-toggle-text"
+      .expanded=${this.replacing}
+      label=${this.replaceToggleLabel}
+      @click=${() => {
+            this.replaceOpen = !this.replaceOpen;
+        }}
+      @helix-press=${stopPress}
+    >
+      ${this.replacing ? drawIcon(caretDown) : html `<span data-mirror>${drawIcon(caretRight)}</span>`}
+    </${button}>`;
+    }
+    renderOptionButtons() {
+        const button = this.tag('icon-button');
+        return html `${this.offers('match-case')
+            ? html `<${button}
+            part="match-case${this.matchCase ? ' match-case-pressed' : ''}"
+            exportparts="button: match-case-button, live: match-case-live, spinner: match-case-spinner, text: match-case-text"
+            aria-pressed=${this.matchCase ? 'true' : 'false'}
+            label=${this.matchCaseLabel}
+            @click=${() => this.toggleOption('matchCase')}
+            @helix-press=${stopPress}
+          >
+            <slot name="match-case-icon">${drawIcon(textAa)}</slot>
+          </${button}>`
+            : nothing}${this.offers('whole-word')
+            ? html `<${button}
+            part="whole-word${this.wholeWord ? ' whole-word-pressed' : ''}"
+            exportparts="button: whole-word-button, live: whole-word-live, spinner: whole-word-spinner, text: whole-word-text"
+            aria-pressed=${this.wholeWord ? 'true' : 'false'}
+            label=${this.wholeWordLabel}
+            @click=${() => this.toggleOption('wholeWord')}
+            @helix-press=${stopPress}
+          >
+            <slot name="whole-word-icon">${drawIcon(textAUnderline)}</slot>
+          </${button}>`
+            : nothing}${this.offers('regex')
+            ? html `<${button}
+            part="regex${this.regex ? ' regex-pressed' : ''}"
+            exportparts="button: regex-button, live: regex-live, spinner: regex-spinner, text: regex-text"
+            aria-pressed=${this.regex ? 'true' : 'false'}
+            label=${this.regexLabel}
+            @click=${() => this.toggleOption('regex')}
+            @helix-press=${stopPress}
+          >
+            <slot name="regex-icon">${drawIcon(asterisk)}</slot>
+          </${button}>`
+            : nothing}`;
+    }
+    renderControls() {
+        const toolbar = this.tag('toolbar');
+        const button = this.tag('icon-button');
+        const searchable = this.readable && (this.result?.count ?? 0) > 0;
+        return html `<${toolbar} part="controls" exportparts="toolbar: controls-toolbar" label=${this.controlsLabel}>
+      ${this.renderOptionButtons()}
+      <slot name="actions" part="actions"></slot>
+      <${button}
+        part="previous"
+        exportparts="button: previous-button, live: previous-live, spinner: previous-spinner, text: previous-text"
+        ?disabled=${!searchable}
+        label=${this.previousLabel}
+        @click=${() => this.search('previous')}
+        @helix-press=${stopPress}
+      >
+        <slot name="previous-icon">${drawIcon(caretUp)}</slot>
+      </${button}>
+      <${button}
+        part="next"
+        exportparts="button: next-button, live: next-live, spinner: next-spinner, text: next-text"
+        ?disabled=${!searchable}
+        label=${this.nextLabel}
+        @click=${() => this.search('next')}
+        @helix-press=${stopPress}
+      >
+        <slot name="next-icon">${drawIcon(caretDown)}</slot>
+      </${button}>
+      <${button}
+        part="close"
+        exportparts="button: close-button, live: close-live, spinner: close-spinner, text: close-text"
+        label=${this.closeLabel}
+        @click=${() => this.hide()}
+        @helix-press=${stopPress}
+      >
+        <slot name="close-icon">${drawIcon(x)}</slot>
+      </${button}>
+    </${toolbar}>`;
+    }
+    renderReplace() {
+        if (!this.replacing) {
+            return nothing;
+        }
+        const button = this.tag('button');
+        const searchable = this.readable && (this.result?.count ?? 0) > 0;
+        return html `<input
+        part="replace-field"
+        aria-label=${this.replaceFieldLabel}
+        autocomplete="off"
+        placeholder=${this.replaceFieldLabel}
+        spellcheck="false"
+        type="text"
+        .value=${live(this.replacement)}
+        @input=${this.handleReplaceInput}
+      />
+      <${button}
+        part="replace"
+        exportparts="button: replace-button, live: replace-live, spinner: replace-spinner, text: replace-text"
+        ?disabled=${!searchable}
+        @click=${() => this.replace(false)}
+        @helix-press=${stopPress}
+      >
+        ${this.replaceLabel}
+      </${button}>
+      <${button}
+        part="replace-all"
+        exportparts="button: replace-all-button, live: replace-all-live, spinner: replace-all-spinner, text: replace-all-text"
+        ?disabled=${!searchable}
+        @click=${() => this.replace(true)}
+        @helix-press=${stopPress}
+      >
+        ${this.replaceAllLabel}
+      </${button}>`;
+    }
+    render() {
+        return html `<div
+        part="bar"
+        role="search"
+        aria-label=${this.label}
+        ?hidden=${!this.open}
+        @keydown=${this.handleKeys}
+      >
+        ${this.renderReplaceToggle()}
+        <input
+          part="field"
+          aria-invalid=${this.readable ? nothing : 'true'}
+          aria-label=${this.label}
+          autocomplete="off"
+          placeholder=${this.label}
+          spellcheck="false"
+          type="search"
+          .value=${live(this.query)}
+          @input=${this.handleInput}
+        />
+        <span part="count" aria-hidden="true">${this.countText || nothing}</span>
+        ${this.renderControls()}
+        ${this.renderReplace()}
+      </div>
+      <span part="live" role="status">${keyed(this.said, this.announcement)}</span>`;
+    }
+};
+__decorate([
+    words,
+    property({ attribute: 'close-label' })
+], HelixHeadlessFind.prototype, "closeLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'controls-label' })
+], HelixHeadlessFind.prototype, "controlsLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessFind.prototype, "for", void 0);
+__decorate([
+    words,
+    property({ attribute: 'invalid-label' })
+], HelixHeadlessFind.prototype, "invalidLabel", void 0);
+__decorate([
+    words,
+    property()
+], HelixHeadlessFind.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'match-case', type: Boolean })
+], HelixHeadlessFind.prototype, "matchCase", void 0);
+__decorate([
+    words,
+    property({ attribute: 'match-case-label' })
+], HelixHeadlessFind.prototype, "matchCaseLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'matches-label' })
+], HelixHeadlessFind.prototype, "matchesLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'next-label' })
+], HelixHeadlessFind.prototype, "nextLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessFind.prototype, "options", void 0);
+__decorate([
+    words,
+    property({ attribute: 'previous-label' })
+], HelixHeadlessFind.prototype, "previousLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessFind.prototype, "query", void 0);
+__decorate([
+    property({ attribute: 'readonly', type: Boolean })
+], HelixHeadlessFind.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessFind.prototype, "regex", void 0);
+__decorate([
+    words,
+    property({ attribute: 'regex-label' })
+], HelixHeadlessFind.prototype, "regexLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'replace-all-label' })
+], HelixHeadlessFind.prototype, "replaceAllLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'replace-field-label' })
+], HelixHeadlessFind.prototype, "replaceFieldLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'replace-label' })
+], HelixHeadlessFind.prototype, "replaceLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessFind.prototype, "replacement", void 0);
+__decorate([
+    words,
+    property({ attribute: 'replace-toggle-label' })
+], HelixHeadlessFind.prototype, "replaceToggleLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessFind.prototype, "shortcut", void 0);
+__decorate([
+    property()
+], HelixHeadlessFind.prototype, "skip", void 0);
+__decorate([
+    property({ attribute: 'whole-word', type: Boolean })
+], HelixHeadlessFind.prototype, "wholeWord", void 0);
+__decorate([
+    words,
+    property({ attribute: 'whole-word-label' })
+], HelixHeadlessFind.prototype, "wholeWordLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessFind.prototype, "result", void 0);
+__decorate([
+    state()
+], HelixHeadlessFind.prototype, "replaceOpen", void 0);
+__decorate([
+    state()
+], HelixHeadlessFind.prototype, "attached", void 0);
+__decorate([
+    state()
+], HelixHeadlessFind.prototype, "announcement", void 0);
+__decorate([
+    state()
+], HelixHeadlessFind.prototype, "said", void 0);
+HelixHeadlessFind = __decorate([
+    customElement('helix-headless-find')
+], HelixHeadlessFind);
+export { HelixHeadlessFind };

package/dist/index.d.ts

@@ -50,6 +50,7 @@ export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';
 export * from './filter-input/menu/index.js';
+export * from './find/index.js';
 export * from './format-date/index.js';
 export * from './graph/index.js';
 export * from './heatmap/index.js';

package/dist/index.js

@@ -41,6 +41,7 @@ export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';
 export * from './filter-input/menu/index.js';
+export * from './find/index.js';
 export * from './format-date/index.js';
 export * from './graph/index.js';
 export * from './heatmap/index.js';

package/dist/log/group/log-group.d.ts

@@ -15,7 +15,9 @@ declare const HelixHeadlessLogGroup_base: (new (...args: any[]) => import("@fusi
  * the heading, as you write it, such as `12s`.
  *
  * A group starts shut. Write `default-open` on the step a reader should see,
- * such as the one that failed.
+ * such as the one that failed. A shut group's lines are hidden until found:
+ * the browser's find and Find search them, and the group opens on the one
+ * that holds the match, unless `helix-before-open` is canceled.
  *
  * @since 0.200.0
  * @status experimental
@@ -28,7 +30,7 @@ declare const HelixHeadlessLogGroup_base: (new (...args: any[]) => import("@fusi
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the group opens. Cancelable.
  * @event {ToggleEvent} toggle - Fired after the group opens or closes, with `newState` and `oldState`.
  *
- * @csspart content - The lines, hidden while the group is shut.
+ * @csspart content - The lines, hidden until found while the group is shut.
  * @csspart duration - How long the step took.
  * @csspart heading - The heading.
  * @csspart mark - The caret that turns as the group opens, an `<svg>` you size.
@@ -65,6 +67,13 @@ export declare class HelixHeadlessLogGroup extends HelixHeadlessLogGroup_base {
      */
     statusLabel: string;
     private readonly handlePress;
+    /**
+     * A search found a match in the shut group, and shows it next: the
+     * browser's find or Find. The group opens, and where the page refuses, its
+     * lines are hidden again once the search has shown them, as Accordion's
+     * section is.
+     */
+    private readonly handleBeforeMatch;
     /** Records whether the group holds anything, and whether a step is among it. */
     private readonly handleSlotChange;
     /** A slot that is never filled fires no `slotchange`, so the first render reads it once. */

package/dist/log/group/log-group.js

@@ -22,6 +22,19 @@ let HelixHeadlessLogGroup = class HelixHeadlessLogGroup extends MixinControllerO
         this.handlePress = () => {
             this.toggleOpen();
         };
+        this.handleBeforeMatch = (event) => {
+            if (this.open || this.requestOpen(true)) {
+                return;
+            }
+            const content = event.currentTarget;
+            const observer = new MutationObserver(() => {
+                observer.disconnect();
+                if (!this.open && !content.hasAttribute('hidden')) {
+                    content.setAttribute('hidden', 'until-found');
+                }
+            });
+            observer.observe(content, { attributeFilter: ['hidden'] });
+        };
         this.handleSlotChange = () => {
             const slot = this.renderRoot.querySelector('[part="content"] > slot');
             if (!slot) {
@@ -61,9 +74,10 @@ let HelixHeadlessLogGroup = class HelixHeadlessLogGroup extends MixinControllerO
             : html `<div
               part="content"
               id="content"
-              role="group"
-              aria-labelledby="summary"
-              ?hidden=${!this.open}
+              role=${this.open ? 'group' : nothing}
+              aria-labelledby=${this.open ? 'summary' : nothing}
+              hidden=${this.open ? nothing : 'until-found'}
+              @beforematch=${this.handleBeforeMatch}
             ><slot @slotchange=${this.handleSlotChange}></slot></div>`}`;
     }
 };