@knocklabs/react 0.8.0 → 0.8.2
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.
- package/CHANGELOG.md +19 -0
- package/dist/cjs/modules/guide/components/GuideToolbar/GuideToolbar.js +1 -1
- package/dist/cjs/modules/guide/components/GuideToolbar/GuideToolbar.js.map +1 -1
- package/dist/esm/modules/guide/components/GuideToolbar/GuideToolbar.mjs +26 -22
- package/dist/esm/modules/guide/components/GuideToolbar/GuideToolbar.mjs.map +1 -1
- package/dist/types/modules/guide/components/GuideToolbar/GuideToolbar.d.ts.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.8.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 00d3f8c: chore(deps): bump the telegraph-packages group with 2 updates
|
|
8
|
+
- Updated dependencies [23b7057]
|
|
9
|
+
- Updated dependencies [1c24f68]
|
|
10
|
+
- @knocklabs/client@0.17.2
|
|
11
|
+
- @knocklabs/react-core@0.9.2
|
|
12
|
+
|
|
13
|
+
## 0.8.1
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- 5b77f18: fix: increase z-index of guide toolbar
|
|
18
|
+
- Updated dependencies [5b77f18]
|
|
19
|
+
- @knocklabs/client@0.17.1
|
|
20
|
+
- @knocklabs/react-core@0.9.1
|
|
21
|
+
|
|
3
22
|
## 0.8.0
|
|
4
23
|
|
|
5
24
|
### Minor Changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),c=require("@knocklabs/client"),h=require("@knocklabs/react-core"),E=require("@tanstack/react-store"),n=require("@telegraph/button"),s=require("@telegraph/layout"),m=require("@telegraph/tag"),w=require("@telegraph/typography"),i=require("lucide-react");;/* empty css */require("lodash.debounce");const C=require("../../../core/utils.js");;/* empty css */const b=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=b(d),u=2147483647,x=()=>{const[t,f]=d.useState(!1),{client:p}=h.useGuideContext(),r=E.useStore(p.store,a=>a.debug);if(!(r!=null&&r.forcedGuideKey))return null;const g=()=>{const a=C.checkForWindow();if(!a)return;const o=new URL(a.location.href);o.searchParams.delete(c.DEBUG_QUERY_PARAMS.GUIDE_KEY),o.searchParams.delete(c.DEBUG_QUERY_PARAMS.PREVIEW_SESSION_ID),a.location.href=o.toString()},l=()=>{f(!t)};return t?e.default.createElement(n.Button,{onClick:l,position:"fixed",top:"4",right:"4",bg:"surface-2",shadow:"3",rounded:"3",w:"10",h:"10",variant:"soft","data-tgph-appearance":"dark","aria-label":"Expand guide toolbar",style:{zIndex:u}},e.default.createElement("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"}},e.default.createElement("path",{d:"M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z",fill:"#EDEEEF"}),e.default.createElement("path",{d:"M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z",fill:"#FF573A"}))):e.default.createElement(s.Stack,{gap:"2",align:"center",position:"fixed",top:"4",right:"4",backgroundColor:"surface-2",bg:"surface-2",shadow:"3",rounded:"3",py:"2",px:"3","data-tgph-appearance":"dark",style:{zIndex:u}},e.default.createElement(s.Stack,{gap:"2",align:"center",direction:"row"},e.default.createElement(m.Tag,{color:"green",variant:"soft",icon:{icon:i.Wrench,"aria-hidden":!0}},"Debug"),e.default.createElement(w.Text,{as:"div",size:"1",weight:"medium",w:"full",maxWidth:"40",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},r.forcedGuideKey),e.default.createElement(n.Button,{onClick:g,size:"1",variant:"soft",trailingIcon:{icon:i.Undo2,"aria-hidden":!0}},"Exit"),e.default.createElement(n.Button,{onClick:l,size:"1",variant:"soft",leadingIcon:{icon:i.Minimize2,alt:"Collapse guide toolbar"}})))};exports.GuideToolbar=x;
|
|
2
2
|
//# sourceMappingURL=GuideToolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GuideToolbar.js","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"sourcesContent":["import { DEBUG_QUERY_PARAMS } from \"@knocklabs/client\";\nimport { useGuideContext } from \"@knocklabs/react-core\";\nimport { useStore } from \"@tanstack/react-store\";\nimport { Button } from \"@telegraph/button\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Text } from \"@telegraph/typography\";\nimport { Minimize2, Undo2, Wrench } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport { checkForWindow } from \"../../../core\";\n\nimport \"./styles.css\";\n\nexport const GuideToolbar = () => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const { client } = useGuideContext();\n const debugState = useStore(client.store, (state) => state.debug);\n\n if (!debugState?.forcedGuideKey) {\n return null;\n }\n\n const handleExit = () => {\n const window = checkForWindow();\n if (!window) {\n return;\n }\n\n const url = new URL(window.location.href);\n url.searchParams.delete(DEBUG_QUERY_PARAMS.GUIDE_KEY);\n url.searchParams.delete(DEBUG_QUERY_PARAMS.PREVIEW_SESSION_ID);\n window.location.href = url.toString();\n };\n\n const handleToggleCollapse = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n if (isCollapsed) {\n return (\n <Button\n onClick={handleToggleCollapse}\n position=\"fixed\"\n top=\"4\"\n right=\"4\"\n
|
|
1
|
+
{"version":3,"file":"GuideToolbar.js","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"sourcesContent":["import { DEBUG_QUERY_PARAMS } from \"@knocklabs/client\";\nimport { useGuideContext } from \"@knocklabs/react-core\";\nimport { useStore } from \"@tanstack/react-store\";\nimport { Button } from \"@telegraph/button\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Text } from \"@telegraph/typography\";\nimport { Minimize2, Undo2, Wrench } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport { checkForWindow } from \"../../../core\";\n\nimport \"./styles.css\";\n\n// 'max' z index based on max value of a signed 32-bit int\n// Ref: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index/25461690#25461690\nconst MAX_Z_INDEX = 2147483647;\n\nexport const GuideToolbar = () => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const { client } = useGuideContext();\n const debugState = useStore(client.store, (state) => state.debug);\n\n if (!debugState?.forcedGuideKey) {\n return null;\n }\n\n const handleExit = () => {\n const window = checkForWindow();\n if (!window) {\n return;\n }\n\n const url = new URL(window.location.href);\n url.searchParams.delete(DEBUG_QUERY_PARAMS.GUIDE_KEY);\n url.searchParams.delete(DEBUG_QUERY_PARAMS.PREVIEW_SESSION_ID);\n window.location.href = url.toString();\n };\n\n const handleToggleCollapse = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n if (isCollapsed) {\n return (\n <Button\n onClick={handleToggleCollapse}\n position=\"fixed\"\n top=\"4\"\n right=\"4\"\n bg=\"surface-2\"\n shadow=\"3\"\n rounded=\"3\"\n w=\"10\"\n h=\"10\"\n variant=\"soft\"\n data-tgph-appearance=\"dark\"\n aria-label=\"Expand guide toolbar\"\n style={{ zIndex: MAX_Z_INDEX }}\n >\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n }}\n >\n <path\n d=\"M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z\"\n fill=\"#EDEEEF\"\n />\n <path\n d=\"M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z\"\n fill=\"#FF573A\"\n />\n </svg>\n </Button>\n );\n }\n\n return (\n <Stack\n gap=\"2\"\n align=\"center\"\n position=\"fixed\"\n top=\"4\"\n right=\"4\"\n backgroundColor=\"surface-2\"\n bg=\"surface-2\"\n shadow=\"3\"\n rounded=\"3\"\n py=\"2\"\n px=\"3\"\n data-tgph-appearance=\"dark\"\n style={{ zIndex: MAX_Z_INDEX }}\n >\n <Stack gap=\"2\" align=\"center\" direction=\"row\">\n <Tag\n color=\"green\"\n variant=\"soft\"\n icon={{ icon: Wrench, \"aria-hidden\": true }}\n >\n Debug\n </Tag>\n\n <Text\n as=\"div\"\n size=\"1\"\n weight=\"medium\"\n w=\"full\"\n maxWidth=\"40\"\n style={{\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }}\n >\n {debugState.forcedGuideKey}\n </Text>\n\n <Button\n onClick={handleExit}\n size=\"1\"\n variant=\"soft\"\n trailingIcon={{ icon: Undo2, \"aria-hidden\": true }}\n >\n Exit\n </Button>\n\n <Button\n onClick={handleToggleCollapse}\n size=\"1\"\n variant=\"soft\"\n leadingIcon={{ icon: Minimize2, alt: \"Collapse guide toolbar\" }}\n />\n </Stack>\n </Stack>\n );\n};\n"],"names":["MAX_Z_INDEX","GuideToolbar","isCollapsed","setIsCollapsed","useState","client","useGuideContext","debugState","useStore","store","state","debug","forcedGuideKey","handleExit","window","checkForWindow","url","URL","location","href","searchParams","delete","DEBUG_QUERY_PARAMS","GUIDE_KEY","PREVIEW_SESSION_ID","toString","handleToggleCollapse","React","Button","zIndex","position","top","left","transform","Stack","Tag","icon","Wrench","Text","overflow","textOverflow","whiteSpace","Undo2","Minimize2","alt"],"mappings":"mkBAgBMA,EAAc,WAEPC,EAAeA,IAAM,CAChC,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAK,EAE9C,CAAEC,OAAAA,GAAWC,kBAAgB,EAC7BC,EAAaC,EAAAA,SAASH,EAAOI,MAAQC,GAAUA,EAAMC,KAAK,EAE5D,GAAA,EAACJ,GAAAA,MAAAA,EAAYK,gBACR,OAAA,KAGT,MAAMC,EAAaA,IAAM,CACvB,MAAMC,EAASC,EAAAA,eAAe,EAC9B,GAAI,CAACD,EACH,OAGF,MAAME,EAAM,IAAIC,IAAIH,EAAOI,SAASC,IAAI,EACpCC,EAAAA,aAAaC,OAAOC,EAAAA,mBAAmBC,SAAS,EAChDH,EAAAA,aAAaC,OAAOC,EAAAA,mBAAmBE,kBAAkB,EACtDN,EAAAA,SAASC,KAAOH,EAAIS,SAAS,CACtC,EAEMC,EAAuBA,IAAM,CACjCvB,EAAe,CAACD,CAAW,CAC7B,EAEA,OAAIA,EAEAyB,EAAA,QAAA,cAACC,EACC,OAAA,CAAA,QAASF,EACT,SAAS,QACT,IAAI,IACJ,MAAM,IACN,GAAG,YACH,OAAO,IACP,QAAQ,IACR,EAAE,KACF,EAAE,KACF,QAAQ,OACR,uBAAqB,OACrB,aAAW,uBACX,MAAO,CAAEG,OAAQ7B,CAAAA,CAEjB,EAAA2B,EAAA,QAAA,cAAC,MACC,CAAA,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MAAO,CACLG,SAAU,WACVC,IAAK,MACLC,KAAM,MACNC,UAAW,uBAAA,GAGbN,EAAAA,QAAA,cAAC,OACC,CAAA,EAAE,0JACF,KAAK,SAAS,CAAA,EAEhBA,EAAAA,QAAA,cAAC,QACC,EAAE,uKACF,KAAK,SAAS,CAAA,CAElB,CACF,EAKFA,EAAA,QAAA,cAACO,EACC,MAAA,CAAA,IAAI,IACJ,MAAM,SACN,SAAS,QACT,IAAI,IACJ,MAAM,IACN,gBAAgB,YAChB,GAAG,YACH,OAAO,IACP,QAAQ,IACR,GAAG,IACH,GAAG,IACH,uBAAqB,OACrB,MAAO,CAAEL,OAAQ7B,CAAAA,GAEjB2B,EAAAA,QAAA,cAACO,EAAM,MAAA,CAAA,IAAI,IAAI,MAAM,SAAS,UAAU,KAAA,0BACrCC,MACC,CAAA,MAAM,QACN,QAAQ,OACR,KAAM,CAAEC,KAAMC,EAAAA,OAAQ,cAAe,EAAA,CAAO,EAAA,OAG9C,EAEAV,EAAA,QAAA,cAACW,QACC,GAAG,MACH,KAAK,IACL,OAAO,SACP,EAAE,OACF,SAAS,KACT,MAAO,CACLC,SAAU,SACVC,aAAc,WACdC,WAAY,QAGblC,CAAAA,EAAAA,EAAWK,cACd,EAECe,EAAA,QAAA,cAAAC,EAAA,OAAA,CACC,QAASf,EACT,KAAK,IACL,QAAQ,OACR,aAAc,CAAEuB,KAAMM,EAAAA,MAAO,cAAe,EAAK,CAAA,EAAE,MAGrD,EAECf,UAAA,cAAAC,EAAAA,OAAA,CACC,QAASF,EACT,KAAK,IACL,QAAQ,OACR,YAAa,CAAEU,KAAMO,EAAAA,UAAWC,IAAK,wBAAyB,CAAA,CAAE,CAEpE,CACF,CAEJ"}
|
|
@@ -1,48 +1,52 @@
|
|
|
1
|
-
import e, { useState as
|
|
1
|
+
import e, { useState as f } from "react";
|
|
2
2
|
import { DEBUG_QUERY_PARAMS as l } from "@knocklabs/client";
|
|
3
|
-
import { useGuideContext as
|
|
4
|
-
import { useStore as
|
|
3
|
+
import { useGuideContext as u } from "@knocklabs/react-core";
|
|
4
|
+
import { useStore as h } from "@tanstack/react-store";
|
|
5
5
|
import { Button as i } from "@telegraph/button";
|
|
6
|
-
import { Stack as
|
|
7
|
-
import { Tag as
|
|
8
|
-
import { Text as
|
|
9
|
-
import { Wrench as
|
|
6
|
+
import { Stack as s } from "@telegraph/layout";
|
|
7
|
+
import { Tag as g } from "@telegraph/tag";
|
|
8
|
+
import { Text as E } from "@telegraph/typography";
|
|
9
|
+
import { Wrench as w, Undo2 as x, Minimize2 as C } from "lucide-react";
|
|
10
10
|
/* empty css */
|
|
11
11
|
import "lodash.debounce";
|
|
12
|
-
import { checkForWindow as
|
|
12
|
+
import { checkForWindow as v } from "../../../core/utils.mjs";
|
|
13
13
|
/* empty css */
|
|
14
|
-
const U = () => {
|
|
15
|
-
const [a,
|
|
16
|
-
client:
|
|
17
|
-
} =
|
|
14
|
+
const c = 2147483647, U = () => {
|
|
15
|
+
const [a, d] = f(!1), {
|
|
16
|
+
client: m
|
|
17
|
+
} = u(), o = h(m.store, (t) => t.debug);
|
|
18
18
|
if (!(o != null && o.forcedGuideKey))
|
|
19
19
|
return null;
|
|
20
|
-
const
|
|
21
|
-
const t =
|
|
20
|
+
const p = () => {
|
|
21
|
+
const t = v();
|
|
22
22
|
if (!t)
|
|
23
23
|
return;
|
|
24
24
|
const r = new URL(t.location.href);
|
|
25
25
|
r.searchParams.delete(l.GUIDE_KEY), r.searchParams.delete(l.PREVIEW_SESSION_ID), t.location.href = r.toString();
|
|
26
26
|
}, n = () => {
|
|
27
|
-
|
|
27
|
+
d(!a);
|
|
28
28
|
};
|
|
29
|
-
return a ? /* @__PURE__ */ e.createElement(i, { onClick: n, position: "fixed", top: "4", right: "4",
|
|
29
|
+
return a ? /* @__PURE__ */ e.createElement(i, { onClick: n, position: "fixed", top: "4", right: "4", bg: "surface-2", shadow: "3", rounded: "3", w: "10", h: "10", variant: "soft", "data-tgph-appearance": "dark", "aria-label": "Expand guide toolbar", style: {
|
|
30
|
+
zIndex: c
|
|
31
|
+
} }, /* @__PURE__ */ e.createElement("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
|
|
30
32
|
position: "absolute",
|
|
31
33
|
top: "50%",
|
|
32
34
|
left: "50%",
|
|
33
35
|
transform: "translate(-50%, -50%)"
|
|
34
|
-
} }, /* @__PURE__ */ e.createElement("path", { d: "M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z", fill: "#EDEEEF" }), /* @__PURE__ */ e.createElement("path", { d: "M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z", fill: "#FF573A" }))) : /* @__PURE__ */ e.createElement(
|
|
35
|
-
|
|
36
|
+
} }, /* @__PURE__ */ e.createElement("path", { d: "M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z", fill: "#EDEEEF" }), /* @__PURE__ */ e.createElement("path", { d: "M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z", fill: "#FF573A" }))) : /* @__PURE__ */ e.createElement(s, { gap: "2", align: "center", position: "fixed", top: "4", right: "4", backgroundColor: "surface-2", bg: "surface-2", shadow: "3", rounded: "3", py: "2", px: "3", "data-tgph-appearance": "dark", style: {
|
|
37
|
+
zIndex: c
|
|
38
|
+
} }, /* @__PURE__ */ e.createElement(s, { gap: "2", align: "center", direction: "row" }, /* @__PURE__ */ e.createElement(g, { color: "green", variant: "soft", icon: {
|
|
39
|
+
icon: w,
|
|
36
40
|
"aria-hidden": !0
|
|
37
|
-
} }, "Debug"), /* @__PURE__ */ e.createElement(
|
|
41
|
+
} }, "Debug"), /* @__PURE__ */ e.createElement(E, { as: "div", size: "1", weight: "medium", w: "full", maxWidth: "40", style: {
|
|
38
42
|
overflow: "hidden",
|
|
39
43
|
textOverflow: "ellipsis",
|
|
40
44
|
whiteSpace: "nowrap"
|
|
41
|
-
} }, o.forcedGuideKey), /* @__PURE__ */ e.createElement(i, { onClick:
|
|
42
|
-
icon:
|
|
45
|
+
} }, o.forcedGuideKey), /* @__PURE__ */ e.createElement(i, { onClick: p, size: "1", variant: "soft", trailingIcon: {
|
|
46
|
+
icon: x,
|
|
43
47
|
"aria-hidden": !0
|
|
44
48
|
} }, "Exit"), /* @__PURE__ */ e.createElement(i, { onClick: n, size: "1", variant: "soft", leadingIcon: {
|
|
45
|
-
icon:
|
|
49
|
+
icon: C,
|
|
46
50
|
alt: "Collapse guide toolbar"
|
|
47
51
|
} })));
|
|
48
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GuideToolbar.mjs","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"sourcesContent":["import { DEBUG_QUERY_PARAMS } from \"@knocklabs/client\";\nimport { useGuideContext } from \"@knocklabs/react-core\";\nimport { useStore } from \"@tanstack/react-store\";\nimport { Button } from \"@telegraph/button\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Text } from \"@telegraph/typography\";\nimport { Minimize2, Undo2, Wrench } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport { checkForWindow } from \"../../../core\";\n\nimport \"./styles.css\";\n\nexport const GuideToolbar = () => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const { client } = useGuideContext();\n const debugState = useStore(client.store, (state) => state.debug);\n\n if (!debugState?.forcedGuideKey) {\n return null;\n }\n\n const handleExit = () => {\n const window = checkForWindow();\n if (!window) {\n return;\n }\n\n const url = new URL(window.location.href);\n url.searchParams.delete(DEBUG_QUERY_PARAMS.GUIDE_KEY);\n url.searchParams.delete(DEBUG_QUERY_PARAMS.PREVIEW_SESSION_ID);\n window.location.href = url.toString();\n };\n\n const handleToggleCollapse = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n if (isCollapsed) {\n return (\n <Button\n onClick={handleToggleCollapse}\n position=\"fixed\"\n top=\"4\"\n right=\"4\"\n
|
|
1
|
+
{"version":3,"file":"GuideToolbar.mjs","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"sourcesContent":["import { DEBUG_QUERY_PARAMS } from \"@knocklabs/client\";\nimport { useGuideContext } from \"@knocklabs/react-core\";\nimport { useStore } from \"@tanstack/react-store\";\nimport { Button } from \"@telegraph/button\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Text } from \"@telegraph/typography\";\nimport { Minimize2, Undo2, Wrench } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport { checkForWindow } from \"../../../core\";\n\nimport \"./styles.css\";\n\n// 'max' z index based on max value of a signed 32-bit int\n// Ref: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index/25461690#25461690\nconst MAX_Z_INDEX = 2147483647;\n\nexport const GuideToolbar = () => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const { client } = useGuideContext();\n const debugState = useStore(client.store, (state) => state.debug);\n\n if (!debugState?.forcedGuideKey) {\n return null;\n }\n\n const handleExit = () => {\n const window = checkForWindow();\n if (!window) {\n return;\n }\n\n const url = new URL(window.location.href);\n url.searchParams.delete(DEBUG_QUERY_PARAMS.GUIDE_KEY);\n url.searchParams.delete(DEBUG_QUERY_PARAMS.PREVIEW_SESSION_ID);\n window.location.href = url.toString();\n };\n\n const handleToggleCollapse = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n if (isCollapsed) {\n return (\n <Button\n onClick={handleToggleCollapse}\n position=\"fixed\"\n top=\"4\"\n right=\"4\"\n bg=\"surface-2\"\n shadow=\"3\"\n rounded=\"3\"\n w=\"10\"\n h=\"10\"\n variant=\"soft\"\n data-tgph-appearance=\"dark\"\n aria-label=\"Expand guide toolbar\"\n style={{ zIndex: MAX_Z_INDEX }}\n >\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n }}\n >\n <path\n d=\"M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z\"\n fill=\"#EDEEEF\"\n />\n <path\n d=\"M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z\"\n fill=\"#FF573A\"\n />\n </svg>\n </Button>\n );\n }\n\n return (\n <Stack\n gap=\"2\"\n align=\"center\"\n position=\"fixed\"\n top=\"4\"\n right=\"4\"\n backgroundColor=\"surface-2\"\n bg=\"surface-2\"\n shadow=\"3\"\n rounded=\"3\"\n py=\"2\"\n px=\"3\"\n data-tgph-appearance=\"dark\"\n style={{ zIndex: MAX_Z_INDEX }}\n >\n <Stack gap=\"2\" align=\"center\" direction=\"row\">\n <Tag\n color=\"green\"\n variant=\"soft\"\n icon={{ icon: Wrench, \"aria-hidden\": true }}\n >\n Debug\n </Tag>\n\n <Text\n as=\"div\"\n size=\"1\"\n weight=\"medium\"\n w=\"full\"\n maxWidth=\"40\"\n style={{\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }}\n >\n {debugState.forcedGuideKey}\n </Text>\n\n <Button\n onClick={handleExit}\n size=\"1\"\n variant=\"soft\"\n trailingIcon={{ icon: Undo2, \"aria-hidden\": true }}\n >\n Exit\n </Button>\n\n <Button\n onClick={handleToggleCollapse}\n size=\"1\"\n variant=\"soft\"\n leadingIcon={{ icon: Minimize2, alt: \"Collapse guide toolbar\" }}\n />\n </Stack>\n </Stack>\n );\n};\n"],"names":["MAX_Z_INDEX","GuideToolbar","isCollapsed","setIsCollapsed","useState","client","useGuideContext","debugState","useStore","store","state","debug","forcedGuideKey","handleExit","window","checkForWindow","url","URL","location","href","searchParams","delete","DEBUG_QUERY_PARAMS","GUIDE_KEY","PREVIEW_SESSION_ID","toString","handleToggleCollapse","React","Button","zIndex","position","top","left","transform","Stack","Tag","icon","Wrench","Text","overflow","textOverflow","whiteSpace","Undo2","Minimize2","alt"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,IAAc,YAEPC,IAAeA,MAAM;AAChC,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9C;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB,GAC7BC,IAAaC,EAASH,EAAOI,OAAQC,CAAAA,MAAUA,EAAMC,KAAK;AAE5D,MAAA,EAACJ,KAAAA,QAAAA,EAAYK;AACR,WAAA;AAGT,QAAMC,IAAaA,MAAM;AACvB,UAAMC,IAASC,EAAe;AAC9B,QAAI,CAACD;AACH;AAGF,UAAME,IAAM,IAAIC,IAAIH,EAAOI,SAASC,IAAI;AACpCC,IAAAA,EAAAA,aAAaC,OAAOC,EAAmBC,SAAS,GAChDH,EAAAA,aAAaC,OAAOC,EAAmBE,kBAAkB,GACtDN,EAAAA,SAASC,OAAOH,EAAIS,SAAS;AAAA,EACtC,GAEMC,IAAuBA,MAAM;AACjCvB,IAAAA,EAAe,CAACD,CAAW;AAAA,EAC7B;AAEA,SAAIA,IAEAyB,gBAAAA,EAAA,cAACC,GACC,EAAA,SAASF,GACT,UAAS,SACT,KAAI,KACJ,OAAM,KACN,IAAG,aACH,QAAO,KACP,SAAQ,KACR,GAAE,MACF,GAAE,MACF,SAAQ,QACR,wBAAqB,QACrB,cAAW,wBACX,OAAO;AAAA,IAAEG,QAAQ7B;AAAAA,EAAAA,EAEjB,GAAA2B,gBAAAA,EAAA,cAAC,OACC,EAAA,OAAM,MACN,QAAO,MACP,SAAQ,aACR,MAAK,QACL,OAAM,8BACN,OAAO;AAAA,IACLG,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,MAAM;AAAA,IACNC,WAAW;AAAA,EAAA,KAGbN,gBAAAA,EAAA,cAAC,QACC,EAAA,GAAE,2JACF,MAAK,UAAS,CAAA,GAEhBA,gBAAAA,EAAA,cAAC,UACC,GAAE,wKACF,MAAK,UAAS,CAAA,CAElB,CACF,IAKFA,gBAAAA,EAAA,cAACO,GACC,EAAA,KAAI,KACJ,OAAM,UACN,UAAS,SACT,KAAI,KACJ,OAAM,KACN,iBAAgB,aAChB,IAAG,aACH,QAAO,KACP,SAAQ,KACR,IAAG,KACH,IAAG,KACH,wBAAqB,QACrB,OAAO;AAAA,IAAEL,QAAQ7B;AAAAA,EAAAA,KAEjB2B,gBAAAA,EAAA,cAACO,GAAM,EAAA,KAAI,KAAI,OAAM,UAAS,WAAU,MAAA,mCACrCC,GACC,EAAA,OAAM,SACN,SAAQ,QACR,MAAM;AAAA,IAAEC,MAAMC;AAAAA,IAAQ,eAAe;AAAA,EAAA,EAAO,GAAA,OAG9C,GAEAV,gBAAAA,EAAA,cAACW,KACC,IAAG,OACH,MAAK,KACL,QAAO,UACP,GAAE,QACF,UAAS,MACT,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EAGblC,EAAAA,GAAAA,EAAWK,cACd,GAECe,gBAAAA,EAAA,cAAAC,GAAA,EACC,SAASf,GACT,MAAK,KACL,SAAQ,QACR,cAAc;AAAA,IAAEuB,MAAMM;AAAAA,IAAO,eAAe;AAAA,EAAK,EAAA,GAAE,MAGrD,GAECf,gBAAAA,EAAA,cAAAC,GAAA,EACC,SAASF,GACT,MAAK,KACL,SAAQ,QACR,aAAa;AAAA,IAAEU,MAAMO;AAAAA,IAAWC,KAAK;AAAA,EAAyB,EAAA,CAAE,CAEpE,CACF;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GuideToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"names":[],"mappings":"AAYA,OAAO,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"GuideToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"names":[],"mappings":"AAYA,OAAO,cAAc,CAAC;AAMtB,eAAO,MAAM,YAAY,sDA+HxB,CAAC"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@knocklabs/react",
|
|
3
3
|
"description": "A set of React components to build notification experiences powered by Knock",
|
|
4
4
|
"author": "@knocklabs",
|
|
5
|
-
"version": "0.8.
|
|
5
|
+
"version": "0.8.2",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/cjs/index.js",
|
|
8
8
|
"module": "dist/esm/index.mjs",
|
|
@@ -50,11 +50,11 @@
|
|
|
50
50
|
"react-dom": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@knocklabs/client": "^0.17.
|
|
54
|
-
"@knocklabs/react-core": "^0.9.
|
|
53
|
+
"@knocklabs/client": "^0.17.2",
|
|
54
|
+
"@knocklabs/react-core": "^0.9.2",
|
|
55
55
|
"@popperjs/core": "^2.11.8",
|
|
56
56
|
"@radix-ui/react-dialog": "^1.1.14",
|
|
57
|
-
"@telegraph/combobox": "^0.1.
|
|
57
|
+
"@telegraph/combobox": "^0.1.5",
|
|
58
58
|
"@telegraph/icon": "^0.2.3",
|
|
59
59
|
"@telegraph/layout": "^0.2.1",
|
|
60
60
|
"@telegraph/tokens": "^0.1.1",
|