@atlaskit/menu 1.3.12 → 1.4.0

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, Fragment } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N30A } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';

package/dist/es2019/version.json

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

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { Fragment } from 'react';
-import { ClassNames, css, jsx } from '@emotion/core';
+import { ClassNames, css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';

package/dist/esm/internal/components/skeleton-shimmer.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ClassNames, css, jsx, keyframes } from '@emotion/core';
+import { ClassNames, css, jsx, keyframes } from '@emotion/react';
 import { N20A, N30A } from '@atlaskit/theme/colors';
 
 /**

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

@@ -4,7 +4,7 @@ var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore",
 
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 

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

@@ -4,7 +4,7 @@ var _excluded = ["component", "cssFn", "isDisabled", "isSelected", "onClick", "t
 
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 

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

@@ -4,7 +4,7 @@ var _excluded = ["children", "testId", "id", "cssFn"];
 
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { N300 } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
@@ -40,7 +40,7 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
 
   return jsx("div", _extends({
     css: [headingStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn(undefined)],
+    css(cssFn(undefined))],
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
     id: id

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

@@ -4,7 +4,7 @@ var _excluded = ["children", "href", "cssFn", "description", "iconAfter", "iconB
 
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { N20A } from '@atlaskit/theme/colors';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
@@ -50,7 +50,7 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
         '--width': width
       },
       css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      cssFn(undefined)],
+      css(cssFn(undefined))],
       "data-ds--menu--skeleton-heading-item": true,
       "data-testid": testId
     });

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { N20A } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
@@ -106,7 +106,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
         '--width': width
       },
       css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      cssFn()],
+      css(cssFn())],
       "data-testid": testId
     });
   });

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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role"];
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 
 /**

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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["maxWidth", "minWidth"];
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import MenuGroup from './menu-group';
 /**
  * @deprecated

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

@@ -4,7 +4,7 @@ var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "ha
 
 /** @jsx jsx */
 import { forwardRef, Fragment } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N30A } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';

package/dist/esm/version.json

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

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { MenuItemPrimitiveProps } from '../../types';
 /**
  * __Menu item primitive__
@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
 export default MenuItemPrimitive;

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 declare type SkeletonShimmerProps = {
     children: ({ className }: {
         className?: string;
@@ -19,5 +20,5 @@ declare type SkeletonShimmerProps = {
  *
  * @internal
  */
-declare const SkeletonShimmer: ({ children, isShimmering, }: SkeletonShimmerProps) => JSX.Element;
+declare const SkeletonShimmer: ({ children, isShimmering, }: SkeletonShimmerProps) => jsx.JSX.Element;
 export default SkeletonShimmer;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { HeadingItemProps } from '../types';
 /**
  * __Heading item__
@@ -8,5 +9,5 @@ import type { HeadingItemProps } from '../types';
  * - [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.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
 export default HeadingItem;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { SkeletonHeadingItemProps } from '../types';
 /**
  * __Skeleton heading item__
@@ -8,5 +8,5 @@ import type { SkeletonHeadingItemProps } from '../types';
  * - [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.Element;
+declare const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => jsx.JSX.Element;
 export default SkeletonHeadingItem;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { SkeletonItemProps } from '../types';
 /**
  * __Skeleton item__
@@ -8,5 +8,5 @@ import type { SkeletonItemProps } from '../types';
  * - [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.Element;
+declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => jsx.JSX.Element;
 export default SkeletonItem;

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

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import type { MenuGroupProps } from '../types';
 /**
  * __Menu group__
@@ -8,5 +9,5 @@ import type { MenuGroupProps } from '../types';
  * - [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, ...rest }: MenuGroupProps) => JSX.Element;
+declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default MenuGroup;

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

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

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType, ReactNode, Ref } from 'react';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;
 }

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { MenuItemPrimitiveProps } from '../../types';
 /**
  * __Menu item primitive__
@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => JSX.Element;
+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.0/internal/components/skeleton-shimmer.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 declare type SkeletonShimmerProps = {
     children: ({ className }: {
         className?: string;
@@ -19,5 +20,5 @@ declare type SkeletonShimmerProps = {
  *
  * @internal
  */
-declare const SkeletonShimmer: ({ children, isShimmering, }: SkeletonShimmerProps) => JSX.Element;
+declare const SkeletonShimmer: ({ children, isShimmering, }: SkeletonShimmerProps) => jsx.JSX.Element;
 export default SkeletonShimmer;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { HeadingItemProps } from '../types';
 /**
  * __Heading item__
@@ -8,5 +9,5 @@ import type { HeadingItemProps } from '../types';
  * - [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.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
 export default HeadingItem;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { SkeletonHeadingItemProps } from '../types';
 /**
  * __Skeleton heading item__
@@ -8,5 +8,5 @@ import type { SkeletonHeadingItemProps } from '../types';
  * - [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.Element;
+declare const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => jsx.JSX.Element;
 export default SkeletonHeadingItem;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { SkeletonItemProps } from '../types';
 /**
  * __Skeleton item__
@@ -8,5 +8,5 @@ import type { SkeletonItemProps } from '../types';
  * - [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.Element;
+declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => jsx.JSX.Element;
 export default SkeletonItem;

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

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import type { MenuGroupProps } from '../types';
 /**
  * __Menu group__
@@ -8,5 +9,5 @@ import type { MenuGroupProps } from '../types';
  * - [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, ...rest }: MenuGroupProps) => JSX.Element;
+declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default MenuGroup;

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

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

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

@@ -1,5 +1,5 @@
 import { ComponentType, ReactNode, Ref } from 'react';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.3.12",
+  "version": "1.4.0",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -45,13 +45,13 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/ds-explorations": "^0.1.0",
+    "@atlaskit/ds-explorations": "^1.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.1.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@atlaskit/avatar": "^21.1.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/icon-file-type": "^6.0.0",
@@ -68,13 +68,13 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@emotion/jest": "^11.8.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
     "@types/react-router-dom": "^4.3.1",
     "ast-types": "^0.13.3",
     "bind-event-listener": "^2.1.1",
     "jest-axe": "^4.0.0",
-    "jest-emotion": "^10.0.32",
     "jscodeshift": "^0.13.0",
     "react-router-dom": "^4.2.2",
     "storybook-addon-performance": "^0.16.0",