@duetds/components 7.0.13 → 7.1.1

package/lib/collection/components/duet-upload/upload-validators.spec.js

@@ -0,0 +1,41 @@
+/*!
+ * Built with Duet Design System
+ */
+import { validateTotalSizeIsAboveMax } from "./upload-validators";
+describe("validateTotalSizeIsAboveMax", () => {
+  it("file list size is above max", () => {
+    const fileList = [
+      { valid: true, size: 100 },
+      { valid: true, size: 200 },
+      { valid: true, size: 300 },
+    ];
+    expect(validateTotalSizeIsAboveMax(fileList, 599)).toBe(true);
+  });
+  it("file list size is same as max", () => {
+    const fileList = [
+      { valid: true, size: 100 },
+      { valid: true, size: 200 },
+      { valid: true, size: 300 },
+    ];
+    expect(validateTotalSizeIsAboveMax(fileList, 600)).toBe(true);
+    expect(validateTotalSizeIsAboveMax(fileList, 601)).toBe(false);
+  });
+  it("file list size is lower than max", () => {
+    const fileList = [
+      { valid: true, size: 100 },
+      { valid: true, size: 200 },
+      { valid: true, size: 300 },
+    ];
+    expect(validateTotalSizeIsAboveMax(fileList, 599)).toBe(true);
+    expect(validateTotalSizeIsAboveMax(fileList, 601)).toBe(false);
+  });
+  it("file list size is calculated based on valid files", () => {
+    const fileList = [
+      { valid: true, size: 100 },
+      { valid: false, size: 200 },
+      { valid: true, size: 300 },
+    ];
+    expect(validateTotalSizeIsAboveMax(fileList, 599)).toBe(false);
+    expect(validateTotalSizeIsAboveMax(fileList, 399)).toBe(true);
+  });
+});

package/lib/collection/components/duet-upload-aria-status/duet-upload-aria-status.js

@@ -2,6 +2,7 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { nudge } from "../../utils/nudge";
 export class DuetUploadAriaStatus {
   constructor() {
     /**
@@ -55,6 +56,12 @@ export class DuetUploadAriaStatus {
       this.getStatusMessage();
     }
   }
+  /**
+   * Component lifecycle events.
+   */
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -75,7 +82,8 @@ export class DuetUploadAriaStatus {
           "references": {
             "StatusMessage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::StatusMessage"
             }
           }
         },
@@ -184,6 +192,7 @@ export class DuetUploadAriaStatus {
       "statusMessage": {}
     };
   }
+  static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "valid",

package/lib/collection/components/duet-upload-item/duet-upload-item.js

