@knocklabs/react 0.11.10 → 0.11.12

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.
Files changed (49) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/index.css +1 -1
  3. package/dist/cjs/index.js +1 -1
  4. package/dist/cjs/modules/guide/components/Toolbar/V2/FocusChin.js +2 -0
  5. package/dist/cjs/modules/guide/components/Toolbar/V2/FocusChin.js.map +1 -0
  6. package/dist/cjs/modules/guide/components/Toolbar/V2/GuideContextDetails.js +1 -1
  7. package/dist/cjs/modules/guide/components/Toolbar/V2/GuideContextDetails.js.map +1 -1
  8. package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRow.js +1 -1
  9. package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRow.js.map +1 -1
  10. package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRowDetails.js +1 -1
  11. package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRowDetails.js.map +1 -1
  12. package/dist/cjs/modules/guide/components/Toolbar/V2/V2.js +1 -1
  13. package/dist/cjs/modules/guide/components/Toolbar/V2/V2.js.map +1 -1
  14. package/dist/cjs/modules/guide/components/Toolbar/V2/helpers.js +1 -1
  15. package/dist/cjs/modules/guide/components/Toolbar/V2/helpers.js.map +1 -1
  16. package/dist/cjs/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.js +1 -1
  17. package/dist/cjs/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.js.map +1 -1
  18. package/dist/esm/index.mjs +98 -97
  19. package/dist/esm/index.mjs.map +1 -1
  20. package/dist/esm/modules/guide/components/Toolbar/V2/FocusChin.mjs +79 -0
  21. package/dist/esm/modules/guide/components/Toolbar/V2/FocusChin.mjs.map +1 -0
  22. package/dist/esm/modules/guide/components/Toolbar/V2/GuideContextDetails.mjs +29 -10
  23. package/dist/esm/modules/guide/components/Toolbar/V2/GuideContextDetails.mjs.map +1 -1
  24. package/dist/esm/modules/guide/components/Toolbar/V2/GuideRow.mjs +73 -101
  25. package/dist/esm/modules/guide/components/Toolbar/V2/GuideRow.mjs.map +1 -1
  26. package/dist/esm/modules/guide/components/Toolbar/V2/GuideRowDetails.mjs +35 -27
  27. package/dist/esm/modules/guide/components/Toolbar/V2/GuideRowDetails.mjs.map +1 -1
  28. package/dist/esm/modules/guide/components/Toolbar/V2/V2.mjs +111 -101
  29. package/dist/esm/modules/guide/components/Toolbar/V2/V2.mjs.map +1 -1
  30. package/dist/esm/modules/guide/components/Toolbar/V2/helpers.mjs +18 -13
  31. package/dist/esm/modules/guide/components/Toolbar/V2/helpers.mjs.map +1 -1
  32. package/dist/esm/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.mjs +106 -83
  33. package/dist/esm/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.mjs.map +1 -1
  34. package/dist/index.css +1 -1
  35. package/dist/types/modules/guide/components/Toolbar/V2/FocusChin.d.ts +9 -0
  36. package/dist/types/modules/guide/components/Toolbar/V2/FocusChin.d.ts.map +1 -0
  37. package/dist/types/modules/guide/components/Toolbar/V2/GuideContextDetails.d.ts.map +1 -1
  38. package/dist/types/modules/guide/components/Toolbar/V2/GuideHoverCard.d.ts +2 -2
  39. package/dist/types/modules/guide/components/Toolbar/V2/GuideHoverCard.d.ts.map +1 -1
  40. package/dist/types/modules/guide/components/Toolbar/V2/GuideRow.d.ts +3 -2
  41. package/dist/types/modules/guide/components/Toolbar/V2/GuideRow.d.ts.map +1 -1
  42. package/dist/types/modules/guide/components/Toolbar/V2/GuideRowDetails.d.ts +9 -2
  43. package/dist/types/modules/guide/components/Toolbar/V2/GuideRowDetails.d.ts.map +1 -1
  44. package/dist/types/modules/guide/components/Toolbar/V2/V2.d.ts.map +1 -1
  45. package/dist/types/modules/guide/components/Toolbar/V2/helpers.d.ts +6 -0
  46. package/dist/types/modules/guide/components/Toolbar/V2/helpers.d.ts.map +1 -1
  47. package/dist/types/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.d.ts +10 -5
  48. package/dist/types/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.d.ts.map +1 -1
  49. package/package.json +6 -5
@@ -1,27 +1,27 @@
1
1
  "use client";
2
2
  /* empty css */
