@atlaskit/editor-plugin-selection-toolbar 2.0.2 → 2.0.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-selection-toolbar
 
+## 2.0.4
+
+### Patch Changes
+
+- [#121249](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121249)
+  [`d14ccaecc153a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d14ccaecc153a) -
+  ED-26862 contextual toolbar minor updates
+
+## 2.0.3
+
+### Patch Changes
+
+- [#120533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120533)
+  [`f1bec731e278f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f1bec731e278f) -
+  Adds a `sideEffects` field to ensure this package does not have Compiled styles tree-shaken in the
+  future to avoid an accidental regression.
+
+  This is related to
+  https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953
+
 ## 2.0.2
 
 ### Patch Changes

package/dist/cjs/selectionToolbarPlugin.js

@@ -144,9 +144,10 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
     },
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
-        var _selectionToolbarPlug = _pluginKey.selectionToolbarPluginKey.getState(state),
-          selectionStable = _selectionToolbarPlug.selectionStable,
-          hide = _selectionToolbarPlug.hide;
+        var _ref3 = _pluginKey.selectionToolbarPluginKey.getState(state),
+          selectionStable = _ref3.selectionStable,
+          hide = _ref3.hide,
+          toolbarDocking = _ref3.toolbarDocking;
         if (state.selection.empty || !selectionStable || hide || state.selection instanceof _state.NodeSelection ||
         // $anchorCell is only available in CellSelection, this check is to
         // avoid importing CellSelection from @atlaskit/editor-tables
@@ -167,11 +168,11 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
         // they add to the selection toolbar.
         // ie. if you want to have your plugin's group appear first, set rank to -10 if there is currently another
         // plugin you expect to be run at the same time as with an rank of -9
-        resolved.sort(function (_ref3, _ref4) {
-          var _ref3$rank = _ref3.rank,
-            rankA = _ref3$rank === void 0 ? 0 : _ref3$rank;
+        resolved.sort(function (_ref4, _ref5) {
           var _ref4$rank = _ref4.rank,
-            rankB = _ref4$rank === void 0 ? 0 : _ref4$rank;
+            rankA = _ref4$rank === void 0 ? 0 : _ref4$rank;
+          var _ref5$rank = _ref5.rank,
+            rankB = _ref5$rank === void 0 ? 0 : _ref5$rank;
           if (rankA < rankB) {
             return 1;
           }
@@ -207,7 +208,8 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
         }
         if (items.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
           items.push.apply(items, (0, _toConsumableArray2.default)((0, _overflowToolbarConfig.getOverflowFloatingToolbarConfig)({
-            api: api
+            api: api,
+            toolbarDocking: toolbarDocking
           })));
         }
         var calcToolbarPosition = config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;

package/dist/cjs/ui/overflow-toolbar-config.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getOverflowPrimaryToolbarConfig = exports.getOverflowFloatingToolbarConfig = void 0;
 var _react = require("@emotion/react");
 var _checkMark = _interopRequireDefault(require("@atlaskit/icon/utility/check-mark"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right"));
 var _menu = require("@atlaskit/menu");
 var _ContextualToolbarIcon = require("./icons/ContextualToolbarIcon");
 var _FixedToolbarIcon = require("./icons/FixedToolbarIcon");
@@ -19,12 +20,34 @@ var _FixedToolbarIcon = require("./icons/FixedToolbarIcon");
 
 // New editor controls
 var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
-  var api = _ref.api;
-  return [{
-    type: 'separator'
+  var api = _ref.api,
+    toolbarDocking = _ref.toolbarDocking;
+  var dropdownOptions = [{
+    title: 'Create Jira issue',
+    onClick: function onClick() {
+      return false;
+    },
+    elemAfter: (0, _react.jsx)(_chevronRight.default, {
+      spacing: "spacious",
+      label: ""
+    })
   }, {
-    type: 'overflow-dropdown',
-    options: [{
+    title: 'Define',
+    onClick: function onClick() {
+      return false;
+    }
+  }, {
+    title: 'Apps',
+    onClick: function onClick() {
+      return false;
+    },
+    elemAfter: (0, _react.jsx)(_chevronRight.default, {
+      spacing: "spacious",
+      label: ""
+    })
+  }];
+  if (toolbarDocking === 'none') {
+    dropdownOptions.push({
       type: 'overflow-dropdown-heading',
       title: 'Toolbar appears'
     }, {
@@ -49,7 +72,14 @@ var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig
       icon: (0, _react.jsx)(_FixedToolbarIcon.FixedToolbarIcon, {
         label: "Fixed toolbar"
       })
-    }]
+    });
+  }
+  return [{
+    type: 'separator'
+  }, {
+    type: 'overflow-dropdown',
+    dropdownWidth: 240,
+    options: dropdownOptions
   }];
 };
 var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarConfig(_ref2) {

package/dist/es2019/selectionToolbarPlugin.js

@@ -138,7 +138,8 @@ export const selectionToolbarPlugin = ({
       floatingToolbar(state, intl, providerFactory) {
         const {
           selectionStable,
-          hide
+          hide,
+          toolbarDocking
         } = selectionToolbarPluginKey.getState(state);
         if (state.selection.empty || !selectionStable || hide || state.selection instanceof NodeSelection ||
         // $anchorCell is only available in CellSelection, this check is to
@@ -196,7 +197,8 @@ export const selectionToolbarPlugin = ({
         }
         if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
           items.push(...getOverflowFloatingToolbarConfig({
-            api
+            api,
+            toolbarDocking
           }));
         }
         const calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;

package/dist/es2019/ui/overflow-toolbar-config.js

@@ -6,43 +6,75 @@
 import { jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 
 import CheckMarkIcon from '@atlaskit/icon/utility/check-mark';
+import ChevronRightIcon from '@atlaskit/icon/utility/migration/chevron-right';
 import { HeadingItem } from '@atlaskit/menu';
 import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
 import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
 // New editor controls
 export const getOverflowFloatingToolbarConfig = ({
-  api
-}) => [{
-  type: 'separator'
-}, {
-  type: 'overflow-dropdown',
-  options: [{
-    type: 'overflow-dropdown-heading',
-    title: 'Toolbar appears'
-  }, {
-    title: 'In-line with text',
+  api,
+  toolbarDocking
+}) => {
+  const dropdownOptions = [{
+    title: 'Create Jira issue',
     onClick: () => {
-      var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
-      return (_api$selectionToolbar = api === null || api === void 0 ? void 0 : (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
+      return false;
     },
-    icon: jsx(ContextualToolbarIcon, {
-      label: "Contextual toolbar"
-    }),
-    selected: true,
-    elemAfter: jsx(CheckMarkIcon, {
+    elemAfter: jsx(ChevronRightIcon, {
+      spacing: "spacious",
       label: ""
     })
   }, {
-    title: 'Fixed at top',
+    title: 'Define',
     onClick: () => {
-      var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
-      return (_api$selectionToolbar4 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 ? void 0 : (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
+      return false;
+    }
+  }, {
+    title: 'Apps',
+    onClick: () => {
+      return false;
     },
-    icon: jsx(FixedToolbarIcon, {
-      label: "Fixed toolbar"
+    elemAfter: jsx(ChevronRightIcon, {
+      spacing: "spacious",
+      label: ""
     })
-  }]
-}];
+  }];
+  if (toolbarDocking === 'none') {
+    dropdownOptions.push({
+      type: 'overflow-dropdown-heading',
+      title: 'Toolbar appears'
+    }, {
+      title: 'In-line with text',
+      onClick: () => {
+        var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
+        return (_api$selectionToolbar = api === null || api === void 0 ? void 0 : (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
+      },
+      icon: jsx(ContextualToolbarIcon, {
+        label: "Contextual toolbar"
+      }),
+      selected: true,
+      elemAfter: jsx(CheckMarkIcon, {
+        label: ""
+      })
+    }, {
+      title: 'Fixed at top',
+      onClick: () => {
+        var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
+        return (_api$selectionToolbar4 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 ? void 0 : (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
+      },
+      icon: jsx(FixedToolbarIcon, {
+        label: "Fixed toolbar"
+      })
+    });
+  }
+  return [{
+    type: 'separator'
+  }, {
+    type: 'overflow-dropdown',
+    dropdownWidth: 240,
+    options: dropdownOptions
+  }];
+};
 export const getOverflowPrimaryToolbarConfig = ({
   api
 }) => [{

package/dist/esm/selectionToolbarPlugin.js

@@ -137,9 +137,10 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
     },
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
-        var _selectionToolbarPlug = selectionToolbarPluginKey.getState(state),
-          selectionStable = _selectionToolbarPlug.selectionStable,
-          hide = _selectionToolbarPlug.hide;
+        var _ref3 = selectionToolbarPluginKey.getState(state),
+          selectionStable = _ref3.selectionStable,
+          hide = _ref3.hide,
+          toolbarDocking = _ref3.toolbarDocking;
         if (state.selection.empty || !selectionStable || hide || state.selection instanceof NodeSelection ||
         // $anchorCell is only available in CellSelection, this check is to
         // avoid importing CellSelection from @atlaskit/editor-tables
@@ -160,11 +161,11 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
         // they add to the selection toolbar.
         // ie. if you want to have your plugin's group appear first, set rank to -10 if there is currently another
         // plugin you expect to be run at the same time as with an rank of -9
-        resolved.sort(function (_ref3, _ref4) {
-          var _ref3$rank = _ref3.rank,
-            rankA = _ref3$rank === void 0 ? 0 : _ref3$rank;
+        resolved.sort(function (_ref4, _ref5) {
           var _ref4$rank = _ref4.rank,
-            rankB = _ref4$rank === void 0 ? 0 : _ref4$rank;
+            rankA = _ref4$rank === void 0 ? 0 : _ref4$rank;
+          var _ref5$rank = _ref5.rank,
+            rankB = _ref5$rank === void 0 ? 0 : _ref5$rank;
           if (rankA < rankB) {
             return 1;
           }
@@ -200,7 +201,8 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
         }
         if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
           items.push.apply(items, _toConsumableArray(getOverflowFloatingToolbarConfig({
-            api: api
+            api: api,
+            toolbarDocking: toolbarDocking
           })));
         }
         var calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;

package/dist/esm/ui/overflow-toolbar-config.js

@@ -6,17 +6,40 @@
 import { jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 
 import CheckMarkIcon from '@atlaskit/icon/utility/check-mark';
+import ChevronRightIcon from '@atlaskit/icon/utility/migration/chevron-right';
 import { HeadingItem } from '@atlaskit/menu';
 import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
 import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
 // New editor controls
 export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
-  var api = _ref.api;
-  return [{
-    type: 'separator'
+  var api = _ref.api,
+    toolbarDocking = _ref.toolbarDocking;
+  var dropdownOptions = [{
+    title: 'Create Jira issue',
+    onClick: function onClick() {
+      return false;
+    },
+    elemAfter: jsx(ChevronRightIcon, {
+      spacing: "spacious",
+      label: ""
+    })
   }, {
-    type: 'overflow-dropdown',
-    options: [{
+    title: 'Define',
+    onClick: function onClick() {
+      return false;
+    }
+  }, {
+    title: 'Apps',
+    onClick: function onClick() {
+      return false;
+    },
+    elemAfter: jsx(ChevronRightIcon, {
+      spacing: "spacious",
+      label: ""
+    })
+  }];
+  if (toolbarDocking === 'none') {
+    dropdownOptions.push({
       type: 'overflow-dropdown-heading',
       title: 'Toolbar appears'
     }, {
@@ -41,7 +64,14 @@ export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolba
       icon: jsx(FixedToolbarIcon, {
         label: "Fixed toolbar"
       })
-    }]
+    });
+  }
+  return [{
+    type: 'separator'
+  }, {
+    type: 'overflow-dropdown',
+    dropdownWidth: 240,
+    options: dropdownOptions
   }];
 };
 export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarConfig(_ref2) {

package/dist/types/ui/overflow-toolbar-config.d.ts

@@ -4,8 +4,9 @@ import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
 type OverflowToobarConfigOptions = {
     api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+    toolbarDocking?: 'top' | 'none';
 };
-export declare const getOverflowFloatingToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
+export declare const getOverflowFloatingToolbarConfig: ({ api, toolbarDocking, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
 export declare const getOverflowPrimaryToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => {
     items: MenuItem[];
 }[];

package/dist/types-ts4.5/ui/overflow-toolbar-config.d.ts

@@ -4,8 +4,9 @@ import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
 type OverflowToobarConfigOptions = {
     api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+    toolbarDocking?: 'top' | 'none';
 };
-export declare const getOverflowFloatingToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
+export declare const getOverflowFloatingToolbarConfig: ({ api, toolbarDocking, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
 export declare const getOverflowPrimaryToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => {
     items: MenuItem[];
 }[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-toolbar",
-	"version": "2.0.2",
+	"version": "2.0.4",
 	"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,21 +25,23 @@
 			]
 		}
 	},
-	"sideEffects": false,
+	"sideEffects": [
+		"*.compiled.css"
+	],
 	"atlaskit:src": "src/index.ts",
 	"af:exports": {
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^100.2.0",
+		"@atlaskit/editor-common": "^100.4.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/menu": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^3.2.0",
-		"@atlaskit/tokens": "^4.2.0",
+		"@atlaskit/tmp-editor-statsig": "^3.3.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0"