@atlaskit/menu 2.12.2 → 2.12.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/menu
 
+## 2.12.4
+
+### Patch Changes
+
+- [#144715](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144715)
+  [`dac4cd0c2919b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dac4cd0c2919b) -
+  Added UFO interaction metrics to ButtonItem
+
+## 2.12.3
+
+### Patch Changes
+
+- [#144779](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144779)
+  [`de2f4742e3595`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/de2f4742e3595) -
+  [ux] Removed menu section header capitalisation.
+
 ## 2.12.2
 
 ### Patch Changes

package/dist/cjs/menu-item/button-item.js

@@ -11,8 +11,10 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
-var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className"];
+var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -46,8 +48,14 @@ function (props, ref) {
     shouldTitleWrap = props.shouldTitleWrap,
     shouldDescriptionWrap = props.shouldDescriptionWrap,
     UNSAFE_className = props.className,
+    interactionName = props.interactionName,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var onMouseDownHandler = onMouseDown;
+  var interactionContext = (0, _react.useContext)(_interactionContext.default);
+  var handleClick = (0, _react.useCallback)(function (e) {
+    interactionContext === null || interactionContext === void 0 || interactionContext.tracePress(interactionName, e.timeStamp);
+    onClick === null || onClick === void 0 || onClick(e);
+  }, [onClick, interactionContext, interactionName]);
   if (!children) {
     return null;
   }
@@ -85,7 +93,7 @@ function (props, ref) {
       className: className,
       ref: ref,
       disabled: isDisabled,
-      onClick: onClick,
+      onClick: (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') ? handleClick : onClick,
       onMouseDown: onMouseDownHandler,
       type: "button"
     }), children);

package/dist/cjs/menu-item/heading-item.js

@@ -22,8 +22,7 @@ var headingStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
   font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)",
-  textTransform: 'uppercase'
+  paddingInline: "var(--ds-space-200, 16px)"
 });
 
 /**

package/dist/cjs/menu-item/link-item.js

@@ -12,7 +12,6 @@ var _react2 = require("@emotion/react");
 var _appProvider = require("@atlaskit/app-provider");
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
 var _excluded = ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_shouldDisableRouterLink", "UNSAFE_isDraggable"];
 /**
@@ -76,7 +75,7 @@ function (props, ref) {
    * - it doesn't have an empty href (e.g. href="" or href={undefined})
    */
   var isRouterLink = !UNSAFE_shouldDisableRouterLink && RouterLink && !isExternal && !isNonHttpBased && !isEmptyHref;
-  var Component = isRouterLink && (0, _platformFeatureFlags.fg)('platform.wanjel.use-router-links-for-the-linkitem-component') ? RouterLink : 'a';
+  var Component = isRouterLink ? RouterLink : 'a';
   (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
   return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {

package/dist/es2019/menu-item/button-item.js

@@ -3,12 +3,14 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { forwardRef, memo } from 'react';
+import { forwardRef, memo, useCallback, useContext } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import InteractionContext from '@atlaskit/interaction-context';
+import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 /**
  * __Button item__
@@ -40,9 +42,15 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
     // picked it out and supressed the expected type error.
     // @ts-expect-error
     className: UNSAFE_className,
+    interactionName,
     ...rest
   } = props;
   const onMouseDownHandler = onMouseDown;
+  const interactionContext = useContext(InteractionContext);
+  const handleClick = useCallback(e => {
+    interactionContext === null || interactionContext === void 0 ? void 0 : interactionContext.tracePress(interactionName, e.timeStamp);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  }, [onClick, interactionContext, interactionName]);
   if (!children) {
     return null;
   }
@@ -80,7 +88,7 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
     className: className,
     ref: ref,
     disabled: isDisabled,
-    onClick: onClick,
+    onClick: fg('platform_button_item-add-ufo-metrics') ? handleClick : onClick,
     onMouseDown: onMouseDownHandler,
     type: "button"
   }), children));

package/dist/es2019/menu-item/heading-item.js

@@ -14,8 +14,7 @@ const headingStyles = css({
   color: `var(--ds-text-subtle, ${N300})`,
   font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)",
-  textTransform: 'uppercase'
+  paddingInline: "var(--ds-space-200, 16px)"
 });
 
 /**

package/dist/es2019/menu-item/link-item.js

@@ -10,7 +10,6 @@ import { jsx } from '@emotion/react';
 import { useRouterLink } from '@atlaskit/app-provider';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
-import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
@@ -71,7 +70,7 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
    * - it doesn't have an empty href (e.g. href="" or href={undefined})
    */
   const isRouterLink = !UNSAFE_shouldDisableRouterLink && RouterLink && !isExternal && !isNonHttpBased && !isEmptyHref;
-  const Component = isRouterLink && fg('platform.wanjel.use-router-links-for-the-linkitem-component') ? RouterLink : 'a';
+  const Component = isRouterLink ? RouterLink : 'a';
   propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
   return jsx(MenuItemPrimitive, _extends({}, rest, {

package/dist/esm/menu-item/button-item.js

@@ -1,16 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className"];
+var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { forwardRef, memo } from 'react';
+import { forwardRef, memo, useCallback, useContext } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import InteractionContext from '@atlaskit/interaction-context';
+import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 /**
  * __Button item__
@@ -40,8 +42,14 @@ function (props, ref) {
     shouldTitleWrap = props.shouldTitleWrap,
     shouldDescriptionWrap = props.shouldDescriptionWrap,
     UNSAFE_className = props.className,
+    interactionName = props.interactionName,
     rest = _objectWithoutProperties(props, _excluded);
   var onMouseDownHandler = onMouseDown;
+  var interactionContext = useContext(InteractionContext);
+  var handleClick = useCallback(function (e) {
+    interactionContext === null || interactionContext === void 0 || interactionContext.tracePress(interactionName, e.timeStamp);
+    onClick === null || onClick === void 0 || onClick(e);
+  }, [onClick, interactionContext, interactionName]);
   if (!children) {
     return null;
   }
@@ -79,7 +87,7 @@ function (props, ref) {
       className: className,
       ref: ref,
       disabled: isDisabled,
-      onClick: onClick,
+      onClick: fg('platform_button_item-add-ufo-metrics') ? handleClick : onClick,
       onMouseDown: onMouseDownHandler,
       type: "button"
     }), children);

package/dist/esm/menu-item/heading-item.js

@@ -16,8 +16,7 @@ var headingStyles = css({
   color: "var(--ds-text-subtle, ".concat(N300, ")"),
   font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)",
-  textTransform: 'uppercase'
+  paddingInline: "var(--ds-space-200, 16px)"
 });
 
 /**

package/dist/esm/menu-item/link-item.js

@@ -12,7 +12,6 @@ import { jsx } from '@emotion/react';
 import { useRouterLink } from '@atlaskit/app-provider';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
-import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
@@ -70,7 +69,7 @@ function (props, ref) {
    * - it doesn't have an empty href (e.g. href="" or href={undefined})
    */
   var isRouterLink = !UNSAFE_shouldDisableRouterLink && RouterLink && !isExternal && !isNonHttpBased && !isEmptyHref;
-  var Component = isRouterLink && fg('platform.wanjel.use-router-links-for-the-linkitem-component') ? RouterLink : 'a';
+  var Component = isRouterLink ? RouterLink : 'a';
   propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
   return jsx(MenuItemPrimitive, _extends({}, rest, {

package/dist/types/types.d.ts

@@ -165,7 +165,7 @@ export interface MenuItemProps {
     /**
      * Event that's triggered when the element is clicked.
      */
-    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /**
      * Event that's triggered when the element has been pressed.
      */
@@ -217,6 +217,10 @@ export interface ButtonItemProps extends MenuItemProps {
      * Use this to override the accessibility role for the element.
      */
     role?: string;
+    /**
+     * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     */
+    interactionName?: string;
 }
 export interface LinkItemProps extends MenuItemProps {
     /**

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

@@ -165,7 +165,7 @@ export interface MenuItemProps {
     /**
      * Event that's triggered when the element is clicked.
      */
-    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /**
      * Event that's triggered when the element has been pressed.
      */
@@ -217,6 +217,10 @@ export interface ButtonItemProps extends MenuItemProps {
      * Use this to override the accessibility role for the element.
      */
     role?: string;
+    /**
+     * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     */
+    interactionName?: string;
 }
 export interface LinkItemProps extends MenuItemProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "2.12.2",
+	"version": "2.12.4",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -17,10 +17,6 @@
 	"atlassian": {
 		"team": "Design System Team",
 		"runReact18": true,
-		"productPushConsumption": [
-			"jira"
-		],
-		"releaseModel": "continuous",
 		"website": {
 			"name": "Menu",
 			"subPages": [
@@ -44,12 +40,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/app-provider": "^1.4.0",
-		"@atlaskit/ds-lib": "^2.4.0",
+		"@atlaskit/ds-lib": "^2.6.0",
 		"@atlaskit/focus-ring": "^1.6.0",
+		"@atlaskit/interaction-context": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.61.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -124,7 +121,7 @@
 		"platform.design-system-team.section-1px-seperator-borders": {
 			"type": "boolean"
 		},
-		"platform.wanjel.use-router-links-for-the-linkitem-component": {
+		"platform_button_item-add-ufo-metrics": {
 			"type": "boolean"
 		}
 	},