@pack/react 4.4.0 → 4.6.0

package/dist/use-customizer-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,kBAAkB,YAiT9B,CAAC"}
+{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,kBAAkB,YAkU9B,CAAC"}

package/dist/use-customizer-shell.js

@@ -183,24 +183,35 @@ export const useCustomizerShell = () => {
     // so SET_CURRENT_ROUTE fires even between pages that both lack CMS content.
     useEffect(() => {
         setCurrentPath(window.location.pathname);
-        const updatePath = () => setCurrentPath(window.location.pathname);
+        let active = true;
+        const updatePath = () => {
+            if (active)
+                setCurrentPath(window.location.pathname);
+        };
         // Intercept pushState/replaceState for client-side routing (e.g. React Router)
-        const originalPushState = history.pushState.bind(history);
-        const originalReplaceState = history.replaceState.bind(history);
-        history.pushState = (...args) => {
-            originalPushState(...args);
+        const originalPushState = history.pushState;
+        const originalReplaceState = history.replaceState;
+        const patchedPushState = function (...args) {
+            originalPushState.apply(this, args);
             updatePath();
         };
-        history.replaceState = (...args) => {
-            originalReplaceState(...args);
+        const patchedReplaceState = function (...args) {
+            originalReplaceState.apply(this, args);
             updatePath();
         };
+        history.pushState = patchedPushState;
+        history.replaceState = patchedReplaceState;
         // Handle back/forward navigation
         window.addEventListener("popstate", updatePath);
         return () => {
+            active = false;
             window.removeEventListener("popstate", updatePath);
-            history.pushState = originalPushState;
-            history.replaceState = originalReplaceState;
+            if (history.pushState === patchedPushState) {
+                history.pushState = originalPushState;
+            }
+            if (history.replaceState === patchedReplaceState) {
+                history.replaceState = originalReplaceState;
+            }
         };
     }, []);
     // Tell the parent window about the current route

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "4.4.0";
+export const VERSION = "4.6.0";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "4.4.0",
+  "version": "4.6.0",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {

package/dist/pack/preview-toast.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-interface PreviewContext {
-    linkName?: string;
-    releaseId?: string;
-    releaseName?: string;
-    locale?: string;
-    pageDraft?: string;
-    siteSettingsDraft?: string;
-    testHandle?: string;
-    testVariantHandle?: string;
-}
-interface PreviewToastProps {
-    isPreviewModeEnabled: boolean;
-    environment?: string;
-    previewContext?: PreviewContext;
-}
-export declare const buildPreviewMessage: (environment?: string, previewContext?: PreviewContext) => string;
-export declare const PreviewToast: ({ isPreviewModeEnabled, environment, previewContext, }: PreviewToastProps) => React.JSX.Element | null;
-export {};
-//# sourceMappingURL=preview-toast.d.ts.map

package/dist/pack/preview-toast.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-toast.d.ts","sourceRoot":"","sources":["../../src/pack/preview-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,UAAU,iBAAiB;IACzB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAsBD,eAAO,MAAM,mBAAmB,iBAChB,MAAM,mBACH,cAAc,WAgDhC,CAAC;AAEF,eAAO,MAAM,YAAY,2DAItB,iBAAiB,6BAkInB,CAAC"}

package/dist/pack/preview-toast.js

@@ -1,140 +0,0 @@
-import React, { useEffect, useState } from "react";
-const Eye = (props) => {
-    return (React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.75 12c0-.338.136-.905.493-1.591a7.858 7.858 0 0 1 1.64-2.108C6.374 6.926 8.694 5.75 12 5.75c3.308 0 5.627 1.176 7.116 2.551a7.86 7.86 0 0 1 1.64 2.108c.358.686.494 1.253.494 1.591 0 .338-.136.905-.493 1.591a7.86 7.86 0 0 1-1.64 2.108c-1.49 1.375-3.81 2.551-7.117 2.551-3.308 0-5.627-1.176-7.116-2.551a7.858 7.858 0 0 1-1.64-2.108c-.358-.686-.494-1.253-.494-1.591ZM12 4.25c-3.692 0-6.373 1.324-8.134 2.949a9.356 9.356 0 0 0-1.953 2.517c-.424.814-.663 1.622-.663 2.284 0 .662.24 1.47.663 2.284a9.356 9.356 0 0 0 1.953 2.517C5.627 18.426 8.308 19.75 12 19.75s6.373-1.324 8.134-2.949a9.356 9.356 0 0 0 1.953-2.517c.424-.814.663-1.622.663-2.284 0-.662-.24-1.47-.663-2.284a9.355 9.355 0 0 0-1.953-2.517C18.373 5.574 15.692 4.25 12 4.25ZM9.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5Z", fill: "currentColor" })));
-};
-export const buildPreviewMessage = (environment, previewContext) => {
-    const primaryContextParts = [];
-    const secondaryContextParts = [];
-    if (previewContext?.linkName) {
-        primaryContextParts.push(`preview link: ${previewContext.linkName}`);
-    }
-    else if (previewContext?.releaseName) {
-        primaryContextParts.push(`content release: ${previewContext.releaseName}`);
-    }
-    else if (previewContext?.releaseId) {
-        primaryContextParts.push("content release");
-    }
-    if (previewContext?.locale) {
-        secondaryContextParts.push(`locale: ${previewContext.locale}`);
-    }
-    if (previewContext?.pageDraft) {
-        secondaryContextParts.push(`page: ${previewContext.pageDraft}`);
-    }
-    if (previewContext?.siteSettingsDraft) {
-        secondaryContextParts.push(`settings: ${previewContext.siteSettingsDraft}`);
-    }
-    // Backpack uses a lone `control` variant as a neutral preview fallback.
-    // Only describe an A/B test when the preview carries a complete test context.
-    if (previewContext?.testHandle && previewContext.testVariantHandle) {
-        secondaryContextParts.push(`test: ${previewContext.testVariantHandle}`);
-    }
-    if (primaryContextParts.length === 0 && secondaryContextParts.length === 0) {
-        const baseMessage = "You are currently previewing your storefront with draft content";
-        return environment
-            ? `${baseMessage} on ${environment} environment`
-            : baseMessage;
-    }
-    const parts = ["Previewing", ...primaryContextParts];
-    if (environment) {
-        parts.push(`${environment} environment`);
-    }
-    parts.push(...secondaryContextParts);
-    return parts.join(" • ");
-};
-export const PreviewToast = ({ isPreviewModeEnabled, environment, previewContext, }) => {
-    const [showToast, setShowToast] = useState(false);
-    const exitPreviewMode = async () => {
-        try {
-            const response = await fetch("/api/edit", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/x-www-form-urlencoded",
-                },
-            });
-            if (!response.ok) {
-                throw new Error(`ERR_RE_API_ERROR: HTTP error! Status: ${response.status} Doc: https://docs.packdigital.com/err/ERR_RE_API_ERROR`);
-            }
-            window.location.reload();
-        }
-        catch (error) {
-            console.error("Error exiting preview:", error.message);
-        }
-    };
-    useEffect(() => {
-        const isIframe = window.self !== window.top;
-        if (isPreviewModeEnabled && !isIframe) {
-            setShowToast(true);
-        }
-    }, [isPreviewModeEnabled]);
-    if (showToast) {
-        return (React.createElement("div", { "data-pack-preview-toast": true, style: {
-                position: "fixed",
-                zIndex: "2147483647",
-                left: 0,
-                right: 0,
-                paddingLeft: "max(16px, env(safe-area-inset-left))",
-                paddingRight: "max(16px, env(safe-area-inset-right))",
-                bottom: "max(16px, env(safe-area-inset-bottom))",
-                width: "100%",
-                boxSizing: "border-box",
-                pointerEvents: "none",
-            } },
-            React.createElement("div", { "data-pack-preview-toast-content": true, style: {
-                    margin: "0 auto",
-                    pointerEvents: "auto",
-                    minWidth: "min(640px, 100%)",
-                    maxWidth: "min(960px, 100%)",
-                    boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10)",
-                    width: "fit-content",
-                    boxSizing: "border-box",
-                    padding: "8px 12px",
-                    backgroundColor: "#1f2937",
-                    color: "#f9fafb",
-                    borderRadius: "8px",
-                    display: "flex",
-                    alignItems: "center",
-                    fontFamily: '"Inter", sans-serif',
-                    justifyContent: "space-between",
-                    gap: "8px",
-                } },
-                React.createElement("div", { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "8px",
-                        overflow: "hidden",
-                        flex: "1 1 auto",
-                        minWidth: 0,
-                    } },
-                    React.createElement(Eye, { style: { width: 16, height: 16, minWidth: 16 } }),
-                    React.createElement("p", { style: {
-                            flex: 1,
-                            minWidth: 0,
-                            margin: 0,
-                            fontSize: "14px",
-                            lineHeight: "20px",
-                            display: "-webkit-box",
-                            WebkitBoxOrient: "vertical",
-                            WebkitLineClamp: 2,
-                            overflow: "hidden",
-                            overflowWrap: "anywhere",
-                        } }, buildPreviewMessage(environment, previewContext))),
-                React.createElement("button", { type: "button", "aria-label": "Exit preview mode", onClick: exitPreviewMode, style: {
-                        cursor: "pointer",
-                        fontSize: 13,
-                        fontWeight: "500",
-                        flexShrink: "0",
-                        minHeight: 44,
-                        padding: "6px 8px",
-                        border: 0,
-                        borderRadius: 4,
-                        background: "transparent",
-                        color: "inherit",
-                        fontFamily: "inherit",
-                        textDecoration: "underline",
-                        textUnderlineOffset: 2,
-                        whiteSpace: "nowrap",
-                    } }, "Exit preview"))));
-    }
-    return null;
-};