@tapcart/mobile-components 0.14.5 → 0.14.6

package/dist/components/ui/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAyChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAiBjB,CAAA;AA+DD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;AAuID,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,cAAc,EACd,GAAG,KAAK,EACT,EAAE,SAAS,2CA+BX;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAyChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAiBjB,CAAA;AA+DD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;AA8ID,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,cAAc,EACd,GAAG,KAAK,EACT,EAAE,SAAS,2CA+BX;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/icon.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { ReactSVG } from "react-svg";
 import { cva } from "class-variance-authority";
 import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconChevronLeft, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconColumns1, IconColumns2, IconColumns3, IconSearch, IconShoppingCartOff, IconStarFilled, IconShoppingBagPlus, IconShieldCheckFilled, IconShoppingBag, IconHeartCancel, IconStar, } from "@tabler/icons-react";
@@ -93,62 +94,72 @@ const TablerIcon = ({ name, size }) => {
     return IconComponent ? (_jsx(IconComponent, { size: sizeMapping[size], strokeWidth: strokeWidthMapping[size] })) : null;
 };
 const CustomIcon = ({ url, size, color, strokeColor, strokeWidth, fillColor, fillPercentage, secondaryFillColor, }) => {
-    return (_jsx(ReactSVG, { src: url, beforeInjection: (svg) => {
-            svg.setAttribute("style", `width: ${sizeMapping[size]}px; height: ${sizeMapping[size]}px`);
-            const paths = svg.querySelectorAll("path");
-            paths.forEach((path) => {
-                if (color) {
-                    if (path.hasAttribute("fill") && fillPercentage === 1) {
-                        path.setAttribute("fill", color);
-                    }
-                    path.setAttribute("stroke", color);
+    // Stable identity keeps ReactSVG from tearing down and re-injecting on every
+    // parent re-render — concurrent same-URL injections race inside
+    // @tanem/svg-injector (Sentry NEXTJS-CONSUMER-PAGES-78B).
+    const beforeInjection = React.useCallback((svg) => {
+        svg.setAttribute("style", `width: ${sizeMapping[size]}px; height: ${sizeMapping[size]}px`);
+        const paths = svg.querySelectorAll("path");
+        paths.forEach((path) => {
+            if (color) {
+                if (path.hasAttribute("fill") && fillPercentage === 1) {
+                    path.setAttribute("fill", color);
                 }
-                else {
-                    if (fillColor &&
-                        path.hasAttribute("fill") &&
-                        fillPercentage === 1) {
-                        path.setAttribute("fill", fillColor);
-                    }
-                    if (strokeColor) {
-                        path.setAttribute("stroke", strokeColor);
-                    }
+                path.setAttribute("stroke", color);
+            }
+            else {
+                if (fillColor && path.hasAttribute("fill") && fillPercentage === 1) {
+                    path.setAttribute("fill", fillColor);
                 }
-                if (path.hasAttribute("stroke")) {
-                    path.setAttribute("stroke-width", strokeWidthMapping[size].toString());
+                if (strokeColor) {
+                    path.setAttribute("stroke", strokeColor);
                 }
-                // Override stroke width if one is provided
-                if (strokeWidth != null && path.hasAttribute("stroke")) {
-                    path.setAttribute("stroke-width", strokeWidth.toString());
+            }
+            if (path.hasAttribute("stroke")) {
+                path.setAttribute("stroke-width", strokeWidthMapping[size].toString());
+            }
+            // Override stroke width if one is provided
+            if (strokeWidth != null && path.hasAttribute("stroke")) {
+                path.setAttribute("stroke-width", strokeWidth.toString());
+            }
+            // Create a gradient fill based on the fillPercentage
+            if (fillPercentage && fillPercentage > 0 && fillPercentage < 1) {
+                const percentage = Math.min(Math.max(fillPercentage, 0), 1);
+                const uniqueId = crypto.randomUUID();
+                const fillGradientId = `fill-gradient-${uniqueId}`;
+                let defs = svg.querySelector("defs");
+                if (!defs) {
+                    defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+                    svg.prepend(defs);
                 }
-                // Create a gradient fill based on the fillPercentage
-                if (fillPercentage && fillPercentage > 0 && fillPercentage < 1) {
-                    const percentage = Math.min(Math.max(fillPercentage, 0), 1);
-                    const uniqueId = crypto.randomUUID();
-                    const fillGradientId = `fill-gradient-${uniqueId}`;
-                    let defs = svg.querySelector("defs");
-                    if (!defs) {
-                        defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-                        svg.prepend(defs);
-                    }
-                    const fillGradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
-                    fillGradient.setAttribute("id", fillGradientId);
-                    fillGradient.setAttribute("x1", "0%");
-                    fillGradient.setAttribute("y1", "0%");
-                    fillGradient.setAttribute("x2", "100%");
-                    fillGradient.setAttribute("y2", "0%");
-                    const fillStop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
-                    fillStop1.setAttribute("offset", `${percentage * 100}%`);
-                    fillStop1.setAttribute("stop-color", color || fillColor || "transparent");
-                    fillGradient.appendChild(fillStop1);
-                    const fillStop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
-                    fillStop2.setAttribute("offset", `${percentage * 100}%`);
-                    fillStop2.setAttribute("stop-color", secondaryFillColor || "transparent");
-                    fillGradient.appendChild(fillStop2);
-                    defs.appendChild(fillGradient);
-                    path.setAttribute("fill", `url(#${fillGradientId})`);
-                }
-            });
-        } }));
+                const fillGradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
+                fillGradient.setAttribute("id", fillGradientId);
+                fillGradient.setAttribute("x1", "0%");
+                fillGradient.setAttribute("y1", "0%");
+                fillGradient.setAttribute("x2", "100%");
+                fillGradient.setAttribute("y2", "0%");
+                const fillStop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+                fillStop1.setAttribute("offset", `${percentage * 100}%`);
+                fillStop1.setAttribute("stop-color", color || fillColor || "transparent");
+                fillGradient.appendChild(fillStop1);
+                const fillStop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+                fillStop2.setAttribute("offset", `${percentage * 100}%`);
+                fillStop2.setAttribute("stop-color", secondaryFillColor || "transparent");
+                fillGradient.appendChild(fillStop2);
+                defs.appendChild(fillGradient);
+                path.setAttribute("fill", `url(#${fillGradientId})`);
+            }
+        });
+    }, [
+        size,
+        color,
+        fillColor,
+        strokeColor,
+        strokeWidth,
+        fillPercentage,
+        secondaryFillColor,
+    ]);
+    return _jsx(ReactSVG, { src: url, beforeInjection: beforeInjection });
 };
 function Icon(_a) {
     var { className, name, size = "md", color, url, fillColor, secondaryFillColor, strokeColor, strokeWidth, fillPercentage } = _a, props = __rest(_a, ["className", "name", "size", "color", "url", "fillColor", "secondaryFillColor", "strokeColor", "strokeWidth", "fillPercentage"]);

package/dist/tests/icon-before-injection-identity.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=icon-before-injection-identity.test.d.ts.map

package/dist/tests/icon-before-injection-identity.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-before-injection-identity.test.d.ts","sourceRoot":"","sources":["../../tests/icon-before-injection-identity.test.tsx"],"names":[],"mappings":""}

package/dist/tests/icon-before-injection-identity.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+import { Icon } from "../components/ui/icon";
+// A stable beforeInjection identity is what stops react-svg's shallowDiffers
+// check from tearing down and re-injecting the SVG on every parent re-render —
+// the amplifier behind Sentry NEXTJS-CONSUMER-PAGES-78B.
+const mockBeforeInjections = [];
+jest.mock("react-svg", () => ({
+    ReactSVG: ({ beforeInjection, }) => {
+        mockBeforeInjections.push(beforeInjection);
+        return null;
+    },
+}));
+describe("Icon beforeInjection identity", () => {
+    beforeEach(() => {
+        mockBeforeInjections.length = 0;
+    });
+    it("keeps the same beforeInjection reference across rerenders with identical props", () => {
+        const { rerender } = render(_jsx(Icon, { url: "https://assets.example.com/icon.svg", color: "red", size: "md" }));
+        rerender(_jsx(Icon, { url: "https://assets.example.com/icon.svg", color: "red", size: "md" }));
+        expect(mockBeforeInjections).toHaveLength(2);
+        expect(mockBeforeInjections[1]).toBe(mockBeforeInjections[0]);
+    });
+    it("produces a new beforeInjection reference when a styling prop changes", () => {
+        const { rerender } = render(_jsx(Icon, { url: "https://assets.example.com/icon.svg", color: "red", size: "md" }));
+        rerender(_jsx(Icon, { url: "https://assets.example.com/icon.svg", color: "blue", size: "md" }));
+        expect(mockBeforeInjections).toHaveLength(2);
+        expect(mockBeforeInjections[1]).not.toBe(mockBeforeInjections[0]);
+    });
+});

package/dist/tests/svg-injector-double-delivery.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=svg-injector-double-delivery.test.d.ts.map

package/dist/tests/svg-injector-double-delivery.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg-injector-double-delivery.test.d.ts","sourceRoot":"","sources":["../../tests/svg-injector-double-delivery.test.ts"],"names":[],"mappings":""}

package/dist/tests/svg-injector-double-delivery.test.js

@@ -0,0 +1,117 @@
+import { SVGInjector } from "@tanem/svg-injector";
+// Deterministic repro of Sentry NEXTJS-CONSUMER-PAGES-78B: @tanem/svg-injector
+// shares one module-level request queue + cache per URL; a cached Error
+// re-arms the cache and re-issues the XHR while the old queue entries stay
+// live, so a later successful pass re-delivers to an injection that already
+// finalized (el = null) and crashes on el.getAttribute("id"). Our pnpm patch
+// (patches/@tanem__svg-injector@10.1.68.patch) drops the stale delivery.
+class MockXHR {
+    constructor() {
+        this.onreadystatechange = null;
+        this.readyState = 0;
+        this.status = 0;
+        this.statusText = "";
+        this.responseXML = null;
+        this.withCredentials = false;
+        MockXHR.instances.push(this);
+    }
+    open() { }
+    send() { }
+    overrideMimeType() { }
+    getResponseHeader() {
+        return "image/svg+xml";
+    }
+    // No-op: the spec's abort-refires-readystatechange aggravator is excluded
+    // so the scripted interleaving stays exact.
+    abort() { }
+    fail() {
+        var _a;
+        this.readyState = 4;
+        this.status = 404;
+        this.responseXML = null;
+        (_a = this.onreadystatechange) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    succeed(svgMarkup) {
+        var _a;
+        this.readyState = 4;
+        this.status = 200;
+        this.responseXML = new DOMParser().parseFromString(svgMarkup, "image/svg+xml");
+        (_a = this.onreadystatechange) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}
+MockXHR.instances = [];
+const makeTarget = (url) => {
+    const wrapper = document.createElement("div");
+    wrapper.setAttribute("data-src", url);
+    const container = document.createElement("div");
+    container.appendChild(wrapper);
+    document.body.appendChild(container);
+    return { wrapper, container };
+};
+const realXHR = window.XMLHttpRequest;
+describe("svg-injector stale queue re-delivery", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+        window.XMLHttpRequest = MockXHR;
+        MockXHR.instances.length = 0;
+    });
+    afterEach(() => {
+        jest.useRealTimers();
+        window.XMLHttpRequest = realXHR;
+        document.body.innerHTML = "";
+    });
+    it("drops re-delivery to a finalized injection instead of crashing, and still injects the live target", () => {
+        const url = "https://assets.example.com/double-delivery.svg";
+        const targetA = makeTarget(url);
+        const targetC = makeTarget(url);
+        const targetE = makeTarget(url);
+        const deliveries = [];
+        // 1. A starts the request for U -> queue [cbA], XHR1 in flight.
+        SVGInjector(targetA.wrapper, {
+            afterEach: (error) => deliveries.push({ id: "A", error }),
+        });
+        expect(MockXHR.instances).toHaveLength(1);
+        // XHR1 errors -> cache = Error, error pass P1 scheduled via setTimeout(0).
+        MockXHR.instances[0].fail();
+        // 2. C injects U before P1's timer fires: the cached Error falls through,
+        //    re-arms the cache to undefined and re-issues the XHR -> queue
+        //    [cbA, cbC], XHR2 in flight.
+        SVGInjector(targetC.wrapper, {
+            afterEach: (error) => {
+                deliveries.push({ id: "C", error });
+                // 4. E injects U from inside C's error delivery (pass-2, index 1):
+                //    the queue grows to [cbA, cbC, cbE], so the pass's last-index
+                //    cleanup never fires and the finalized cbA stays queued.
+                SVGInjector(targetE.wrapper, {
+                    afterEach: (innerError) => deliveries.push({ id: "E", error: innerError }),
+                });
+            },
+        });
+        expect(MockXHR.instances).toHaveLength(2);
+        // 3. P1 runs against the re-armed (undefined) cache: no delivery, and the
+        //    queue is not cleaned up because it grew past P1's snapshot.
+        jest.runOnlyPendingTimers();
+        expect(deliveries).toHaveLength(0);
+        // XHR2 errors -> pass P2 delivers the error to A (finalizing it, el =
+        // null) and to C, whose callback injects E and re-issues XHR3.
+        MockXHR.instances[1].fail();
+        jest.runOnlyPendingTimers();
+        expect(deliveries.map((d) => d.id)).toEqual(["A", "C"]);
+        expect(MockXHR.instances).toHaveLength(3);
+        // XHR3 succeeds -> pass P3 walks the surviving queue from index 0,
+        // re-delivering a cloned SVG to the finalized cbA. Unpatched, this throws
+        // TypeError (el.getAttribute on null) out of the timer flush.
+        MockXHR.instances[2].succeed('<svg xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z"/></svg>');
+        expect(() => jest.runOnlyPendingTimers()).not.toThrow();
+        // The stale deliveries were dropped, not double-fired.
+        expect(deliveries.filter((d) => d.id === "A")).toHaveLength(1);
+        expect(deliveries.filter((d) => d.id === "C")).toHaveLength(1);
+        // The live target E still completes: its wrapper is replaced with the SVG.
+        expect(deliveries).toEqual([
+            { id: "A", error: expect.any(Error) },
+            { id: "C", error: expect.any(Error) },
+            { id: "E", error: null },
+        ]);
+        expect(targetE.container.querySelector("svg.injected-svg")).not.toBeNull();
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.14.5",
+  "version": "0.14.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",