@atlaskit/editor-plugin-selection-marker 1.0.1 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-selection-marker
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.1.0
+
+### Minor Changes
+
+- [#80131](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80131) [`336116d18762`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/336116d18762) - Expose a new method hideDecoration on selection marker which can be used to temporarily disable the selection marker behaviour.
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -23,14 +23,43 @@ var selectionMarkerPlugin = exports.selectionMarkerPlugin = function selectionMa
         }
       }];
     },
-    usePluginHook: function usePluginHook(_ref2) {
-      var editorView = _ref2.editorView;
+    getSharedState: function getSharedState(editorState) {
+      var _key$getState$forceHi, _key$getState;
+      if (!editorState) {
+        return undefined;
+      }
+      return {
+        isForcedHidden: (_key$getState$forceHi = (_key$getState = _main.key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.forceHide) !== null && _key$getState$forceHi !== void 0 ? _key$getState$forceHi : false
+      };
+    },
+    actions: {
+      // For now this is a very simple locking mechanism that only allows one
+      // plugin to hide / release at a time.
+      hideDecoration: function hideDecoration() {
+        var _api$selectionMarker, _api$core;
+        if (api !== null && api !== void 0 && (_api$selectionMarker = api.selectionMarker) !== null && _api$selectionMarker !== void 0 && (_api$selectionMarker = _api$selectionMarker.sharedState.currentState()) !== null && _api$selectionMarker !== void 0 && _api$selectionMarker.isForcedHidden) {
+          return undefined;
+        }
+        var success = api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          return tr.setMeta(_main.key, {
+            forceHide: true
+          });
+        });
+        if (!success) {
+          return undefined;
+        }
+        return cleanupHiddenDecoration(api);
+      }
+    },
+    usePluginHook: function usePluginHook(_ref3) {
+      var editorView = _ref3.editorView;
       var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['focus', 'typeAhead']),
         focusState = _useSharedPluginState.focusState,
         typeAheadState = _useSharedPluginState.typeAheadState;
       (0, _react.useEffect)(function () {
-        var _ref3, _typeAheadState$isOpe;
-        var shouldHide = (_ref3 = (focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus) || ((_typeAheadState$isOpe = typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isOpen) !== null && _typeAheadState$isOpe !== void 0 ? _typeAheadState$isOpe : false)) !== null && _ref3 !== void 0 ? _ref3 : true;
+        var _ref4, _typeAheadState$isOpe;
+        var shouldHide = (_ref4 = (focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus) || ((_typeAheadState$isOpe = typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isOpen) !== null && _typeAheadState$isOpe !== void 0 ? _typeAheadState$isOpe : false)) !== null && _ref4 !== void 0 ? _ref4 : true;
         requestAnimationFrame(function () {
           return (0, _main.dispatchShouldHideDecorations)(editorView, shouldHide);
         });
@@ -40,4 +69,20 @@ var selectionMarkerPlugin = exports.selectionMarkerPlugin = function selectionMa
       return /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null);
     }
   };
-};
+};
+function cleanupHiddenDecoration(api) {
+  var hasRun = false;
+  return function () {
+    var _api$selectionMarker2;
+    if (!hasRun && api !== null && api !== void 0 && (_api$selectionMarker2 = api.selectionMarker) !== null && _api$selectionMarker2 !== void 0 && (_api$selectionMarker2 = _api$selectionMarker2.sharedState.currentState()) !== null && _api$selectionMarker2 !== void 0 && _api$selectionMarker2.isForcedHidden) {
+      var _api$core2;
+      hasRun = true;
+      return api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(function (_ref5) {
+        var tr = _ref5.tr;
+        return tr.setMeta(_main.key, {
+          forceHide: false
+        });
+      });
+    }
+  };
+}

package/dist/cjs/pm-plugins/main.js

