@atlaskit/editor-plugin-selection-extension 2.1.1 → 2.1.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 2.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.1.2
+
+### Patch Changes
+
+- [#120385](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120385)
+  [`0974c164df21e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0974c164df21e) -
+  [ux] ED-26440 minor cosmetic updates to selection extension plugin
+- Updated dependencies
+
 ## 2.1.1
 
 ### Patch Changes

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

@@ -8,6 +8,7 @@ exports.selectionExtensionPluginKey = exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _types = require("../types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var selectionExtensionPluginKey = exports.selectionExtensionPluginKey = new _state.PluginKey('selectionExtensionPlugin');
@@ -23,11 +24,11 @@ var createPlugin = exports.createPlugin = function createPlugin() {
       apply: function apply(tr, pluginState) {
         var meta = tr.getMeta(selectionExtensionPluginKey);
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
-          case 'set-active-extension':
+          case _types.SelectionExtensionActionTypes.SET_ACTIVE_EXTENSION:
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeExtension: meta.extension
             });
-          case 'clear-active-extension':
+          case _types.SelectionExtensionActionTypes.CLEAR_ACTIVE_EXTENSION:
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeExtension: undefined
             });

package/dist/cjs/selectionExtensionPlugin.js

@@ -89,6 +89,16 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
             return;
           }
         }
+
+        /**
+         * Active Extension
+         *
+         * Check if there is an active extension and hide the selection extension dropdown
+         */
+        var selectionExtensionState = _main.selectionExtensionPluginKey.getState(state);
+        if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
+          return;
+        }
         var handleOnExtensionClick = function handleOnExtensionClick(view) {
           return function (extension) {
             var currentSelection = state.selection;

package/dist/cjs/types/index.js

@@ -2,4 +2,11 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.SelectionExtensionActionTypes = void 0;
+var SelectionExtensionActionTypes = exports.SelectionExtensionActionTypes = /*#__PURE__*/function (SelectionExtensionActionTypes) {
+  SelectionExtensionActionTypes["SET_ACTIVE_EXTENSION"] = "set-active-extension";
+  SelectionExtensionActionTypes["UPDATE_ACTIVE_EXTENSION_COORDS"] = "update-active-extension-coords";
+  SelectionExtensionActionTypes["CLEAR_ACTIVE_EXTENSION"] = "clear-active-extension";
+  return SelectionExtensionActionTypes;
+}({});

package/dist/cjs/ui/toolbar/SelectionExtensionDropdownMenu.js

@@ -33,6 +33,8 @@ var SelectionExtensionDropdownMenuComponent = /*#__PURE__*/_react.default.memo(f
     onItemActivated: onItemActivated,
     "data-testid": "selection-extension-dropdown-menu"
   }, /*#__PURE__*/_react.default.createElement(_SelectionExtensionDropdownMenuButton.SelectionExtensionDropdownMenuButton, {
+    "aria-expanded": isMenuOpen,
+    selected: isMenuOpen,
     onClick: function onClick() {
       return setIsMenuOpen(function (prevIsMenuOpen) {
         var nextIsMenuOpen = !prevIsMenuOpen;

package/dist/cjs/ui/toolbar/SelectionExtensionDropdownMenuButton.js

@@ -7,15 +7,31 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectionExtensionDropdownMenuButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _apps = _interopRequireDefault(require("@atlaskit/icon/core/apps"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var SelectionExtensionDropdownMenuButtonComponent = function SelectionExtensionDropdownMenuButtonComponent(_ref) {
-  var onClick = _ref.onClick;
+  var onClick = _ref.onClick,
+    selected = _ref.selected,
+    ariaExpanded = _ref['aria-expanded'],
+    intl = _ref.intl;
   return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
     testId: "selection-extension-dropdown-button",
-    onClick: onClick
+    "aria-label": intl.formatMessage(_messages.selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    "aria-haspopup": "true",
+    spacing: "compact",
+    title: intl.formatMessage(_messages.selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    onClick: onClick,
+    "aria-expanded": ariaExpanded,
+    selected: selected,
+    iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+      spacing: "none",
+      label: intl.formatMessage(_messages.selectionExtensionMessages.selectionExtensionDropdownButtonLabel)
+    })
   }, /*#__PURE__*/_react.default.createElement(_apps.default, {
-    label: "selection extension dropdown"
+    label: intl.formatMessage(_messages.selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    spacing: "none"
   }));
 };
 var SelectionExtensionDropdownMenuButton = exports.SelectionExtensionDropdownMenuButton = (0, _reactIntlNext.injectIntl)(SelectionExtensionDropdownMenuButtonComponent);

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

@@ -1,5 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { SelectionExtensionActionTypes } from '../types';
 export const selectionExtensionPluginKey = new PluginKey('selectionExtensionPlugin');
 export const createPlugin = () => {
   return new SafePlugin({
@@ -13,12 +14,12 @@ export const createPlugin = () => {
       apply: (tr, pluginState) => {
         const meta = tr.getMeta(selectionExtensionPluginKey);
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
-          case 'set-active-extension':
+          case SelectionExtensionActionTypes.SET_ACTIVE_EXTENSION:
             return {
               ...pluginState,
               activeExtension: meta.extension
             };
-          case 'clear-active-extension':
+          case SelectionExtensionActionTypes.CLEAR_ACTIVE_EXTENSION:
             return {
               ...pluginState,
               activeExtension: undefined

package/dist/es2019/selectionExtensionPlugin.js

@@ -84,6 +84,16 @@ export const selectionExtensionPlugin = ({
             return;
           }
         }
+
+        /**
+         * Active Extension
+         *
+         * Check if there is an active extension and hide the selection extension dropdown
+         */
+        const selectionExtensionState = selectionExtensionPluginKey.getState(state);
+        if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
+          return;
+        }
         const handleOnExtensionClick = view => extension => {
           const {
             selection: currentSelection

package/dist/es2019/types/index.js

@@ -1 +1,6 @@
-export {};
+export let SelectionExtensionActionTypes = /*#__PURE__*/function (SelectionExtensionActionTypes) {
+  SelectionExtensionActionTypes["SET_ACTIVE_EXTENSION"] = "set-active-extension";
+  SelectionExtensionActionTypes["UPDATE_ACTIVE_EXTENSION_COORDS"] = "update-active-extension-coords";
+  SelectionExtensionActionTypes["CLEAR_ACTIVE_EXTENSION"] = "clear-active-extension";
+  return SelectionExtensionActionTypes;
+}({});

package/dist/es2019/ui/toolbar/SelectionExtensionDropdownMenu.js

@@ -20,6 +20,8 @@ const SelectionExtensionDropdownMenuComponent = /*#__PURE__*/React.memo(({
     onItemActivated: onItemActivated,
     "data-testid": "selection-extension-dropdown-menu"
   }, /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenuButton, {
+    "aria-expanded": isMenuOpen,
+    selected: isMenuOpen,
     onClick: () => setIsMenuOpen(prevIsMenuOpen => {
       const nextIsMenuOpen = !prevIsMenuOpen;
       if (editorAnalyticsAPI) {

package/dist/es2019/ui/toolbar/SelectionExtensionDropdownMenuButton.js

@@ -1,15 +1,31 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
+import { selectionExtensionMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import AppsIcon from '@atlaskit/icon/core/apps';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 const SelectionExtensionDropdownMenuButtonComponent = ({
-  onClick
+  onClick,
+  selected,
+  'aria-expanded': ariaExpanded,
+  intl
 }) => {
   return /*#__PURE__*/React.createElement(ToolbarButton, {
     testId: "selection-extension-dropdown-button",
-    onClick: onClick
+    "aria-label": intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    "aria-haspopup": "true",
+    spacing: "compact",
+    title: intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    onClick: onClick,
+    "aria-expanded": ariaExpanded,
+    selected: selected,
+    iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      spacing: "none",
+      label: intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel)
+    })
   }, /*#__PURE__*/React.createElement(AppsIcon, {
-    label: "selection extension dropdown"
+    label: intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    spacing: "none"
   }));
 };
 export const SelectionExtensionDropdownMenuButton = injectIntl(SelectionExtensionDropdownMenuButtonComponent);

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

@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { SelectionExtensionActionTypes } from '../types';
 export var selectionExtensionPluginKey = new PluginKey('selectionExtensionPlugin');
 export var createPlugin = function createPlugin() {
   return new SafePlugin({
@@ -16,11 +17,11 @@ export var createPlugin = function createPlugin() {
       apply: function apply(tr, pluginState) {
         var meta = tr.getMeta(selectionExtensionPluginKey);
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
-          case 'set-active-extension':
+          case SelectionExtensionActionTypes.SET_ACTIVE_EXTENSION:
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeExtension: meta.extension
             });
-          case 'clear-active-extension':
+          case SelectionExtensionActionTypes.CLEAR_ACTIVE_EXTENSION:
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeExtension: undefined
             });

package/dist/esm/selectionExtensionPlugin.js

@@ -82,6 +82,16 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
             return;
           }
         }
+
+        /**
+         * Active Extension
+         *
+         * Check if there is an active extension and hide the selection extension dropdown
+         */
+        var selectionExtensionState = selectionExtensionPluginKey.getState(state);
+        if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
+          return;
+        }
         var handleOnExtensionClick = function handleOnExtensionClick(view) {
           return function (extension) {
             var currentSelection = state.selection;

package/dist/esm/types/index.js

@@ -1 +1,6 @@
-export {};
+export var SelectionExtensionActionTypes = /*#__PURE__*/function (SelectionExtensionActionTypes) {
+  SelectionExtensionActionTypes["SET_ACTIVE_EXTENSION"] = "set-active-extension";
+  SelectionExtensionActionTypes["UPDATE_ACTIVE_EXTENSION_COORDS"] = "update-active-extension-coords";
+  SelectionExtensionActionTypes["CLEAR_ACTIVE_EXTENSION"] = "clear-active-extension";
+  return SelectionExtensionActionTypes;
+}({});

package/dist/esm/ui/toolbar/SelectionExtensionDropdownMenu.js

@@ -23,6 +23,8 @@ var SelectionExtensionDropdownMenuComponent = /*#__PURE__*/React.memo(function (
     onItemActivated: onItemActivated,
     "data-testid": "selection-extension-dropdown-menu"
   }, /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenuButton, {
+    "aria-expanded": isMenuOpen,
+    selected: isMenuOpen,
     onClick: function onClick() {
       return setIsMenuOpen(function (prevIsMenuOpen) {
         var nextIsMenuOpen = !prevIsMenuOpen;

package/dist/esm/ui/toolbar/SelectionExtensionDropdownMenuButton.js

@@ -1,14 +1,30 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
+import { selectionExtensionMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import AppsIcon from '@atlaskit/icon/core/apps';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 var SelectionExtensionDropdownMenuButtonComponent = function SelectionExtensionDropdownMenuButtonComponent(_ref) {
-  var onClick = _ref.onClick;
+  var onClick = _ref.onClick,
+    selected = _ref.selected,
+    ariaExpanded = _ref['aria-expanded'],
+    intl = _ref.intl;
   return /*#__PURE__*/React.createElement(ToolbarButton, {
     testId: "selection-extension-dropdown-button",
-    onClick: onClick
+    "aria-label": intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    "aria-haspopup": "true",
+    spacing: "compact",
+    title: intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    onClick: onClick,
+    "aria-expanded": ariaExpanded,
+    selected: selected,
+    iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      spacing: "none",
+      label: intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel)
+    })
   }, /*#__PURE__*/React.createElement(AppsIcon, {
-    label: "selection extension dropdown"
+    label: intl.formatMessage(selectionExtensionMessages.selectionExtensionDropdownButtonLabel),
+    spacing: "none"
   }));
 };
 export var SelectionExtensionDropdownMenuButton = injectIntl(SelectionExtensionDropdownMenuButtonComponent);

package/dist/types/types/index.d.ts

@@ -32,14 +32,19 @@ export type SelectionExtensionCoords = {
     top: number;
     bottom: number;
 };
+export declare enum SelectionExtensionActionTypes {
+    SET_ACTIVE_EXTENSION = "set-active-extension",
+    UPDATE_ACTIVE_EXTENSION_COORDS = "update-active-extension-coords",
+    CLEAR_ACTIVE_EXTENSION = "clear-active-extension"
+}
 export type UpdateActiveExtensionAction = {
-    type: 'set-active-extension';
+    type: SelectionExtensionActionTypes.SET_ACTIVE_EXTENSION;
     extension: SelectionExtensionContract;
 } | {
-    type: 'update-active-extension-coords';
+    type: SelectionExtensionActionTypes.UPDATE_ACTIVE_EXTENSION_COORDS;
     coords: SelectionExtensionCoords;
 } | {
-    type: 'clear-active-extension';
+    type: SelectionExtensionActionTypes.CLEAR_ACTIVE_EXTENSION;
 };
 export type SelectionExtensionPluginState = {
     activeExtension?: {

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

@@ -32,14 +32,19 @@ export type SelectionExtensionCoords = {
     top: number;
     bottom: number;
 };
+export declare enum SelectionExtensionActionTypes {
+    SET_ACTIVE_EXTENSION = "set-active-extension",
+    UPDATE_ACTIVE_EXTENSION_COORDS = "update-active-extension-coords",
+    CLEAR_ACTIVE_EXTENSION = "clear-active-extension"
+}
 export type UpdateActiveExtensionAction = {
-    type: 'set-active-extension';
+    type: SelectionExtensionActionTypes.SET_ACTIVE_EXTENSION;
     extension: SelectionExtensionContract;
 } | {
-    type: 'update-active-extension-coords';
+    type: SelectionExtensionActionTypes.UPDATE_ACTIVE_EXTENSION_COORDS;
     coords: SelectionExtensionCoords;
 } | {
-    type: 'clear-active-extension';
+    type: SelectionExtensionActionTypes.CLEAR_ACTIVE_EXTENSION;
 };
 export type SelectionExtensionPluginState = {
     activeExtension?: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-extension",
-	"version": "2.1.1",
+	"version": "2.1.3",
 	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,8 +36,8 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^100.2.0",
-		"@atlaskit/editor-plugin-analytics": "^2.0.0",
+		"@atlaskit/editor-common": "^101.0.0",
+		"@atlaskit/editor-plugin-analytics": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
 		"@atlaskit/editor-plugin-selection-toolbar": "^2.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",