Update dependency emotion to v11 (#41134)

* Update dependency emotion to v11

* Chore(renovate): Use correct emotion imports

* kick drone

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

package.json

@@ -275,7 +275,7 @@
     "dangerously-set-html-content": "1.0.9",
     "date-fns": "2.25.0",
     "debounce-promise": "3.1.2",
-    "emotion": "10.0.27",
+    "emotion": "11.0.0",
     "eventemitter3": "4.0.0",
     "fast-deep-equal": "^3.1.3",
     "fast-json-patch": "3.1.0",

packages/grafana-ui/package.json

@@ -48,7 +48,7 @@
     "clipboard": "2.0.4",
     "core-js": "3.10.0",
     "d3": "5.15.0",
-    "emotion": "10.0.27",
+    "emotion": "11.0.0",
     "hoist-non-react-statics": "3.3.2",
     "immutable": "3.8.2",
     "is-hotkey": "0.1.6",

packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import Calendar from 'react-calendar';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '../../../themes';
 import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';

public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Alert, useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { DashboardInitError, AppNotificationSeverity } from 'app/types';

public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button, HorizontalGroup, Spinner, useStyles, VerticalGroup } from '@grafana/ui';
 import { locationService } from '@grafana/runtime';
 import { GrafanaTheme } from '@grafana/data';

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { connect, ConnectedProps } from 'react-redux';
 import { locationService } from '@grafana/runtime';
 import { selectors } from '@grafana/e2e-selectors';

public/app/features/explore/LogsContainer.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Collapse } from '@grafana/ui';
 import {
   AbsoluteTimeRange,

public/app/features/explore/LogsNavigation.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useState, useEffect, useRef } from 'react';
 import { isEqual } from 'lodash';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { LogsSortOrder, AbsoluteTimeRange, TimeZone, DataQuery, GrafanaTheme2 } from '@grafana/data';
 import { Button, Icon, Spinner, useTheme2 } from '@grafana/ui';
 import { LogsNavigationPages } from './LogsNavigationPages';

public/app/features/explore/LogsNavigationPages.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { dateTimeFormat, systemDateFormats, TimeZone, AbsoluteTimeRange, GrafanaTheme2 } from '@grafana/data';
 import { CustomScrollbar, Spinner, useTheme2 } from '@grafana/ui';
 import { LogsPage } from './LogsNavigation';

public/app/plugins/panel/nodeGraph/Marker.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent, memo } from 'react';
 import { NodesMarker } from './types';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { stylesFactory, useTheme } from '@grafana/ui';
 
 const nodeR = 40;

public/app/plugins/panel/nodeGraph/Node.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { Field, getFieldColorModeForField, GrafanaTheme2 } from '@grafana/data';
 import { useStyles2, useTheme2 } from '@grafana/ui';
 import { NodeDatum } from './types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import tinycolor from 'tinycolor2';
 import { statToString } from './utils';
 

yarn.lock

@@ -2764,7 +2764,7 @@ __metadata:
     css-minimizer-webpack-plugin: ^3.1.1
     csstype: 3.0.9
     d3: 5.15.0
-    emotion: 10.0.27
+    emotion: 11.0.0
     enzyme: 3.11.0
     expose-loader: 3.0.0
     hoist-non-react-statics: 3.3.2
@@ -15213,7 +15213,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emotion@npm:10.0.27, emotion@npm:^10.0.14":
+"emotion@npm:11.0.0":
+  version: 11.0.0
+  resolution: "emotion@npm:11.0.0"
+  checksum: ab160e73785c49216652ba85e33db6d4426fd7cb28bd5341fea42542e4e24dd671e508226bf4f8dbd99b946fff2e1f1441c58169356659e60f89dc2276f97993
+  languageName: node
+  linkType: hard
+
+"emotion@npm:^10.0.14":
   version: 10.0.27
   resolution: "emotion@npm:10.0.27"
   dependencies:
@@ -18040,7 +18047,7 @@ __metadata:
     dangerously-set-html-content: 1.0.9
     date-fns: 2.25.0
     debounce-promise: 3.1.2
-    emotion: 10.0.27
+    emotion: 11.0.0
     enzyme: 3.11.0
     enzyme-to-json: 3.4.4
     es-abstract: 1.18.0-next.1