@pack/react 4.3.2 → 4.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pack-context.d.ts","sourceRoot":"","sources":["../../src/pack/pack-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAKf,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,cAAc,CAAC,EAAE;YACf,MAAM,CAAC,EAAE,MAAM,CAAC;YAChB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;SAC5B,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;IAClB,eAAe,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,CAAC;IACT,SAAS,EAAE,CACT,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,KACL,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,iCAUtB,CAAC;AAEH,eAAO,MAAM,cAAc,wBAAgC,CAAC;AAE5D,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,CAAC;IACT,WAAW,CAAC,EAAE,GAAG,CAAC;CACnB;AAUD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,oBAA4B,EAC5B,YAAY,EAAE,yBAAyB,EACvC,cAAc,EACd,kBAAuB,EACvB,MAAM,EAAE,aAAoB,GAC7B,EAAE,gBAAgB,qBAuDlB;AAED,eAAO,MAAM,eAAe,qBAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"pack-context.d.ts","sourceRoot":"","sources":["../../src/pack/pack-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAKf,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,cAAc,CAAC,EAAE;YACf,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,MAAM,CAAC,EAAE,MAAM,CAAC;YAChB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;SAC5B,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;IAClB,eAAe,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,CAAC;IACT,SAAS,EAAE,CACT,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,KACL,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,iCAUtB,CAAC;AAEH,eAAO,MAAM,cAAc,wBAAgC,CAAC;AAE5D,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,GAAG,IAAI,CAAC;IACT,WAAW,CAAC,EAAE,GAAG,CAAC;CACnB;AAUD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,oBAA4B,EAC5B,YAAY,EAAE,yBAAyB,EACvC,cAAc,EACd,kBAAuB,EACvB,MAAM,EAAE,aAAoB,GAC7B,EAAE,gBAAgB,qBAuDlB;AAED,eAAO,MAAM,eAAe,qBAAe,CAAC"}
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
interface PreviewContext {
|
|
3
|
+
linkName?: string;
|
|
4
|
+
releaseId?: string;
|
|
5
|
+
releaseName?: string;
|
|
6
|
+
locale?: string;
|
|
7
|
+
pageDraft?: string;
|
|
8
|
+
siteSettingsDraft?: string;
|
|
9
|
+
testHandle?: string;
|
|
10
|
+
testVariantHandle?: string;
|
|
11
|
+
}
|
|
2
12
|
interface PreviewToastProps {
|
|
3
13
|
isPreviewModeEnabled: boolean;
|
|
4
14
|
environment?: string;
|
|
5
|
-
previewContext?:
|
|
6
|
-
locale?: string;
|
|
7
|
-
pageDraft?: string;
|
|
8
|
-
siteSettingsDraft?: string;
|
|
9
|
-
testHandle?: string;
|
|
10
|
-
testVariantHandle?: string;
|
|
11
|
-
};
|
|
15
|
+
previewContext?: PreviewContext;
|
|
12
16
|
}
|
|
17
|
+
export declare const buildPreviewMessage: (environment?: string, previewContext?: PreviewContext) => string;
|
|
13
18
|
export declare const PreviewToast: ({ isPreviewModeEnabled, environment, previewContext, }: PreviewToastProps) => React.JSX.Element | null;
|
|
14
19
|
export {};
|
|
15
20
|
//# sourceMappingURL=preview-toast.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preview-toast.d.ts","sourceRoot":"","sources":["../../src/pack/preview-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,
|
|
1
|
+
{"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"}
|
|
@@ -3,6 +3,45 @@ const Eye = (props) => {
|
|
|
3
3
|
return (React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
|
|
4
4
|
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" })));
|
|
5
5
|
};
|
|
6
|
+
export const buildPreviewMessage = (environment, previewContext) => {
|
|
7
|
+
const primaryContextParts = [];
|
|
8
|
+
const secondaryContextParts = [];
|
|
9
|
+
if (previewContext?.linkName) {
|
|
10
|
+
primaryContextParts.push(`preview link: ${previewContext.linkName}`);
|
|
11
|
+
}
|
|
12
|
+
else if (previewContext?.releaseName) {
|
|
13
|
+
primaryContextParts.push(`content release: ${previewContext.releaseName}`);
|
|
14
|
+
}
|
|
15
|
+
else if (previewContext?.releaseId) {
|
|
16
|
+
primaryContextParts.push("content release");
|
|
17
|
+
}
|
|
18
|
+
if (previewContext?.locale) {
|
|
19
|
+
secondaryContextParts.push(`locale: ${previewContext.locale}`);
|
|
20
|
+
}
|
|
21
|
+
if (previewContext?.pageDraft) {
|
|
22
|
+
secondaryContextParts.push(`page: ${previewContext.pageDraft}`);
|
|
23
|
+
}
|
|
24
|
+
if (previewContext?.siteSettingsDraft) {
|
|
25
|
+
secondaryContextParts.push(`settings: ${previewContext.siteSettingsDraft}`);
|
|
26
|
+
}
|
|
27
|
+
// Backpack uses a lone `control` variant as a neutral preview fallback.
|
|
28
|
+
// Only describe an A/B test when the preview carries a complete test context.
|
|
29
|
+
if (previewContext?.testHandle && previewContext.testVariantHandle) {
|
|
30
|
+
secondaryContextParts.push(`test: ${previewContext.testVariantHandle}`);
|
|
31
|
+
}
|
|
32
|
+
if (primaryContextParts.length === 0 && secondaryContextParts.length === 0) {
|
|
33
|
+
const baseMessage = "You are currently previewing your storefront with draft content";
|
|
34
|
+
return environment
|
|
35
|
+
? `${baseMessage} on ${environment} environment`
|
|
36
|
+
: baseMessage;
|
|
37
|
+
}
|
|
38
|
+
const parts = ["Previewing", ...primaryContextParts];
|
|
39
|
+
if (environment) {
|
|
40
|
+
parts.push(`${environment} environment`);
|
|
41
|
+
}
|
|
42
|
+
parts.push(...secondaryContextParts);
|
|
43
|
+
return parts.join(" • ");
|
|
44
|
+
};
|
|
6
45
|
export const PreviewToast = ({ isPreviewModeEnabled, environment, previewContext, }) => {
|
|
7
46
|
const [showToast, setShowToast] = useState(false);
|
|
8
47
|
const exitPreviewMode = async () => {
|
|
@@ -28,51 +67,28 @@ export const PreviewToast = ({ isPreviewModeEnabled, environment, previewContext
|
|
|
28
67
|
setShowToast(true);
|
|
29
68
|
}
|
|
30
69
|
}, [isPreviewModeEnabled]);
|
|
31
|
-
const buildPreviewMessage = () => {
|
|
32
|
-
const contextParts = [];
|
|
33
|
-
if (previewContext?.locale) {
|
|
34
|
-
contextParts.push(`locale: ${previewContext.locale}`);
|
|
35
|
-
}
|
|
36
|
-
if (previewContext?.pageDraft) {
|
|
37
|
-
contextParts.push(`page: ${previewContext.pageDraft}`);
|
|
38
|
-
}
|
|
39
|
-
if (previewContext?.siteSettingsDraft) {
|
|
40
|
-
contextParts.push(`settings: ${previewContext.siteSettingsDraft}`);
|
|
41
|
-
}
|
|
42
|
-
if (previewContext?.testVariantHandle) {
|
|
43
|
-
contextParts.push(`test: ${previewContext.testVariantHandle}`);
|
|
44
|
-
}
|
|
45
|
-
if (contextParts.length === 0) {
|
|
46
|
-
const baseMessage = "You are currently previewing your storefront with draft content";
|
|
47
|
-
return environment
|
|
48
|
-
? `${baseMessage} on ${environment} environment`
|
|
49
|
-
: baseMessage;
|
|
50
|
-
}
|
|
51
|
-
const parts = ["Previewing"];
|
|
52
|
-
if (environment) {
|
|
53
|
-
parts.push(`${environment} environment`);
|
|
54
|
-
}
|
|
55
|
-
parts.push(...contextParts);
|
|
56
|
-
return parts.join(" • ");
|
|
57
|
-
};
|
|
58
70
|
if (showToast) {
|
|
59
|
-
return (React.createElement("div", { style: {
|
|
71
|
+
return (React.createElement("div", { "data-pack-preview-toast": true, style: {
|
|
60
72
|
position: "fixed",
|
|
61
73
|
zIndex: "2147483647",
|
|
62
|
-
left:
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
74
|
+
left: 0,
|
|
75
|
+
right: 0,
|
|
76
|
+
paddingLeft: "max(16px, env(safe-area-inset-left))",
|
|
77
|
+
paddingRight: "max(16px, env(safe-area-inset-right))",
|
|
78
|
+
bottom: "max(16px, env(safe-area-inset-bottom))",
|
|
66
79
|
width: "100%",
|
|
80
|
+
boxSizing: "border-box",
|
|
67
81
|
pointerEvents: "none",
|
|
68
82
|
} },
|
|
69
|
-
React.createElement("div", { style: {
|
|
83
|
+
React.createElement("div", { "data-pack-preview-toast-content": true, style: {
|
|
70
84
|
margin: "0 auto",
|
|
71
85
|
pointerEvents: "auto",
|
|
72
|
-
minWidth: "640px",
|
|
86
|
+
minWidth: "min(640px, 100%)",
|
|
87
|
+
maxWidth: "min(960px, 100%)",
|
|
73
88
|
boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10)",
|
|
74
89
|
width: "fit-content",
|
|
75
|
-
|
|
90
|
+
boxSizing: "border-box",
|
|
91
|
+
padding: "8px 12px",
|
|
76
92
|
backgroundColor: "#1f2937",
|
|
77
93
|
color: "#f9fafb",
|
|
78
94
|
borderRadius: "8px",
|
|
@@ -87,26 +103,38 @@ export const PreviewToast = ({ isPreviewModeEnabled, environment, previewContext
|
|
|
87
103
|
alignItems: "center",
|
|
88
104
|
gap: "8px",
|
|
89
105
|
overflow: "hidden",
|
|
106
|
+
flex: "1 1 auto",
|
|
107
|
+
minWidth: 0,
|
|
90
108
|
} },
|
|
91
109
|
React.createElement(Eye, { style: { width: 16, height: 16, minWidth: 16 } }),
|
|
92
110
|
React.createElement("p", { style: {
|
|
93
111
|
flex: 1,
|
|
112
|
+
minWidth: 0,
|
|
113
|
+
margin: 0,
|
|
94
114
|
fontSize: "14px",
|
|
95
115
|
lineHeight: "20px",
|
|
96
|
-
|
|
97
|
-
|
|
116
|
+
display: "-webkit-box",
|
|
117
|
+
WebkitBoxOrient: "vertical",
|
|
118
|
+
WebkitLineClamp: 2,
|
|
98
119
|
overflow: "hidden",
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
exitPreviewMode();
|
|
103
|
-
}
|
|
104
|
-
}, style: {
|
|
120
|
+
overflowWrap: "anywhere",
|
|
121
|
+
} }, buildPreviewMessage(environment, previewContext))),
|
|
122
|
+
React.createElement("button", { type: "button", "aria-label": "Exit preview mode", onClick: exitPreviewMode, style: {
|
|
105
123
|
cursor: "pointer",
|
|
106
124
|
fontSize: 13,
|
|
107
125
|
fontWeight: "500",
|
|
108
126
|
flexShrink: "0",
|
|
109
|
-
|
|
127
|
+
minHeight: 44,
|
|
128
|
+
padding: "6px 8px",
|
|
129
|
+
border: 0,
|
|
130
|
+
borderRadius: 4,
|
|
131
|
+
background: "transparent",
|
|
132
|
+
color: "inherit",
|
|
133
|
+
fontFamily: "inherit",
|
|
134
|
+
textDecoration: "underline",
|
|
135
|
+
textUnderlineOffset: 2,
|
|
136
|
+
whiteSpace: "nowrap",
|
|
137
|
+
} }, "Exit preview"))));
|
|
110
138
|
}
|
|
111
139
|
return null;
|
|
112
140
|
};
|
package/dist/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const VERSION = "4.3.
|
|
1
|
+
export const VERSION = "4.3.3";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pack/react",
|
|
3
3
|
"description": "React",
|
|
4
|
-
"version": "4.3.
|
|
4
|
+
"version": "4.3.3",
|
|
5
5
|
"exports": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
7
7
|
"engines": {
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@types/react": "^18.2.20",
|
|
29
|
+
"happy-dom": "^20.6.3",
|
|
29
30
|
"react": "^18.2.0",
|
|
30
31
|
"react-dom": "^18.2.0"
|
|
31
32
|
},
|