chore: upgrade webchat and emotion

Composer/.eslintrc.react.js

@@ -3,7 +3,7 @@
 
 module.exports = {
   extends: ['./.eslintrc.js', 'plugin:react/recommended', 'plugin:security/recommended'],
-  plugins: ['react-hooks', 'format-message', 'emotion', 'jsx-a11y', 'security'],
+  plugins: ['react-hooks', 'format-message', '@emotion', 'jsx-a11y', 'security'],
   settings: {
     react: {
       version: '16.9.16',
@@ -41,7 +41,7 @@ module.exports = {
     ],
 
     // emotion
-    'emotion/jsx-import': 'error',
+    '@emotion/jsx-import': 'error',
 
     // jsx-a11y
     // taken from https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/src/index.js

Composer/package.json

@@ -126,7 +126,8 @@
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.9.0",
     "@bfc/eslint-plugin-bfcomposer": "*",
-    "@emotion/babel-preset-css-prop": "^10.0.27",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@emotion/eslint-plugin": "11.7.0",
     "@typescript-eslint/eslint-plugin": "2.34.0",
     "@typescript-eslint/parser": "2.34.0",
     "concurrently": "^4.1.0",
@@ -135,7 +136,6 @@
     "eslint": "7.0.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-formatter-github-actions": "^1.0.0",
-    "eslint-plugin-emotion": "10.0.27",
     "eslint-plugin-format-message": "6.2.3",
     "eslint-plugin-import": "2.20.2",
     "eslint-plugin-jsx-a11y": "6.2.3",

Composer/packages/adaptive-flow/package.json

@@ -26,8 +26,8 @@
     "@bfc/extension-client": "*",
     "@bfc/shared": "*",
     "@bfc/ui-shared": "*",
-    "@emotion/core": "^10.0.27",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/react": "^11.1.3",
+    "@emotion/styled": "^11.1.3",
     "@fluentui/react": "^8.57.1",
     "adaptive-expressions": "4.12.0-rc1",
     "botbuilder-lg": "4.14.0-dev.391a2ab",

Composer/packages/adaptive-flow/src/adaptive-flow-editor/AdaptiveFlowEditor.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx, css, CacheProvider } from '@emotion/core';
+import { jsx, css, CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import React, { useRef, useMemo, useEffect } from 'react';
 import isEqual from 'lodash/isEqual';
@@ -36,7 +36,8 @@ formatMessage.setup({
 });
 
 const emotionCache = createCache({
-  // @ts-ignore
+  key: 'adaptive-form-cache',
+  // @ts-expect-error
   nonce: window.__nonce__,
 });
 

Composer/packages/adaptive-flow/src/adaptive-flow-editor/components/FlowToolbar.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import { useRef, useEffect, ReactNode } from 'react';
 import { ZoomInfo } from '@bfc/shared';
 import { IconButton, IButtonStyles } from '@fluentui/react/lib/Button';

Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/EdgeMenu/EdgeMenu.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useContext, useState } from 'react';
 import formatMessage from 'format-message';
 import { DefinitionSummary } from '@bfc/shared';

Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/EdgeMenu/createSchemaMenu.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import {
   IContextualMenuItem,
   ContextualMenuItemType,

Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/ElementWrapper.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useRef, useContext, useEffect } from 'react';
 
 import { SelectionContext } from '../contexts/SelectionContext';

Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/NodeMenu.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useContext } from 'react';
 import formatMessage from 'format-message';
 import { TooltipHost } from '@fluentui/react/lib/Tooltip';

Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/NodeWrapper.tsx

@@ -4,7 +4,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import { useContext, useCallback, useEffect } from 'react';
 import { generateActionTitle, PromptTab } from '@bfc/shared';
 import { useShellApi } from '@bfc/extension-client';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/adaptive/AdaptiveDialog.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { FC, Fragment } from 'react';
 import get from 'lodash/get';
 import { FlowEditorWidgetMap, FlowUISchema, SchemaDefinitions } from '@bfc/extension-client';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/adaptive/AdaptiveTrigger.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useState, useContext, useMemo, useRef } from 'react';
 import isEqual from 'lodash/isEqual';
 

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/components/ArrowLine.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 export interface ArrowLineProps {
   width: number;

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/components/Diamond.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 import { ObiColors } from '../constants/ElementColors';
 import { DiamondSize } from '../constants/ElementSizes';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/components/IconBrick.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Icon } from '@fluentui/react/lib/Icon';
 
 import { IconBrickSize } from '../constants/ElementSizes';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/components/LoopIndicator.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Icon } from '@fluentui/react/lib/Icon';
 
 import { LoopIconSize } from '../constants/ElementSizes';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/components/OffsetContainer.tsx

