@knocklabs/react 0.8.6 → 0.8.8
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 +18 -0
- package/dist/cjs/modules/core/utils.js +1 -1
- package/dist/cjs/modules/core/utils.js.map +1 -1
- 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/core/utils.mjs +2 -6
- package/dist/esm/modules/core/utils.mjs.map +1 -1
- package/dist/esm/modules/guide/components/GuideToolbar/GuideToolbar.mjs +28 -36
- 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 +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.8.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- bf7677a: feat: persist guide debug state in local storage
|
|
8
|
+
- Updated dependencies [bf7677a]
|
|
9
|
+
- Updated dependencies [9eba682]
|
|
10
|
+
- @knocklabs/client@0.18.5
|
|
11
|
+
- @knocklabs/react-core@0.10.5
|
|
12
|
+
|
|
13
|
+
## 0.8.7
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [c64098e]
|
|
18
|
+
- @knocklabs/client@0.18.4
|
|
19
|
+
- @knocklabs/react-core@0.10.4
|
|
20
|
+
|
|
3
21
|
## 0.8.6
|
|
4
22
|
|
|
5
23
|
### Patch 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 h=e=>{const n=window.screenLeft??window.screenX,t=window.screenTop??window.screenY,o=window.innerWidth??document.documentElement.clientWidth??screen.width,i=window.innerHeight??document.documentElement.clientHeight??screen.height,c=o/2-600/2+n,d=`width=600,height=800,top=${i/2-800/2+t},left=${c}`;window.open(e,"_blank",d)};exports.openPopupWindow=h;
|
|
2
2
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../src/modules/core/utils.ts"],"sourcesContent":["export const openPopupWindow = (url: string) => {\n const width = 600;\n const height = 800;\n // Calculate the position to center the window\n const screenLeft = window.screenLeft ?? window.screenX;\n const screenTop = window.screenTop ?? window.screenY;\n\n const innerWidth =\n window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n const innerHeight =\n window.innerHeight ??\n document.documentElement.clientHeight ??\n screen.height;\n\n const left = innerWidth / 2 - width / 2 + screenLeft;\n const top = innerHeight / 2 - height / 2 + screenTop;\n\n // Window features\n const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n window.open(url, \"_blank\", features);\n};\n\nexport const checkForWindow = () => {\n if (typeof window !== \"undefined\") {\n return window;\n }\n};\n"],"names":["openPopupWindow","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open"
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/modules/core/utils.ts"],"sourcesContent":["export const openPopupWindow = (url: string) => {\n const width = 600;\n const height = 800;\n // Calculate the position to center the window\n const screenLeft = window.screenLeft ?? window.screenX;\n const screenTop = window.screenTop ?? window.screenY;\n\n const innerWidth =\n window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n const innerHeight =\n window.innerHeight ??\n document.documentElement.clientHeight ??\n screen.height;\n\n const left = innerWidth / 2 - width / 2 + screenLeft;\n const top = innerHeight / 2 - height / 2 + screenTop;\n\n // Window features\n const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n window.open(url, \"_blank\", features);\n};\n\nexport const checkForWindow = () => {\n if (typeof window !== \"undefined\") {\n return window;\n }\n};\n"],"names":["openPopupWindow","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open"],"mappings":"gFAAaA,MAAAA,EAAmBC,GAAgB,CAIxCC,MAAAA,EAAaC,OAAOD,YAAcC,OAAOC,QACzCC,EAAYF,OAAOE,WAAaF,OAAOG,QAEvCC,EACJJ,OAAOI,YAAcC,SAASC,gBAAgBC,aAAeC,OAAOC,MAChEC,EACJV,OAAOU,aACPL,SAASC,gBAAgBK,cACzBH,OAAOI,OAEHC,EAAOT,EAAa,EAAIK,IAAQ,EAAIV,EAIpCe,EAAW,4BAHLJ,EAAc,EAAIE,IAAS,EAAIV,CAGgB,SAASW,CAAI,GAEjEE,OAAAA,KAAKjB,EAAK,SAAUgB,CAAQ,CACrC"}
|
|
@@ -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 s=require("react"),l=require("@knocklabs/react-core"),o=require("@telegraph/button"),d=require("@telegraph/layout"),g=require("@telegraph/tag"),h=require("@telegraph/typography"),n=require("lucide-react");;/* empty css */const m=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=m(s),c=2147483647,E=()=>{const[t,u]=s.useState(!1),{client:r}=l.useGuideContext(),a=l.useStore(r.store,p=>p.debug);if(!(a!=null&&a.forcedGuideKey))return null;const f=()=>{r.exitDebugMode()},i=()=>{u(!t)};return t?e.default.createElement(o.Button,{onClick:i,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:c}},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(d.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:c}},e.default.createElement(d.Stack,{gap:"2",align:"center",direction:"row"},e.default.createElement(g.Tag,{color:"green",variant:"soft",icon:{icon:n.Wrench,"aria-hidden":!0}},"Debug"),e.default.createElement(h.Text,{as:"div",size:"1",weight:"medium",w:"full",maxWidth:"40",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},a.forcedGuideKey),e.default.createElement(o.Button,{onClick:f,size:"1",variant:"soft",trailingIcon:{icon:n.Undo2,"aria-hidden":!0}},"Exit"),e.default.createElement(o.Button,{onClick:i,size:"1",variant:"soft",leadingIcon:{icon:n.Minimize2,alt:"Collapse guide toolbar"}})))};exports.GuideToolbar=E;
|
|
2
2
|
//# sourceMappingURL=GuideToolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GuideToolbar.js","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"GuideToolbar.js","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\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 \"./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 client.exitDebugMode();\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","exitDebugMode","handleToggleCollapse","React","Button","zIndex","position","top","left","transform","Stack","Tag","icon","Wrench","Text","overflow","textOverflow","whiteSpace","Undo2","Minimize2","alt"],"mappings":"mYAYMA,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,CACvBR,EAAOS,cAAc,CACvB,EAEMC,EAAuBA,IAAM,CACjCZ,EAAe,CAACD,CAAW,CAC7B,EAEA,OAAIA,EAEAc,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,OAAQlB,CAAAA,CAEjB,EAAAgB,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,OAAQlB,CAAAA,GAEjBgB,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,QAGbvB,CAAAA,EAAAA,EAAWK,cACd,EAECI,EAAA,QAAA,cAAAC,EAAA,OAAA,CACC,QAASJ,EACT,KAAK,IACL,QAAQ,OACR,aAAc,CAAEY,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,12 +1,8 @@
|
|
|
1
1
|
const r = (e) => {
|
|
2
|
-
const n = window.screenLeft ?? window.screenX, t = window.screenTop ?? window.screenY, o = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width, i = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height, c = o / 2 - 600 / 2 + n,
|
|
3
|
-
window.open(e, "_blank",
|
|
4
|
-
}, p = () => {
|
|
5
|
-
if (typeof window < "u")
|
|
6
|
-
return window;
|
|
2
|
+
const n = window.screenLeft ?? window.screenX, t = window.screenTop ?? window.screenY, o = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width, i = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height, c = o / 2 - 600 / 2 + n, h = `width=600,height=800,top=${i / 2 - 800 / 2 + t},left=${c}`;
|
|
3
|
+
window.open(e, "_blank", h);
|
|
7
4
|
};
|
|
8
5
|
export {
|
|
9
|
-
p as checkForWindow,
|
|
10
6
|
r as openPopupWindow
|
|
11
7
|
};
|
|
12
8
|
//# sourceMappingURL=utils.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.mjs","sources":["../../../../src/modules/core/utils.ts"],"sourcesContent":["export const openPopupWindow = (url: string) => {\n const width = 600;\n const height = 800;\n // Calculate the position to center the window\n const screenLeft = window.screenLeft ?? window.screenX;\n const screenTop = window.screenTop ?? window.screenY;\n\n const innerWidth =\n window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n const innerHeight =\n window.innerHeight ??\n document.documentElement.clientHeight ??\n screen.height;\n\n const left = innerWidth / 2 - width / 2 + screenLeft;\n const top = innerHeight / 2 - height / 2 + screenTop;\n\n // Window features\n const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n window.open(url, \"_blank\", features);\n};\n\nexport const checkForWindow = () => {\n if (typeof window !== \"undefined\") {\n return window;\n }\n};\n"],"names":["openPopupWindow","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open"
|
|
1
|
+
{"version":3,"file":"utils.mjs","sources":["../../../../src/modules/core/utils.ts"],"sourcesContent":["export const openPopupWindow = (url: string) => {\n const width = 600;\n const height = 800;\n // Calculate the position to center the window\n const screenLeft = window.screenLeft ?? window.screenX;\n const screenTop = window.screenTop ?? window.screenY;\n\n const innerWidth =\n window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n const innerHeight =\n window.innerHeight ??\n document.documentElement.clientHeight ??\n screen.height;\n\n const left = innerWidth / 2 - width / 2 + screenLeft;\n const top = innerHeight / 2 - height / 2 + screenTop;\n\n // Window features\n const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n window.open(url, \"_blank\", features);\n};\n\nexport const checkForWindow = () => {\n if (typeof window !== \"undefined\") {\n return window;\n }\n};\n"],"names":["openPopupWindow","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open"],"mappings":"AAAaA,MAAAA,IAAkBA,CAACC,MAAgB;AAIxCC,QAAAA,IAAaC,OAAOD,cAAcC,OAAOC,SACzCC,IAAYF,OAAOE,aAAaF,OAAOG,SAEvCC,IACJJ,OAAOI,cAAcC,SAASC,gBAAgBC,eAAeC,OAAOC,OAChEC,IACJV,OAAOU,eACPL,SAASC,gBAAgBK,gBACzBH,OAAOI,QAEHC,IAAOT,IAAa,IAAIK,MAAQ,IAAIV,GAIpCe,IAAW,4BAHLJ,IAAc,IAAIE,MAAS,IAAIV,CAGgB,SAASW,CAAI;AAEjEE,SAAAA,KAAKjB,GAAK,UAAUgB,CAAQ;AACrC;"}
|
|
@@ -1,55 +1,47 @@
|
|
|
1
|
-
import e, { useState as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import { Wrench as w, Undo2 as x, Minimize2 as C } from "lucide-react";
|
|
9
|
-
/* empty css */
|
|
10
|
-
import "lodash.debounce";
|
|
11
|
-
import { checkForWindow as v } from "../../../core/utils.mjs";
|
|
1
|
+
import e, { useState as p } from "react";
|
|
2
|
+
import { useGuideContext as m, useStore as f } from "@knocklabs/react-core";
|
|
3
|
+
import { Button as o } from "@telegraph/button";
|
|
4
|
+
import { Stack as n } from "@telegraph/layout";
|
|
5
|
+
import { Tag as u } from "@telegraph/tag";
|
|
6
|
+
import { Text as g } from "@telegraph/typography";
|
|
7
|
+
import { Wrench as h, Undo2 as E, Minimize2 as w } from "lucide-react";
|
|
12
8
|
/* empty css */
|
|
13
|
-
const
|
|
14
|
-
const [
|
|
15
|
-
client:
|
|
16
|
-
} =
|
|
17
|
-
if (!(
|
|
9
|
+
const l = 2147483647, H = () => {
|
|
10
|
+
const [r, s] = p(!1), {
|
|
11
|
+
client: a
|
|
12
|
+
} = m(), t = f(a.store, (c) => c.debug);
|
|
13
|
+
if (!(t != null && t.forcedGuideKey))
|
|
18
14
|
return null;
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
const r = new URL(t.location.href);
|
|
24
|
-
r.searchParams.delete(l.GUIDE_KEY), r.searchParams.delete(l.PREVIEW_SESSION_ID), t.location.href = r.toString();
|
|
25
|
-
}, n = () => {
|
|
26
|
-
d(!i);
|
|
15
|
+
const d = () => {
|
|
16
|
+
a.exitDebugMode();
|
|
17
|
+
}, i = () => {
|
|
18
|
+
s(!r);
|
|
27
19
|
};
|
|
28
|
-
return
|
|
29
|
-
zIndex:
|
|
20
|
+
return r ? /* @__PURE__ */ e.createElement(o, { onClick: i, 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: {
|
|
21
|
+
zIndex: l
|
|
30
22
|
} }, /* @__PURE__ */ e.createElement("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
|
|
31
23
|
position: "absolute",
|
|
32
24
|
top: "50%",
|
|
33
25
|
left: "50%",
|
|
34
26
|
transform: "translate(-50%, -50%)"
|
|
35
|
-
} }, /* @__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(
|
|
36
|
-
zIndex:
|
|
37
|
-
} }, /* @__PURE__ */ e.createElement(
|
|
38
|
-
icon:
|
|
27
|
+
} }, /* @__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(n, { 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: {
|
|
28
|
+
zIndex: l
|
|
29
|
+
} }, /* @__PURE__ */ e.createElement(n, { gap: "2", align: "center", direction: "row" }, /* @__PURE__ */ e.createElement(u, { color: "green", variant: "soft", icon: {
|
|
30
|
+
icon: h,
|
|
39
31
|
"aria-hidden": !0
|
|
40
|
-
} }, "Debug"), /* @__PURE__ */ e.createElement(
|
|
32
|
+
} }, "Debug"), /* @__PURE__ */ e.createElement(g, { as: "div", size: "1", weight: "medium", w: "full", maxWidth: "40", style: {
|
|
41
33
|
overflow: "hidden",
|
|
42
34
|
textOverflow: "ellipsis",
|
|
43
35
|
whiteSpace: "nowrap"
|
|
44
|
-
} },
|
|
45
|
-
icon:
|
|
36
|
+
} }, t.forcedGuideKey), /* @__PURE__ */ e.createElement(o, { onClick: d, size: "1", variant: "soft", trailingIcon: {
|
|
37
|
+
icon: E,
|
|
46
38
|
"aria-hidden": !0
|
|
47
|
-
} }, "Exit"), /* @__PURE__ */ e.createElement(
|
|
48
|
-
icon:
|
|
39
|
+
} }, "Exit"), /* @__PURE__ */ e.createElement(o, { onClick: i, size: "1", variant: "soft", leadingIcon: {
|
|
40
|
+
icon: w,
|
|
49
41
|
alt: "Collapse guide toolbar"
|
|
50
42
|
} })));
|
|
51
43
|
};
|
|
52
44
|
export {
|
|
53
|
-
|
|
45
|
+
H as GuideToolbar
|
|
54
46
|
};
|
|
55
47
|
//# sourceMappingURL=GuideToolbar.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GuideToolbar.mjs","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"GuideToolbar.mjs","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\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 \"./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 client.exitDebugMode();\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","exitDebugMode","handleToggleCollapse","React","Button","zIndex","position","top","left","transform","Stack","Tag","icon","Wrench","Text","overflow","textOverflow","whiteSpace","Undo2","Minimize2","alt"],"mappings":";;;;;;;;AAYA,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;AACvBR,IAAAA,EAAOS,cAAc;AAAA,EACvB,GAEMC,IAAuBA,MAAM;AACjCZ,IAAAA,EAAe,CAACD,CAAW;AAAA,EAC7B;AAEA,SAAIA,IAEAc,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,QAAQlB;AAAAA,EAAAA,EAEjB,GAAAgB,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,QAAQlB;AAAAA,EAAAA,KAEjBgB,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,EAGbvB,EAAAA,GAAAA,EAAWK,cACd,GAECI,gBAAAA,EAAA,cAAAC,GAAA,EACC,SAASJ,GACT,MAAK,KACL,SAAQ,QACR,cAAc;AAAA,IAAEY,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":"
|
|
1
|
+
{"version":3,"file":"GuideToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/guide/components/GuideToolbar/GuideToolbar.tsx"],"names":[],"mappings":"AAQA,OAAO,cAAc,CAAC;AAMtB,eAAO,MAAM,YAAY,sDAuHxB,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.8",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/cjs/index.js",
|
|
8
8
|
"module": "dist/esm/index.mjs",
|
|
@@ -50,12 +50,12 @@
|
|
|
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.18.
|
|
54
|
-
"@knocklabs/react-core": "^0.10.
|
|
53
|
+
"@knocklabs/client": "^0.18.5",
|
|
54
|
+
"@knocklabs/react-core": "^0.10.5",
|
|
55
55
|
"@popperjs/core": "^2.11.8",
|
|
56
56
|
"@radix-ui/react-dialog": "^1.1.14",
|
|
57
|
-
"@telegraph/combobox": "^0.1.
|
|
58
|
-
"@telegraph/icon": "^0.2.
|
|
57
|
+
"@telegraph/combobox": "^0.1.8",
|
|
58
|
+
"@telegraph/icon": "^0.2.4",
|
|
59
59
|
"@telegraph/layout": "^0.2.1",
|
|
60
60
|
"@telegraph/tokens": "^0.1.1",
|
|
61
61
|
"@telegraph/typography": "^0.1.23",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
80
80
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
81
81
|
"eslint-plugin-react-refresh": "^0.4.14",
|
|
82
|
-
"jsdom": "^
|
|
82
|
+
"jsdom": "^27.0.0",
|
|
83
83
|
"react": "^19.0.0",
|
|
84
84
|
"react-dom": "^19.0.0",
|
|
85
85
|
"rimraf": "^6.0.1",
|