3
- import { Button as d } from "./modules/core/components/Button/Button.mjs";
4
- import { ButtonGroup as C } from "./modules/core/components/Button/ButtonGroup.mjs";
5
- import { BellIcon as S } from "./modules/core/components/Icons/Bell.mjs";
6
- import { CheckmarkCircle as K } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
7
- import { ChevronDown as M } from "./modules/core/components/Icons/ChevronDown.mjs";
8
- import { CloseCircle as B } from "./modules/core/components/Icons/CloseCircle.mjs";
9
- import { Spinner as A } from "./modules/core/components/Spinner/Spinner.mjs";
10
- import { default as N } from "./modules/core/hooks/useOnBottomScroll.mjs";
11
- import { EmptyFeed as G } from "./modules/feed/components/EmptyFeed/EmptyFeed.mjs";
12
- import { NotificationCell as w } from "./modules/feed/components/NotificationCell/NotificationCell.mjs";
13
- import { Avatar as I } from "./modules/feed/components/NotificationCell/Avatar.mjs";
14
- import { NotificationFeed as V } from "./modules/feed/components/NotificationFeed/NotificationFeed.mjs";
15
- import { NotificationFeedHeader as E } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs";
16
- import { MarkAsRead as L } from "./modules/feed/components/NotificationFeed/MarkAsRead.mjs";
17
- import { NotificationFeedContainer as U } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs";
18
- import { NotificationFeedPopover as q } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
19
- import { NotificationIconButton as J } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
20
- import { UnseenBadge as W } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
21
- import { Banner as Y, BannerView as Z } from "./modules/guide/components/Banner/Banner.mjs";
22
- import { Card as $, CardView as ee } from "./modules/guide/components/Card/Card.mjs";
3
+ import { Button as x } from "./modules/core/components/Button/Button.mjs";
4
+ import { ButtonGroup as k } from "./modules/core/components/Button/ButtonGroup.mjs";
5
+ import { BellIcon as h } from "./modules/core/components/Icons/Bell.mjs";
6
+ import { CheckmarkCircle as T } from "./modules/core/components/Icons/CheckmarkCircle.mjs";
7
+ import { ChevronDown as v } from "./modules/core/components/Icons/ChevronDown.mjs";
8
+ import { CloseCircle as P } from "./modules/core/components/Icons/CloseCircle.mjs";
9
+ import { Spinner as F } from "./modules/core/components/Spinner/Spinner.mjs";
10
+ import { default as b } from "./modules/core/hooks/useOnBottomScroll.mjs";
11
+ import { EmptyFeed as g } from "./modules/feed/components/EmptyFeed/EmptyFeed.mjs";
12
+ import { NotificationCell as y } from "./modules/feed/components/NotificationCell/NotificationCell.mjs";
13
+ import { Avatar as O } from "./modules/feed/components/NotificationCell/Avatar.mjs";
14
+ import { NotificationFeed as D } from "./modules/feed/components/NotificationFeed/NotificationFeed.mjs";
15
+ import { NotificationFeedHeader as H } from "./modules/feed/components/NotificationFeed/NotificationFeedHeader.mjs";
16
+ import { MarkAsRead as R } from "./modules/feed/components/NotificationFeed/MarkAsRead.mjs";
17
+ import { NotificationFeedContainer as j } from "./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.mjs";
18
+ import { NotificationFeedPopover as z } from "./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.mjs";
19
+ import { NotificationIconButton as Q } from "./modules/feed/components/NotificationIconButton/NotificationIconButton.mjs";
20
+ import { UnseenBadge as X } from "./modules/feed/components/UnseenBadge/UnseenBadge.mjs";
21
+ import { Banner as Z, BannerView as _ } from "./modules/guide/components/Banner/Banner.mjs";
22
+ import { Card as ee, CardView as oe } from "./modules/guide/components/Card/Card.mjs";
23
23
  import "react";
24
- import { FilterStatus as te, I18nContext as re, KnockFeedProvider as ne, KnockGuideContext as ae, KnockI18nProvider as ie, KnockMsTeamsProvider as se, KnockProvider as me, KnockSlackProvider as ue, feedProviderKey as ce, formatBadgeCount as pe, formatTimestamp as fe, getBadgeAriaLabel as le, locales as de, msTeamsProviderKey as xe, renderNodeOrFallback as Ce, slackProviderKey as ke, toSentenceCase as Se, useAuthenticatedKnockClient as he, useConnectedMsTeamsChannels as Ke, useConnectedSlackChannels as Te, useCreateNotificationStore as Me, useFeedSettings as ve, useGuide as Be, useGuideContext as Pe, useGuides as Ae, useKnockClient as Fe, useKnockFeed as Ne, useKnockMsTeamsClient as be, useKnockSlackClient as Ge, useMsTeamsAuth as ge, useMsTeamsChannels as we, useMsTeamsConnectionStatus as ye, useMsTeamsTeams as Ie, useNotificationStore as Oe, useNotifications as Ve, usePreferences as De, useSlackAuth as Ee, useSlackChannels as He, useSlackConnectionStatus as Le, useStableOptions as Re, useTranslations as Ue } from "@knocklabs/react-core";
24
+ import { FilterStatus as re, I18nContext as ne, KnockFeedProvider as ie, KnockGuideContext as ae, KnockI18nProvider as se, KnockMsTeamsProvider as me, KnockProvider as ue, KnockSlackProvider as pe, feedProviderKey as ce, formatBadgeCount as fe, formatTimestamp as le, getBadgeAriaLabel as de, locales as xe, msTeamsProviderKey as Ce, renderNodeOrFallback as ke, slackProviderKey as Se, toSentenceCase as he, useAuthenticatedKnockClient as Ke, useConnectedMsTeamsChannels as Te, useConnectedSlackChannels as Me, useCreateNotificationStore as ve, useFeedSettings as Be, useGuide as Pe, useGuideContext as Ae, useGuides as Fe, useKnockClient as Ne, useKnockFeed as be, useKnockMsTeamsClient as Ge, useKnockSlackClient as ge, useMsTeamsAuth as we, useMsTeamsChannels as ye, useMsTeamsConnectionStatus as Ie, useMsTeamsTeams as Oe, useNotificationStore as Ve, useNotifications as De, usePreferences as Ee, useSlackAuth as He, useSlackChannels as Le, useSlackConnectionStatus as Re, useStableOptions as Ue, useTranslations as je } from "@knocklabs/react-core";
25
25
  import "@telegraph/button";