@@ -21,22 +21,20 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
       init: function init() {
         return {
           decorations: _view.DecorationSet.empty,
-          shouldHideDecorations: true
+          shouldHideDecorations: true,
+          forceHide: false
         };
       },
       apply: function apply(tr, currentState) {
-        var _tr$getMeta$shouldHid, _tr$getMeta;
-        var shouldHideDecorations = (_tr$getMeta$shouldHid = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.shouldHideDecorations) !== null && _tr$getMeta$shouldHid !== void 0 ? _tr$getMeta$shouldHid : currentState.shouldHideDecorations;
+        var _tr$getMeta$forceHide, _tr$getMeta, _tr$getMeta$shouldHid, _tr$getMeta2;
+        var forceHide = (_tr$getMeta$forceHide = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.forceHide) !== null && _tr$getMeta$forceHide !== void 0 ? _tr$getMeta$forceHide : currentState.forceHide;
+        var shouldHideDecorations = (_tr$getMeta$shouldHid = (_tr$getMeta2 = tr.getMeta(key)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.shouldHideDecorations) !== null && _tr$getMeta$shouldHid !== void 0 ? _tr$getMeta$shouldHid : currentState.shouldHideDecorations;
         var selection = tr.selection;
-        if (shouldHideDecorations) {
-          return {
-            decorations: _view.DecorationSet.empty,
-            shouldHideDecorations: shouldHideDecorations
-          };
-        }
+        var decorations = shouldHideDecorations || forceHide ? _view.DecorationSet.empty : _view.DecorationSet.create(tr.doc, [].concat((0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$anchor, 'anchor', selection)), [(0, _selectionDecoration.selectionDecoration)(selection)], (0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$head, 'head', selection))));
         return {
-          decorations: _view.DecorationSet.create(tr.doc, [].concat((0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$anchor, 'anchor', selection)), [(0, _selectionDecoration.selectionDecoration)(selection)], (0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$head, 'head', selection)))),
-          shouldHideDecorations: shouldHideDecorations
+          decorations: decorations,
+          shouldHideDecorations: shouldHideDecorations,
+          forceHide: forceHide
         };
       }
     },

package/dist/es2019/plugin.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { createPlugin, dispatchShouldHideDecorations } from './pm-plugins/main';
+import { createPlugin, dispatchShouldHideDecorations, key } from './pm-plugins/main';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export const selectionMarkerPlugin = ({
   api
@@ -13,6 +13,34 @@ export const selectionMarkerPlugin = ({
         plugin: () => createPlugin(api)
       }];
     },
+    getSharedState(editorState) {
+      var _key$getState$forceHi, _key$getState;
+      if (!editorState) {
+        return undefined;
+      }
+      return {
+        isForcedHidden: (_key$getState$forceHi = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.forceHide) !== null && _key$getState$forceHi !== void 0 ? _key$getState$forceHi : false
+      };
+    },
+    actions: {
+      // For now this is a very simple locking mechanism that only allows one
+      // plugin to hide / release at a time.
+      hideDecoration: () => {
+        var _api$selectionMarker, _api$selectionMarker$, _api$core;
+        if (api !== null && api !== void 0 && (_api$selectionMarker = api.selectionMarker) !== null && _api$selectionMarker !== void 0 && (_api$selectionMarker$ = _api$selectionMarker.sharedState.currentState()) !== null && _api$selectionMarker$ !== void 0 && _api$selectionMarker$.isForcedHidden) {
+          return undefined;
+        }
+        const success = api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+          tr
+        }) => tr.setMeta(key, {
+          forceHide: true
+        }));
+        if (!success) {
+          return undefined;
+        }
+        return cleanupHiddenDecoration(api);
+      }
+    },
     usePluginHook({
       editorView
     }) {
@@ -30,4 +58,19 @@ export const selectionMarkerPlugin = ({
       return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
     }
   };
-};
+};
+function cleanupHiddenDecoration(api) {
+  let hasRun = false;
+  return () => {
+    var _api$selectionMarker2, _api$selectionMarker3;
+    if (!hasRun && api !== null && api !== void 0 && (_api$selectionMarker2 = api.selectionMarker) !== null && _api$selectionMarker2 !== void 0 && (_api$selectionMarker3 = _api$selectionMarker2.sharedState.currentState()) !== null && _api$selectionMarker3 !== void 0 && _api$selectionMarker3.isForcedHidden) {
+      var _api$core2;
+      hasRun = true;
+      return api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
+        tr
+      }) => tr.setMeta(key, {
+        forceHide: false
+      }));
+    }
+  };
+}

