@atlaskit/renderer 134.0.9 → 135.0.0

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 (9) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/react/nodes/heading.js +15 -1
  3. package/dist/cjs/ui/Renderer/index.js +1 -1
  4. package/dist/es2019/react/nodes/heading.js +16 -1
  5. package/dist/es2019/ui/Renderer/index.js +1 -1
  6. package/dist/esm/react/nodes/heading.js +15 -1
  7. package/dist/esm/ui/Renderer/index.js +1 -1
  8. package/dist/types/analytics/events.d.ts +6 -2
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 135.0.0
4
+
5
+ ### Patch Changes
6
+
7
+ - [`1db4a5f3ed39f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1db4a5f3ed39f) -
8
+ Add analytics for collapsible heading toggles
9
+ - Updated dependencies
10
+
3
11
  ## 134.0.9
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/react/nodes/heading.js CHANGED
@@ -92,8 +92,11 @@ function WrappedHeadingAnchor(_ref) {
92
92
  }
93
93
  function CollapsibleHeadingButton(_ref3) {
94
94
  var collapsibleHeading = _ref3.collapsibleHeading,
95
+ headingLevel = _ref3.headingLevel,
95
96
  isHeadingHovered = _ref3.isHeadingHovered;
96
97
  var intl = (0, _reactIntl.useIntl)();
98
+ var _React$useContext = _react.default.useContext(_analyticsContext.default),
99
+ fireAnalyticsEvent = _React$useContext.fireAnalyticsEvent;
97
100
  var _React$useState = _react.default.useState(false),
98
101
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
99
102
  isFocused = _React$useState2[0],
@@ -103,8 +106,17 @@ function CollapsibleHeadingButton(_ref3) {
103
106
  var isVisible = isCollapsed || isFocused || isHeadingHovered;
104
107
  var handleClick = _react.default.useCallback(function (event) {
105
108
  event.stopPropagation();
109
+ fireAnalyticsEvent({
110
+ action: _analytics.ACTION.TOGGLED,
111
+ actionSubject: _analytics.ACTION_SUBJECT.HEADING,
112
+ attributes: {
113
+ expanded: isCollapsed,
114
+ headingLevel: headingLevel
115
+ },
116
+ eventType: _analytics.EVENT_TYPE.TRACK
117
+ });
106
118
  toggle();
107
- }, [toggle]);
119
+ }, [fireAnalyticsEvent, headingLevel, isCollapsed, toggle]);
108
120
  var handleFocus = _react.default.useCallback(function (event) {
109
121
  setIsFocused(hasFocusVisible(event.target));
110
122
  }, []);
@@ -171,6 +183,7 @@ function CollapsibleHeadingContainer(_ref4) {
171
183
  className: (0, _runtime.ax)(["_ahbqukr8 _bozgxy5q _kqswh2mm"])
172
184
  }, /*#__PURE__*/_react.default.createElement(CollapsibleHeadingButton, {
173
185
  collapsibleHeading: collapsibleHeading,
186
+ headingLevel: headingLevel,
174
187
  isHeadingHovered: isHovered || isFocused
175
188
  }), children);
176
189
  }
@@ -300,6 +313,7 @@ function HeadingWithWrapper(props) {
300
313
  onBlur: collapsibleHeading ? handleWrapperBlur : undefined
301
314
  }, collapsibleHeading && /*#__PURE__*/_react.default.createElement(CollapsibleHeadingButton, {
302
315
  collapsibleHeading: collapsibleHeading,
316
+ headingLevel: props.level,
303
317
  isHeadingHovered: isHovered || isFocused
304
318
  }), showAnchorLink && headingId && isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
305
319
  level: props.level,
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -73,7 +73,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
73
73
  var TABLE_INFO_TIMEOUT = 10000;
74
74
  var RENDER_EVENT_SAMPLE_RATE = 0.1;
75
75
  var packageName = "@atlaskit/renderer";
76
- var packageVersion = "134.0.8";
76
+ var packageVersion = "134.0.9";
77
77
  var setAsQueryContainerStyles = (0, _react2.css)({
78
78
  containerName: 'ak-renderer-wrapper',
79
79
  containerType: 'inline-size'
package/dist/es2019/react/nodes/heading.js CHANGED
@@ -76,9 +76,13 @@ function WrappedHeadingAnchor({
76
76
  }
77
77
  function CollapsibleHeadingButton({
78
78
  collapsibleHeading,
79
+ headingLevel,
79
80
  isHeadingHovered
80
81
  }) {
81
82
  const intl = useIntl();
83
+ const {
84
+ fireAnalyticsEvent
85
+ } = React.useContext(AnalyticsContext);
82
86
  const [isFocused, setIsFocused] = React.useState(false);
83
87
  const {
84
88
  isCollapsed,
@@ -87,8 +91,17 @@ function CollapsibleHeadingButton({
87
91
  const isVisible = isCollapsed || isFocused || isHeadingHovered;
88
92
  const handleClick = React.useCallback(event => {
89
93
  event.stopPropagation();
94
+ fireAnalyticsEvent({
95
+ action: ACTION.TOGGLED,
96
+ actionSubject: ACTION_SUBJECT.HEADING,
97
+ attributes: {
98
+ expanded: isCollapsed,
99
+ headingLevel
100
+ },
101
+ eventType: EVENT_TYPE.TRACK
102
+ });
90
103
  toggle();
91
- }, [toggle]);
104
+ }, [fireAnalyticsEvent, headingLevel, isCollapsed, toggle]);
92
105
  const handleFocus = React.useCallback(event => {
93
106
  setIsFocused(hasFocusVisible(event.target));
94
107
  }, []);
@@ -137,6 +150,7 @@ function CollapsibleHeadingContainer({
137
150
  className: ax(["_ahbqukr8 _bozgxy5q _kqswh2mm"])
138
151
  }, /*#__PURE__*/React.createElement(CollapsibleHeadingButton, {
139
152
  collapsibleHeading: collapsibleHeading,
153
+ headingLevel: headingLevel,
140
154
  isHeadingHovered: isHovered || isFocused
141
155
  }), children);
142
156
  }
@@ -258,6 +272,7 @@ function HeadingWithWrapper(props) {
258
272
  onBlur: collapsibleHeading ? handleWrapperBlur : undefined
259
273
  }, collapsibleHeading && /*#__PURE__*/React.createElement(CollapsibleHeadingButton, {
260
274
  collapsibleHeading: collapsibleHeading,
275
+ headingLevel: props.level,
261
276
  isHeadingHovered: isHovered || isFocused
262
277
  }), showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
263
278
  level: props.level,
package/dist/es2019/ui/Renderer/index.js CHANGED
@@ -59,7 +59,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
59
59
  const TABLE_INFO_TIMEOUT = 10000;
60
60
  const RENDER_EVENT_SAMPLE_RATE = 0.1;
61
61
  const packageName = "@atlaskit/renderer";
62
- const packageVersion = "134.0.8";
62
+ const packageVersion = "134.0.9";
63
63
  const setAsQueryContainerStyles = css({
64
64
  containerName: 'ak-renderer-wrapper',
65
65
  containerType: 'inline-size'
package/dist/esm/react/nodes/heading.js CHANGED
@@ -85,8 +85,11 @@ function WrappedHeadingAnchor(_ref) {
85
85
  }
86
86
  function CollapsibleHeadingButton(_ref3) {
87
87
  var collapsibleHeading = _ref3.collapsibleHeading,
88
+ headingLevel = _ref3.headingLevel,
88
89
  isHeadingHovered = _ref3.isHeadingHovered;
89
90
  var intl = useIntl();
91
+ var _React$useContext = React.useContext(AnalyticsContext),
92
+ fireAnalyticsEvent = _React$useContext.fireAnalyticsEvent;
90
93
  var _React$useState = React.useState(false),
91
94
  _React$useState2 = _slicedToArray(_React$useState, 2),
92
95
  isFocused = _React$useState2[0],
@@ -96,8 +99,17 @@ function CollapsibleHeadingButton(_ref3) {
96
99
  var isVisible = isCollapsed || isFocused || isHeadingHovered;
97
100
  var handleClick = React.useCallback(function (event) {
98
101
  event.stopPropagation();
102
+ fireAnalyticsEvent({
103
+ action: ACTION.TOGGLED,
104
+ actionSubject: ACTION_SUBJECT.HEADING,
105
+ attributes: {
106
+ expanded: isCollapsed,
107
+ headingLevel: headingLevel
108
+ },
109
+ eventType: EVENT_TYPE.TRACK
110
+ });
99
111
  toggle();
100
- }, [toggle]);
112
+ }, [fireAnalyticsEvent, headingLevel, isCollapsed, toggle]);
101
113
  var handleFocus = React.useCallback(function (event) {
102
114
  setIsFocused(hasFocusVisible(event.target));
103
115
  }, []);
@@ -164,6 +176,7 @@ function CollapsibleHeadingContainer(_ref4) {
164
176
  className: ax(["_ahbqukr8 _bozgxy5q _kqswh2mm"])
165
177
  }, /*#__PURE__*/React.createElement(CollapsibleHeadingButton, {
166
178
  collapsibleHeading: collapsibleHeading,
179
+ headingLevel: headingLevel,
167
180
  isHeadingHovered: isHovered || isFocused
168
181
  }), children);
169
182
  }
@@ -293,6 +306,7 @@ function HeadingWithWrapper(props) {
293
306
  onBlur: collapsibleHeading ? handleWrapperBlur : undefined
294
307
  }, collapsibleHeading && /*#__PURE__*/React.createElement(CollapsibleHeadingButton, {
295
308
  collapsibleHeading: collapsibleHeading,
309
+ headingLevel: props.level,
296
310
  isHeadingHovered: isHovered || isFocused
297
311
  }), showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
298
312
  level: props.level,
package/dist/esm/ui/Renderer/index.js CHANGED
@@ -64,7 +64,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
64
64
  var TABLE_INFO_TIMEOUT = 10000;
65
65
  var RENDER_EVENT_SAMPLE_RATE = 0.1;
66
66
  var packageName = "@atlaskit/renderer";
67
- var packageVersion = "134.0.8";
67
+ var packageVersion = "134.0.9";
68
68
  var setAsQueryContainerStyles = css({
69
69
  containerName: 'ak-renderer-wrapper',
70
70
  containerType: 'inline-size'
package/dist/types/analytics/events.d.ts CHANGED
@@ -23,9 +23,9 @@ type RendererRenderedAEP = AEP<ACTION.RENDERED, ACTION_SUBJECT.RENDERER, undefin
23
23
  nestedRendererType?: NestedRendererType;
24
24
  nodes: Record<string, number>;
25
25
  platform: PLATFORM.WEB;
26
+ sampleRate?: number;
26
27
  severity?: SEVERITY;
27
28
  ttfb?: number;
28
- sampleRate?: number;
29
29
  }, EVENT_TYPE.OPERATIONAL>;
30
30
  type RendererRenderedSampledAEP = AEP<ACTION.RENDERED_SAMPLED, ACTION_SUBJECT.RENDERER, undefined, {
31
31
  distortedDuration: boolean;
@@ -132,6 +132,10 @@ type ExpandAEP = AEP<ACTION.TOGGLE_EXPAND, ACTION_SUBJECT.EXPAND | ACTION_SUBJEC
132
132
  mode: MODE.RENDERER;
133
133
  platform: PLATFORM.WEB;
134
134
  }, EVENT_TYPE.TRACK>;
135
+ type CollapsibleHeadingToggledAEP = AEP<ACTION.TOGGLED, ACTION_SUBJECT.HEADING, undefined, {
136
+ expanded: boolean;
137
+ headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
138
+ }, EVENT_TYPE.TRACK>;
135
139
  type AnnotationActionType = ACTION.INSERTED | ACTION.CLOSED | ACTION.EDITED | ACTION.DELETED | ACTION.OPENED | ACTION.RESOLVED | ACTION.VIEWED | ACTION.CREATE_NOT_ALLOWED;
136
140
  type AnnotationAEPAttributes = AnnotationDraftAEPAttributes | AnnotationResolvedAEPAttributes;
137
141
  type AnnotationDraftAEPAttributes = {
@@ -185,6 +189,6 @@ export type MBEChangeActiveAnalyticsEvent = AEP<ACTION.CHANGE_ACTIVE, ACTION_SUB
185
189
  extensionKey: string;
186
190
  extensionType: string;
187
191
  }, EVENT_TYPE.TRACK>;
188
- export type AnalyticsEventPayload<_T = void> = RendererStartAEP | RendererRenderedAEP | RendererRenderedSampledAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | HoverLabelAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | TableRendererHeightInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP | ContainerNodeTransformedAEP | NativeEmbedsTransformedAEP | MediaRenderErrorEvent | SyncedBlockFetchErrorAEP | SyncedBlockGetSourceInfoErrorAEP | SyncedBlockSSRErrorAEP | ReferenceSyncedBlockUpdateErrorAEP | SyncedBlockFetchSuccessAEP | ExperienceEventPayload | MediaRenderedAEP | ExtensionRenderedAsInlineAEP | MBEChangeActiveAnalyticsEvent;
192
+ export type AnalyticsEventPayload<_T = void> = RendererStartAEP | RendererRenderedAEP | RendererRenderedSampledAEP | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | HoverLabelAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | TableWidthInfoAEP | TableRendererHeightInfoAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | CollapsibleHeadingToggledAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | NestedTableTransformedAEP | ContainerNodeTransformedAEP | NativeEmbedsTransformedAEP | MediaRenderErrorEvent | SyncedBlockFetchErrorAEP | SyncedBlockGetSourceInfoErrorAEP | SyncedBlockSSRErrorAEP | ReferenceSyncedBlockUpdateErrorAEP | SyncedBlockFetchSuccessAEP | ExperienceEventPayload | MediaRenderedAEP | ExtensionRenderedAsInlineAEP | MBEChangeActiveAnalyticsEvent;
189
193
  export type FireAnalyticsCallback = <T = void>(payload: AnalyticsEventPayload<T>) => void | undefined;
190
194
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "134.0.9",
3
+ "version": "135.0.0",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -84,7 +84,7 @@
84
84
  "uuid": "^3.1.0"
85
85
  },
86
86
  "peerDependencies": {
87
- "@atlaskit/editor-common": "^117.6.0",
87
+ "@atlaskit/editor-common": "^118.0.0",
88
88
  "@atlaskit/link-provider": "^5.3.0",
89
89
  "@atlaskit/media-core": "^38.0.0",
90
90
  "react": "^18.2.0",