26
26
  import "@telegraph/layout";
27
27
  import "@telegraph/tag";
@@ -32,86 +32,87 @@ import "@telegraph/icon";
32
32
  import "@telegraph/segmented-control";
33
33
  import "@telegraph/tooltip";
34
34
  import "@knocklabs/client";
35
- import { Modal as qe, ModalView as ze } from "./modules/guide/components/Modal/Modal.mjs";
36
- import { KnockGuideProvider as Qe } from "./modules/guide/providers/KnockGuideProvider.mjs";
37
- import { MsTeamsAuthButton as Xe } from "./modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs";
38
- import { MsTeamsAuthContainer as Ze } from "./modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs";
39
- import { default as $e } from "./modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs";
40
- import { SlackAuthButton as oo } from "./modules/slack/components/SlackAuthButton/SlackAuthButton.mjs";
41
- import { SlackAuthContainer as ro } from "./modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs";
35
+ import "@telegraph/toggle";
36
+ import { Modal as ze, ModalView as Je } from "./modules/guide/components/Modal/Modal.mjs";
37
+ import { KnockGuideProvider as We } from "./modules/guide/providers/KnockGuideProvider.mjs";
38
+ import { MsTeamsAuthButton as Ye } from "./modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.mjs";
39
+ import { MsTeamsAuthContainer as _e } from "./modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.mjs";
40
+ import { default as eo } from "./modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.mjs";
41
+ import { SlackAuthButton as to } from "./modules/slack/components/SlackAuthButton/SlackAuthButton.mjs";
42
+ import { SlackAuthContainer as no } from "./modules/slack/components/SlackAuthContainer/SlackAuthContainer.mjs";
42
43
  import { SlackChannelCombobox as ao } from "./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.mjs";
43
44
  export {
44
- I as Avatar,
45
- Y as Banner,
46
- Z as BannerView,
47
- S as BellIcon,
48
- d as Button,
49
- C as ButtonGroup,
50
- $ as Card,
51
- ee as CardView,
52
- K as CheckmarkCircle,
53
- M as ChevronDown,
54
- B as CloseCircle,
55
- G as EmptyFeed,
56
- te as FilterStatus,
57
- re as I18nContext,
58
- ne as KnockFeedProvider,
45
+ O as Avatar,
46
+ Z as Banner,
47
+ _ as BannerView,
48
+ h as BellIcon,
49
+ x as Button,
50
+ k as ButtonGroup,
51
+ ee as Card,
52
+ oe as CardView,
53
+ T as CheckmarkCircle,
54
+ v as ChevronDown,
55
+ P as CloseCircle,
56
+ g as EmptyFeed,
57
+ re as FilterStatus,
58
+ ne as I18nContext,
59
+ ie as KnockFeedProvider,
59
60
  ae as KnockGuideContext,
60
- Qe as KnockGuideProvider,
61
- ie as KnockI18nProvider,
62
- se as KnockMsTeamsProvider,
63
- me as KnockProvider,
64
- ue as KnockSlackProvider,
65
- L as MarkAsRead,
66
- qe as Modal,
67
- ze as ModalView,
68
- Xe as MsTeamsAuthButton,
69
- Ze as MsTeamsAuthContainer,
70
- $e as MsTeamsChannelCombobox,
71
- w as NotificationCell,
72
- V as NotificationFeed,
73
- U as NotificationFeedContainer,
74
- E as NotificationFeedHeader,
75
- q as NotificationFeedPopover,
76
- J as NotificationIconButton,
77
- oo as SlackAuthButton,
78
- ro as SlackAuthContainer,
61
+ We as KnockGuideProvider,
62
+ se as KnockI18nProvider,
63
+ me as KnockMsTeamsProvider,
64
+ ue as KnockProvider,
65
+ pe as KnockSlackProvider,
66
+ R as MarkAsRead,
67
+ ze as Modal,
68
+ Je as ModalView,
69
+ Ye as MsTeamsAuthButton,
70
+ _e as MsTeamsAuthContainer,
71
+ eo as MsTeamsChannelCombobox,
72
+ y as NotificationCell,
73
+ D as NotificationFeed,
74
+ j as NotificationFeedContainer,
75
+ H as NotificationFeedHeader,
76
+ z as NotificationFeedPopover,
77
+ Q as NotificationIconButton,
78
+ to as SlackAuthButton,
79
+ no as SlackAuthContainer,
79
80
  ao as SlackChannelCombobox,
80
- A as Spinner,
81
- W as UnseenBadge,
81
+ F as Spinner,
82
+ X as UnseenBadge,
82
83
  ce as feedProviderKey,
83
- pe as formatBadgeCount,
84
- fe as formatTimestamp,
85
- le as getBadgeAriaLabel,
86
- de as locales,
87
- xe as msTeamsProviderKey,
88
- Ce as renderNodeOrFallback,
89
- ke as slackProviderKey,
90
- Se as toSentenceCase,
91
- he as useAuthenticatedKnockClient,
92
- Ke as useConnectedMsTeamsChannels,
93
- Te as useConnectedSlackChannels,
94
- Me as useCreateNotificationStore,
95
- ve as useFeedSettings,
96
- Be as useGuide,
97
- Pe as useGuideContext,
98
- Ae as useGuides,
99
- Fe as useKnockClient,
100
- Ne as useKnockFeed,
101
- be as useKnockMsTeamsClient,
102
- Ge as useKnockSlackClient,
103
- ge as useMsTeamsAuth,
104
- we as useMsTeamsChannels,
105
- ye as useMsTeamsConnectionStatus,
106
- Ie as useMsTeamsTeams,
107
- Oe as useNotificationStore,
108
- Ve as useNotifications,
109
- N as useOnBottomScroll,
110
- De as usePreferences,
111
- Ee as useSlackAuth,
112
- He as useSlackChannels,
113
- Le as useSlackConnectionStatus,
114
- Re as useStableOptions,
115
- Ue as useTranslations
84
+ fe as formatBadgeCount,
85
+ le as formatTimestamp,
86
+ de as getBadgeAriaLabel,
87
+ xe as locales,
88
+ Ce as msTeamsProviderKey,
89
+ ke as renderNodeOrFallback,
90
+ Se as slackProviderKey,
91
+ he as toSentenceCase,
92
+ Ke as useAuthenticatedKnockClient,
93
+ Te as useConnectedMsTeamsChannels,
94
+ Me as useConnectedSlackChannels,
95
+ ve as useCreateNotificationStore,
96
+ Be as useFeedSettings,
97
+ Pe as useGuide,
98
+ Ae as useGuideContext,
99
+ Fe as useGuides,
100
+ Ne as useKnockClient,
101
+ be as useKnockFeed,
102
+ Ge as useKnockMsTeamsClient,
103
+ ge as useKnockSlackClient,
104
+ we as useMsTeamsAuth,
105
+ ye as useMsTeamsChannels,
106
+ Ie as useMsTeamsConnectionStatus,
107
+ Oe as useMsTeamsTeams,
108
+ Ve as useNotificationStore,
109
+ De as useNotifications,
110
+ b as useOnBottomScroll,
111
+ Ee as usePreferences,
112
+ He as useSlackAuth,
113
+ Le as useSlackChannels,
114
+ Re as useSlackConnectionStatus,
115
+ Ue as useStableOptions,
116
+ je as useTranslations
116
117
  };