package/dist/es2019/pm-plugins/main.js

@@ -11,24 +11,22 @@ export const createPlugin = api => {
       init() {
         return {
           decorations: DecorationSet.empty,
-          shouldHideDecorations: true
+          shouldHideDecorations: true,
+          forceHide: false
         };
       },
       apply(tr, currentState) {
-        var _tr$getMeta$shouldHid, _tr$getMeta;
-        const shouldHideDecorations = (_tr$getMeta$shouldHid = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.shouldHideDecorations) !== null && _tr$getMeta$shouldHid !== void 0 ? _tr$getMeta$shouldHid : currentState.shouldHideDecorations;
+        var _tr$getMeta$forceHide, _tr$getMeta, _tr$getMeta$shouldHid, _tr$getMeta2;
+        const forceHide = (_tr$getMeta$forceHide = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.forceHide) !== null && _tr$getMeta$forceHide !== void 0 ? _tr$getMeta$forceHide : currentState.forceHide;
+        const shouldHideDecorations = (_tr$getMeta$shouldHid = (_tr$getMeta2 = tr.getMeta(key)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.shouldHideDecorations) !== null && _tr$getMeta$shouldHid !== void 0 ? _tr$getMeta$shouldHid : currentState.shouldHideDecorations;
         const {
           selection
         } = tr;
-        if (shouldHideDecorations) {
-          return {
-            decorations: DecorationSet.empty,
-            shouldHideDecorations
-          };
-        }
+        const decorations = shouldHideDecorations || forceHide ? DecorationSet.empty : DecorationSet.create(tr.doc, [...createWidgetDecoration(selection.$anchor, 'anchor', selection), selectionDecoration(selection), ...createWidgetDecoration(selection.$head, 'head', selection)]);
         return {
-          decorations: DecorationSet.create(tr.doc, [...createWidgetDecoration(selection.$anchor, 'anchor', selection), selectionDecoration(selection), ...createWidgetDecoration(selection.$head, 'head', selection)]),
-          shouldHideDecorations
+          decorations,
+          shouldHideDecorations,
+          forceHide
         };
       }
     },

package/dist/esm/plugin.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { createPlugin, dispatchShouldHideDecorations } from './pm-plugins/main';
+import { createPlugin, dispatchShouldHideDecorations, key } from './pm-plugins/main';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export var selectionMarkerPlugin = function selectionMarkerPlugin(_ref) {
   var api = _ref.api;
@@ -14,14 +14,43 @@ export var selectionMarkerPlugin = function selectionMarkerPlugin(_ref) {
         }
       }];
     },
