@protontech/autofill 0.0.22991789 → 0.0.33835493

package/utils/re.js

@@ -1,6 +1,6 @@
-import { CAPTCHA_ATTR_RE, CONFIRM_ACTION_ATTR_END_RE, CONFIRM_ACTION_RE, CREATE_ACTION_ATTR_END_RE, CREATE_ACTION_RE, CURRENT_VALUE_RE, EMAIL_ATTR_RE, EMAIL_RE, HIDDEN_ATTR_RE, IDENTITY_ADDRESS_ATTR_RE, IDENTITY_ADDRESS_LINES_ATTR_END_RE, IDENTITY_CITY_ATTR_RE, IDENTITY_COUNTRY_ATTR_RE, IDENTITY_COUNTRY_CODE_ATTR_RE, IDENTITY_FIRSTNAME_ATTR_RE, IDENTITY_FULLNAME_ATTR_RE, IDENTITY_LASTNAME_ATTR_RE, IDENTITY_MIDDLENAME_ATTR_RE, IDENTITY_ORGANIZATION_ATTR_RE, IDENTITY_STATE_ATTR_RE, IDENTITY_TELEPHONE_ATTR_RE, IDENTITY_TELEPHONE_PREFIX_ATTR_RE, IDENTITY_ZIPCODE_ATTR_RE, LOGIN_RE, MFA_ACTION_RE, MFA_ATTR_RE, MFA_RE, MULTI_STEP_RE, NEWSLETTER_ATTR_RE, NEWSLETTER_RE, OAUTH_ATTR_RE, OTP_ATTR_RE, OTP_OUTLIER_ATTR_RE, OTP_OUTLIER_RE, PASSWORD_OUTLIER_RE, PASSWORD_RE, RECOVERY_RE, REGISTER_RE, REMEMBER_ACTION_RE, RESET_ACTION_RE, SEARCH_ACTION_RE, STEP_ACTION_RE, TEL_RE, TOS_RE, TROUBLE_RE, USERNAME_ATTR_RE, USERNAME_OUTLIER_RE, USERNAME_RE, } from "../dictionary/generated/dictionary";
+import { AUTHENTICATOR_ATTR_RE, CAPTCHA_ATTR_RE, CC_CODE_ATTR_RE, CC_CVC_ATTR_RE, CC_EXP_ATTR_RE, CC_EXP_MONTH_ATTR_END_RE, CC_EXP_MONTH_ATTR_RE, CC_EXP_YEAR_ATTR_END_RE, CC_EXP_YEAR_ATTR_RE, CC_NAME_ATTR_RE, CC_NUMBER_ATTR_RE, CC_OUTLIER_ATTR_RE, CC_PREFIX_ATTR_RE, CONFIRM_ACTION_ATTR_END_RE, CONFIRM_ACTION_RE, CREATE_ACTION_ATTR_END_RE, CREATE_ACTION_RE, CURRENT_VALUE_RE, DOCUMENT_ATTR_RE, EMAIL_ATTR_RE, EMAIL_RE, HIDDEN_ATTR_RE, IDENTITY_ADDRESS_ATTR_RE, IDENTITY_ADDRESS_LINES_ATTR_END_RE, IDENTITY_CITY_ATTR_RE, IDENTITY_COUNTRY_ATTR_RE, IDENTITY_COUNTRY_CODE_ATTR_RE, IDENTITY_FIRSTNAME_ATTR_RE, IDENTITY_FULLNAME_ATTR_RE, IDENTITY_LASTNAME_ATTR_RE, IDENTITY_MIDDLENAME_ATTR_RE, IDENTITY_ORGANIZATION_ATTR_RE, IDENTITY_STATE_ATTR_RE, IDENTITY_TELEPHONE_ATTR_RE, IDENTITY_TELEPHONE_OUTLIER_ATTR_RE, IDENTITY_ZIPCODE_ATTR_RE, IFRAME_FIELD_ATTR_RE, LOGIN_RE, MULTI_STEP_RE, NEWSLETTER_ATTR_RE, NEWSLETTER_RE, OAUTH_ATTR_RE, OTP_ATTR_RE, OTP_OUTLIER_ATTR_RE, OTP_OUTLIER_RE, PASSWORD_OUTLIER_RE, PASSWORD_RE, PAYMENT_ATTR_RE, RECOVERY_RE, REGISTER_RE, REMEMBER_ACTION_RE, RESET_ACTION_RE, SEARCH_ACTION_RE, STEP_ACTION_RE, TEL_RE, TOS_RE, TROUBLE_RE, TWO_FA_ATTR_RE, TWO_FA_RE, USERNAME_ATTR_RE, USERNAME_OUTLIER_RE, USERNAME_RE, } from "../dictionary/generated/dictionary";
 import { EMAIL_VALUE_RE, TEL_VALUE_RE, USERNAME_VALUE_RE } from "../dictionary/source/patterns";