117
118
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,79 @@
1
+ import { useGuideContext as g, useStore as y } from "@knocklabs/react-core";
2
+ import { Button as d } from "@telegraph/button";
3
+ import { Box as h, Stack as p } from "@telegraph/layout";
4
+ import { Tooltip as m } from "@telegraph/tooltip";
5
+ import { Text as x } from "@telegraph/typography";
6
+ import { ChevronLeft as E, ChevronRight as k, X as v } from "lucide-react";
7
+ import * as t from "react";
8
+ import { GUIDE_ROW_DATA_SELECTOR as C } from "./GuideRow.mjs";
9
+ const f = 60, b = (o, i) => {
10
+ requestAnimationFrame(() => {
11
+ const n = o.querySelector(`[${C}="${CSS.escape(i)}"]`);
12
+ if (!n || !(n instanceof HTMLElement)) return;
13
+ const e = o.getBoundingClientRect(), c = n.getBoundingClientRect();
14
+ c.top < e.top ? o.scrollTo({
15
+ top: o.scrollTop - (e.top - c.top) - f,
16
+ behavior: "smooth"
17
+ }) : c.bottom > e.bottom && o.scrollTo({
18
+ top: o.scrollTop + (c.bottom - e.bottom) + f,
19
+ behavior: "smooth"
20
+ });
21
+ });
22
+ }, K = ({
23
+ guides: o,
24
+ guideListRef: i
25
+ }) => {
26
+ const {
27
+ client: n
28
+ } = g(), {
29
+ debugSettings: e
30
+ } = y(n.store, (r) => ({
31
+ debugSettings: r.debug
32
+ })), c = Object.keys((e == null ? void 0 : e.focusedGuideKeys) || {});
33
+ if (!(c.length > 0))
34
+ return null;
35
+ const a = c[0];
36
+ return /* @__PURE__ */ t.createElement(h, { borderTop: "px", px: "3", py: "1", overflow: "hidden", backgroundColor: "blue-2" }, /* @__PURE__ */ t.createElement(p, { align: "center", justify: "space-between", gap: "4" }, /* @__PURE__ */ t.createElement(x, { as: "span", size: "1", weight: "medium", color: "blue", style: {
37
+ display: "block",
38
+ overflow: "hidden",
39
+ textOverflow: "ellipsis",
40
+ whiteSpace: "nowrap",
41
+ minWidth: 0
42
+ } }, "Focus mode: ", a), /* @__PURE__ */ t.createElement(p, { align: "center", gap: "1", style: {
43
+ flexShrink: 0
44
+ } }, /* @__PURE__ */ t.createElement(m, { label: "Focus previous guide" }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
45
+ icon: E,
46
+ alt: "Previous guide"
47
+ }, onClick: () => {
48
+ const r = o.filter((s) => !!s.annotation.selectable.status), u = r.findIndex((s) => s.key === a), l = u <= 0 ? void 0 : r[u - 1];
49
+ l && (n.setDebug({
50
+ ...e,
51
+ focusedGuideKeys: {
52
+ [l.key]: !0
53
+ }
54
+ }), i.current && b(i.current, l.key));
55
+ } })), /* @__PURE__ */ t.createElement(m, { label: "Focus next guide" }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
56
+ icon: k,
57
+ alt: "Next guide"
58
+ }, onClick: () => {
59
+ const r = o.filter((s) => !!s.annotation.selectable.status), u = r.findIndex((s) => s.key === a), l = u < 0 || u + 1 > r.length - 1 ? void 0 : r[u + 1];
60
+ l && (n.setDebug({
61
+ ...e,
62
+ focusedGuideKeys: {
63
+ [l.key]: !0
64
+ }
65
+ }), i.current && b(i.current, l.key));
66
+ } })), /* @__PURE__ */ t.createElement(m, { label: "Exit focus lock" }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
67
+ icon: v,
68
+ alt: "Clear focus"
69
+ }, onClick: () => {
70
+ n.setDebug({
71
+ ...e,
72
+ focusedGuideKeys: {}
73
+ });
74
+ } })))));
75
+ };
76
+ export {
77
+ K as FocusChin
78
+ };
79
+ //# sourceMappingURL=FocusChin.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FocusChin.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/FocusChin.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GUIDE_ROW_DATA_SELECTOR } from \"./GuideRow\";\nimport { InspectionResultOk } from \"./useInspectGuideClientStore\";\n\n// Extra scroll overshoot so the focused guide plus ~1-2 neighbors are visible,\n// reducing how often consecutive next/prev clicks trigger a scroll.\nconst SCROLL_OVERSHOOT = 60;\n\nconst maybeScrollGuideIntoView = (container: HTMLElement, guideKey: string) => {\n requestAnimationFrame(() => {\n const el = container.querySelector(\n `[${GUIDE_ROW_DATA_SELECTOR}=\"${CSS.escape(guideKey)}\"]`,\n );\n if (!el || !(el instanceof HTMLElement)) return;\n\n const containerRect = container.getBoundingClientRect();\n const elRect = el.getBoundingClientRect();\n\n if (elRect.top < containerRect.top) {\n container.scrollTo({\n top:\n container.scrollTop -\n (containerRect.top - elRect.top) -\n SCROLL_OVERSHOOT,\n behavior: \"smooth\",\n });\n } else if (elRect.bottom > containerRect.bottom) {\n container.scrollTo({\n top:\n container.scrollTop +\n (elRect.bottom - containerRect.bottom) +\n SCROLL_OVERSHOOT,\n behavior: \"smooth\",\n });\n }\n });\n};\n\ntype Props = {\n guides: InspectionResultOk[\"guides\"];\n guideListRef: React.RefObject<HTMLDivElement | null>;\n};\n\nexport const FocusChin = ({ guides, guideListRef }: Props) => {\n const { client } = useGuideContext();\n const { debugSettings } = useStore(client.store, (state) => ({\n debugSettings: state.debug,\n }));\n\n const focusedKeys = Object.keys(debugSettings?.focusedGuideKeys || {});\n\n const isFocused = focusedKeys.length > 0;\n if (!isFocused) {\n return null;\n }\n\n const currentKey = focusedKeys[0]!;\n\n return (\n <Box\n borderTop=\"px\"\n px=\"3\"\n py=\"1\"\n overflow=\"hidden\"\n backgroundColor=\"blue-2\"\n >\n <Stack align=\"center\" justify=\"space-between\" gap=\"4\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"blue\"\n style={{\n display: \"block\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n minWidth: 0,\n }}\n >\n Focus mode: {currentKey}\n </Text>\n <Stack align=\"center\" gap=\"1\" style={{ flexShrink: 0 }}>\n <Tooltip label=\"Focus previous guide\">\n <Button\n size=\"0\"\n variant=\"ghost\"\n color=\"blue\"\n leadingIcon={{ icon: ChevronLeft, alt: \"Previous guide\" }}\n onClick={() => {\n const selectableGuides = guides.filter(\n (g) => !!g.annotation.selectable.status,\n );\n const currIndex = selectableGuides.findIndex(\n (g) => g.key === currentKey,\n );\n const prevGuide =\n currIndex <= 0 ? undefined : selectableGuides[currIndex - 1];\n\n if (!prevGuide) return;\n\n client.setDebug({\n ...debugSettings,\n focusedGuideKeys: { [prevGuide.key]: true },\n });\n\n if (guideListRef.current) {\n maybeScrollGuideIntoView(guideListRef.current, prevGuide.key);\n }\n }}\n />\n </Tooltip>\n <Tooltip label=\"Focus next guide\">\n <Button\n size=\"0\"\n variant=\"ghost\"\n color=\"blue\"\n leadingIcon={{ icon: ChevronRight, alt: \"Next guide\" }}\n onClick={() => {\n const selectableGuides = guides.filter(\n (g) => !!g.annotation.selectable.status,\n );\n const currIndex = selectableGuides.findIndex(\n (g) => g.key === currentKey,\n );\n const nextGuide =\n currIndex < 0 || currIndex + 1 > selectableGuides.length - 1\n ? undefined\n : selectableGuides[currIndex + 1];\n\n if (!nextGuide) return;\n\n client.setDebug({\n ...debugSettings,\n focusedGuideKeys: { [nextGuide.key]: true },\n });\n\n if (guideListRef.current) {\n maybeScrollGuideIntoView(guideListRef.current, nextGuide.key);\n }\n }}\n />\n </Tooltip>\n <Tooltip label=\"Exit focus lock\">\n <Button\n size=\"0\"\n variant=\"ghost\"\n color=\"blue\"\n leadingIcon={{ icon: X, alt: \"Clear focus\" }}\n onClick={() => {\n client.setDebug({ ...debugSettings, focusedGuideKeys: {} });\n }}\n />\n </Tooltip>\n </Stack>\n </Stack>\n </Box>\n );\n};\n"],"names":["SCROLL_OVERSHOOT","maybeScrollGuideIntoView","container","guideKey","requestAnimationFrame","el","querySelector","GUIDE_ROW_DATA_SELECTOR","CSS","escape","HTMLElement","containerRect","getBoundingClientRect","elRect","top","scrollTo","scrollTop","behavior","bottom","FocusChin","guides","guideListRef","client","useGuideContext","debugSettings","useStore","store","state","debug","focusedKeys","Object","keys","focusedGuideKeys","length","currentKey","React","Box","Stack","Text","display","overflow","textOverflow","whiteSpace","minWidth","flexShrink","Tooltip","Button","icon","ChevronLeft","alt","selectableGuides","filter","g","annotation","selectable","status","currIndex","findIndex","key","prevGuide","undefined","setDebug","current","ChevronRight","nextGuide","X"],"mappings":"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"}
@@ -1,18 +1,37 @@
1
1
  import e from "react";
