@atlaskit/editor-plugin-media 3.0.4 → 3.0.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-media
 
+## 3.0.5
+
+### Patch Changes
+
+- [#154892](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154892)
+  [`406f074dcf056`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/406f074dcf056) -
+  [ux] When media's floating toolbar option's popups for "Alt text", "Add link" or "Resize" are
+  closed by space key press, the focus should be set on "View more" button.
+
 ## 3.0.4
 
 ### Patch Changes

package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -139,7 +139,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8')) {
         _this.closeMediaAltTextMenuAndSetFocus();
       } else {
-        _this.closeMediaAltTextMenu(); // Why do we close the menu on blur? Is it a bug?
+        _this.closeMediaAltTextMenu();
       }
     });
     (0, _defineProperty2.default)(_this, "handleClearText", function () {

package/dist/cjs/pm-plugins/pixel-resizing/ui/pixel-entry.js

@@ -24,6 +24,7 @@ var _constants = require("./constants");
 var _styles = require("./styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable jsdoc/check-tag-names */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -31,6 +32,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives
+
 var pixelSizingLabel = (0, _primitives.xcss)({
   gridArea: 'label',
   lineHeight: "var(--ds-space-300, 24px)"
@@ -300,6 +303,26 @@ var PixelEntryComponentNext = exports.PixelEntryComponentNext = function PixelEn
       }, shouldSetFocus);
     }
   }, [computedWidth, computedHeight, handleCloseAndSave]);
+  var handleCloseButtonKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      var shouldSetFocus = true;
+      handleCloseAndSave({
+        inputWidth: computedWidth,
+        inputHeight: computedHeight
+      }, shouldSetFocus);
+    }
+  }, [computedWidth, computedHeight, handleCloseAndSave]);
+  var getButtonKeyDownHandler = function getButtonKeyDownHandler() {
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_9')) {
+      return handleKeyDown;
+    } else if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_9')) {
+      return handleCloseButtonKeyDown;
+    } else {
+      return undefined;
+    }
+  };
   return (0, _react2.jsx)(_primitives.Box, {
     xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
   }, (0, _react2.jsx)(_primitives.Inline, {
@@ -367,6 +390,6 @@ var PixelEntryComponentNext = exports.PixelEntryComponentNext = function PixelEn
         inputHeight: computedHeight
       });
     },
-    onKeyDown: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8') ? handleKeyDown : undefined
+    onKeyDown: getButtonKeyDownHandler()
   }))));
 };

package/dist/cjs/ui/MediaLinkingToolbar.js

@@ -22,6 +22,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _linkBrokenEditorUnlink = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-broken--editor-unlink"));
 var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -134,7 +135,8 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
             });
           },
           onKeyDown: function onKeyDown(event) {
-            if (event.key === 'Enter') {
+            if (event.key === 'Enter' || event.key === ' ' && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_9')) {
+              event.preventDefault();
               _this.handleOnBack({
                 url: value,
                 inputMethod: currentInputMethod
@@ -176,7 +178,8 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
             return _this.handleUnlink();
           },
           onKeyDown: function onKeyDown(event) {
-            if (event.key === 'Enter') {
+            if (event.key === 'Enter' || event.key === ' ' && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_9')) {
+              event.preventDefault();
               _this.handleUnlink(true);
             }
           }

package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -128,7 +128,7 @@ export class AltTextEditComponent extends React.Component {
       if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8')) {
         this.closeMediaAltTextMenuAndSetFocus();
       } else {
-        this.closeMediaAltTextMenu(); // Why do we close the menu on blur? Is it a bug?
+        this.closeMediaAltTextMenu();
       }
     });
     _defineProperty(this, "handleClearText", () => {

package/dist/es2019/pm-plugins/pixel-resizing/ui/pixel-entry.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable jsdoc/check-tag-names */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -12,6 +13,7 @@ import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
 import Form, { Field } from '@atlaskit/form';
 import CloseIcon from '@atlaskit/icon/core/close';
 import { fg } from '@atlaskit/platform-feature-flags';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives
 import { Inline, Box, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -282,6 +284,26 @@ export const PixelEntryComponentNext = ({
       }, shouldSetFocus);
     }
   }, [computedWidth, computedHeight, handleCloseAndSave]);
+  const handleCloseButtonKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      const shouldSetFocus = true;
+      handleCloseAndSave({
+        inputWidth: computedWidth,
+        inputHeight: computedHeight
+      }, shouldSetFocus);
+    }
+  }, [computedWidth, computedHeight, handleCloseAndSave]);
+  const getButtonKeyDownHandler = () => {
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    if (fg('platform_editor_controls_patch_8') && !fg('platform_editor_controls_patch_9')) {
+      return handleKeyDown;
+    } else if (fg('platform_editor_controls_patch_9')) {
+      return handleCloseButtonKeyDown;
+    } else {
+      return undefined;
+    }
+  };
   return jsx(Box, {
     xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
   }, jsx(Inline, {
@@ -347,6 +369,6 @@ export const PixelEntryComponentNext = ({
         inputHeight: computedHeight
       });
     },
-    onKeyDown: fg('platform_editor_controls_patch_8') ? handleKeyDown : undefined
+    onKeyDown: getButtonKeyDownHandler()
   }))));
 };