-    usePluginHook: function usePluginHook(_ref2) {
-      var editorView = _ref2.editorView;
+    getSharedState: function getSharedState(editorState) {
+      var _key$getState$forceHi, _key$getState;
+      if (!editorState) {
+        return undefined;
+      }
+      return {
+        isForcedHidden: (_key$getState$forceHi = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.forceHide) !== null && _key$getState$forceHi !== void 0 ? _key$getState$forceHi : false
+      };
+    },
+    actions: {
+      // For now this is a very simple locking mechanism that only allows one
+      // plugin to hide / release at a time.
+      hideDecoration: function hideDecoration() {
+        var _api$selectionMarker, _api$core;
+        if (api !== null && api !== void 0 && (_api$selectionMarker = api.selectionMarker) !== null && _api$selectionMarker !== void 0 && (_api$selectionMarker = _api$selectionMarker.sharedState.currentState()) !== null && _api$selectionMarker !== void 0 && _api$selectionMarker.isForcedHidden) {
+          return undefined;
+        }
+        var success = api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          return tr.setMeta(key, {
+            forceHide: true
+          });
+        });
+        if (!success) {
+          return undefined;
+        }
+        return cleanupHiddenDecoration(api);
+      }
+    },
+    usePluginHook: function usePluginHook(_ref3) {
+      var editorView = _ref3.editorView;
       var _useSharedPluginState = useSharedPluginState(api, ['focus', 'typeAhead']),
         focusState = _useSharedPluginState.focusState,
         typeAheadState = _useSharedPluginState.typeAheadState;
       useEffect(function () {
-        var _ref3, _typeAheadState$isOpe;
-        var shouldHide = (_ref3 = (focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus) || ((_typeAheadState$isOpe = typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isOpen) !== null && _typeAheadState$isOpe !== void 0 ? _typeAheadState$isOpe : false)) !== null && _ref3 !== void 0 ? _ref3 : true;
+        var _ref4, _typeAheadState$isOpe;
+        var shouldHide = (_ref4 = (focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus) || ((_typeAheadState$isOpe = typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isOpen) !== null && _typeAheadState$isOpe !== void 0 ? _typeAheadState$isOpe : false)) !== null && _ref4 !== void 0 ? _ref4 : true;
         requestAnimationFrame(function () {
           return dispatchShouldHideDecorations(editorView, shouldHide);
         });
@@ -31,4 +60,20 @@ export var selectionMarkerPlugin = function selectionMarkerPlugin(_ref) {
       return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
     }
   };
-};
+};
+function cleanupHiddenDecoration(api) {
+  var hasRun = false;
+  return function () {
+    var _api$selectionMarker2;
+    if (!hasRun && api !== null && api !== void 0 && (_api$selectionMarker2 = api.selectionMarker) !== null && _api$selectionMarker2 !== void 0 && (_api$selectionMarker2 = _api$selectionMarker2.sharedState.currentState()) !== null && _api$selectionMarker2 !== void 0 && _api$selectionMarker2.isForcedHidden) {
+      var _api$core2;
+      hasRun = true;
+      return api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(function (_ref5) {
+        var tr = _ref5.tr;
+        return tr.setMeta(key, {
+          forceHide: false
+        });
+      });
+    }
+  };
+}

package/dist/esm/pm-plugins/main.js