2
- import { useGuideContext as o } from "@knocklabs/react-core";
3
- import { Box as r, Stack as a } from "@telegraph/layout";
4
- import { Text as n } from "@telegraph/typography";
5
- const d = () => {
2
+ import { useGuideContext as c, useStore as d } from "@knocklabs/react-core";
3
+ import { Box as o, Stack as t } from "@telegraph/layout";
4
+ import { Toggle as m } from "@telegraph/toggle";
5
+ import { Tooltip as i } from "@telegraph/tooltip";
6
+ import { Text as a } from "@telegraph/typography";
7
+ const f = () => {
6
8
  const {
7
- client: t
8
- } = o();
9
- return /* @__PURE__ */ e.createElement(r, { py: "3", px: "3" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "1", weight: "medium" }, "Target params"), /* @__PURE__ */ e.createElement(a, { direction: "column", gap: "2", mt: "2" }, /* @__PURE__ */ e.createElement(a, { direction: "row", gap: "2", align: "center" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "1", weight: "medium", color: "gray", width: "36", mt: "1" }, "Tenant"), /* @__PURE__ */ e.createElement(r, { rounded: "2", overflow: "auto", backgroundColor: "surface-2", border: "px", p: "1", style: {
9
+ client: r
10
+ } = c(), {
11
+ debugSettings: l
12
+ } = d(r.store, (n) => ({
13
+ debugSettings: n.debug || {}
14
+ }));
15
+ return /* @__PURE__ */ e.createElement(o, { py: "3", px: "3" }, /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "1", width: "full" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", display: "block" }, "Toolbar settings"), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "1" }, /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "center", h: "7" }, /* @__PURE__ */ e.createElement(i, { label: "Contain engagement actions to client side only" }, /* @__PURE__ */ e.createElement(o, { width: "36", mt: "1" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", borderBottom: "px", borderStyle: "dashed" }, "Sandbox engagement"))), /* @__PURE__ */ e.createElement(m.Default, { size: "1", pt: "1_5", value: !!l.skipEngagementTracking, onValueChange: (n) => {
16
+ r.setDebug({
17
+ ...l,
18
+ skipEngagementTracking: n
19
+ });
20
+ } })), /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "center", h: "7" }, /* @__PURE__ */ e.createElement(i, { label: "Ignore throttle and show next guide immediately" }, /* @__PURE__ */ e.createElement(o, { width: "36", mt: "1" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", borderBottom: "px", borderStyle: "dashed" }, "Ignore throttle"))), /* @__PURE__ */ e.createElement(m.Default, { size: "1", pt: "1_5", value: !!l.ignoreDisplayInterval, onValueChange: (n) => {
21
+ r.setDebug({
22
+ ...l,
23
+ ignoreDisplayInterval: n
24
+ });
25
+ } })))), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "1", width: "full" }, /* @__PURE__ */ e.createElement(i, { label: /* @__PURE__ */ e.createElement(a, { as: "span", size: "1" }, "The tenant and data payload passed to the guide client that are used for targeting", /* @__PURE__ */ e.createElement("br", null), "(via the targetParams prop to KnockGuideProvider)"), delayDuration: 500 }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", borderBottom: "px", borderStyle: "dashed", mt: "4", style: {
26
+ whiteSpace: "nowrap",
27
+ width: "fit-content"
28
+ } }, "Target params")), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "2" }, /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "center" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", width: "36", mt: "1" }, "Tenant"), /* @__PURE__ */ e.createElement(o, { rounded: "2", overflow: "auto", backgroundColor: "surface-2", border: "px", p: "1", style: {
10
29
  flex: 1,
