@atlaskit/menu 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/menu
 
+## 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
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+
 ## 1.6.0
 
 ### Minor Changes

package/button-item/package.json

@@ -6,9 +6,9 @@
   "sideEffects": false,
   "types": "../dist/types/entry-points/menu-item/button-item.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/entry-points/menu-item/button-item.d.ts"
+        "../dist/types-ts4.5/entry-points/menu-item/button-item.d.ts"
       ]
     }
   }

package/custom-item/package.json

@@ -6,9 +6,9 @@
   "sideEffects": false,
   "types": "../dist/types/entry-points/menu-item/custom-item.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/entry-points/menu-item/custom-item.d.ts"
+        "../dist/types-ts4.5/entry-points/menu-item/custom-item.d.ts"
       ]
     }
   }

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.0",
+	"version": "1.7.0",
 	"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.0",
+	"version": "1.7.0",
 	"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.0",
+	"version": "1.7.0",
 	"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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type SpacingMode = 'compact' | 'cozy';
+export type SpacingMode = 'compact' | 'cozy';
 /**
  * __Spacing context__
  *
@@ -8,3 +8,11 @@ export declare 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/internal/components/skeleton-shimmer.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-declare type SkeletonShimmerProps = {
+type SkeletonShimmerProps = {
     children: ({ className }: {
         className?: string;
     }) => ReactNode;

package/dist/types/types.d.ts

@@ -20,7 +20,7 @@ export interface TitleOverrides {
 export interface Overrides {
     Title?: TitleOverrides;
 }
-export declare type Dimension = string | number;
+export type Dimension = string | number;
 export interface MenuGroupSizing {
     /**
      * Useful to constrain the menu group minimum height to a specific value.
@@ -367,7 +367,7 @@ export interface SkeletonHeadingItemProps {
      */
     cssFn?: StatelessCSSFn;
 }
-export declare type ItemState = {
+export type ItemState = {
     isSelected: boolean;
     isDisabled: boolean;
 };
@@ -385,4 +385,4 @@ export interface CSSFn<TState = ItemState extends void ? void : ItemState> {
 /**
  * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
  */
-export declare type StatelessCSSFn = CSSFn<void>;
+export type StatelessCSSFn = CSSFn<void>;

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;