@atlaskit/editor-toolbar 0.8.7 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-toolbar
 
+## 0.9.0
+
+### Minor Changes
+
+- [`553afc302139b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/553afc302139b) -
+  Add analytic emitter component which fires an event when dropdowns are viewed
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.8.7
 
 ### Patch Changes

package/dist/cjs/hooks/ui-context.js

@@ -11,7 +11,8 @@ var ToolbarUIContext = /*#__PURE__*/(0, _react.createContext)({
   onDropdownOpenChanged: function onDropdownOpenChanged() {},
   preventDefaultOnMouseDown: false,
   isDisabled: false,
-  popupsMountPoint: undefined
+  popupsMountPoint: undefined,
+  fireAnalyticsEvent: undefined
 });
 
 /**
@@ -31,7 +32,8 @@ var ToolbarUIProvider = exports.ToolbarUIProvider = function ToolbarUIProvider(_
     isDisabled = _ref.isDisabled,
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
-    popupsScrollableElement = _ref.popupsScrollableElement;
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent;
   return /*#__PURE__*/_react.default.createElement(ToolbarUIContext.Provider, {
     value: {
       onDropdownOpenChanged: onDropdownOpenChanged,
@@ -39,7 +41,8 @@ var ToolbarUIProvider = exports.ToolbarUIProvider = function ToolbarUIProvider(_
       isDisabled: isDisabled,
       popupsMountPoint: popupsMountPoint,
       popupsBoundariesElement: popupsBoundariesElement,
-      popupsScrollableElement: popupsScrollableElement
+      popupsScrollableElement: popupsScrollableElement,
+      fireAnalyticsEvent: fireAnalyticsEvent
     }
   }, children);
 };

package/dist/cjs/ui/Toolbar.js

@@ -15,6 +15,7 @@ var _css = require("@atlaskit/css");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _ResponsiveContainer = require("./ResponsiveContainer");
+var _ViewEventEmitter = require("./ViewEventEmitter");
 var styles = {
   toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
   toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
@@ -29,13 +30,17 @@ var styles = {
  */
 var Toolbar = exports.Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
-    label = _ref.label;
+    label = _ref.label,
+    actionSubjectId = _ref.actionSubjectId;
   var isResponsiveEnabled = (0, _expValEquals.expValEquals)('platform_editor_aifc_selection_toolbar_responsive', 'isEnabled', true);
   var toolbar = /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
     role: "toolbar",
     "aria-label": label
-  }, children);
+  }, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_toolbar_analytic', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_ViewEventEmitter.ViewEventEmitter, {
+    actionSubject: _ViewEventEmitter.ACTION_SUBJECT.TOOLBAR,
+    actionSubjectId: actionSubjectId
+  }) : null, children);
   if (isResponsiveEnabled) {
     return /*#__PURE__*/_react.default.createElement(_ResponsiveContainer.ResponsiveWrapper, null, toolbar);
   } else {

package/dist/cjs/ui/ToolbarDropdownMenu.js

@@ -56,9 +56,9 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
         "aria-controls": triggerProps['aria-controls'],
         onBlur: triggerProps.onBlur,
         onClick: function onClick(e) {
+          _onClick && _onClick(e, !(menuContext !== null && menuContext !== void 0 && menuContext.isOpen));
           handleClick();
           triggerProps.onClick && triggerProps.onClick(e);
-          _onClick && _onClick(e);
         },
         onFocus: triggerProps.onFocus,
         testId: testId,

package/dist/cjs/ui/ToolbarNestedDropdownMenu.js

@@ -27,7 +27,8 @@ var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function Too
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     _ref$enableMaxHeight = _ref.enableMaxHeight,
-    enableMaxHeight = _ref$enableMaxHeight === void 0 ? false : _ref$enableMaxHeight;
+    enableMaxHeight = _ref$enableMaxHeight === void 0 ? false : _ref$enableMaxHeight,
+    _onClick = _ref.onClick;
   return /*#__PURE__*/React.createElement(_dropdownMenu.default, {
     placement: "right-start",
     trigger: function trigger(triggerProps) {
@@ -35,7 +36,10 @@ var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function Too
         elemBefore: elemBefore,
         elemAfter: elemAfter,
         isSelected: triggerProps.isSelected,
-        onClick: triggerProps.onClick,
+        onClick: function onClick(e) {
+          _onClick && _onClick(e);
+          triggerProps.onClick && triggerProps.onClick(e);
+        },
         testId: testId,
         triggerRef: triggerProps.triggerRef,
         hasNestedDropdownMenu: true,

package/dist/cjs/ui/ViewEventEmitter.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewEventEmitter = exports.ACTION_SUBJECT = void 0;
+var _react = require("react");
+var _uiContext = require("../hooks/ui-context");
+var ACTION_SUBJECT = exports.ACTION_SUBJECT = {
+  TOOLBAR: 'toolbar',
+  TOOLBAR_DROPDOWN_MENU: 'toolbarDropdownMenu'
+};
+var ViewEventEmitter = exports.ViewEventEmitter = function ViewEventEmitter(_ref) {
+  var actionSubjectId = _ref.actionSubjectId,
+    actionSubject = _ref.actionSubject;
+  var isMountedRef = (0, _react.useRef)(false);
+  var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
+    fireAnalyticsEvent = _useToolbarUI.fireAnalyticsEvent;
+  (0, _react.useEffect)(function () {
+    if (isMountedRef.current) {
+      return;
+    }
+    isMountedRef.current = true;
+    var payload = {
+      action: 'viewed',
+      actionSubject: actionSubject,
+      actionSubjectId: actionSubjectId,
+      eventType: 'ui'
+    };
+    fireAnalyticsEvent && fireAnalyticsEvent(payload);
+  }, [actionSubjectId, actionSubject, fireAnalyticsEvent]);
+  return null;
+};

package/dist/es2019/hooks/ui-context.js

@@ -3,7 +3,8 @@ const ToolbarUIContext = /*#__PURE__*/createContext({
   onDropdownOpenChanged: () => {},
   preventDefaultOnMouseDown: false,
   isDisabled: false,
-  popupsMountPoint: undefined
+  popupsMountPoint: undefined,
+  fireAnalyticsEvent: undefined
 });
 
 /**
@@ -23,7 +24,8 @@ export const ToolbarUIProvider = ({
   isDisabled,
   popupsMountPoint,
   popupsBoundariesElement,
-  popupsScrollableElement
+  popupsScrollableElement,
+  fireAnalyticsEvent
 }) => {
   return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
     value: {
@@ -32,7 +34,8 @@ export const ToolbarUIProvider = ({
       isDisabled,
       popupsMountPoint,
       popupsBoundariesElement,
-      popupsScrollableElement
+      popupsScrollableElement,
+      fireAnalyticsEvent
     }
   }, children);
 };

package/dist/es2019/ui/Toolbar.js

@@ -8,6 +8,7 @@ import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ResponsiveContainer, ResponsiveWrapper } from './ResponsiveContainer';
+import { ACTION_SUBJECT, ViewEventEmitter } from './ViewEventEmitter';
 const styles = {
   toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
   toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
@@ -22,14 +23,18 @@ const styles = {
  */
 export const Toolbar = ({
   children,
-  label
+  label,
+  actionSubjectId
 }) => {
   const isResponsiveEnabled = expValEquals('platform_editor_aifc_selection_toolbar_responsive', 'isEnabled', true);
   const toolbar = /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
     role: "toolbar",
     "aria-label": label
-  }, children);
+  }, expValEquals('platform_editor_toolbar_aifc_toolbar_analytic', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ViewEventEmitter, {
+    actionSubject: ACTION_SUBJECT.TOOLBAR,
+    actionSubjectId: actionSubjectId
+  }) : null, children);
   if (isResponsiveEnabled) {
     return /*#__PURE__*/React.createElement(ResponsiveWrapper, null, toolbar);
   } else {

package/dist/es2019/ui/ToolbarDropdownMenu.js

@@ -48,9 +48,9 @@ const ToolbarDropdownMenuContent = ({
       "aria-controls": triggerProps['aria-controls'],
       onBlur: triggerProps.onBlur,
       onClick: e => {
+        onClick && onClick(e, !(menuContext !== null && menuContext !== void 0 && menuContext.isOpen));
         handleClick();
         triggerProps.onClick && triggerProps.onClick(e);
-        onClick && onClick(e);
       },
       onFocus: triggerProps.onFocus,
       testId: testId,

package/dist/es2019/ui/ToolbarNestedDropdownMenu.js

@@ -17,7 +17,8 @@ export const ToolbarNestedDropdownMenu = ({
   children,
   isDisabled,
   testId,
-  enableMaxHeight = false
+  enableMaxHeight = false,
+  onClick
 }) => {
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     placement: "right-start",
@@ -25,7 +26,10 @@ export const ToolbarNestedDropdownMenu = ({
       elemBefore: elemBefore,
       elemAfter: elemAfter,
       isSelected: triggerProps.isSelected,
-      onClick: triggerProps.onClick,
+      onClick: e => {
+        onClick && onClick(e);
+        triggerProps.onClick && triggerProps.onClick(e);
+      },
       testId: testId,
       triggerRef: triggerProps.triggerRef,
       hasNestedDropdownMenu: true,

package/dist/es2019/ui/ViewEventEmitter.js

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+import { useToolbarUI } from '../hooks/ui-context';
+export const ACTION_SUBJECT = {
+  TOOLBAR: 'toolbar',
+  TOOLBAR_DROPDOWN_MENU: 'toolbarDropdownMenu'
+};
+export const ViewEventEmitter = ({
+  actionSubjectId,
+  actionSubject
+}) => {
+  const isMountedRef = useRef(false);
+  const {
+    fireAnalyticsEvent
+  } = useToolbarUI();
+  useEffect(() => {
+    if (isMountedRef.current) {
+      return;
+    }
+    isMountedRef.current = true;
+    const payload = {
+      action: 'viewed',
+      actionSubject,
+      actionSubjectId,
+      eventType: 'ui'
+    };
+    fireAnalyticsEvent && fireAnalyticsEvent(payload);
+  }, [actionSubjectId, actionSubject, fireAnalyticsEvent]);
+  return null;
+};

package/dist/esm/hooks/ui-context.js

@@ -3,7 +3,8 @@ var ToolbarUIContext = /*#__PURE__*/createContext({
   onDropdownOpenChanged: function onDropdownOpenChanged() {},
   preventDefaultOnMouseDown: false,
   isDisabled: false,
-  popupsMountPoint: undefined
+  popupsMountPoint: undefined,
+  fireAnalyticsEvent: undefined
 });
 
 /**
@@ -23,7 +24,8 @@ export var ToolbarUIProvider = function ToolbarUIProvider(_ref) {
     isDisabled = _ref.isDisabled,
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
-    popupsScrollableElement = _ref.popupsScrollableElement;
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent;
   return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
     value: {
       onDropdownOpenChanged: onDropdownOpenChanged,
@@ -31,7 +33,8 @@ export var ToolbarUIProvider = function ToolbarUIProvider(_ref) {
       isDisabled: isDisabled,
       popupsMountPoint: popupsMountPoint,
       popupsBoundariesElement: popupsBoundariesElement,
-      popupsScrollableElement: popupsScrollableElement
+      popupsScrollableElement: popupsScrollableElement,
+      fireAnalyticsEvent: fireAnalyticsEvent
     }
   }, children);
 };

package/dist/esm/ui/Toolbar.js

@@ -8,6 +8,7 @@ import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ResponsiveContainer, ResponsiveWrapper } from './ResponsiveContainer';
+import { ACTION_SUBJECT, ViewEventEmitter } from './ViewEventEmitter';
 var styles = {
   toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
   toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
@@ -22,13 +23,17 @@ var styles = {
  */
 export var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
-    label = _ref.label;
+    label = _ref.label,
+    actionSubjectId = _ref.actionSubjectId;
   var isResponsiveEnabled = expValEquals('platform_editor_aifc_selection_toolbar_responsive', 'isEnabled', true);
   var toolbar = /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
     role: "toolbar",
     "aria-label": label
-  }, children);
+  }, expValEquals('platform_editor_toolbar_aifc_toolbar_analytic', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ViewEventEmitter, {
+    actionSubject: ACTION_SUBJECT.TOOLBAR,
+    actionSubjectId: actionSubjectId
+  }) : null, children);
   if (isResponsiveEnabled) {
     return /*#__PURE__*/React.createElement(ResponsiveWrapper, null, toolbar);
   } else {

package/dist/esm/ui/ToolbarDropdownMenu.js

@@ -47,9 +47,9 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
         "aria-controls": triggerProps['aria-controls'],
         onBlur: triggerProps.onBlur,
         onClick: function onClick(e) {
+          _onClick && _onClick(e, !(menuContext !== null && menuContext !== void 0 && menuContext.isOpen));
           handleClick();
           triggerProps.onClick && triggerProps.onClick(e);
-          _onClick && _onClick(e);
         },
         onFocus: triggerProps.onFocus,
         testId: testId,

package/dist/esm/ui/ToolbarNestedDropdownMenu.js

@@ -18,7 +18,8 @@ export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref)
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     _ref$enableMaxHeight = _ref.enableMaxHeight,
-    enableMaxHeight = _ref$enableMaxHeight === void 0 ? false : _ref$enableMaxHeight;
+    enableMaxHeight = _ref$enableMaxHeight === void 0 ? false : _ref$enableMaxHeight,
+    _onClick = _ref.onClick;
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     placement: "right-start",
     trigger: function trigger(triggerProps) {
@@ -26,7 +27,10 @@ export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref)
         elemBefore: elemBefore,
         elemAfter: elemAfter,
         isSelected: triggerProps.isSelected,
-        onClick: triggerProps.onClick,
+        onClick: function onClick(e) {
+          _onClick && _onClick(e);
+          triggerProps.onClick && triggerProps.onClick(e);
+        },
         testId: testId,
         triggerRef: triggerProps.triggerRef,
         hasNestedDropdownMenu: true,

package/dist/esm/ui/ViewEventEmitter.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { useToolbarUI } from '../hooks/ui-context';
+export var ACTION_SUBJECT = {
+  TOOLBAR: 'toolbar',
+  TOOLBAR_DROPDOWN_MENU: 'toolbarDropdownMenu'
+};
+export var ViewEventEmitter = function ViewEventEmitter(_ref) {
+  var actionSubjectId = _ref.actionSubjectId,
+    actionSubject = _ref.actionSubject;
+  var isMountedRef = useRef(false);
+  var _useToolbarUI = useToolbarUI(),
+    fireAnalyticsEvent = _useToolbarUI.fireAnalyticsEvent;
+  useEffect(function () {
+    if (isMountedRef.current) {
+      return;
+    }
+    isMountedRef.current = true;
+    var payload = {
+      action: 'viewed',
+      actionSubject: actionSubject,
+      actionSubjectId: actionSubjectId,
+      eventType: 'ui'
+    };
+    fireAnalyticsEvent && fireAnalyticsEvent(payload);
+  }, [actionSubjectId, actionSubject, fireAnalyticsEvent]);
+  return null;
+};

package/dist/types/hooks/ui-context.d.ts

@@ -1,6 +1,14 @@
 import React from 'react';
 import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
+type AnalyticsEventPayload = {
+    action: string;
+    actionSubject?: string;
+    actionSubjectId?: string;
+    eventType: string;
+};
+type FireAnalyticsEvent = (payload: AnalyticsEventPayload) => void | undefined;
 export type ToolbarUIContextType = {
+    fireAnalyticsEvent?: FireAnalyticsEvent;
     /**
      * Indicates whether the toolbar is disabled when the editor is offline.
      */
@@ -26,5 +34,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
 type ToolbarUIProviderProps = {
     children: React.ReactNode;
 } & ToolbarUIContextType;
-export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: ToolbarUIProviderProps) => React.JSX.Element;
+export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, fireAnalyticsEvent, }: ToolbarUIProviderProps) => React.JSX.Element;
 export {};

package/dist/types/ui/Toolbar.d.ts

@@ -1,5 +1,6 @@
 import React, { type ReactNode } from 'react';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
+import { type ViewEventEmitterProps } from './ViewEventEmitter';
 type ToolbarProps = {
     children?: ReactNode;
     /**
@@ -8,13 +9,13 @@ type ToolbarProps = {
      * use case: query select the toolbar to position floating toolbar
      */
     label: string;
-};
+} & ViewEventEmitterProps;
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
  *
  * @note: Responsiveness support replies on container query with container editor-area and media query
  */
-export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
+export declare const Toolbar: ({ children, label, actionSubjectId }: ToolbarProps) => React.JSX.Element;
 type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar

package/dist/types/ui/ToolbarDropdownMenu.d.ts

@@ -16,7 +16,7 @@ type ToolbarDropdownMenuProps = {
     iconBefore: React.ReactNode;
     isDisabled?: boolean;
     label?: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, isOpen: boolean) => void;
     testId?: string;
 };
 export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, enableMaxHeight, onClick, }: ToolbarDropdownMenuProps) => JSX.Element;

package/dist/types/ui/ToolbarNestedDropdownMenu.d.ts

@@ -12,8 +12,9 @@ type ToolbarNestedDropdownMenuProps = {
      */
     enableMaxHeight?: boolean;
     isDisabled?: boolean;
+    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
     testId?: string;
     text?: string;
 };
-export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, enableMaxHeight, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
+export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, enableMaxHeight, onClick, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
 export {};

package/dist/types/ui/ToolbarTooltip.d.ts

@@ -6,5 +6,5 @@ type ToolbarTooltipProps = {
     delay?: number;
     position?: PositionType;
 };
-export declare const ToolbarTooltip: ({ content, children, position, delay }: ToolbarTooltipProps) => React.JSX.Element;
+export declare const ToolbarTooltip: ({ content, children, position, delay, }: ToolbarTooltipProps) => React.JSX.Element;
 export {};

package/dist/types/ui/ViewEventEmitter.d.ts

@@ -0,0 +1,12 @@
+export declare const ACTION_SUBJECT: {
+    TOOLBAR: string;
+    TOOLBAR_DROPDOWN_MENU: string;
+};
+export type ViewEventEmitterProps = {
+    actionSubject?: string;
+    /**
+     * Name of dropdown to identify in analytic events
+     */
+    actionSubjectId?: string;
+};
+export declare const ViewEventEmitter: ({ actionSubjectId, actionSubject }: ViewEventEmitterProps) => null;

package/dist/types-ts4.5/hooks/ui-context.d.ts

@@ -1,6 +1,14 @@
 import React from 'react';
 import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
+type AnalyticsEventPayload = {
+    action: string;
+    actionSubject?: string;
+    actionSubjectId?: string;
+    eventType: string;
+};
+type FireAnalyticsEvent = (payload: AnalyticsEventPayload) => void | undefined;
 export type ToolbarUIContextType = {
+    fireAnalyticsEvent?: FireAnalyticsEvent;
     /**
      * Indicates whether the toolbar is disabled when the editor is offline.
      */
@@ -26,5 +34,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
 type ToolbarUIProviderProps = {
     children: React.ReactNode;
 } & ToolbarUIContextType;
-export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: ToolbarUIProviderProps) => React.JSX.Element;
+export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, fireAnalyticsEvent, }: ToolbarUIProviderProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/Toolbar.d.ts

@@ -1,5 +1,6 @@
 import React, { type ReactNode } from 'react';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
+import { type ViewEventEmitterProps } from './ViewEventEmitter';
 type ToolbarProps = {
     children?: ReactNode;
     /**
@@ -8,13 +9,13 @@ type ToolbarProps = {
      * use case: query select the toolbar to position floating toolbar
      */
     label: string;
-};
+} & ViewEventEmitterProps;
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
  *
  * @note: Responsiveness support replies on container query with container editor-area and media query
  */
-export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
+export declare const Toolbar: ({ children, label, actionSubjectId }: ToolbarProps) => React.JSX.Element;
 type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar

package/dist/types-ts4.5/ui/ToolbarDropdownMenu.d.ts

@@ -16,7 +16,7 @@ type ToolbarDropdownMenuProps = {
     iconBefore: React.ReactNode;
     isDisabled?: boolean;
     label?: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, isOpen: boolean) => void;
     testId?: string;
 };
 export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, enableMaxHeight, onClick, }: ToolbarDropdownMenuProps) => JSX.Element;

package/dist/types-ts4.5/ui/ToolbarNestedDropdownMenu.d.ts

@@ -12,8 +12,9 @@ type ToolbarNestedDropdownMenuProps = {
      */
     enableMaxHeight?: boolean;
     isDisabled?: boolean;
+    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
     testId?: string;
     text?: string;
 };
-export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, enableMaxHeight, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
+export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, enableMaxHeight, onClick, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ToolbarTooltip.d.ts

@@ -6,5 +6,5 @@ type ToolbarTooltipProps = {
     delay?: number;
     position?: PositionType;
 };
-export declare const ToolbarTooltip: ({ content, children, position, delay }: ToolbarTooltipProps) => React.JSX.Element;
+export declare const ToolbarTooltip: ({ content, children, position, delay, }: ToolbarTooltipProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ViewEventEmitter.d.ts

@@ -0,0 +1,12 @@
+export declare const ACTION_SUBJECT: {
+    TOOLBAR: string;
+    TOOLBAR_DROPDOWN_MENU: string;
+};
+export type ViewEventEmitterProps = {
+    actionSubject?: string;
+    /**
+     * Name of dropdown to identify in analytic events
+     */
+    actionSubjectId?: string;
+};
+export declare const ViewEventEmitter: ({ actionSubjectId, actionSubject }: ViewEventEmitterProps) => null;

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.8.7",
+	"version": "0.9.0",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -31,7 +31,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.14.0",
-		"@atlaskit/tmp-editor-statsig": "^12.18.0",
+		"@atlaskit/tmp-editor-statsig": "^12.21.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",