11
30
  minWidth: 0
12
31
  } }, /* @__PURE__ */ e.createElement("pre", { style: {
13
32
  fontSize: "11px",
14
33
  margin: 0
15
- } }, /* @__PURE__ */ e.createElement("code", null, t.targetParams.tenant || "-")))), /* @__PURE__ */ e.createElement(a, { direction: "row", gap: "2", align: "flex-start" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "1", weight: "medium", color: "gray", width: "36", mt: "1" }, "Data"), /* @__PURE__ */ e.createElement(r, { rounded: "2", overflow: "auto", backgroundColor: "surface-2", border: "px", p: "1", style: {
34
+ } }, /* @__PURE__ */ e.createElement("code", null, r.targetParams.tenant || "-")))), /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "flex-start" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", width: "36", mt: "1" }, "Data"), /* @__PURE__ */ e.createElement(o, { rounded: "2", overflow: "auto", backgroundColor: "surface-2", border: "px", p: "1", style: {
16
35
  flex: 1,
17
36
  minWidth: 0,
18
37
  minHeight: "50px",
@@ -20,9 +39,9 @@ const d = () => {
20
39
  } }, /* @__PURE__ */ e.createElement("pre", { style: {
21
40
  fontSize: "11px",
22
41
  margin: 0
23
- } }, /* @__PURE__ */ e.createElement("code", null, t.targetParams.data ? JSON.stringify(t.targetParams.data, null, 2) : "-"))))));
42
+ } }, /* @__PURE__ */ e.createElement("code", null, r.targetParams.data ? JSON.stringify(r.targetParams.data, null, 2) : "-")))))));
24
43
  };