@@ -2,10 +2,10 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React, { ReactNode } from 'react';
 
-interface OffsetContainerProps {
+interface OffsetContainerProps extends React.HTMLAttributes<HTMLElement> {
   offset: { x: number; y: number };
   children: ReactNode;
 }

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/components/SVGContainer.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 export const SVGContainer = ({ children, width = 100, height = 100, hidden = false }) => (
   <svg aria-hidden={hidden} css={{ overflow: 'visible', width, height, position: 'absolute', left: 0, top: 0 }}>

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/ActionCard/ActionCardBody.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import { WidgetContainerProps, WidgetComponent, useShellApi } from '@bfc/extension-client';
 
 import { CardComment } from './CardComment';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/ActionCard/CardComment.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import React from 'react';
 import { TruncatedText } from '@bfc/ui-shared';
 import { NeutralColors } from '@fluentui/theme';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/ActionCard/CardTemplate.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { FC, ReactNode } from 'react';
 import { TextDiv } from '@bfc/ui-shared';
 import { WidgetContainerProps } from '@bfc/extension-client';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/ActionCard/CardTemplateStyle.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 import { HeaderHeight, StandardSectionHeight, StandardNodeWidth } from '../../constants/ElementSizes';
 import { DisabledContainer } from '../styles/DisabledStyle';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/ActionGroup.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useMemo, FunctionComponent, useContext } from 'react';
 
 import { GraphNode } from '../models/GraphNode';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/ActionHeader/ActionHeader.tsx

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { useContext } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { generateActionTitle } from '@bfc/shared';
 import { WidgetComponent, WidgetContainerProps } from '@bfc/extension-client';
 

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/ActionHeader/ActionHeaderStyle.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { ColorlessFontCSS, TruncatedCSS } from '@bfc/ui-shared';
 
 import { StandardNodeWidth, HeaderHeight } from '../../constants/ElementSizes';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/ActionHeader/icon.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Icon as FabricIcon } from '@fluentui/react/lib/Icon';
 
 import { iconCss } from './iconStyles';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/ActionHeader/iconStyles.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 export const iconCss = (size: number, color?: string) => {
   return css`

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/AdaptiveAction.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { FC, useContext } from 'react';
 import get from 'lodash/get';
 

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/DialogRef.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import get from 'lodash/get';
 import { LinkBtn, FixedInfo } from '@bfc/ui-shared';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/ForeachWidget.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useMemo, FunctionComponent, useContext } from 'react';
 import { WidgetContainerProps } from '@bfc/extension-client';
 

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/IfConditionWidget.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { FunctionComponent, useMemo, useContext } from 'react';
 import { WidgetContainerProps } from '@bfc/extension-client';
 

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/PromptWidget.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { FC, useMemo, useContext } from 'react';
 import { PromptTab } from '@bfc/shared';
 import { WidgetContainerProps } from '@bfc/extension-client';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/SwitchConditionWidget.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { FunctionComponent, useMemo, useContext } from 'react';
 import { WidgetContainerProps } from '@bfc/extension-client';
 

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/TriggerSummary/TriggerSummary.tsx

@@ -4,7 +4,7 @@
 /** @jsx jsx */
 
 import { conceptLabels, getFriendlyName } from '@bfc/shared';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Icon } from '@fluentui/react/lib/Icon';
 
 import {

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/styles/DisabledStyle.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const DisabledColor = '#656565';
 

Composer/packages/adaptive-form/package.json

@@ -37,7 +37,7 @@
     "@bfc/extension-client": "*",
     "@bfc/intellisense": "*",
     "@bfc/ui-shared": "*",
-    "@emotion/core": "^10.0.27",
+    "@emotion/react": "^11.1.3",
     "lodash": "^4.17.19",
     "react-error-boundary": "^1.2.5",
     "tslib": "2.0.3"

Composer/packages/adaptive-form/src/components/AdaptiveForm.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import React from 'react';
 import { FormErrors, JSONSchema7, UIOptions } from '@bfc/extension-client';
 import ErrorBoundary from 'react-error-boundary';

Composer/packages/adaptive-form/src/components/CollapseField.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { Fragment, useState, useEffect, useLayoutEffect, useRef } from 'react';
 import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';
 import { IconButton } from '@fluentui/react/lib/Button';

Composer/packages/adaptive-form/src/components/Comment.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import React, { useState, useCallback, useRef, useEffect } from 'react';
 import formatMessage from 'format-message';
 import { IconMenu } from '@bfc/ui-shared';

Composer/packages/adaptive-form/src/components/ExpandableText.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import React, { useState, useRef, useEffect } from 'react';
 import formatMessage from 'format-message';