-import { and, or } from "./combinators";
+import { and, not, or } from "./combinators";
 export const reSanityCheck = (cb, options) => (str) => {
     if (options.maxLength && str.length > options.maxLength)
         return false;
@@ -44,21 +44,36 @@ export const matchPasswordCurrent = and(andRe([PASSWORD_RE, CURRENT_VALUE_RE]),
 export const matchPasswordCurrentAttr = and(matchPasswordCurrent, notRe(CONFIRM_ACTION_ATTR_END_RE));
 export const matchPasswordOutlier = test(PASSWORD_OUTLIER_RE);
 export const matchHidden = test(HIDDEN_ATTR_RE);
-export const matchMfaAction = test(MFA_ACTION_RE);
-export const matchMfa = test(MFA_RE);
-export const matchMfaAttr = test(MFA_ATTR_RE);
+export const matchTwoFa = orRe([TWO_FA_RE, TWO_FA_ATTR_RE]);
 export const matchOtpAttr = test(OTP_ATTR_RE);
-export const matchOtpOutlier = orRe([OTP_OUTLIER_ATTR_RE, OTP_OUTLIER_RE]);
+export const matchOtpOutlier = test(OTP_OUTLIER_ATTR_RE);
+export const matchOtpFieldOutlier = orRe([OTP_OUTLIER_ATTR_RE, USERNAME_RE]);
+export const matchOtpOutlierAction = test(OTP_OUTLIER_RE);
+export const matchAuthenticator = test(AUTHENTICATOR_ATTR_RE);
+export const matchMFAAttr = test(TWO_FA_ATTR_RE);
+export const matchMFA = orRe([TWO_FA_RE, TWO_FA_ATTR_RE, OTP_ATTR_RE]);
 export const matchNewsletter = test(NEWSLETTER_RE);
 export const matchNewsletterAttr = orRe([NEWSLETTER_RE, NEWSLETTER_ATTR_RE]);
 export const matchFullName = and(test(IDENTITY_FULLNAME_ATTR_RE), (str) => !str.includes("[name]"));
 export const matchFirstName = test(IDENTITY_FIRSTNAME_ATTR_RE);
 export const matchMiddleName = test(IDENTITY_MIDDLENAME_ATTR_RE);
 export const matchLastName = test(IDENTITY_LASTNAME_ATTR_RE);
-export const matchTelephone = and(test(IDENTITY_TELEPHONE_ATTR_RE), notRe(IDENTITY_TELEPHONE_PREFIX_ATTR_RE));
+export const matchTelephone = and(test(IDENTITY_TELEPHONE_ATTR_RE), notRe(IDENTITY_TELEPHONE_OUTLIER_ATTR_RE));
 export const matchOrganization = test(IDENTITY_ORGANIZATION_ATTR_RE);
 export const matchCity = test(IDENTITY_CITY_ATTR_RE);
 export const matchZipCode = test(IDENTITY_ZIPCODE_ATTR_RE);
 export const matchState = test(IDENTITY_STATE_ATTR_RE);
 export const matchCountry = and(test(IDENTITY_COUNTRY_ATTR_RE), notRe(IDENTITY_COUNTRY_CODE_ATTR_RE));
 export const matchAddress = and(test(IDENTITY_ADDRESS_ATTR_RE), notRe(IDENTITY_ADDRESS_LINES_ATTR_END_RE));
+export const matchCCName = test(CC_NAME_ATTR_RE);
+export const matchCCFirstName = andRe([CC_PREFIX_ATTR_RE, IDENTITY_FIRSTNAME_ATTR_RE]);
+export const matchCCLastName = andRe([CC_PREFIX_ATTR_RE, IDENTITY_LASTNAME_ATTR_RE]);
+export const matchCCNumber = test(CC_NUMBER_ATTR_RE);
+export const matchCCSecurityCode = andRe([CC_CODE_ATTR_RE, CC_PREFIX_ATTR_RE]);
+export const matchCCV = test(CC_CVC_ATTR_RE);
+export const matchCCOutlier = orRe([CC_OUTLIER_ATTR_RE, DOCUMENT_ATTR_RE]);
+export const matchCCExp = and(test(CC_EXP_ATTR_RE), notRe(DOCUMENT_ATTR_RE));
+export const matchCCExpMonth = and(test(CC_EXP_MONTH_ATTR_RE), not(test(CC_EXP_YEAR_ATTR_END_RE)));
+export const matchCCExpYear = and(test(CC_EXP_YEAR_ATTR_RE), not(test(CC_EXP_MONTH_ATTR_END_RE)));
+export const matchPayment = test(PAYMENT_ATTR_RE);
+export const matchIFrameField = orRe([IFRAME_FIELD_ATTR_RE, PAYMENT_ATTR_RE]);

package/utils/re.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/re.spec.js

@@ -0,0 +1,62 @@
+import * as matchers from "./re";
+const getRandomString = (length) => {
+    const charList = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()_+-={}[]|:;\"'<>,.?/~ `";
+    return Array.from({ length }, () => charList.charAt(Math.floor(Math.random() * charList.length))).join("");
+};
+const executionTime = (cb) => {
+    const start = performance.now();
+    cb();
+    return performance.now() - start;
+};
+const STR_TEST_LENGTHS = [25, 50, 100, 250, 500, 1000, 10000, 100000];
+const MAX_EXPECTED_REG_EXEC_TIME = 100;
+const MATCHERS = [
+    "matchCaptcha",
+    "matchConfirmAction",
+    "matchCreateAction",
+    "matchEmail",
+    "matchEmailAttr",
+    "matchEmailValue",
+    "matchHidden",
+    "matchLogin",
+    "matchTwoFa",
+    "matchMFA",
+    "matchMultiStep",
+    "matchNewsletter",
+    "matchNewsletterAttr",
+    "matchOAuth",
+    "matchOtpAttr",
+    "matchOtpOutlier",
+    "matchPasswordConfirm",
+    "matchPasswordCreate",
+    "matchPasswordCreateAttr",
+    "matchPasswordCurrent",
+    "matchPasswordCurrentAttr",
+    "matchPasswordOutlier",
+    "matchPasswordReset",
+    "matchPasswordResetAttr",
+    "matchRecovery",
+    "matchRegister",
+    "matchRememberMe",
+    "matchSearchAction",
+    "matchStepAction",
+    "matchTOS",
+    "matchTel",
+    "matchTelValue",
+    "matchTrouble",
+    "matchUsername",
+    "matchUsernameAttr",
+    "matchUsernameOutlier",
+    "matchUsernameValue",
+];
+describe("regex performance tests", () => {
+    MATCHERS.forEach((matcher) => {
+        describe(`${matcher}`, () => {
+            STR_TEST_LENGTHS.forEach((length) => {
+                test(`string of ${length} chars under 100ms`, () => {
+                    expect(executionTime(() => matchers[matcher](getRandomString(length)))).toBeLessThan(MAX_EXPECTED_REG_EXEC_TIME);
+                });
+            });
+        });
+    });
+});

package/utils/shadow-dom.d.ts

@@ -0,0 +1,8 @@
+export declare const isShadowRoot: (el: Node) => el is ShadowRoot;
+export declare const isShadowElement: (el: Node) => boolean;
+export declare const isCustomElementWithShadowRoot: (el: Element) => el is HTMLElement & {
+    shadowRoot: ShadowRoot;
+};
+export declare const shadowPiercingAncestors: (element: Node) => Generator<Node, void, unknown>;
+export declare const shadowPiercingContains: (container: HTMLElement | Document, el: HTMLElement) => boolean;
+export declare const shallowShadowQuerySelector: (el: HTMLElement | Document, selector: string) => HTMLElement | null;

package/utils/shadow-dom.js

@@ -0,0 +1,53 @@
+export const isShadowRoot = (el) => el instanceof ShadowRoot;
+export const isShadowElement = (el) => isShadowRoot(el.getRootNode());
+export const isCustomElementWithShadowRoot = (el) => Boolean(el.tagName.includes("-") && el.shadowRoot);
+export const shadowPiercingAncestors = function* (element) {
+    yield element;
+    let current = element;
+    let parent;
+    while ((parent = getShadowPiercingParent(current)) && (parent === null || parent === void 0 ? void 0 : parent.nodeType) === Node.ELEMENT_NODE) {
+        yield parent;
+        current = parent;
+    }
+};
+const getShadowPiercingParent = (node) => {
+    const parent = node.parentNode;
+    if (!parent)
+        return null;
+    if (isShadowRoot(parent))
+        return parent.host;
+    else
+        return parent;
+};
+export const shadowPiercingContains = (container, el) => {
+    let current = el;
+    if (container.contains(el))
+        return true;
+    if (!isShadowElement(el))
+        return false;
+    const containerShadowRoot = "shadowRoot" in container ? container.shadowRoot : null;
+    if (containerShadowRoot === null || containerShadowRoot === void 0 ? void 0 : containerShadowRoot.contains(el))
+        return true;
+    while (current) {
+        const rootNode = current.getRootNode();
+        if (rootNode === document)
+            return false;
+        if (!isShadowRoot(rootNode))
+            return false;
+        const host = rootNode.host;
+        if (host === container)
+            return true;
+        if (container.contains(host))
+            return true;
+        if (containerShadowRoot === null || containerShadowRoot === void 0 ? void 0 : containerShadowRoot.contains(host))
+            return true;
+        current = host;
+    }
+    return false;
+};
+export const shallowShadowQuerySelector = (el, selector) => {
+    var _a, _b, _c;
+    if (!(el instanceof HTMLElement))
+        return el.querySelector(selector);
+    return (_c = (_a = el.querySelector(selector)) !== null && _a !== void 0 ? _a : (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(selector)) !== null && _c !== void 0 ? _c : null;
+};

package/utils/shadow-dom.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/shadow-dom.spec.js

@@ -0,0 +1,215 @@
+import { isShadowElement, shadowPiercingAncestors, shadowPiercingContains, shallowShadowQuerySelector } from "./shadow-dom";
+class WrapperComponent extends HTMLElement {
+    constructor() {
+        super();
+        const shadow = this.attachShadow({ mode: "open" });
+        shadow.innerHTML = `
+      <div class="wrapper">
+        <slot name="header"></slot>
+        <div class="content">
+          <p class="text">Shadow content</p>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+class NestedComponent extends HTMLElement {
+    constructor() {
+        super();
+        const shadow = this.attachShadow({ mode: "open" });
+        shadow.innerHTML = `
+      <div class="outer">
+        <wrapper-component>
+          <span class="nested-content">Nested content</span>
+        </wrapper-component>
+      </div>
+    `;
+    }
+}
+class CardComponent extends HTMLElement {
+    constructor() {
+        super();
+        const shadow = this.attachShadow({ mode: "open" });
+        shadow.innerHTML = `
+      <div class="card">
+        <div class="card-header">
+          <slot name="header"></slot>
+        </div>
+        <div class="card-body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+class CustomInput extends HTMLElement {
+    constructor() {
+        super();
+        const shadow = this.attachShadow({ mode: "open" });
+        shadow.innerHTML = `
+      <div class="input-wrapper">
+        <input type="text" class="actual-input">
+        <div class="validation-message"></div>
+      </div>
+    `;
+    }
+}
+customElements.define("wrapper-component", WrapperComponent);
+customElements.define("nested-component", NestedComponent);
+customElements.define("custom-input", CustomInput);
+customElements.define("card-component", CardComponent);
+describe("Shadow DOM Utilities", () => {
+    let container;
+    beforeEach(() => {
+        document.body.innerHTML = "";
+        container = document.createElement("div");
+        container.id = "container";
+        document.body.appendChild(container);
+    });
+    describe("`isShadowElement`", () => {
+        test("should detect elements inside custom element shadow DOM", () => {
+            var _a;
+            container.innerHTML = `<wrapper-component></wrapper-component>`;
+            const component = container.querySelector("wrapper-component");
+            const shadowText = (_a = component === null || component === void 0 ? void 0 : component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".text");
+            expect(isShadowElement(shadowText)).toBe(true);
+        });
+        test("should return `false` for custom element host", () => {
+            container.innerHTML = `<wrapper-component></wrapper-component>`;
+            const component = container.querySelector("wrapper-component");
+            expect(isShadowElement(component)).toBe(false);
+        });
+    });
+    describe("`shadowPiercingAncestors`", () => {
+        test("should traverse from shadow content to light DOM", () => {
+            var _a;
+            container.innerHTML = `<wrapper-component></wrapper-component>`;
+            const component = container.querySelector("wrapper-component");
+            const shadowText = (_a = component === null || component === void 0 ? void 0 : component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".text");
+            const ancestors = Array.from(shadowPiercingAncestors(shadowText));
+            const expected = [HTMLParagraphElement, HTMLDivElement, HTMLDivElement, WrapperComponent, HTMLDivElement, HTMLBodyElement, HTMLHtmlElement];
+            expect(ancestors[0]).toBe(shadowText);
+            expect(ancestors.length).toEqual(expected.length);
+            expected.forEach((instance, idx) => expect(ancestors[idx]).toBeInstanceOf(instance));
+        });
+        test("should handle nested custom elements", () => {
+            var _a, _b;
+            container.innerHTML = `<nested-component></nested-component>`;
+            const outerComponent = container.querySelector("nested-component");
+            const innerComponent = (_a = outerComponent === null || outerComponent === void 0 ? void 0 : outerComponent.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("wrapper-component");
+            const nestedContent = (_b = innerComponent === null || innerComponent === void 0 ? void 0 : innerComponent.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".text");
+            const ancestors = Array.from(shadowPiercingAncestors(nestedContent));
+            const expected = [HTMLParagraphElement, HTMLDivElement, HTMLDivElement, WrapperComponent, HTMLDivElement, NestedComponent, HTMLDivElement, HTMLBodyElement, HTMLHtmlElement];
+            expect(ancestors[0]).toBe(nestedContent);
+            expect(ancestors.length).toEqual(expected.length);
+            expected.forEach((instance, idx) => expect(ancestors[idx]).toBeInstanceOf(instance));
+        });
+        test("should handle slotted content", () => {
+            container.innerHTML = `
+        <wrapper-component>
+          <span class="slotted">Slotted content</span>
+        </wrapper-component>
+      `;
+            const slottedContent = container.querySelector(".slotted");
+            const ancestors = Array.from(shadowPiercingAncestors(slottedContent));
+            const expected = [HTMLSpanElement, WrapperComponent, HTMLDivElement, HTMLBodyElement, HTMLHtmlElement];
+            expect(ancestors[0]).toBe(slottedContent);
+            expect(ancestors.length).toEqual(expected.length);
+            expected.forEach((instance, idx) => expect(ancestors[idx]).toBeInstanceOf(instance));
+        });
+    });
+    describe("`shadowPiercingContains`", () => {
+        test("should find containment across custom element boundaries", () => {
+            var _a;
+            container.innerHTML = `<wrapper-component></wrapper-component>`;
+            const component = container.querySelector("wrapper-component");
+            const shadowText = (_a = component === null || component === void 0 ? void 0 : component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".text");
+            expect(shadowPiercingContains(container, shadowText)).toBe(true);
+            expect(shadowPiercingContains(component, shadowText)).toBe(true);
+        });
+        test("should work with nested custom elements", () => {
+            var _a, _b;
+            container.innerHTML = `<nested-component></nested-component>`;
+            const outerComponent = container.querySelector("nested-component");
+            const innerComponent = (_a = outerComponent === null || outerComponent === void 0 ? void 0 : outerComponent.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("wrapper-component");
+            const deepContent = (_b = innerComponent === null || innerComponent === void 0 ? void 0 : innerComponent.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".text");
+            expect(shadowPiercingContains(container, deepContent)).toBe(true);
+            expect(shadowPiercingContains(outerComponent, deepContent)).toBe(true);
+        });
+        test("should handle mixed light/shadow DOM", () => {
+            var _a;
+            container.innerHTML = `
+        <div class="wrapper">
+          <wrapper-component></wrapper-component>
+        </div>
+      `;
+            const wrapper = container.querySelector(".wrapper");
+            const component = wrapper === null || wrapper === void 0 ? void 0 : wrapper.querySelector("wrapper-component");
+            const shadowContent = (_a = component === null || component === void 0 ? void 0 : component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".content");
+            expect(shadowPiercingContains(container, shadowContent)).toBe(true);
+            expect(shadowPiercingContains(wrapper, shadowContent)).toBe(true);
+        });
+    });
+    describe("`shallowShadowQuerySelector`", () => {
+        test("should find elements in custom element shadow DOM", () => {
+            var _a;
+            container.innerHTML = `<wrapper-component></wrapper-component>`;
+            const component = container.querySelector("wrapper-component");
+            const result = shallowShadowQuerySelector(component, ".text");
+            const expected = (_a = component === null || component === void 0 ? void 0 : component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".text");
+            expect(result).toBe(expected);
+        });
+        test("should prioritize light DOM over shadow DOM in custom elements", () => {
+            container.innerHTML = `
+        <wrapper-component>
+          <p class="text">Light DOM text</p>
+        </wrapper-component>
+      `;
+            const component = container.querySelector("wrapper-component");
+            const result = shallowShadowQuerySelector(component, ".text");
+            expect(result === null || result === void 0 ? void 0 : result.textContent).toBe("Light DOM text");
+        });
+        test("should fall back to shadow DOM when not found in light DOM", () => {
+            var _a;
+            container.innerHTML = `<wrapper-component></wrapper-component>`;
+            const component = container.querySelector("wrapper-component");
+            const result = shallowShadowQuerySelector(component, ".wrapper");
+            const expected = (_a = component === null || component === void 0 ? void 0 : component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".wrapper");
+            expect(result).toBe(expected);
+        });
+    });
+    describe("Real-world scenarios", () => {
+        test("should handle form controls with shadow DOM", () => {
+            var _a;
+            container.innerHTML = `
+        <form>
+          <custom-input></custom-input>
+        </form>
+      `;
+            const form = container.querySelector("form");
+            const customInput = form === null || form === void 0 ? void 0 : form.querySelector("custom-input");
+            const actualInput = (_a = customInput === null || customInput === void 0 ? void 0 : customInput.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".actual-input");
+            expect(shadowPiercingContains(form, actualInput)).toBe(true);
+            expect(shadowPiercingContains(container, actualInput)).toBe(true);
+        });
+        test("should work with component composition", () => {
+            var _a;
+            container.innerHTML = `
+        <card-component>
+          <h2 slot="header">Title</h2>
+          <wrapper-component></wrapper-component>
+        </card-component>
+      `;
+            const card = container.querySelector("card-component");
+            const wrapper = card === null || card === void 0 ? void 0 : card.querySelector("wrapper-component");
+            const shadowText = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".text");
+            const ancestors = Array.from(shadowPiercingAncestors(shadowText));
+            const expected = [HTMLParagraphElement, HTMLDivElement, HTMLDivElement, WrapperComponent, CardComponent, HTMLDivElement, HTMLBodyElement, HTMLHtmlElement];
+            expect(ancestors.length).toEqual(expected.length);
+            expected.forEach((instance, idx) => expect(ancestors[idx]).toBeInstanceOf(instance));
+            expect(shadowPiercingContains(container, shadowText)).toBe(true);
+            expect(shadowPiercingContains(card, shadowText)).toBe(true);
+        });
+    });
+});

package/utils/visible.d.ts

@@ -1,13 +1,14 @@
-import { Fnode } from "@protontech/fathom";
+import type { Fnode } from "@protontech/fathom";
 type VisibilityCache = WeakMap<HTMLElement, boolean>;
 type IsVisibleOptions = {
     opacity: boolean;
+    skipCache?: boolean;
 };
 export declare const cacheContext: Record<string, VisibilityCache>;
 export declare const getVisibilityCache: (key: string) => VisibilityCache;
 export declare const clearVisibilityCache: () => void;
 export declare const isVisible: (fnodeOrElement: Fnode | HTMLElement, options: IsVisibleOptions) => boolean;
 export declare const isVisibleEl: (el: HTMLElement) => boolean;
-export declare const isVisibleForm: (form: HTMLElement) => boolean;
+export declare const isVisibleForm: (form: HTMLElement, options?: Partial<Pick<IsVisibleOptions, "skipCache">>) => boolean;
 export declare const isVisibleField: (field: HTMLElement) => boolean;
 export {};

package/utils/visible.js

@@ -1,14 +1,15 @@
 import { utils } from "@protontech/fathom";
-import { MIN_FIELD_HEIGHT, MIN_FIELD_WIDTH } from "../constants/heuristics";
-import { inputCandidateSelector } from "../constants/selectors";
+import { MIN_FIELD_HEIGHT, MIN_FIELD_WIDTH, SCROLLBAR_WIDTH } from "@protontech/autofill/constants/heuristics";
+import { inputCandidateSelector } from "@protontech/autofill/constants/selectors";
 import { any } from "./combinators";
 import { flagAsHidden } from "./flags";
+import { isIFrameField } from "./iframe";
 import { matchHidden } from "./re";
+import { isCustomElementWithShadowRoot, isShadowElement, shadowPiercingAncestors } from "./shadow-dom";
 import { sanitizeStringWithSpaces } from "./text";
 export const cacheContext = {};
 export const getVisibilityCache = (key) => { var _a; return (cacheContext[key] = (_a = cacheContext[key]) !== null && _a !== void 0 ? _a : new WeakMap()); };
 export const clearVisibilityCache = () => Object.keys(cacheContext).forEach((key) => delete cacheContext[key]);
-const SCROLLBAR_WIDTH = 16;
 const getCachedVisbility = (el, options) => {
     var _a;
     const opacityCache = getVisibilityCache("visibility:op");
@@ -21,13 +22,23 @@ const getCachedVisbility = (el, options) => {
 const setCachedVisibility = (cacheMap) => (els, visible) => els.forEach((el) => cacheMap.set(el, visible));
 const containedInAncestor = (rect, ancestorRect) => rect.top <= ancestorRect.bottom && rect.bottom >= ancestorRect.top && rect.left <= ancestorRect.right && rect.right >= ancestorRect.left;
 const isNegligibleRect = (rect) => rect.width <= 1 || rect.height <= 1;
+const HIDDEN_CLIP = ["rect(0px, 0px, 0px, 0px)", "rect(0, 0, 0, 0)", "rect(1px, 1px, 1px, 1px)"];
+const HIDDEN_CLIP_PATH = ["circle(0", "polygon()", "inset(100%)", "inset(50% 50% 50% 50%)"];
+const isClipped = (clip, path) => {
+    if (clip && clip !== "auto")
+        return HIDDEN_CLIP.some((value) => clip.includes(value));
+    if (path && path !== "none")
+        return HIDDEN_CLIP_PATH.some((value) => path.includes(value));
+    return false;
+};
 export const isVisible = (fnodeOrElement, options) => {
+    const useCache = !options.skipCache;
     const element = utils.toDomElement(fnodeOrElement);
     const seen = [];
     let transparent = false;
     const cache = getVisibilityCache(options.opacity ? "visibility:op" : "visibility");
     const cachedVisibility = getCachedVisbility(element, options);
-    if (cachedVisibility !== undefined)
+    if (useCache && cachedVisibility !== undefined)
         return cachedVisibility;
     const win = utils.windowForElement(element);
     const doc = win.document;
@@ -46,21 +57,28 @@ export const isVisible = (fnodeOrElement, options) => {
     const check = () => {
         var _a;
         let prevRef = null;
-        for (const ancestor of utils.ancestors(element)) {
+        for (const ancestor of shadowPiercingAncestors(element)) {
             let rect = null;
             const getRect = () => (rect = rect !== null && rect !== void 0 ? rect : ancestor.getBoundingClientRect());
             if (ancestor === doc.body)
                 return (prevRef === null || prevRef === void 0 ? void 0 : prevRef.absolute) ? isOnScreen(prevRef.rect) : true;
             const cachedVisibility = getCachedVisbility(ancestor, options);
-            if (cachedVisibility !== undefined)
+            if (useCache && cachedVisibility !== undefined)
                 return cachedVisibility;
-            const { opacity, display, position, overflow, visibility } = win.getComputedStyle(ancestor);
+            const { opacity, display, position, overflow, visibility, clip, clipPath } = win.getComputedStyle(ancestor);
             seen.push(ancestor);
-            if (opacity === "0" && options.opacity) {
+            const opacityValue = Math.floor(parseFloat(opacity) * 10);
+            if (opacityValue === 0 && options.opacity) {
                 transparent = true;
                 return false;
             }
-            if (visibility === "hidden")
+            if (visibility === "hidden" || display === "none")
+                return false;
+            if ((prevRef === null || prevRef === void 0 ? void 0 : prevRef.absolute) && position === "static") {
+                seen.pop();
+                continue;
+            }
+            if (isClipped(clip, clipPath))
                 return false;
             if (overflow === "hidden") {
                 if ((prevRef === null || prevRef === void 0 ? void 0 : prevRef.rect) && !containedInAncestor(prevRef.rect, getRect()))
@@ -68,10 +86,6 @@ export const isVisible = (fnodeOrElement, options) => {
                 if (isNegligibleRect(getRect()))
                     return false;
             }
-            if ((prevRef === null || prevRef === void 0 ? void 0 : prevRef.absolute) && position === "static") {
-                seen.pop();
-                continue;
-            }
             if (position === "absolute" && !isOnScreen(getRect()))
                 return false;
             if (position === "fixed")
@@ -88,13 +102,15 @@ export const isVisible = (fnodeOrElement, options) => {
         return true;
     };
     const visible = check();
-    if (options.opacity) {
-        if (visible || !transparent)
-            setCachedVisibility(getVisibilityCache("visibility"))(seen, visible);
-        else
-            setCachedVisibility(getVisibilityCache("visibility"))(seen.slice(0, -1), visible);
+    if (useCache) {
+        if (options.opacity) {
+            if (visible || !transparent)
+                setCachedVisibility(getVisibilityCache("visibility"))(seen, visible);
+            else
+                setCachedVisibility(getVisibilityCache("visibility"))(seen.slice(0, -1), visible);
+        }
+        setCachedVisibility(cache)(seen, visible);
     }
-    setCachedVisibility(cache)(seen, visible);
     return visible;
 };
 const quickVisibilityCheck = (el, options) => {
@@ -122,12 +138,16 @@ const quickVisibilityCheck = (el, options) => {
     return visible;
 };
 export const isVisibleEl = (el) => quickVisibilityCheck(el, { minHeight: 0, minWidth: 0 });
-export const isVisibleForm = (form) => {
+export const isVisibleForm = (form, options = {}) => {
     const visible = (() => {
-        if (!isVisible(form, { opacity: true }))
+        if (!isVisible(form, { opacity: true, ...options }))
             return false;
+        if (isCustomElementWithShadowRoot(form) || isShadowElement(form))
+            return true;
         const inputs = Array.from(form.querySelectorAll(inputCandidateSelector)).filter((field) => !field.disabled);
-        return inputs.length > 0 && inputs.some((input) => isVisible(input, { opacity: false }));
+        const iframes = Array.from(form.querySelectorAll("iframe")).filter(isIFrameField);
+        const fields = [...inputs, ...iframes];
+        return fields.length > 0 && fields.some((input) => isVisible(input, { opacity: false, ...options }));
     })();
     if (!visible)
         flagAsHidden(form);

package/cli.d.ts

@@ -1,2 +0,0 @@
-#!/usr/bin/env ts-node-script
-export {};