25
44
  export {
26
- d as GuideContextDetails
45
+ f as GuideContextDetails
27
46
  };
28
47
  //# sourceMappingURL=GuideContextDetails.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"GuideContextDetails.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\n\nexport const GuideContextDetails = () => {\n const { client } = useGuideContext();\n\n return (\n <Box py=\"3\" px=\"3\">\n <Text as=\"span\" size=\"1\" weight=\"medium\">\n Target params\n </Text>\n <Stack direction=\"column\" gap=\"2\" mt=\"2\">\n <Stack direction=\"row\" gap=\"2\" align=\"center\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n width=\"36\"\n mt=\"1\"\n >\n Tenant\n </Text>\n <Box\n rounded=\"2\"\n overflow=\"auto\"\n backgroundColor=\"surface-2\"\n border=\"px\"\n p=\"1\"\n style={{ flex: 1, minWidth: 0 }}\n >\n <pre style={{ fontSize: \"11px\", margin: 0 }}>\n <code>{client.targetParams.tenant || \"-\"}</code>\n </pre>\n </Box>\n </Stack>\n <Stack direction=\"row\" gap=\"2\" align=\"flex-start\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n width=\"36\"\n mt=\"1\"\n >\n Data\n </Text>\n <Box\n rounded=\"2\"\n overflow=\"auto\"\n backgroundColor=\"surface-2\"\n border=\"px\"\n p=\"1\"\n style={{\n flex: 1,\n minWidth: 0,\n minHeight: \"50px\",\n maxHeight: \"200px\",\n }}\n >\n <pre style={{ fontSize: \"11px\", margin: 0 }}>\n <code>\n {client.targetParams.data\n ? JSON.stringify(client.targetParams.data, null, 2)\n : \"-\"}\n </code>\n </pre>\n </Box>\n </Stack>\n </Stack>\n </Box>\n );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","React","Box","Text","Stack","flex","minWidth","fontSize","margin","targetParams","tenant","minHeight","maxHeight","data","JSON","stringify"],"mappings":";;;;AAIO,MAAMA,IAAsBA,MAAM;AACjC,QAAA;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB;AAEnC,SACGC,gBAAAA,EAAA,cAAAC,GAAA,EAAI,IAAG,KAAI,IAAG,IAAA,GACZD,gBAAAA,EAAA,cAAAE,GAAA,EAAK,IAAG,QAAO,MAAK,KAAI,QAAO,SAAA,GAAQ,eAExC,GACCF,gBAAAA,EAAA,cAAAG,GAAA,EAAM,WAAU,UAAS,KAAI,KAAI,IAAG,OAClCH,gBAAAA,EAAA,cAAAG,GAAA,EAAM,WAAU,OAAM,KAAI,KAAI,OAAM,SAAA,GAClCH,gBAAAA,EAAA,cAAAE,GAAA,EACC,IAAG,QACH,MAAK,KACL,QAAO,UACP,OAAM,QACN,OAAM,MACN,IAAG,IAAA,GAAG,QAGR,GACCF,gBAAAA,EAAA,cAAAC,GAAA,EACC,SAAQ,KACR,UAAS,QACT,iBAAgB,aAChB,QAAO,MACP,GAAE,KACF,OAAO;AAAA,IAAEG,MAAM;AAAA,IAAGC,UAAU;AAAA,EAAE,EAAA,GAE7BL,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAO;AAAA,IAAEM,UAAU;AAAA,IAAQC,QAAQ;AAAA,EAAE,EAAA,mCACvC,QAAMT,MAAAA,EAAOU,aAAaC,UAAU,GAAI,CAC3C,CACF,CACF,GACCT,gBAAAA,EAAA,cAAAG,GAAA,EAAM,WAAU,OAAM,KAAI,KAAI,OAAM,aAAA,GAClCH,gBAAAA,EAAA,cAAAE,GAAA,EACC,IAAG,QACH,MAAK,KACL,QAAO,UACP,OAAM,QACN,OAAM,MACN,IAAG,OAAG,MAGR,GACAF,gBAAAA,EAAA,cAACC,KACC,SAAQ,KACR,UAAS,QACT,iBAAgB,aAChB,QAAO,MACP,GAAE,KACF,OAAO;AAAA,IACLG,MAAM;AAAA,IACNC,UAAU;AAAA,IACVK,WAAW;AAAA,IACXC,WAAW;AAAA,EACb,EAAA,GAECX,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAO;AAAA,IAAEM,UAAU;AAAA,IAAQC,QAAQ;AAAA,EAAA,KACrCP,gBAAAA,EAAA,cAAA,QAAA,MACEF,EAAOU,aAAaI,OACjBC,KAAKC,UAAUhB,EAAOU,aAAaI,MAAM,MAAM,CAAC,IAChD,GACN,CACF,CACF,CACF,CACF,CACF;AAEJ;"}
