@atlaskit/menu 1.6.1 → 1.7.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/menu
 
+## 1.7.1
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
+## 1.7.0
+
+### Minor Changes
+
+- [`d518f0e34b9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d518f0e34b9) - [ux] We are testing a selected indicator change to menu, dropdown-menu, and side-navigation packages behind an internal feature flag. If successful this will be released in a later minor release.
+
 ## 1.6.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -40,6 +40,12 @@ Object.defineProperty(exports, "PopupMenuGroup", {
     return _popupMenuGroup.default;
   }
 });
+Object.defineProperty(exports, "SELECTION_STYLE_CONTEXT_DO_NOT_USE", {
+  enumerable: true,
+  get: function get() {
+    return _menuContext.SELECTION_STYLE_CONTEXT_DO_NOT_USE;
+  }
+});
 Object.defineProperty(exports, "Section", {
   enumerable: true,
   get: function get() {

package/dist/cjs/internal/components/menu-context.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SpacingContext = void 0;
+exports.SpacingContext = exports.SELECTION_STYLE_CONTEXT_DO_NOT_USE = void 0;
 var _react = require("react");
 /**
  * __Spacing context__
@@ -13,4 +13,14 @@ var _react = require("react");
  * @internal Do not use directly.
  */
 var SpacingContext = /*#__PURE__*/(0, _react.createContext)('cozy');
-exports.SpacingContext = SpacingContext;
+
+/**
+ * __Selection context__
+ *
+ * The selection context is used to set what selection mode the menu items display as.
+ *
+ * @internal Do not use directly.
+ */
+exports.SpacingContext = SpacingContext;
+var SELECTION_STYLE_CONTEXT_DO_NOT_USE = /*#__PURE__*/(0, _react.createContext)('border');
+exports.SELECTION_STYLE_CONTEXT_DO_NOT_USE = SELECTION_STYLE_CONTEXT_DO_NOT_USE;

package/dist/cjs/internal/components/menu-item-primitive.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
 var _colors = require("@atlaskit/theme/colors");
 var _menuContext = require("./menu-context");
@@ -53,6 +54,9 @@ var descriptionStyles = (0, _react2.css)({
 var disabledDescriptionStyles = (0, _react2.css)({
   color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
 });
+var positionRelativeStyles = (0, _react2.css)({
+  position: 'relative'
+});
 var primitiveStyles = (0, _react2.css)({
   display: 'flex',
   boxSizing: 'border-box',
@@ -112,6 +116,29 @@ var disabledStyles = (0, _react2.css)({
     color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
   }
 });
+var selectedBorderStyles = (0, _react2.css)({
+  '&::before': {
+    width: 2,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    background: "var(--ds-border-selected, transparent)",
+    content: '""'
+  }
+});
+var selectedNotchStyles = (0, _react2.css)({
+  '&::before': {
+    width: 4,
+    position: 'absolute',
+    top: "var(--ds-space-150, 12px)",
+    bottom: "var(--ds-space-150, 12px)",
+    left: 0,
+    background: "var(--ds-border-selected, transparent)",
+    borderRadius: '0 4px 4px 0',
+    content: '""'
+  }
+});
 var selectedStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-selected, ".concat(_colors.N20, ")"),
   // Fallback set as babel plugin inserts one otherwise
@@ -164,6 +191,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
   var spacing = (0, _react.useContext)(_menuContext.SpacingContext);
+  var selectionStyle = (0, _react.useContext)(_menuContext.SELECTION_STYLE_CONTEXT_DO_NOT_USE);
   var renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
   return (0, _react2.jsx)(_react2.ClassNames, null, function (_ref2) {
     var cn = _ref2.css,
@@ -171,7 +199,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return (0, _react2.jsx)(_focusRing.default, {
       isInset: true
     }, children({
-      className: cx([cn([primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
+      className: cx([cn([(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9') && (selectionStyle === 'border' ? selectedBorderStyles : selectedNotchStyles)], isDisabled ? disabledStyles : interactiveStyles]), className]),
       children: (0, _react2.jsx)(_inline.default, {
         as: "span",
         spread: "space-between",

package/dist/cjs/menu-section/menu-group.js

@@ -32,6 +32,8 @@ var MenuGroup = function MenuGroup(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)(_menuContext.SpacingContext.Provider, {
     value: spacing
+  }, (0, _react.jsx)(_menuContext.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+    value: "border"
   }, (0, _react.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
     UNSAFE_style: {
       minWidth: minWidth,
@@ -46,7 +48,7 @@ var MenuGroup = function MenuGroup(_ref) {
     role: role,
     position: "static"
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, rest)));
+  }, rest))));
 };
 var _default = MenuGroup;
 exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.6.1",
+	"version": "1.7.1",
 	"sideEffects": false
 }

package/dist/es2019/index.js

@@ -2,7 +2,7 @@ export { default as ButtonItem } from './menu-item/button-item';
 export { default as LinkItem } from './menu-item/link-item';
 export { default as CustomItem } from './menu-item/custom-item';
 export { default as SkeletonItem } from './menu-item/skeleton-item';
-export { SpacingContext } from './internal/components/menu-context';
+export { SpacingContext, SELECTION_STYLE_CONTEXT_DO_NOT_USE } from './internal/components/menu-context';
 export { default as HeadingItem } from './menu-item/heading-item';
 export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-item';
 export { default as Section } from './menu-section/section';

package/dist/es2019/internal/components/menu-context.js

@@ -6,4 +6,13 @@ import { createContext } from 'react';
  *
  * @internal Do not use directly.
  */
-export const SpacingContext = /*#__PURE__*/createContext('cozy');
+export const SpacingContext = /*#__PURE__*/createContext('cozy');
+
+/**
+ * __Selection context__
+ *
+ * The selection context is used to set what selection mode the menu items display as.
+ *
+ * @internal Do not use directly.
+ */
+export const SELECTION_STYLE_CONTEXT_DO_NOT_USE = /*#__PURE__*/createContext('border');

package/dist/es2019/internal/components/menu-item-primitive.js

@@ -2,9 +2,10 @@
 import { useContext } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Inline from '@atlaskit/primitives/inline';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
-import { SpacingContext } from './menu-context';
+import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
 const defaultRender = (Component, props) =>
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 jsx(Component, props);
@@ -42,6 +43,9 @@ const descriptionStyles = css({
 const disabledDescriptionStyles = css({
   color: `var(--ds-text-disabled, ${N200})`
 });
+const positionRelativeStyles = css({
+  position: 'relative'
+});
 const primitiveStyles = css({
   display: 'flex',
   boxSizing: 'border-box',
@@ -101,6 +105,29 @@ const disabledStyles = css({
     color: `var(--ds-text-disabled, ${N200})`
   }
 });
+const selectedBorderStyles = css({
+  '&::before': {
+    width: 2,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    background: "var(--ds-border-selected, transparent)",
+    content: '""'
+  }
+});
+const selectedNotchStyles = css({
+  '&::before': {
+    width: 4,
+    position: 'absolute',
+    top: "var(--ds-space-150, 12px)",
+    bottom: "var(--ds-space-150, 12px)",
+    left: 0,
+    background: "var(--ds-border-selected, transparent)",
+    borderRadius: '0 4px 4px 0',
+    content: '""'
+  }
+});
 const selectedStyles = css({
   backgroundColor: `var(--ds-background-selected, ${N20})`,
   // Fallback set as babel plugin inserts one otherwise
@@ -150,6 +177,7 @@ const MenuItemPrimitive = ({
   isSelected = false
 }) => {
   const spacing = useContext(SpacingContext);
+  const selectionStyle = useContext(SELECTION_STYLE_CONTEXT_DO_NOT_USE);
   const renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
   return jsx(ClassNames, null, ({
     css: cn,
@@ -158,7 +186,7 @@ const MenuItemPrimitive = ({
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
+      className: cx([cn([getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && (selectionStyle === 'border' ? selectedBorderStyles : selectedNotchStyles)], isDisabled ? disabledStyles : interactiveStyles]), className]),
       children: jsx(Inline, {
         as: "span",
         spread: "space-between",

package/dist/es2019/menu-section/menu-group.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
-import { SpacingContext } from '../internal/components/menu-context';
+import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/components/menu-context';
 /**
  * __Menu group__
  *
@@ -22,6 +22,8 @@ const MenuGroup = ({
   ...rest
 }) => jsx(SpacingContext.Provider, {
   value: spacing
+}, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+  value: "border"
 }, jsx(Box, _extends({
   UNSAFE_style: {
     minWidth,
@@ -36,5 +38,5 @@ const MenuGroup = ({
   role: role,
   position: "static"
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-}, rest)));
+}, rest))));
 export default MenuGroup;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.6.1",
+	"version": "1.7.1",
 	"sideEffects": false
 }

package/dist/esm/index.js

@@ -2,7 +2,7 @@ export { default as ButtonItem } from './menu-item/button-item';
 export { default as LinkItem } from './menu-item/link-item';
 export { default as CustomItem } from './menu-item/custom-item';
 export { default as SkeletonItem } from './menu-item/skeleton-item';
-export { SpacingContext } from './internal/components/menu-context';
+export { SpacingContext, SELECTION_STYLE_CONTEXT_DO_NOT_USE } from './internal/components/menu-context';
 export { default as HeadingItem } from './menu-item/heading-item';
 export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-item';
 export { default as Section } from './menu-section/section';

package/dist/esm/internal/components/menu-context.js

@@ -6,4 +6,13 @@ import { createContext } from 'react';
  *
  * @internal Do not use directly.
  */
-export var SpacingContext = /*#__PURE__*/createContext('cozy');
+export var SpacingContext = /*#__PURE__*/createContext('cozy');
+
+/**
+ * __Selection context__
+ *
+ * The selection context is used to set what selection mode the menu items display as.
+ *
+ * @internal Do not use directly.
+ */
+export var SELECTION_STYLE_CONTEXT_DO_NOT_USE = /*#__PURE__*/createContext('border');

package/dist/esm/internal/components/menu-item-primitive.js

@@ -2,9 +2,10 @@
 import { useContext } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Inline from '@atlaskit/primitives/inline';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
-import { SpacingContext } from './menu-context';
+import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
 var defaultRender = function defaultRender(Component, props) {
   return (
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -45,6 +46,9 @@ var descriptionStyles = css({
 var disabledDescriptionStyles = css({
   color: "var(--ds-text-disabled, ".concat(N200, ")")
 });
+var positionRelativeStyles = css({
+  position: 'relative'
+});
 var primitiveStyles = css({
   display: 'flex',
   boxSizing: 'border-box',
@@ -104,6 +108,29 @@ var disabledStyles = css({
     color: "var(--ds-text-disabled, ".concat(N200, ")")
   }
 });
+var selectedBorderStyles = css({
+  '&::before': {
+    width: 2,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    background: "var(--ds-border-selected, transparent)",
+    content: '""'
+  }
+});
+var selectedNotchStyles = css({
+  '&::before': {
+    width: 4,
+    position: 'absolute',
+    top: "var(--ds-space-150, 12px)",
+    bottom: "var(--ds-space-150, 12px)",
+    left: 0,
+    background: "var(--ds-border-selected, transparent)",
+    borderRadius: '0 4px 4px 0',
+    content: '""'
+  }
+});
 var selectedStyles = css({
   backgroundColor: "var(--ds-background-selected, ".concat(N20, ")"),
   // Fallback set as babel plugin inserts one otherwise
@@ -156,6 +183,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
   var spacing = useContext(SpacingContext);
+  var selectionStyle = useContext(SELECTION_STYLE_CONTEXT_DO_NOT_USE);
   var renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
   return jsx(ClassNames, null, function (_ref2) {
     var cn = _ref2.css,
@@ -163,7 +191,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
+      className: cx([cn([getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && (selectionStyle === 'border' ? selectedBorderStyles : selectedNotchStyles)], isDisabled ? disabledStyles : interactiveStyles]), className]),
       children: jsx(Inline, {
         as: "span",
         spread: "space-between",

package/dist/esm/menu-section/menu-group.js

@@ -4,7 +4,7 @@ var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "ro
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
-import { SpacingContext } from '../internal/components/menu-context';
+import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/components/menu-context';
 /**
  * __Menu group__
  *
@@ -25,6 +25,8 @@ var MenuGroup = function MenuGroup(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   return jsx(SpacingContext.Provider, {
     value: spacing
+  }, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+    value: "border"
   }, jsx(Box, _extends({
     UNSAFE_style: {
       minWidth: minWidth,
@@ -39,6 +41,6 @@ var MenuGroup = function MenuGroup(_ref) {
     role: role,
     position: "static"
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, rest)));
+  }, rest))));
 };
 export default MenuGroup;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.6.1",
+	"version": "1.7.1",
 	"sideEffects": false
 }

package/dist/types/index.d.ts

@@ -2,7 +2,7 @@ export { default as ButtonItem } from './menu-item/button-item';
 export { default as LinkItem } from './menu-item/link-item';
 export { default as CustomItem } from './menu-item/custom-item';
 export { default as SkeletonItem } from './menu-item/skeleton-item';
-export { SpacingContext } from './internal/components/menu-context';
+export { SpacingContext, SELECTION_STYLE_CONTEXT_DO_NOT_USE, } from './internal/components/menu-context';
 export { default as HeadingItem } from './menu-item/heading-item';
 export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-item';
 export { default as Section } from './menu-section/section';

package/dist/types/internal/components/menu-context.d.ts

@@ -8,3 +8,11 @@ export type SpacingMode = 'compact' | 'cozy';
  * @internal Do not use directly.
  */
 export declare const SpacingContext: import("react").Context<SpacingMode>;
+/**
+ * __Selection context__
+ *
+ * The selection context is used to set what selection mode the menu items display as.
+ *
+ * @internal Do not use directly.
+ */
+export declare const SELECTION_STYLE_CONTEXT_DO_NOT_USE: import("react").Context<"notch" | "border">;

package/dist/types-ts4.5/entry-points/menu-item/button-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/button-item';

package/dist/types-ts4.5/entry-points/menu-item/custom-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/custom-item';

package/dist/types-ts4.5/entry-points/menu-item/heading-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/heading-item';

package/dist/types-ts4.5/entry-points/menu-item/link-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/link-item';

package/dist/types-ts4.5/entry-points/menu-item/skeleton-heading-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/skeleton-heading-item';

package/dist/types-ts4.5/entry-points/menu-item/skeleton-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/skeleton-item';

package/dist/types-ts4.5/entry-points/menu-section/menu-group.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-section/menu-group';

package/dist/types-ts4.5/entry-points/menu-section/popup-menu-group.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-section/popup-menu-group';

package/dist/types-ts4.5/entry-points/menu-section/section.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-section/section';

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

@@ -0,0 +1,11 @@
+export { default as ButtonItem } from './menu-item/button-item';
+export { default as LinkItem } from './menu-item/link-item';
+export { default as CustomItem } from './menu-item/custom-item';
+export { default as SkeletonItem } from './menu-item/skeleton-item';
+export { SpacingContext, SELECTION_STYLE_CONTEXT_DO_NOT_USE, } from './internal/components/menu-context';
+export { default as HeadingItem } from './menu-item/heading-item';
+export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-item';
+export { default as Section } from './menu-section/section';
+export { default as MenuGroup } from './menu-section/menu-group';
+export { default as PopupMenuGroup } from './menu-section/popup-menu-group';
+export type { ButtonItemProps, CSSFn, StatelessCSSFn, CustomItemComponentProps, CustomItemProps, HeadingItemProps, ItemState, LinkItemProps, MenuGroupProps, SectionProps, SkeletonHeadingItemProps, SkeletonItemProps, Dimension, MenuItemProps as BaseItemProps, Overrides, MenuGroupSizing, RenderFunction, SectionProps as SectionBaseProps, TitleOverrides, } from './types';

package/dist/types-ts4.5/internal/components/menu-context.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export type SpacingMode = 'compact' | 'cozy';
+/**
+ * __Spacing context__
+ *
+ *  The spacing context is used to provide spacing values to menu item primitives.
+ *
+ * @internal Do not use directly.
+ */
+export declare const SpacingContext: import("react").Context<SpacingMode>;
+/**
+ * __Selection context__
+ *
+ * The selection context is used to set what selection mode the menu items display as.
+ *
+ * @internal Do not use directly.
+ */
+export declare const SELECTION_STYLE_CONTEXT_DO_NOT_USE: import("react").Context<"notch" | "border">;

package/dist/types-ts4.5/internal/components/menu-item-primitive.d.ts

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react';
+import type { MenuItemPrimitiveProps } from '../../types';
+/**
+ * __Menu item primitive__
+ *
+ * Menu item primitive contains all the styles for menu items,
+ * including support for selected, disabled, and interaction states.
+ *
+ * Using children as function prop you wire up this to your own host element.
+ *
+ * ```jsx
+ * <MenuItemPrimitive>
+ *   {({ children, ...props }) => <button {...props}>{children}</button>}
+ * </MenuItemPrimitive>
+ * ```
+ */
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
+export default MenuItemPrimitive;

package/dist/types-ts4.5/internal/components/skeleton-shimmer.d.ts

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+type SkeletonShimmerProps = {
+    children: ({ className }: {
+        className?: string;
+    }) => ReactNode;
+    isShimmering?: boolean;
+};
+/**
+ * __Skeleton shimmer__
+ *
+ * A skeleton shimmer is the animation shown on loading skeletons for
+ * perceived performance and user satisfaction.
+ *
+ * This component provides a `className` through render props. This value will
+ * have type:
+ * + `string`, when `isShimmering={true}`.
+ * + `undefined`, when `isShimmering={false}`.
+ *
+ * @internal
+ */
+declare const SkeletonShimmer: ({ children, isShimmering, }: SkeletonShimmerProps) => jsx.JSX.Element;
+export default SkeletonShimmer;

package/dist/types-ts4.5/menu-item/button-item.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ButtonItemProps } from '../types';
+/**
+ * __Button item__
+ *
+ * A button item is used to populate a menu with items that are buttons.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/button-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const ButtonItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ButtonItemProps & import("react").RefAttributes<HTMLElement>>>;
+export default ButtonItem;

package/dist/types-ts4.5/menu-item/custom-item.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import type { CustomItemComponentProps, CustomItemProps } from '../types';
+interface CustomItemTypeGenericHackProps {
+    <TComponentProps>(props: CustomItemProps<TComponentProps> & {
+        ref?: any;
+    } & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
+}
+/**
+ * __Custom item__
+ *
+ * A custom item is used to populate a menu with items that can be any element.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/custom-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const CustomItem: CustomItemTypeGenericHackProps;
+export default CustomItem;

package/dist/types-ts4.5/menu-item/heading-item.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+import type { HeadingItemProps } from '../types';
+/**
+ * __Heading item__
+ *
+ * A heading item is used to describe sibling menu items.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+export default HeadingItem;

package/dist/types-ts4.5/menu-item/link-item.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { LinkItemProps } from '../types';
+/**
+ * __Link item__
+ *
+ * A link item is used to populate a menu with items that are links.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/link-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const LinkItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<LinkItemProps & import("react").RefAttributes<HTMLElement>>>;
+export default LinkItem;

package/dist/types-ts4.5/menu-item/skeleton-heading-item.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import type { SkeletonHeadingItemProps } from '../types';
+/**
+ * __Skeleton heading item__
+ *
+ * A skeleton heading item is used in place of a heading item when its contents it not ready.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-heading-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => jsx.JSX.Element;
+export default SkeletonHeadingItem;

package/dist/types-ts4.5/menu-item/skeleton-item.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import type { SkeletonItemProps } from '../types';
+/**
+ * __Skeleton item__
+ *
+ * A skeleton item is used in place of an item when its contents it not ready.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => jsx.JSX.Element;
+export default SkeletonItem;

package/dist/types-ts4.5/menu-section/menu-group.d.ts

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { MenuGroupProps } from '../types';
+/**
+ * __Menu group__
+ *
+ * A menu group includes all the actions or items in a menu.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+export default MenuGroup;

package/dist/types-ts4.5/menu-section/popup-menu-group.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { MenuGroupProps } from '../types';
+/**
+ * @deprecated
+ */
+declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+export default PopupMenuGroup;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { SectionProps } from '../types';
+/**
+ * __Section__
+ *
+ * A section includes related actions or items in a menu.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/section)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const Section: import("react").ForwardRefExoticComponent<SectionProps & import("react").RefAttributes<HTMLElement>>;
+export default Section;

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

@@ -0,0 +1,388 @@
+import { ComponentType, ReactNode, Ref } from 'react';
+import { CSSObject } from '@emotion/react';
+import type { SpacingMode } from './internal/components/menu-context';
+export interface RenderFunction<TProps = {}> {
+    (Component: ComponentType | string, props: TProps): React.ReactNode;
+}
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
+export interface TitleOverrides {
+    render?: RenderFunction<{
+        className?: string;
+        children: ReactNode;
+        'data-item-title': boolean;
+    }>;
+}
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
+export interface Overrides {
+    Title?: TitleOverrides;
+}
+export type Dimension = string | number;
+export interface MenuGroupSizing {
+    /**
+     * Useful to constrain the menu group minimum height to a specific value.
+     */
+    minHeight?: Dimension;
+    /**
+     * Useful to constrain the menu groups height to a specific value.
+     * Needs to be set when wanting to have scrollable sections.
+     */
+    maxHeight?: Dimension;
+    /**
+     * Useful to constrain the menu group minimum width to a specific value.
+     */
+    minWidth?: Dimension;
+    /**
+     * Useful to constrain the menu group width to a specific value.
+     */
+    maxWidth?: Dimension;
+}
+export interface MenuGroupProps extends MenuGroupSizing {
+    /**
+     * Children of the menu group,
+     * should generally be `Section` components.
+     */
+    children: React.ReactNode;
+    /**
+     * Configure the density of the MenuGroup content.
+     */
+    spacing?: SpacingMode;
+    /**
+     * Used to override the accessibility role for the element.
+     */
+    role?: string;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Handler called when clicking on this element,
+     * or any children elements.
+     * Useful when needing to stop propagation of child events.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+}
+export interface SectionProps {
+    /**
+     * Unique identifier for the element.
+     */
+    id?: string;
+    /**
+     * Enables scrolling within the section.
+     * Make sure to set `maxHeight` on the parent `MenuGroup` component else it will not work.
+     */
+    isScrollable?: boolean;
+    /**
+     * Will render a border at the top of the section.
+     */
+    hasSeparator?: boolean;
+    /**
+     * Children of the section,
+     * should generally be `Item` or `Heading` components,
+     * but can also be [`EmptyState`](https://atlaskit.atlassian.com/packages/design-system/empty-state)s when wanting to render errors.
+     */
+    children: React.ReactNode;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
+    overrides?: {
+        HeadingItem?: {
+            /**
+             * A function that overrides the styles of the component.
+             * It receives the current styles and state and expects a styles object.
+             */
+            cssFn?: StatelessCSSFn;
+        };
+    };
+    /**
+     * The text passed into the internal HeadingItem. If a title is not provided,
+     * the HeadingItem will not be rendered, and this component acts as a regular Section
+     */
+    title?: string;
+}
+export interface MenuItemPrimitiveProps {
+    children: (props: {
+        className: string;
+        children: React.ReactNode;
+    }) => JSX.Element;
+    title: React.ReactNode | undefined;
+    description: React.ReactNode | undefined;
+    iconAfter: React.ReactNode | undefined;
+    iconBefore: React.ReactNode | undefined;
+    /**
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
+    overrides: Overrides | undefined;
+    shouldTitleWrap: boolean | undefined;
+    shouldDescriptionWrap: boolean | undefined;
+    isDisabled: boolean | undefined;
+    isSelected: boolean | undefined;
+    className?: string;
+}
+export interface MenuItemProps {
+    /**
+      A function that overrides the styles of the component.
+      It receives the current styles and state and expects a styles object.
+  
+      @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
+    cssFn?: CSSFn;
+    /**
+     * Element to render before the item text.
+     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     */
+    iconBefore?: React.ReactNode;
+    /**
+     * Element to render after the item text.
+     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     */
+    iconAfter?: React.ReactNode;
+    /**
+     * Event that is triggered when the element is clicked.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Event that is triggered when the element has been pressed.
+     */
+    onMouseDown?: React.MouseEventHandler;
+    /**
+     * Description of the item.
+     * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
+     */
+    description?: string | JSX.Element;
+    /**
+     * Makes the element appear disabled as well as removing interactivity.
+     */
+    isDisabled?: boolean;
+    /**
+     * Makes the element appear selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Primary content for the item.
+     */
+    children?: React.ReactNode;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+      Custom overrides for the composed components.
+  
+      @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
+    overrides?: Overrides;
+    /**
+     * When `true` the title of the item will wrap multiple lines if it's long enough.
+     */
+    shouldTitleWrap?: boolean;
+    /**
+     * When `true` the description of the item will wrap multiple lines if it's long enough.
+     */
+    shouldDescriptionWrap?: boolean;
+}
+export interface ButtonItemProps extends MenuItemProps {
+    /**
+     * Unique identifier for the element.
+     */
+    id?: string;
+    /**
+     * Used to override the accessibility role for the element.
+     */
+    role?: string;
+}
+export interface LinkItemProps extends MenuItemProps {
+    /**
+     * Link to another page.
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL,
+     * see [anchor information](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) on mdn for more information.
+     */
+    target?: string;
+    /**
+     * The relationship of the linked URL as space-separated link types.
+     * Generally you'll want to set this to "noopener noreferrer" when `target` is "_blank".
+     */
+    rel?: string;
+    /**
+     * Used to override the accessibility role for the element.
+     */
+    role?: string;
+}
+export interface CustomItemComponentProps {
+    /**
+     * The children of the item.
+     */
+    children: React.ReactNode;
+    /**
+     * Class to apply to the root container of the custom component,
+     * ensure this has been applied so the consistent item styling is applied.
+     */
+    className: string;
+    /**
+     * Test id that is passed through to the custom component.
+     */
+    'data-testid'?: string;
+    /**
+     * Event handler that is passed through to the custom component.
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Event handler that is passed through to the custom component.
+     */
+    onMouseDown?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Event handler that is passed through to the custom component.
+     * Used to disable the element from being draggable.
+     */
+    onDragStart?: (event: React.DragEvent) => void;
+    /**
+     * Turns off the element being draggable.
+     */
+    draggable: boolean;
+    /**
+     * React ref for the raw DOM element,
+     * make sure to place this on the outer most DOM element.
+     */
+    ref?: Ref<any>;
+    /**
+     * Makes the element appear disabled as well as removing interactivity.
+     */
+    tabIndex?: number;
+    /**
+     * Disabled attribute.
+     */
+    disabled?: boolean;
+}
+export interface CustomItemProps<TCustomComponentProps = CustomItemComponentProps> extends MenuItemProps {
+    /**
+      Custom component to render as an item. This can be both a functional component or a class component.
+  
+      __Will return `null` if no component is defined.__
+  
+      Props passed to `CustomItem` will be passed down to this component. If the props for `component` have TypeScript types,
+      CustomItem will extend them, providing type safety for your custom item.
+  
+      e.g. `<CustomItem to="/link" component={RouterLink} />`
+  
+      __NOTE:__ Make sure the reference for this component does not change between renders else undefined behavior may happen.
+     */
+    component?: React.ComponentType<TCustomComponentProps>;
+}
+export interface SkeletonItemProps {
+    /**
+     * Renders a skeleton circle in the `iconBefore` location.
+     * Takes priority over `hasIcon.
+     */
+    hasAvatar?: boolean;
+    /**
+     * Renders a skeleton square in the `iconBefore` location.
+     */
+    hasIcon?: boolean;
+    /**
+     *
+     * Width of the skeleton item.
+     * Generally you don't need to specify this as it has a staggered width based on `:nth-child` by default.
+     */
+    width?: Dimension;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Causes to the skeleton to have a slight horizontal shimmer.
+     * Only use this when you want to bring more attention to the loading content.
+     */
+    isShimmering?: boolean;
+    /**
+     * A function that overrides the styles of this component.
+     * It receives the current styles and returns a customized styles object.
+     */
+    cssFn?: StatelessCSSFn;
+}
+export interface HeadingItemProps {
+    /**
+     A function that overrides the styles.
+     It receives the current styles and returns a customized styles object.
+  
+     @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
+    cssFn?: StatelessCSSFn;
+    /**
+     * The text of the heading.
+     */
+    children: React.ReactNode;
+    /**
+     * A unique identifier that can be referenced in the `labelledby` prop of a
+     * section to allow screen readers to announce the name of groups.
+     */
+    id?: string;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+export interface SkeletonHeadingItemProps {
+    /**
+     *
+     * Width of the skeleton heading item.
+     * Generally you don't need to specify this as it has a staggered width based on `:nth-child` by default.
+     */
+    width?: Dimension;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Causes to the skeleton to have a slight horizontal shimmer.
+     * Only use this when you want to bring more attention to the loading content.
+     */
+    isShimmering?: boolean;
+    /**
+      A function that overrides the styles of this component.
+      It receives the current styles and returns a customized styles object.
+  
+      @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
+    cssFn?: StatelessCSSFn;
+}
+export type ItemState = {
+    isSelected: boolean;
+    isDisabled: boolean;
+};
+/**
+  A function that overrides the styles of
+  menu components. It receives the current state
+  and should return a CSSObject.
+
+  @see @atlaskit/menu/docs/85-overriding-item-styles
+  @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
+export interface CSSFn<TState = ItemState extends void ? void : ItemState> {
+    (currentState: TState): CSSObject | CSSObject[];
+}
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
+export type StatelessCSSFn = CSSFn<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.6.1",
+  "version": "1.7.1",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -47,6 +47,7 @@
     "@atlaskit/ds-explorations": "^2.1.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^0.9.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.4.0",
@@ -68,6 +69,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "*",
     "@emotion/jest": "^11.8.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
@@ -105,6 +107,11 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "platform-feature-flags": {
+    "platform.design-system-team.menu-selected-state-change_0see9": {
+      "type": "boolean"
+    }
+  },
   "homepage": "https://atlassian.design/components/menu/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }