@reticlehq/browser 3.8.0 → 3.8.2

package/dist/dom/query-finders.js

@@ -0,0 +1,216 @@
+import { DATA_RETICLE_SOURCE_ATTR, QueryBy } from '@reticlehq/core';
+import { isInput, isSelect, isTextArea } from './realm.js';
+import { getAccessibleName, getRole } from './a11y.js';
+import { isVisible } from './visibility.js';
+import { identifyComponent } from '../registry/stores/adapters.js';
+import { readTestId, testIdSelector } from './addressing/testid-attr.js';
+import { exactVisibleText, fuzzyVisibleText, comparableText, paintedCase, textMatches, } from './text-match.js';
+const SOURCE_ATTR = DATA_RETICLE_SOURCE_ATTR;
+const MAX_COMPONENT_CANDIDATES = 2000;
+const componentCandidateSelector = () => `[${SOURCE_ATTR}], ${testIdSelector()}, button, a, input, select, textarea, [role]`;
+export function elementsUnder(container) {
+    const self = Node.ELEMENT_NODE === container.nodeType ? [container] : [];
+    return [...self, ...Array.from(container.querySelectorAll('*'))];
+}
+const NON_RENDERED_TAGS = ['script', 'style', 'template', 'noscript'];
+export function isNonRendered(el) {
+    return NON_RENDERED_TAGS.includes(el.tagName.toLowerCase());
+}
+function directText(el) {
+    if (isInput(el)) {
+        const type = el.type.toLowerCase();
+        if ('submit' === type || 'button' === type || 'reset' === type) {
+            return el.value;
+        }
+    }
+    if (isNonRendered(el)) {
+        return '';
+    }
+    return Array.from(el.childNodes)
+        .filter((node) => Node.TEXT_NODE === node.nodeType)
+        .map((node) => node.textContent ?? '')
+        .join('');
+}
+function semanticNameTarget(el) {
+    if (isInput(el) || isTextArea(el) || isSelect(el)) {
+        return true;
+    }
+    const tag = el.tagName.toLowerCase();
+    return ('button' === tag ||
+        'meter' === tag ||
+        'output' === tag ||
+        'progress' === tag ||
+        el.hasAttribute('aria-label') ||
+        el.hasAttribute('aria-labelledby'));
+}
+function findBySource(container, source) {
+    const prefix = `${source.file}:${source.line}:`.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+    try {
+        return Array.from(container.querySelectorAll(`[${SOURCE_ATTR}^="${prefix}"]`));
+    }
+    catch {
+        return [];
+    }
+}
+function findByComponentName(container, component) {
+    const out = [];
+    let scanned = 0;
+    for (const el of Array.from(container.querySelectorAll(componentCandidateSelector()))) {
+        if (scanned >= MAX_COMPONENT_CANDIDATES) {
+            break;
+        }
+        scanned += 1;
+        const info = identifyComponent(el);
+        if (info !== null && info.componentStack[0] === component) {
+            out.push(el);
+        }
+    }
+    return out;
+}
+function findByComponent(container, query) {
+    if (query.source !== undefined) {
+        const bySource = findBySource(container, query.source);
+        if (bySource.length > 0) {
+            return bySource;
+        }
+    }
+    if (query.component !== undefined && query.component.length > 0) {
+        return findByComponentName(container, query.component);
+    }
+    return [];
+}
+function matchesRole(actual, queried) {
+    if (actual === queried) {
+        return true;
+    }
+    if ('textbox' === queried && 'searchbox' === actual) {
+        return true;
+    }
+    return false;
+}
+const OPTION_ROLE = 'option';
+const HTML_OPTION_TAG = 'option';
+const HTML_SELECT_TAG = 'select';
+const VISUALLY_HIDDEN_MAX_PX = 1;
+export function isHiddenNativeOption(el) {
+    if (HTML_OPTION_TAG !== el.localName) {
+        return false;
+    }
+    const select = el.closest(HTML_SELECT_TAG);
+    if (!isSelect(select)) {
+        return false;
+    }
+    if (!isVisible(select)) {
+        return true;
+    }
+    return isVisuallyHiddenBox(select);
+}
+function isVisuallyHiddenBox(select) {
+    const box = select.getBoundingClientRect();
+    return (box.width > 0 &&
+        box.height > 0 &&
+        box.width <= VISUALLY_HIDDEN_MAX_PX &&
+        box.height <= VISUALLY_HIDDEN_MAX_PX);
+}
+function preferVisibleActionableOption(role, matches) {
+    if (OPTION_ROLE !== role) {
+        return matches;
+    }
+    const kept = matches.filter((el) => !isHiddenNativeOption(el));
+    return kept.length === matches.length ? matches : kept;
+}
+export function queryByRoleAndName(container, role, name) {
+    const matched = elementsUnder(container).filter((el) => matchesRole(getRole(el), role) &&
+        (name === undefined || exactVisibleText(getAccessibleName(el), name)));
+    return preferVisibleActionableOption(role, matched);
+}
+function queryByText(container, value, query) {
+    return elementsUnder(container).filter((el) => {
+        const own = directText(el);
+        if (textMatches(own, query, value)) {
+            return true;
+        }
+        if (true !== query.matchCase || !fuzzyVisibleText(own, value)) {
+            return false;
+        }
+        const painted = paintedCase(el, own);
+        return painted !== undefined && textMatches(painted, query, value);
+    });
+}
+function queryByLabel(container, value) {
+    const expected = comparableText(value).toLowerCase();
+    const exact = [];
+    const fuzzy = [];
+    for (const el of elementsUnder(container)) {
+        if (!semanticNameTarget(el)) {
+            continue;
+        }
+        const name = comparableText(getAccessibleName(el)).toLowerCase();
+        if (!name.includes(expected)) {
+            continue;
+        }
+        (name === expected ? exact : fuzzy).push(el);
+    }
+    return exact.length > 0 ? exact : fuzzy;
+}
+function queryByPlaceholder(container, value) {
+    return elementsUnder(container).filter((el) => {
+        const placeholder = el.getAttribute('placeholder');
+        return placeholder !== null && fuzzyVisibleText(placeholder, value);
+    });
+}
+function queryByTestId(container, value) {
+    return elementsUnder(container).filter((el) => readTestId(el) === value);
+}
+function queryByAlt(container, value) {
+    return elementsUnder(container).filter((el) => {
+        const alt = el.getAttribute('alt');
+        return alt !== null && fuzzyVisibleText(alt, value);
+    });
+}
+export function findIn(container, query) {
+    const by = query.by;
+    const value = query.value;
+    if (by !== undefined && value !== undefined) {
+        switch (by) {
+            case QueryBy.ROLE:
+                return queryByRoleAndName(container, value, query.name);
+            case QueryBy.TEXT:
+                return queryByText(container, value, query);
+            case QueryBy.LABEL:
+                return queryByLabel(container, value);
+            case QueryBy.PLACEHOLDER:
+                return queryByPlaceholder(container, value);
+            case QueryBy.TESTID:
+                return queryByTestId(container, value);
+            case QueryBy.ALT:
+                return queryByAlt(container, value);
+            case QueryBy.COMPONENT:
+                return findByComponent(container, { ...query, component: query.component ?? value });
+            default:
+                throw new Error(`unsupported query strategy '${String(by)}' - use one of: ${Object.values(QueryBy).join(', ')}`);
+        }
+    }
+    if (query.component !== undefined || query.source !== undefined) {
+        return findByComponent(container, query);
+    }
+    if (query.role !== undefined) {
+        return queryByRoleAndName(container, query.role, query.name);
+    }
+    if (query.text !== undefined) {
+        return queryByText(container, query.text, query);
+    }
+    if (query.label !== undefined) {
+        return queryByLabel(container, query.label);
+    }
+    if (query.placeholder !== undefined) {
+        return queryByPlaceholder(container, query.placeholder);
+    }
+    if (query.testid !== undefined) {
+        return queryByTestId(container, query.testid);
+    }
+    if (query.alt !== undefined) {
+        return queryByAlt(container, query.alt);
+    }
+    return [];
+}

package/dist/dom/query.d.ts

@@ -1,5 +1,4 @@
 import { ElementState, type ElementQuery, type MatchResult, type QueryResult } from '@reticlehq/core';
-export declare function isHiddenNativeOption(el: HTMLElement): boolean;
 export declare const ATTR_VALUE_MAX = 512;
 export declare function matchQuery(query: ElementQuery, state?: ElementState, limit?: number, wholePhrase?: boolean, diagnose?: boolean): MatchResult;
 export declare function elementsMatching(query: ElementQuery): HTMLElement[];