@atlaskit/editor-plugin-media 1.20.3 → 1.20.5

package/dist/es2019/ui/MediaLinkingToolbar.js

@@ -99,58 +99,61 @@ export class LinkAddToolbar extends React.PureComponent {
           key: index
         }, error);
       });
-      return jsx("div", {
-        className: "recent-list"
-      }, jsx("div", {
-        css: [container, !!activityProvider && containerWithProvider]
-      }, jsx("div", {
-        css: inputWrapper
-      }, jsx("span", {
-        css: buttonWrapper
-      }, jsx(Button, {
-        title: formatLinkAddressText,
-        icon: jsx(ChevronLeftLargeIcon, {
-          label: formatLinkAddressText
-        }),
-        onClick: () => this.handleOnBack({
-          url: value,
-          inputMethod: currentInputMethod
-        })
-      })), jsx(PanelTextInput, {
-        inputId: "media-link-search-input",
-        testId: "media-link-input",
-        placeholder: getPlaceholder(!!activityProvider),
-        autoFocus: true,
-        onCancel: this.handleCancel,
-        defaultValue: value,
-        onSubmit: inputValue => {
-          const validationErrors = this.getValidationErrors(inputValue, currentInputMethod);
-          this.setState({
-            validationErrors
-          });
-          if (!validationErrors.length) {
-            onSubmit();
-          }
-        },
-        onChange: value => {
-          this.setState({
-            validationErrors: []
-          });
-          onChange(value);
-        },
-        onKeyDown: onKeyDown
-      }), jsx("label", {
-        className: "assistive",
-        htmlFor: "media-link-search-input"
-      }, formatMessage(linkToolbarMessages.searchInput)), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, null), jsx(Button, {
-        title: formatUnlinkText,
-        icon: jsx(EditorUnlinkIcon, {
-          label: formatUnlinkText
-        }),
-        onClick: this.handleUnlink
-      }))), !!errorsList.length && jsx("section", {
-        css: validationWrapper
-      }, errorsList), renderRecentList()));
+      return (
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        jsx("div", {
+          className: "recent-list"
+        }, jsx("div", {
+          css: [container, !!activityProvider && containerWithProvider]
+        }, jsx("div", {
+          css: inputWrapper
+        }, jsx("span", {
+          css: buttonWrapper
+        }, jsx(Button, {
+          title: formatLinkAddressText,
+          icon: jsx(ChevronLeftLargeIcon, {
+            label: formatLinkAddressText
+          }),
+          onClick: () => this.handleOnBack({
+            url: value,
+            inputMethod: currentInputMethod
+          })
+        })), jsx(PanelTextInput, {
+          inputId: "media-link-search-input",
+          testId: "media-link-input",
+          placeholder: getPlaceholder(!!activityProvider),
+          autoFocus: true,
+          onCancel: this.handleCancel,
+          defaultValue: value,
+          onSubmit: inputValue => {
+            const validationErrors = this.getValidationErrors(inputValue, currentInputMethod);
+            this.setState({
+              validationErrors
+            });
+            if (!validationErrors.length) {
+              onSubmit();
+            }
+          },
+          onChange: value => {
+            this.setState({
+              validationErrors: []
+            });
+            onChange(value);
+          },
+          onKeyDown: onKeyDown
+        }), jsx("label", {
+          className: "assistive",
+          htmlFor: "media-link-search-input"
+        }, formatMessage(linkToolbarMessages.searchInput)), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, null), jsx(Button, {
+          title: formatUnlinkText,
+          icon: jsx(EditorUnlinkIcon, {
+            label: formatUnlinkText
+          }),
+          onClick: this.handleUnlink
+        }))), !!errorsList.length && jsx("section", {
+          css: validationWrapper
+        }, errorsList), renderRecentList()))
+      );
     });
   }
   getValidationErrors(value, inputMethod) {

package/dist/es2019/ui/PixelEntry/styles.js

@@ -3,18 +3,18 @@ const PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const pixelSizingWrapper = css`
-  display: grid;
-  grid-template-columns: 1fr 1em 1fr 0;
-  grid-template-rows: auto;
-  grid-template-areas: 'widthinput label heightinput submit';
-  width: ${PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH}px;
-  text-align: center;
-  height: ${"var(--ds-space-300, 24px)"};
+	display: grid;
+	grid-template-columns: 1fr 1em 1fr 0;
+	grid-template-rows: auto;
+	grid-template-areas: 'widthinput label heightinput submit';
+	width: ${PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH}px;
+	text-align: center;
+	height: ${"var(--ds-space-300, 24px)"};
 
-  // Atlaskit fieldset does not allow style override
-  & > * {
-    margin-top: 0 !important;
-  }
+	// Atlaskit fieldset does not allow style override
+	& > * {
+		margin-top: 0 !important;
+	}
 `;
 export const pixelEntryForm = css({
   form: {

package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -434,7 +434,9 @@ class ResizableMediaSingleNext extends React.Component {
       })
     }, jsx(ResizerNext, {
       minWidth: minViewWidth,
-      maxWidth: maxWidth,
+      maxWidth: maxWidth
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: resizerNextClassName,
       snapGap: MEDIA_SINGLE_SNAP_GAP,
       enable: enable,

package/dist/es2019/ui/ResizableMediaSingle/styled.js

@@ -2,9 +2,9 @@ import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export const wrapperStyle = props => css`
-  & > div {
-    ${MediaSingleDimensionHelper(props)};
-    position: relative;
-    clear: both;
-  }
+	& > div {
+		${MediaSingleDimensionHelper(props)};
+		position: relative;
+		clear: both;
+	}
 `;

package/dist/esm/nodeviews/mediaSingle.js

@@ -437,7 +437,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       var isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 || (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
       var MediaChildren = jsx("figure", {
         ref: this.mediaSingleWrapperRef,
-        css: figureWrapperStyles,
+        css: figureWrapperStyles
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
       }, commentsOnMedia && jsx(CommentBadge, {

package/dist/esm/nodeviews/styles.js

@@ -21,11 +21,14 @@ export var MediaCardWrapper = function MediaCardWrapper(_ref) {
     onContextMenu = _ref.onContextMenu;
   var calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
   return jsx("div", {
-    "data-testid": "media-card-wrapper",
+    "data-testid": "media-card-wrapper"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "media-card-wrapper",
     style: {
       borderColor: "var(--custom-palette-color)",
       borderWidth: "".concat(calculatedBorderWidth, "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       borderStyle: 'solid',
       borderRadius: "".concat(calculatedBorderWidth * 2, "px")
     }

package/dist/esm/toolbar/linking-toolbar-appearance.js

@@ -69,7 +69,9 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
       title: linkTitle,
       icon: jsx(OpenIcon, {
         label: linkTitle
-      }),
+      })
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: "hyperlink-open-link"
     }), jsx(Separator, null));
   } else {

package/dist/esm/ui/CaptionPlaceholder/index.js

@@ -8,7 +8,7 @@ import { captionMessages as messages } from '@atlaskit/editor-common/media';
 import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
 import { N200 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: ", " !important;\n  display: block;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-100, 8px)");
+var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: ", ";\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-top: ", " !important;\n\tdisplay: block;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-100, 8px)");
 export default /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick;
   return jsx("span", {

package/dist/esm/ui/ImageBorder/index.js

@@ -57,7 +57,9 @@ var ImageBorder = function ImageBorder(_ref) {
     value: {
       name: 'color'
     },
-    elemAfter: jsx("div", {
+    elemAfter:
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    jsx("div", {
       className: DropdownMenuSharedCssClassName.SUBMENU
     }, jsx("div", {
       css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
@@ -83,7 +85,9 @@ var ImageBorder = function ImageBorder(_ref) {
     value: {
       name: 'size'
     },
-    elemAfter: jsx("div", {
+    elemAfter:
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    jsx("div", {
       className: DropdownMenuSharedCssClassName.SUBMENU
     }, jsx("div", {
       css: contextualMenuArrow
@@ -132,7 +136,9 @@ var ImageBorder = function ImageBorder(_ref) {
       enabled: enabled,
       isOpen: isOpen
     })
-  }, jsx(ToolbarButton, {
+  }, jsx(ToolbarButton
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: "image-border-toolbar-btn",
     selected: enabled,
     onClick: toggleBorder,
@@ -144,7 +150,9 @@ var ImageBorder = function ImageBorder(_ref) {
     title: enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder)
   }), jsx("div", {
     ref: popupTarget
-  }, jsx(ToolbarButton, {
+  }, jsx(ToolbarButton
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: "image-border-toolbar-dropdown",
     selected: enabled || isOpen,
     "aria-label": formatMessage(messages.borderOptions),

package/dist/esm/ui/ImageBorder/styles.js

@@ -18,21 +18,21 @@ export var menuItemDimensions = {
 // TODO: Migrate away from gridSize
 // Recommendation: Replace directly with 4 due to itemSpacing being used in calculations
 export var itemSpacing = gridSize() / 2;
-export var contextualMenuArrow = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  &::after {\n    content: '\u203A';\n    margin-left: ", ";\n    line-height: 20px;\n    color: ", ";\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var contextualMenuArrow = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\t&::after {\n\t\tcontent: '\u203A';\n\t\tmargin-left: ", ";\n\t\tline-height: 20px;\n\t\tcolor: ", ";\n\t}\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
 export var contextualMenuColorIcon = function contextualMenuColorIcon(color) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  &::before {\n    content: '';\n    display: block;\n    border: 1px solid ", ";\n    border-radius: ", ";\n    width: 20px;\n    height: 20px;\n    ", "\n  }\n"])), contextualMenuArrow, DEFAULT_BORDER_COLOR, "var(--ds-border-radius-100, 3px)", color && "background: ".concat(color));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t", "\n\t&::before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: ", ";\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\t", "\n\t}\n"])), contextualMenuArrow, DEFAULT_BORDER_COLOR, "var(--ds-border-radius-100, 3px)", color && "background: ".concat(color));
 };
 export var contextualSubMenu = function contextualSubMenu(index) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background: ", ";\n  box-shadow: ", ";\n  display: flex;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  padding: ", ";\n\n  > div {\n    padding: 0;\n  }\n"])), "var(--ds-border-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tborder-radius: ", ";\n\tbackground: ", ";\n\tbox-shadow: ", ";\n\tdisplay: flex;\n\tposition: absolute;\n\ttop: ", "px;\n\tleft: ", "px;\n\tpadding: ", ";\n\n\t> div {\n\t\tpadding: 0;\n\t}\n"])), "var(--ds-border-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
 };
 export var buttonStyle = function buttonStyle(selected) {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  border-radius: 4px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), selected ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-background-neutral, ".concat(N20A, ")"), DEFAULT_BORDER_COLOR);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\theight: 26px;\n\twidth: 26px;\n\tpadding: 0;\n\tborder-radius: 4px;\n\tbackground-color: ", ";\n\tborder: 1px solid ", ";\n\tcursor: pointer;\n\tdisplay: block;\n"])), selected ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-background-neutral, ".concat(N20A, ")"), DEFAULT_BORDER_COLOR);
 };
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  margin: ", ";\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: ", ";\n  border-radius: 6px;\n  &:focus-within,\n  &:focus,\n  &:hover {\n    border-color: ", " !important;\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", N50);
+export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\tborder: 1px solid transparent;\n\tmargin: ", ";\n\tfont-size: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ", ";\n\tborder-radius: 6px;\n\t&:focus-within,\n\t&:focus,\n\t&:hover {\n\t\tborder-color: ", " !important;\n\t}\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", N50);
 export var line = function line(size, selected) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 12px;\n    height: ", "px;\n    background-color: ", ";\n    border-radius: 90px;\n    transform: translate(-50%, -50%) rotate(135deg);\n  }\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(N0, ")") : "var(--ds-icon, #44546F)");
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\tposition: relative;\n\t&:before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\twidth: 12px;\n\t\theight: ", "px;\n\t\tbackground-color: ", ";\n\t\tborder-radius: 90px;\n\t\ttransform: translate(-50%, -50%) rotate(135deg);\n\t}\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(N0, ")") : "var(--ds-icon, #44546F)");
 };
 var getHoverStyles = function getHoverStyles(selector) {
   return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n    }\n  }");
@@ -40,5 +40,5 @@ var getHoverStyles = function getHoverStyles(selector) {
 export var toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
   var enabled = _ref.enabled,
     isOpen = _ref.isOpen;
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  .image-border-toolbar-btn {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n  }\n  .image-border-toolbar-dropdown {\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n    width: 16px !important;\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    margin-left: ", ";\n  }\n\n  ", "\n  ", "\n"])), "var(--ds-space-025, 2px)", !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\t.image-border-toolbar-btn {\n\t\tborder-top-right-radius: 0;\n\t\tborder-bottom-right-radius: 0;\n\t\tpadding: 0;\n\t\t& > span {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t.image-border-toolbar-dropdown {\n\t\tpadding: 0;\n\t\t& > span {\n\t\t\tmargin: 0;\n\t\t}\n\t\twidth: 16px !important;\n\t\tborder-top-left-radius: 0 !important;\n\t\tborder-bottom-left-radius: 0 !important;\n\t\tmargin-left: ", ";\n\t}\n\n\t", "\n\t", "\n"])), "var(--ds-space-025, 2px)", !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
 };

package/dist/esm/ui/MediaLinkingToolbar.js

@@ -103,60 +103,63 @@ export var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           key: index
         }, error);
       });
-      return jsx("div", {
-        className: "recent-list"
-      }, jsx("div", {
-        css: [container, !!activityProvider && containerWithProvider]
-      }, jsx("div", {
-        css: inputWrapper
-      }, jsx("span", {
-        css: buttonWrapper
-      }, jsx(Button, {
-        title: formatLinkAddressText,
-        icon: jsx(ChevronLeftLargeIcon, {
-          label: formatLinkAddressText
-        }),
-        onClick: function onClick() {
-          return _this.handleOnBack({
-            url: value,
-            inputMethod: currentInputMethod
-          });
-        }
-      })), jsx(PanelTextInput, {
-        inputId: "media-link-search-input",
-        testId: "media-link-input",
-        placeholder: getPlaceholder(!!activityProvider),
-        autoFocus: true,
-        onCancel: _this.handleCancel,
-        defaultValue: value,
-        onSubmit: function onSubmit(inputValue) {
-          var validationErrors = _this.getValidationErrors(inputValue, currentInputMethod);
-          _this.setState({
-            validationErrors: validationErrors
-          });
-          if (!validationErrors.length) {
-            _onSubmit();
+      return (
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        jsx("div", {
+          className: "recent-list"
+        }, jsx("div", {
+          css: [container, !!activityProvider && containerWithProvider]
+        }, jsx("div", {
+          css: inputWrapper
+        }, jsx("span", {
+          css: buttonWrapper
+        }, jsx(Button, {
+          title: formatLinkAddressText,
+          icon: jsx(ChevronLeftLargeIcon, {
+            label: formatLinkAddressText
+          }),
+          onClick: function onClick() {
+            return _this.handleOnBack({
+              url: value,
+              inputMethod: currentInputMethod
+            });
           }
-        },
-        onChange: function onChange(value) {
-          _this.setState({
-            validationErrors: []
-          });
-          _onChange(value);
-        },
-        onKeyDown: onKeyDown
-      }), jsx("label", {
-        className: "assistive",
-        htmlFor: "media-link-search-input"
-      }, formatMessage(linkToolbarMessages.searchInput)), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, null), jsx(Button, {
-        title: formatUnlinkText,
-        icon: jsx(EditorUnlinkIcon, {
-          label: formatUnlinkText
-        }),
-        onClick: _this.handleUnlink
-      }))), !!errorsList.length && jsx("section", {
-        css: validationWrapper
-      }, errorsList), renderRecentList()));
+        })), jsx(PanelTextInput, {
+          inputId: "media-link-search-input",
+          testId: "media-link-input",
+          placeholder: getPlaceholder(!!activityProvider),
+          autoFocus: true,
+          onCancel: _this.handleCancel,
+          defaultValue: value,
+          onSubmit: function onSubmit(inputValue) {
+            var validationErrors = _this.getValidationErrors(inputValue, currentInputMethod);
+            _this.setState({
+              validationErrors: validationErrors
+            });
+            if (!validationErrors.length) {
+              _onSubmit();
+            }
+          },
+          onChange: function onChange(value) {
+            _this.setState({
+              validationErrors: []
+            });
+            _onChange(value);
+          },
+          onKeyDown: onKeyDown
+        }), jsx("label", {
+          className: "assistive",
+          htmlFor: "media-link-search-input"
+        }, formatMessage(linkToolbarMessages.searchInput)), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, null), jsx(Button, {
+          title: formatUnlinkText,
+          icon: jsx(EditorUnlinkIcon, {
+            label: formatUnlinkText
+          }),
+          onClick: _this.handleUnlink
+        }))), !!errorsList.length && jsx("section", {
+          css: validationWrapper
+        }, errorsList), renderRecentList()))
+      );
     });
     return _this;
   }