1
+ {"version":3,"file":"GuideContextDetails.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Toggle } from \"@telegraph/toggle\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\n\nexport const GuideContextDetails = () => {\n const { client } = useGuideContext();\n const { debugSettings } = useStore(client.store, (state) => ({\n debugSettings: state.debug || {},\n }));\n\n return (\n <Box py=\"3\" px=\"3\">\n <Stack direction=\"column\" gap=\"1\" width=\"full\">\n <Text as=\"span\" size=\"1\" weight=\"medium\" display=\"block\">\n Toolbar settings\n </Text>\n <Stack direction=\"column\" gap=\"1\">\n <Stack direction=\"row\" gap=\"2\" align=\"center\" h=\"7\">\n <Tooltip label=\"Contain engagement actions to client side only\">\n <Box width=\"36\" mt=\"1\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n borderBottom=\"px\"\n borderStyle=\"dashed\"\n >\n Sandbox engagement\n </Text>\n </Box>\n </Tooltip>\n <Toggle.Default\n size=\"1\"\n pt=\"1_5\"\n value={!!debugSettings.skipEngagementTracking}\n onValueChange={(value: boolean) => {\n client.setDebug({\n ...debugSettings,\n skipEngagementTracking: value,\n });\n }}\n />\n </Stack>\n <Stack direction=\"row\" gap=\"2\" align=\"center\" h=\"7\">\n <Tooltip label=\"Ignore throttle and show next guide immediately\">\n <Box width=\"36\" mt=\"1\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n borderBottom=\"px\"\n borderStyle=\"dashed\"\n >\n Ignore throttle\n </Text>\n </Box>\n </Tooltip>\n <Toggle.Default\n size=\"1\"\n pt=\"1_5\"\n value={!!debugSettings.ignoreDisplayInterval}\n onValueChange={(value: boolean) => {\n client.setDebug({\n ...debugSettings,\n ignoreDisplayInterval: value,\n });\n }}\n />\n </Stack>\n </Stack>\n </Stack>\n <Stack direction=\"column\" gap=\"1\" width=\"full\">\n <Tooltip\n label={\n <Text as=\"span\" size=\"1\">\n The tenant and data payload passed to the guide client that are\n used for targeting\n <br />\n (via the targetParams prop to KnockGuideProvider)\n </Text>\n }\n delayDuration={500}\n >\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n borderBottom=\"px\"\n borderStyle=\"dashed\"\n mt=\"4\"\n style={{\n whiteSpace: \"nowrap\",\n width: \"fit-content\",\n }}\n >\n Target params\n </Text>\n </Tooltip>\n <Stack direction=\"column\" gap=\"2\">\n <Stack direction=\"row\" gap=\"2\" align=\"center\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n width=\"36\"\n mt=\"1\"\n >\n Tenant\n </Text>\n <Box\n rounded=\"2\"\n overflow=\"auto\"\n backgroundColor=\"surface-2\"\n border=\"px\"\n p=\"1\"\n style={{ flex: 1, minWidth: 0 }}\n >\n <pre style={{ fontSize: \"11px\", margin: 0 }}>\n <code>{client.targetParams.tenant || \"-\"}</code>\n </pre>\n </Box>\n </Stack>\n <Stack direction=\"row\" gap=\"2\" align=\"flex-start\">\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color=\"gray\"\n width=\"36\"\n mt=\"1\"\n >\n Data\n </Text>\n <Box\n rounded=\"2\"\n overflow=\"auto\"\n backgroundColor=\"surface-2\"\n border=\"px\"\n p=\"1\"\n style={{\n flex: 1,\n minWidth: 0,\n minHeight: \"50px\",\n maxHeight: \"200px\",\n }}\n >\n <pre style={{ fontSize: \"11px\", margin: 0 }}>\n <code>\n {client.targetParams.data\n ? JSON.stringify(client.targetParams.data, null, 2)\n : \"-\"}\n </code>\n </pre>\n </Box>\n </Stack>\n </Stack>\n </Stack>\n </Box>\n );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","debugSettings","useStore","store","state","debug","Box","Stack","Text","React","Tooltip","Toggle","skipEngagementTracking","value","setDebug","ignoreDisplayInterval","whiteSpace","width","flex","minWidth","fontSize","margin","targetParams","tenant","minHeight","maxHeight","data","JSON","stringify"],"mappings":"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"}