@@ -4,6 +4,7 @@
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { getLocaleString } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { getI18nError } from "../duet-upload/errorcodes.utils";
 import { formatBytes } from "../duet-upload/upload.helpers";
 export class DuetUploadItem {
@@ -40,6 +41,9 @@ export class DuetUploadItem {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * focusActionButton.
    */
@@ -87,7 +91,8 @@ export class DuetUploadItem {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -110,7 +115,8 @@ export class DuetUploadItem {
           "references": {
             "DuetFileListItem": {
               "location": "import",
-              "path": "../duet-upload/duet-upload"
+              "path": "../duet-upload/duet-upload",
+              "id": "src/components/duet-upload/duet-upload.tsx::DuetFileListItem"
             }
           }
         },
@@ -130,7 +136,8 @@ export class DuetUploadItem {
           "references": {
             "ItemType": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload-item/duet-upload-item.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload-item/duet-upload-item.tsx",
+              "id": "src/components/duet-upload-item/duet-upload-item.tsx::ItemType"
             }
           }
         },
@@ -186,7 +193,8 @@ export class DuetUploadItem {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -206,7 +214,8 @@ export class DuetUploadItem {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -226,7 +235,8 @@ export class DuetUploadItem {
           "references": {
             "DuetUploadErrorCode": {
               "location": "import",
-              "path": "../duet-upload/errorcodes.utils"
+              "path": "../duet-upload/errorcodes.utils",
+              "id": "src/components/duet-upload/errorcodes.utils.ts::DuetUploadErrorCode"
             }
           }
         },
@@ -263,11 +273,13 @@ export class DuetUploadItem {
           "references": {
             "EventEmitter": {
               "location": "import",
-              "path": "@stencil/core"
+              "path": "@stencil/core",
+              "id": ""
             },
             "DuetUploadEvent": {
               "location": "import",
-              "path": "../duet-upload/duet-upload"
+              "path": "../duet-upload/duet-upload",
+              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
             }
           }
         },
@@ -288,7 +300,8 @@ export class DuetUploadItem {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -300,4 +313,5 @@ export class DuetUploadItem {
       }
     };
   }
+  static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-visually-hidden/duet-visually-hidden.e2e.js

@@ -0,0 +1,12 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-visually-hidden", () => {
+  it("should render a visually hidden element", async () => {
+    const page = await createPage(`<duet-visually-hidden></duet-visually-hidden>`);
+    const component = await page.find("duet-visually-hidden");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+});

package/lib/collection/components/duet-visually-hidden/duet-visually-hidden.js

@@ -2,7 +2,11 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { nudge } from "../../utils/nudge";
 export class DuetVisuallyHidden {
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -22,4 +26,5 @@ export class DuetVisuallyHidden {
       "$": ["duet-visually-hidden.css"]
     };
   }
+  static get elementRef() { return "element"; }
 }

package/lib/collection/utils/create-id.spec.js

@@ -0,0 +1,12 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createID } from "./create-id";
+describe("create-id", () => {
+  it("creates IDs starting with given prefix followed by hexademical numbers and dashes", () => {
+    expect(createID("MyPrefix")).toMatch(/^MyPrefix-[\-0-9a-f]+/);
+  });
+  it("returns unique IDs for each call", () => {
+    expect(createID("MyPrefix")).not.toEqual(createID("MyPrefix"));
+  });
+});

package/lib/collection/utils/js-utils.spec.js

@@ -0,0 +1,22 @@
+/*!
+ * Built with Duet Design System
+ */
+import { debounce } from "./js-utils";
+// Tell Jest to mock all timeout functions
+jest.useFakeTimers();
+describe("debounce", () => {
+  let func;
+  let debouncedFunc;
+  beforeEach(() => {
+    func = jest.fn();
+    debouncedFunc = debounce(func, 1000);
+  });
+  it("executes only once", () => {
+    for (let i = 0; i < 100; i++) {
+      debouncedFunc();
+    }
+    // Fast-forward time
+    jest.runAllTimers();
+    expect(func).toBeCalledTimes(1);
+  });
+});

package/lib/collection/utils/language-utils.spec.js

@@ -0,0 +1,159 @@
+/*!
+ * Built with Duet Design System
+ */
+import { getCurrentLanguage, getLanguage, getLocale, getLocaleString, isOfTypeLanguage } from "./language-utils";
+import { convertHtmlQuotes } from "./string-utils";
+describe("language-utils", () => {
+  describe("isOfTypeLanguage", () => {
+    it("return true is language if part of default languages", () => {
+      expect(isOfTypeLanguage("fi")).toBe(true);
+      expect(isOfTypeLanguage("en")).toBe(true);
+      expect(isOfTypeLanguage("sv")).toBe(true);
+    });
+    it("return false is language if not part of default languages", () => {
+      expect(isOfTypeLanguage("su")).toBe(false);
+      expect(isOfTypeLanguage("uk")).toBe(false);
+      expect(isOfTypeLanguage("dk")).toBe(false);
+    });
+  });
+  describe("getLocaleString", () => {
+    it("return the correct string", () => {
+      const object = {
+        fi: "finnish",
+        sv: "swedish",
+        en: "english",
+      };
+      expect(getLocaleString(object)).toBe(object["fi"]);
+    });
+    it("return the correct string for wrong overrides", () => {
+      const object = {
+        fi: "finnish",
+        sv: "swedish",
+        en: "english",
+        dk: "denmark",
+      };
+      expect(getLocaleString(object, "dk")).toBe(object["fi"]);
+    });
+    it("works with urlencoded strings (passed from a html element)", () => {
+      const reference = {
+        fi: { error: "Tiedostot, joissa on virheitä", success: "Tiedostot" },
+        sv: { error: "Filer med fel", success: "Filer" },
+        en: { error: "Files with errors", success: "Files" },
+      };
+      const object = '{"fi":{"error":"Tiedostot, joissa on virheitä","success":"Tiedostot"},"sv":{"error":"Filer med fel","success":"Filer"},"en":{"error":"Files with errors","success":"Files"}}';
+      const objectWithQuotes = "{"fi":{"error":"Tiedostot, joissa on virheitä","success":"Tiedostot"},"sv":{"error":"Filer med fel","success":"Filer"},"en":{"error":"Files with errors","success":"Files"}}";
+      const objectWithApos = "{'fi':{'error':'Tiedostot, joissa on virheitä','success':'Tiedostot'},'sv':{'error':'Filer med fel','success':'Filer'},'en':{'error':'Files with errors','success':'Files'}}";
+      const parsedObject = JSON.parse(convertHtmlQuotes(object));
+      const parseObjectWithQuotes = JSON.parse(convertHtmlQuotes(objectWithQuotes));
+      const parseObjectWithApos = JSON.parse(convertHtmlQuotes(objectWithApos));
+      expect(JSON.stringify(parsedObject)).toEqual(JSON.stringify(parseObjectWithQuotes));
+      expect(getLocaleString(parsedObject, "fi")).toEqual(reference["fi"]);
+      expect(getLocaleString(parseObjectWithQuotes)).toEqual(reference["fi"]);
+      expect(getLocaleString(parseObjectWithApos)).toEqual(reference["fi"]);
+    });
+  });
+  describe("getLocale", () => {
+    it("return the correct locale for se", () => {
+      const object = {
+        locale: "sv-SE",
+        money: "€",
+      };
+      expect(getLocale("sv")).toMatchObject(object);
+    });
+    it("return the correct locale for en", () => {
+      const object = {
+        locale: "en-GB",
+        money: "£",
+      };
+      expect(getLocale("en")).toMatchObject(object);
+    });
+    it("return the correct locale for us", () => {
+      const object = {
+        locale: "en-US",
+        money: "$",
+      };
+      expect(getLocale("us")).toMatchObject(object);
+    });
+    it("return the correct locale for fi", () => {
+      const object = {
+        locale: "fi-FI",
+        money: "€",
+      };
+      expect(getLocale("fi")).toMatchObject(object);
+    });
+    it("throws error for unknown languages", () => {
+      expect(() => {
+        //@ts-ignore
+        getLocale("no");
+      }).toThrow();
+    });
+  });
+  describe("getLanguage", () => {
+    it("returns a valid language even when given a unsuitable string", () => {
+      expect(getLanguage("shouldFail")).toBe("fi");
+      expect(getLanguage("us")).toBe("fi");
+      expect(getLanguage("sv")).toBe("sv");
+      expect(getLanguage("en")).toBe("en");
+      expect(getLanguage("fi")).toBe("fi");
+      expect(getLanguage()).toBe("fi");
+    });
+    it("should return correct language when html Lang is NOT present", () => {
+      delete document.documentElement.lang;
+      expect(getCurrentLanguage()).toBe("fi");
+      expect(getLanguage()).toBe("fi");
+    });
+    it("should return correct language when html Lang is present and set to fi", () => {
+      Object.defineProperty(document.documentElement, "lang", { value: "fi", configurable: true });
+      expect(getCurrentLanguage()).toBe("fi");
+      expect(getLanguage()).toBe("fi");
+    });
+    it("should return correct language when html Lang is present and set to sv", () => {
+      Object.defineProperty(document.documentElement, "lang", { value: "sv", configurable: true });
+      expect(getCurrentLanguage()).toBe("sv");
+      expect(getLanguage()).toBe("sv");
+    });
+    it("should return correct language when html Lang is present and set to en", () => {
+      Object.defineProperty(document.documentElement, "lang", { value: "en", configurable: true });
+      expect(getCurrentLanguage()).toBe("en");
+      expect(getLanguage()).toBe("en");
+    });
+    it("should return correct language when html Lang is present and set to dk", () => {
+      Object.defineProperty(document.documentElement, "lang", { value: "dk", configurable: true });
+      expect(getCurrentLanguage()).toBe("dk");
+      expect(getLanguage()).toBe("fi");
+    });
+  });
+  describe("avoid introducing breaking changes where label as String mutates to Object", () => {
+    /**
+     * We want to make sure that no regressions or breaking changes are introduced when converting props such as
+      @Prop() accessibleLabel: string = "Sulje viesti"
+
+     to
+
+     @Prop() accessibleLabel: string = getLocaleString({
+              fi: "default finnish",
+              sv: "default swedish",
+              en: "default english",
+            })
+     */
+    const somePresetObject = {
+      fi: "preset finnish",
+      sv: "preset swedish",
+      en: "preset english",
+    };
+    const mockStringAsProperty = (variable) => {
+      return variable ? variable : getLocaleString(somePresetObject);
+    };
+    it("should not fail when label is a string", () => {
+      const testString = "some thing that is a string";
+      const resultString = mockStringAsProperty(testString);
+      const resultStringUndef = mockStringAsProperty(undefined);
+      const resultStringEmpty = mockStringAsProperty();
+      const resultStringNull = mockStringAsProperty(null);
+      expect(resultString).toBe(testString);
+      expect(resultStringEmpty).toBe(somePresetObject.fi);
+      expect(resultStringNull).toBe(somePresetObject.fi);
+      expect(resultStringUndef).toBe(somePresetObject.fi);
+    });
+  });
+});

package/lib/collection/utils/math.utils.spec.js

@@ -0,0 +1,140 @@
+/*!
+ * Built with Duet Design System
+ */
+import { clamp, roundTo, SafeParseFloat } from "./math.utils";
+describe("math utils", () => {
+  describe("roundTo", () => {
+    it("should round to whole numbers", () => {
+      expect(roundTo(123, 5)).toBe(125);
+      expect(roundTo(111, 5)).toBe(110);
+    });
+    it("should round to negative whole numbers", () => {
+      expect(roundTo(-123, 5)).toBe(-125);
+      expect(roundTo(-111, 5)).toBe(-110);
+    });
+    it("should round to decimal numbers", () => {
+      expect(roundTo(1.3, 0.5)).toBe(1.5);
+      expect(roundTo(1.2, 0.5)).toBe(1);
+      expect(roundTo(1.2, 1.5)).toBe(1.5);
+    });
+    it("should round to negative decimal numbers", () => {
+      expect(roundTo(-1.3, 0.5)).toBe(-1.5);
+      expect(roundTo(-1.2, 0.5)).toBe(-1);
+      expect(roundTo(-1.2, 1.5)).toBe(-1.5);
+    });
+  });
+  describe("clamp", () => {
+    it("should return value if in range", () => {
+      expect(clamp(5, 0, 10)).toBe(5);
+    });
+    it("should return min if value < min", () => {
+      expect(clamp(-5, 0, 10)).toBe(0);
+    });
+    it("should return max if value > max", () => {
+      expect(clamp(15, 0, 10)).toBe(10);
+    });
+    it("should return max if value > max for negative min", () => {
+      expect(clamp(15, -10, 10)).toBe(10);
+    });
+    it("should return min if value < min for negative min", () => {
+      expect(clamp(-15, -10, 10)).toBe(-10);
+    });
+  });
+  describe("SafeParseFloat with locale", () => {
+    it("should parse numbers in Swedish locale", () => {
+      expect(SafeParseFloat("12345,67", "sv-SE")).toBe(12345.67);
+      expect(SafeParseFloat("12 345,67", "sv-SE")).toBe(12345.67);
+      expect(SafeParseFloat("12 345,67€", "sv-SE")).toBe(12345.67);
+    });
+    it("should parse numbers in Finnish locale", () => {
+      expect(SafeParseFloat("12345,67", "fi-FI")).toBe(12345.67);
+      expect(SafeParseFloat("12 345,67", "fi-FI")).toBe(12345.67);
+      expect(SafeParseFloat("12 345,67€", "fi-FI")).toBe(12345.67);
+    });
+    it("should parse numbers in English locale", () => {
+      expect(SafeParseFloat("12345.67", "en-GB")).toBe(12345.67);
+      expect(SafeParseFloat("12,345.67", "en-GB")).toBe(12345.67);
+      expect(SafeParseFloat("12,345.67€", "en-GB")).toBe(12345.67);
+    });
+    it("should throw if something not a number is supplied", () => {
+      // @ts-ignore
+      expect(() => SafeParseFloat("definitely not a 10100 number ", "it-IT")).toThrow(Error);
+    });
+    it("should support negqative values", () => {
+      // @ts-ignore
+      expect(SafeParseFloat("-12 345,67€", "fi-FI")).toBe(-12345.67);
+      expect(SafeParseFloat("-12 345,67€", "sv-SE")).toBe(-12345.67);
+      expect(SafeParseFloat("-1€", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-1", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-1 €", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-1 ", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-10 ", "fi-FI")).toBe(-10);
+      expect(SafeParseFloat("- 10 ", "fi-FI")).toBe(-10);
+    });
+  });
+});
+describe("math-utils negative numbers", () => {
+  describe("roundTo", () => {
+    it("should round to negative decimal numbers", () => {
+      expect(roundTo(-1.3, 0.5)).toBe(-1.5);
+      expect(roundTo(-1.2, 0.5)).toBe(-1);
+      expect(roundTo(-1.2, 1.5)).toBe(-1.5);
+    });
+  });
+  describe("clamp", () => {
+    it("should return value if in range", () => {
+      expect(clamp(5, 0, 10)).toBe(5);
+    });
+    it("should return min if value < min", () => {
+      expect(clamp(-5, 0, 10)).toBe(0);
+    });
+    it("should return max if value > max", () => {
+      expect(clamp(15, 0, 10)).toBe(10);
+    });
+    it("should return max if value > max for negative min", () => {
+      expect(clamp(15, -10, 10)).toBe(10);
+    });
+    it("should return min if value < min for negative min", () => {
+      expect(clamp(-15, -10, 10)).toBe(-10);
+    });
+  });
+  describe("SafeParseFloat", () => {
+    it("should parse numbers in Swedish locale", () => {
+      expect(SafeParseFloat("-2", "sv-SE")).toBe(-2);
+      expect(SafeParseFloat("-2 €", "sv-SE")).toBe(-2);
+      expect(SafeParseFloat("-2€", "sv-SE")).toBe(-2);
+      expect(SafeParseFloat("- 2 €", "sv-SE")).toBe(-2);
+    });
+    it("should parse numbers in Finnish locale", () => {
+      expect(SafeParseFloat("-2", "fi-FI")).toBe(-2);
+      expect(SafeParseFloat("-2 €", "fi-FI")).toBe(-2);
+      expect(SafeParseFloat("-2€", "fi-FI")).toBe(-2);
+      expect(SafeParseFloat("- 2 €", "fi-FI")).toBe(-2);
+    });
+    it("should parse numbers in English locale", () => {
+      expect(SafeParseFloat("-2", "en-GB")).toBe(-2);
+      expect(SafeParseFloat("-2 €", "en-GB")).toBe(-2);
+      expect(SafeParseFloat("-2€", "en-GB")).toBe(-2);
+      expect(SafeParseFloat("- 2 €", "en-GB")).toBe(-2);
+    });
+    it("should not throw if unknown locale supplied", () => {
+      // @ts-ignore
+      expect(() => SafeParseFloat("12.345,67", "enokian")).not.toThrow(TypeError);
+    });
+    it("should support negative values", () => {
+      // @ts-ignore
+      expect(SafeParseFloat("-12 345,67€", "fi-FI")).toBe(-12345.67);
+      expect(SafeParseFloat("-12 345,67€", "sv-SE")).toBe(-12345.67);
+      expect(SafeParseFloat("-12 345.67€", "en-GB")).toBe(-12345.67);
+      expect(SafeParseFloat("-12 345,67€", "fi-FI")).toBe(-12345.67);
+      expect(SafeParseFloat("-12 345,67€", "sv-SE")).toBe(-12345.67);
+      expect(SafeParseFloat("-12,345.67€", "en-GB")).toBe(-12345.67);
+      expect(SafeParseFloat("-1€", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-1", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-1 €", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-1 ", "fi-FI")).toBe(-1);
+      expect(SafeParseFloat("-10 ", "fi-FI")).toBe(-10);
+      expect(SafeParseFloat("- 10 ", "fi-FI")).toBe(-10);
+    });
+  });
+});

package/lib/collection/utils/nudge.js

@@ -0,0 +1,14 @@
+/*!
+ * Built with Duet Design System
+ */
+/**
+ * This function is a workaround for a bug in Chromium-based browsers, where building the accessibility tree fails
+ * with nested shadow roots. See https://atlassian.lahitapiola.fi/jira/browse/DUET-780
+ */
+export function nudge(component) {
+  setTimeout(() => {
+    const el = document.createElement("template");
+    component.element.appendChild(el);
+    el.remove();
+  }, 10);
+}

package/lib/collection/utils/string-utils.spec.js

@@ -0,0 +1,39 @@
+/*!
+ * Built with Duet Design System
+ */
+import { parsePossibleJSON } from "./string-utils";
+describe("string-utils", () => {
+  describe("parsePossibleString", () => {
+    it("returns exact same object, if object is passed", () => {
+      const object = { hello: "world" };
+      expect(parsePossibleJSON(object)).toBe(object);
+    });
+    it("returns exact same array, if array is passed", () => {
+      const array = [{ hello: "world" }];
+      expect(parsePossibleJSON(array)).toBe(array);
+    });
+    it("parses string arguments as JSON", () => {
+      const object = { hello: "world" };
+      const stringifiedObject = JSON.stringify(object);
+      expect(parsePossibleJSON(stringifiedObject)).toEqual(object);
+    });
+    it("gracefully handles malformed/invalid JSON", () => {
+      // spy on console.warn so we can assert it was called, and avoid mess in test output
+      const spy = jest.spyOn(global.console, "warn").mockImplementation(() => jest.fn());
+      // intentionally invalid JSON - unquoted property name
+      const stringifiedObject = '{ hello: "world" }';
+      expect(parsePossibleJSON(stringifiedObject)).toBe(undefined);
+      expect(console.warn).toHaveBeenCalled();
+      spy.mockRestore();
+    });
+    it("returns undefined for other types of data", () => {
+      expect(parsePossibleJSON(null)).toBe(undefined);
+      expect(parsePossibleJSON(undefined)).toBe(undefined);
+      expect(parsePossibleJSON(function () {
+        /*intentionally empty*/
+      })).toBe(undefined);
+      expect(parsePossibleJSON(true)).toBe(undefined);
+      expect(parsePossibleJSON(12345)).toBe(undefined);
+    });
+  });
+});

package/lib/collection/utils/teleport.js

@@ -10,7 +10,6 @@
  */
 export class Teleport {
   constructor(element, target) {
-    this.isReact = this._isReact();
     this.isActive = false;
     this.element = element;
     this.target = target || document.body;
@@ -20,13 +19,12 @@ export class Teleport {
    * @param makeSiblingsInert - make all siblings of the element inert, use only with modals
    */
   go(makeSiblingsInert = false) {
-    // Teleporting breaks modals in React
-    if (this.isReact && makeSiblingsInert) {
-      return;
+    // React handles teleporting itself with portals
+    if (!this.element.dataset.reactPortal) {
+      this.stub = document.createElement("template");
+      this.element.insertAdjacentElement("afterend", this.stub);
+      this.target.appendChild(this.element);
     }
-    this.stub = document.createElement("div");
-    this.element.insertAdjacentElement("afterend", this.stub);
-    this.target.appendChild(this.element);
     if (makeSiblingsInert) {
       this._makeSiblingsInert();
     }
@@ -47,8 +45,10 @@ export class Teleport {
     }
   }
   _resume() {
-    this.stub.insertAdjacentElement("beforebegin", this.element);
-    this.stub.remove();
+    if (!this.element.dataset.reactPortal) {
+      this.stub.insertAdjacentElement("beforebegin", this.element);
+      this.stub.remove();
+    }
     this._removeInertFromSiblings();
     this.deletionObserver.disconnect();
   }
@@ -92,7 +92,4 @@ export class Teleport {
       }
     });
   }
-  _isReact() {
-    return !!Object.keys(document).find(key => key.includes("react"));
-  }
 }