package/dist/esm/ui/PixelEntry/styles.js

@@ -4,7 +4,7 @@ import { css } from '@emotion/react';
 var PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-export var pixelSizingWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 1fr 1em 1fr 0;\n  grid-template-rows: auto;\n  grid-template-areas: 'widthinput label heightinput submit';\n  width: ", "px;\n  text-align: center;\n  height: ", ";\n\n  // Atlaskit fieldset does not allow style override\n  & > * {\n    margin-top: 0 !important;\n  }\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");
+export var pixelSizingWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 1em 1fr 0;\n\tgrid-template-rows: auto;\n\tgrid-template-areas: 'widthinput label heightinput submit';\n\twidth: ", "px;\n\ttext-align: center;\n\theight: ", ";\n\n\t// Atlaskit fieldset does not allow style override\n\t& > * {\n\t\tmargin-top: 0 !important;\n\t}\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");
 export var pixelEntryForm = css({
   form: {
     width: '100%'

package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -513,7 +513,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         })
       }, jsx(ResizerNext, {
         minWidth: minViewWidth,
-        maxWidth: maxWidth,
+        maxWidth: maxWidth
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: resizerNextClassName,
         snapGap: MEDIA_SINGLE_SNAP_GAP,
         enable: enable,

package/dist/esm/ui/ResizableMediaSingle/styled.js

@@ -4,5 +4,5 @@ import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export var wrapperStyle = function wrapperStyle(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n  }\n"])), MediaSingleDimensionHelper(props));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t& > div {\n\t\t", ";\n\t\tposition: relative;\n\t\tclear: both;\n\t}\n"])), MediaSingleDimensionHelper(props));
 };

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

@@ -26,7 +26,7 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
     renderMediaNodeWithState: (mediaProvider?: Promise<MediaProvider>, contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ width: editorWidth }: {
         width?: WidthPluginState | undefined;
     }) => JSX.Element;
-    renderMediaNodeWithProviders: ({ mediaProvider, contextIdentifierProvider, }: Providers) => JSX.Element;
+    renderMediaNodeWithProviders: ({ mediaProvider, contextIdentifierProvider }: Providers) => JSX.Element;
     render(): JSX.Element;
 }
 export declare const ReactMediaNode: (portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, mediaOptions: MediaOptions | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => (node: PMNode, view: EditorView, getPos: getPosHandler) => MediaNodeView;

package/dist/types/pm-plugins/alt-text/index.d.ts

@@ -3,5 +3,5 @@ import type { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 export declare const pluginKey: PluginKey<any>;
 declare const createCommand: <A = import("./actions").MediaAltTextAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => import("./types").MediaAltTextState;
-export declare const createPlugin: ({ dispatch, providerFactory, }: PMPluginFactoryParams) => SafePlugin<import("./types").MediaAltTextState>;
+export declare const createPlugin: ({ dispatch, providerFactory }: PMPluginFactoryParams) => SafePlugin<import("./types").MediaAltTextState>;
 export { createCommand, getPluginState };

package/dist/types/toolbar/filePreviewItem.d.ts

@@ -5,5 +5,5 @@ interface FilePreviewProps {
     mediaPluginState: MediaPluginState;
     intl: IntlShape;
 }
-export declare const FilePreviewItem: ({ mediaPluginState, intl, }: FilePreviewProps) => JSX.Element;
+export declare const FilePreviewItem: ({ mediaPluginState, intl }: FilePreviewProps) => JSX.Element;
 export {};

package/dist/types/toolbar/layout-group.d.ts

@@ -6,5 +6,5 @@ type Props = {
     dispatchCommand: (command: Command) => void;
     hide: () => void;
 };
-export declare const LayoutGroup: ({ layoutButtons, dispatchCommand, hide, }: Props) => jsx.JSX.Element;
+export declare const LayoutGroup: ({ layoutButtons, dispatchCommand, hide }: Props) => jsx.JSX.Element;
 export {};

package/dist/types/ui/MediaPicker/BrowserWrapper.d.ts

@@ -7,5 +7,5 @@ type Props = {
     onBrowseFn: (browse: () => void) => void;
     featureFlags?: MediaFeatureFlags;
 };
-export declare const BrowserWrapper: ({ mediaState, isOpen, onBrowseFn, featureFlags, }: Props) => JSX.Element;
+export declare const BrowserWrapper: ({ mediaState, isOpen, onBrowseFn, featureFlags }: Props) => JSX.Element;
 export {};

package/dist/types/ui/MediaPicker/ClipboardWrapper.d.ts

@@ -6,5 +6,5 @@ type Props = {
     featureFlags?: MediaFeatureFlags;
     container?: HTMLElement;
 };
-export declare const ClipboardWrapper: ({ mediaState, featureFlags, container, }: Props) => JSX.Element;
+export declare const ClipboardWrapper: ({ mediaState, featureFlags, container }: Props) => JSX.Element;
 export {};

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

@@ -2,6 +2,6 @@ import { jsx } from '@emotion/react';
 import type { IntlShape } from 'react-intl-next';
 import type { PixelEntryProps } from './types';
 export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, minWidth, maxWidth, onChange, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;
-export declare const FullWidthDisplay: ({ intl: { formatMessage }, }: {
+export declare const FullWidthDisplay: ({ intl: { formatMessage } }: {
     intl: IntlShape;
 }) => jsx.JSX.Element;

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

@@ -26,7 +26,7 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
     renderMediaNodeWithState: (mediaProvider?: Promise<MediaProvider>, contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ width: editorWidth }: {
         width?: WidthPluginState | undefined;
     }) => JSX.Element;
-    renderMediaNodeWithProviders: ({ mediaProvider, contextIdentifierProvider, }: Providers) => JSX.Element;
+    renderMediaNodeWithProviders: ({ mediaProvider, contextIdentifierProvider }: Providers) => JSX.Element;
     render(): JSX.Element;
 }
 export declare const ReactMediaNode: (portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, mediaOptions: MediaOptions | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => (node: PMNode, view: EditorView, getPos: getPosHandler) => MediaNodeView;

package/dist/types-ts4.5/pm-plugins/alt-text/index.d.ts

@@ -3,5 +3,5 @@ import type { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 export declare const pluginKey: PluginKey<any>;
 declare const createCommand: <A = import("./actions").MediaAltTextAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => import("./types").MediaAltTextState;
-export declare const createPlugin: ({ dispatch, providerFactory, }: PMPluginFactoryParams) => SafePlugin<import("./types").MediaAltTextState>;
+export declare const createPlugin: ({ dispatch, providerFactory }: PMPluginFactoryParams) => SafePlugin<import("./types").MediaAltTextState>;
 export { createCommand, getPluginState };

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

@@ -5,5 +5,5 @@ interface FilePreviewProps {
     mediaPluginState: MediaPluginState;
     intl: IntlShape;
 }
-export declare const FilePreviewItem: ({ mediaPluginState, intl, }: FilePreviewProps) => JSX.Element;
+export declare const FilePreviewItem: ({ mediaPluginState, intl }: FilePreviewProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/toolbar/layout-group.d.ts

@@ -6,5 +6,5 @@ type Props = {
     dispatchCommand: (command: Command) => void;
     hide: () => void;
 };
-export declare const LayoutGroup: ({ layoutButtons, dispatchCommand, hide, }: Props) => jsx.JSX.Element;
+export declare const LayoutGroup: ({ layoutButtons, dispatchCommand, hide }: Props) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/MediaPicker/BrowserWrapper.d.ts

@@ -7,5 +7,5 @@ type Props = {
     onBrowseFn: (browse: () => void) => void;
     featureFlags?: MediaFeatureFlags;
 };
-export declare const BrowserWrapper: ({ mediaState, isOpen, onBrowseFn, featureFlags, }: Props) => JSX.Element;
+export declare const BrowserWrapper: ({ mediaState, isOpen, onBrowseFn, featureFlags }: Props) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/MediaPicker/ClipboardWrapper.d.ts

@@ -6,5 +6,5 @@ type Props = {
     featureFlags?: MediaFeatureFlags;
     container?: HTMLElement;
 };
-export declare const ClipboardWrapper: ({ mediaState, featureFlags, container, }: Props) => JSX.Element;
+export declare const ClipboardWrapper: ({ mediaState, featureFlags, container }: Props) => JSX.Element;
 export {};

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

@@ -2,6 +2,6 @@ import { jsx } from '@emotion/react';
 import type { IntlShape } from 'react-intl-next';
 import type { PixelEntryProps } from './types';
 export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, minWidth, maxWidth, onChange, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;
-export declare const FullWidthDisplay: ({ intl: { formatMessage }, }: {
+export declare const FullWidthDisplay: ({ intl: { formatMessage } }: {
     intl: IntlShape;
 }) => jsx.JSX.Element;