@@ -12,22 +12,20 @@ export var createPlugin = function createPlugin(api) {
       init: function init() {
         return {
           decorations: DecorationSet.empty,
-          shouldHideDecorations: true
+          shouldHideDecorations: true,
+          forceHide: false
         };
       },
       apply: function apply(tr, currentState) {
-        var _tr$getMeta$shouldHid, _tr$getMeta;
-        var shouldHideDecorations = (_tr$getMeta$shouldHid = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.shouldHideDecorations) !== null && _tr$getMeta$shouldHid !== void 0 ? _tr$getMeta$shouldHid : currentState.shouldHideDecorations;
+        var _tr$getMeta$forceHide, _tr$getMeta, _tr$getMeta$shouldHid, _tr$getMeta2;
+        var forceHide = (_tr$getMeta$forceHide = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.forceHide) !== null && _tr$getMeta$forceHide !== void 0 ? _tr$getMeta$forceHide : currentState.forceHide;
+        var shouldHideDecorations = (_tr$getMeta$shouldHid = (_tr$getMeta2 = tr.getMeta(key)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.shouldHideDecorations) !== null && _tr$getMeta$shouldHid !== void 0 ? _tr$getMeta$shouldHid : currentState.shouldHideDecorations;
         var selection = tr.selection;
-        if (shouldHideDecorations) {
-          return {
-            decorations: DecorationSet.empty,
-            shouldHideDecorations: shouldHideDecorations
-          };
-        }
+        var decorations = shouldHideDecorations || forceHide ? DecorationSet.empty : DecorationSet.create(tr.doc, [].concat(_toConsumableArray(createWidgetDecoration(selection.$anchor, 'anchor', selection)), [selectionDecoration(selection)], _toConsumableArray(createWidgetDecoration(selection.$head, 'head', selection))));
         return {
-          decorations: DecorationSet.create(tr.doc, [].concat(_toConsumableArray(createWidgetDecoration(selection.$anchor, 'anchor', selection)), [selectionDecoration(selection)], _toConsumableArray(createWidgetDecoration(selection.$head, 'head', selection)))),
-          shouldHideDecorations: shouldHideDecorations
+          decorations: decorations,
+          shouldHideDecorations: shouldHideDecorations,
+          forceHide: forceHide
         };
       }
     },

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { selectionMarkerPlugin } from './plugin';
-export type { SelectionMarkerPlugin } from './types';
+export type { SelectionMarkerPlugin, ReleaseHiddenDecoration } from './types';

package/dist/types/pm-plugins/main.d.ts

@@ -7,11 +7,13 @@ import type { SelectionMarkerPlugin } from '../types';
 interface PluginState {
     decorations: DecorationSet;
     shouldHideDecorations: boolean;
+    forceHide: boolean;
 }
 export declare const key: PluginKey<PluginState>;
 export declare const createPlugin: (api: ExtractInjectionAPI<SelectionMarkerPlugin> | undefined) => SafePlugin<{
     decorations: DecorationSet;
     shouldHideDecorations: any;
+    forceHide: any;
 }>;
 export declare function dispatchShouldHideDecorations(editorView: EditorView, shouldHideDecorations: boolean): void;
 export {};

package/dist/types/types.d.ts

@@ -1,6 +1,13 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
+export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type SelectionMarkerPlugin = NextEditorPlugin<'selectionMarker', {
     dependencies: [FocusPlugin, OptionalPlugin<TypeAheadPlugin>];
+    sharedState: {
+        isForcedHidden: boolean;
+    } | undefined;
+    actions: {
+        hideDecoration: () => ReleaseHiddenDecoration | undefined;
+    };
 }>;

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

@@ -1,2 +1,2 @@
 export { selectionMarkerPlugin } from './plugin';
-export type { SelectionMarkerPlugin } from './types';
+export type { SelectionMarkerPlugin, ReleaseHiddenDecoration } from './types';

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -7,11 +7,13 @@ import type { SelectionMarkerPlugin } from '../types';
 interface PluginState {
     decorations: DecorationSet;
     shouldHideDecorations: boolean;
+    forceHide: boolean;
 }
 export declare const key: PluginKey<PluginState>;
 export declare const createPlugin: (api: ExtractInjectionAPI<SelectionMarkerPlugin> | undefined) => SafePlugin<{
     decorations: DecorationSet;
     shouldHideDecorations: any;
+    forceHide: any;
 }>;
 export declare function dispatchShouldHideDecorations(editorView: EditorView, shouldHideDecorations: boolean): void;
 export {};

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

@@ -1,9 +1,16 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
+export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type SelectionMarkerPlugin = NextEditorPlugin<'selectionMarker', {
     dependencies: [
         FocusPlugin,
         OptionalPlugin<TypeAheadPlugin>
     ];
+    sharedState: {
+        isForcedHidden: boolean;
+    } | undefined;
+    actions: {
+        hideDecoration: () => ReleaseHiddenDecoration | undefined;
+    };
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-selection-marker",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Selection marker plugin for @atlaskit/editor-core.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,11 +31,11 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^78.12.0",
+    "@atlaskit/editor-common": "^78.14.0",
     "@atlaskit/editor-plugin-focus": "^1.1.0",
     "@atlaskit/editor-plugin-type-ahead": "^1.0.2",
     "@atlaskit/editor-prosemirror": "3.0.0",
-    "@atlaskit/primitives": "^4.1.0",
+    "@atlaskit/primitives": "^5.0.0",
     "@atlaskit/tokens": "^1.41.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
@@ -78,11 +78,9 @@
       "ui-components": [
         "lite-mode"
       ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ],
+      "deprecation": "no-deprecated-imports",
       "styling": [
-        "static",
+        "emotion",
         "compiled"
       ],
       "imports": [
@@ -91,4 +89,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}