package/dist/es2019/ui/MediaLinkingToolbar.js

@@ -17,6 +17,7 @@ PanelTextInput } from '@atlaskit/editor-common/ui';
 import { normalizeUrl } from '@atlaskit/editor-common/utils';
 import EditorUnlinkIcon from '@atlaskit/icon/core/migration/link-broken--editor-unlink';
 import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { R400 } from '@atlaskit/theme/colors';
 const validationWrapper = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -126,7 +127,8 @@ class LinkAddToolbar extends React.PureComponent {
             inputMethod: currentInputMethod
           }),
           onKeyDown: event => {
-            if (event.key === 'Enter') {
+            if (event.key === 'Enter' || event.key === ' ' && fg('platform_editor_controls_patch_9')) {
+              event.preventDefault();
               this.handleOnBack({
                 url: value,
                 inputMethod: currentInputMethod
@@ -166,7 +168,8 @@ class LinkAddToolbar extends React.PureComponent {
           }),
           onClick: () => this.handleUnlink(),
           onKeyDown: event => {
-            if (event.key === 'Enter') {
+            if (event.key === 'Enter' || event.key === ' ' && fg('platform_editor_controls_patch_9')) {
+              event.preventDefault();
               this.handleUnlink(true);
             }
           }

package/dist/esm/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -136,7 +136,7 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
       if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8')) {
         _this.closeMediaAltTextMenuAndSetFocus();
       } else {
-        _this.closeMediaAltTextMenu(); // Why do we close the menu on blur? Is it a bug?
+        _this.closeMediaAltTextMenu();
       }
     });
     _defineProperty(_this, "handleClearText", function () {

package/dist/esm/pm-plugins/pixel-resizing/ui/pixel-entry.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable jsdoc/check-tag-names */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -13,6 +14,7 @@ import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
 import Form, { Field } from '@atlaskit/form';
 import CloseIcon from '@atlaskit/icon/core/close';
 import { fg } from '@atlaskit/platform-feature-flags';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives
 import { Inline, Box, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -288,6 +290,26 @@ export var PixelEntryComponentNext = function PixelEntryComponentNext(_ref5) {
       }, shouldSetFocus);
     }
   }, [computedWidth, computedHeight, handleCloseAndSave]);
+  var handleCloseButtonKeyDown = useCallback(function (event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      var shouldSetFocus = true;
+      handleCloseAndSave({
+        inputWidth: computedWidth,
+        inputHeight: computedHeight
+      }, shouldSetFocus);
+    }
+  }, [computedWidth, computedHeight, handleCloseAndSave]);
+  var getButtonKeyDownHandler = function getButtonKeyDownHandler() {
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    if (fg('platform_editor_controls_patch_8') && !fg('platform_editor_controls_patch_9')) {
+      return handleKeyDown;
+    } else if (fg('platform_editor_controls_patch_9')) {
+      return handleCloseButtonKeyDown;
+    } else {
+      return undefined;
+    }
+  };
   return jsx(Box, {
     xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
   }, jsx(Inline, {
@@ -355,6 +377,6 @@ export var PixelEntryComponentNext = function PixelEntryComponentNext(_ref5) {
         inputHeight: computedHeight
       });
     },
-    onKeyDown: fg('platform_editor_controls_patch_8') ? handleKeyDown : undefined
+    onKeyDown: getButtonKeyDownHandler()
   }))));
 };

package/dist/esm/ui/MediaLinkingToolbar.js

@@ -24,6 +24,7 @@ PanelTextInput } from '@atlaskit/editor-common/ui';
 import { normalizeUrl } from '@atlaskit/editor-common/utils';
 import EditorUnlinkIcon from '@atlaskit/icon/core/migration/link-broken--editor-unlink';
 import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { R400 } from '@atlaskit/theme/colors';
 var validationWrapper = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -129,7 +130,8 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
             });
           },
           onKeyDown: function onKeyDown(event) {
-            if (event.key === 'Enter') {
+            if (event.key === 'Enter' || event.key === ' ' && fg('platform_editor_controls_patch_9')) {
+              event.preventDefault();
               _this.handleOnBack({
                 url: value,
                 inputMethod: currentInputMethod
@@ -171,7 +173,8 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
             return _this.handleUnlink();
           },
           onKeyDown: function onKeyDown(event) {
-            if (event.key === 'Enter') {
+            if (event.key === 'Enter' || event.key === ' ' && fg('platform_editor_controls_patch_9')) {
+              event.preventDefault();
               _this.handleUnlink(true);
             }
           }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "3.0.4",
+	"version": "3.0.5",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -59,7 +59,7 @@
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/icon": "^26.0.0",
 		"@atlaskit/media-card": "^79.2.0",
-		"@atlaskit/media-client": "^33.0.0",
+		"@atlaskit/media-client": "^33.1.0",
 		"@atlaskit/media-client-react": "^4.0.0",
 		"@atlaskit/media-common": "^12.0.0",
 		"@atlaskit/media-filmstrip": "^50.0.0",
@@ -85,7 +85,7 @@
 		"typescript": "~5.4.2"
 	},
 	"peerDependencies": {
-		"@atlaskit/media-core": "^36.0.0",
+		"@atlaskit/media-core": "^36.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -201,6 +201,9 @@
 		},
 		"platform_editor_controls_patch_8": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_9": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {