@atlaskit/editor-plugin-media 10.0.11 → 10.1.1

package/dist/cjs/ui/MediaViewer/PortalWrapper.js

@@ -31,7 +31,8 @@ var RenderMediaViewer = exports.RenderMediaViewer = function RenderMediaViewer(_
     onClose = _ref.onClose,
     selectedNodeAttrs = _ref.selectedNodeAttrs,
     _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items;
+    items = _ref$items === void 0 ? [] : _ref$items,
+    extensions = _ref.extensions;
   var identifier = getIdentifier(selectedNodeAttrs);
   var collectionName = (0, _utils.isExternalMedia)(selectedNodeAttrs) ? '' : selectedNodeAttrs.collection;
   return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
@@ -42,6 +43,7 @@ var RenderMediaViewer = exports.RenderMediaViewer = function RenderMediaViewer(_
     ,
     mediaClientConfig: mediaClientConfig,
     selectedItem: identifier,
-    onClose: onClose
+    onClose: onClose,
+    extensions: extensions
   }), document.body);
 };

package/dist/cjs/ui/ResizableMediaSingle/index.js

@@ -434,6 +434,7 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
         // when cursor is located below a media with caption,
         // press “Up“ key will result cursor focus on an invalid position, (on the resize handler)
         // This workaround adds an empty div inside the resize handler to prevent the issue.
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         handleComponentFunc: function handleComponentFunc() {
           return (0, _react2.jsx)("div", {

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

@@ -305,11 +305,15 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         var dispatch = editorView.dispatch,
           state = editorView.state;
         var borderMark = (0, _currentMediaNode.currentMediaOrInlineNodeBorderMark)(state);
-        return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
+        return /*#__PURE__*/_react.default.createElement(_ImageBorder.default
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+        , {
           toggleBorder: function toggleBorder() {
             var _pluginInjectionApi$a;
             (0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
-          },
+          }
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+          ,
           setBorder: function setBorder(attrs) {
             var _pluginInjectionApi$a2;
             (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);

package/dist/cjs/ui/toolbar/layout-group.js

@@ -50,7 +50,9 @@ var LayoutGroup = exports.LayoutGroup = function LayoutGroup(_ref) {
           }) : undefined,
           title: item.title,
           selected: item.selected,
-          disabled: item.disabled,
+          disabled: item.disabled
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+          ,
           onClick: function onClick() {
             dispatchCommand(item.onClick);
             hide();

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

@@ -75,12 +75,16 @@ var getLinkingToolbar = exports.getLinkingToolbar = function getLinkingToolbar(t
               displayUrl: link,
               providerFactory: providerFactory,
               intl: intl,
-              editing: editing,
+              editing: editing
+              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+              ,
               onUnlink: function onUnlink(setFocus) {
                 var _pluginInjectionApi$a;
                 (0, _linking.unlink)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
                 setFocusOnFloatingToolbar(setFocus);
-              },
+              }
+              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+              ,
               onBack: function onBack(href, meta, setFocus) {
                 if (href.trim() && meta.inputMethod) {
                   var _pluginInjectionApi$a2;
@@ -88,7 +92,9 @@ var getLinkingToolbar = exports.getLinkingToolbar = function getLinkingToolbar(t
                 }
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);
                 setFocusOnFloatingToolbar(setFocus);
-              },
+              }
+              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+              ,
               onCancel: function onCancel() {
                 var _pluginInjectionApi$f2;
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view, true);
@@ -100,13 +106,17 @@ var getLinkingToolbar = exports.getLinkingToolbar = function getLinkingToolbar(t
                 var selector = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar)) ? FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS : FORCE_FOCUS_SELECTOR;
                 pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 || _pluginInjectionApi$f2.forceFocusSelector(selector)(tr);
                 dispatch(tr);
-              },
+              }
+              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+              ,
               onSubmit: function onSubmit(href, meta) {
                 var _pluginInjectionApi$a3;
                 (0, _linking.setUrlToMedia)(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(view.state, view.dispatch, view);
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);
                 setFocusOnFloatingToolbar(true);
-              },
+              }
+              // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+              ,
               onBlur: function onBlur() {
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);
               },

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

@@ -204,11 +204,15 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
         var dispatch = editorView.dispatch,
           state = editorView.state;
         var borderMark = (0, _currentMediaNode.currentMediaOrInlineNodeBorderMark)(state);
-        return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
+        return /*#__PURE__*/_react.default.createElement(_ImageBorder.default
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+        , {
           toggleBorder: function toggleBorder() {
             var _pluginInjectionApi$a2;
             (0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(state, dispatch);
-          },
+          }
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+          ,
           setBorder: function setBorder(attrs) {
             var _pluginInjectionApi$a3;
             (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(attrs)(state, dispatch);

package/dist/es2019/mediaPlugin.js

@@ -71,7 +71,8 @@ const mediaViewerStateSelector = states => {
 };
 const MediaViewerFunctionalComponent = ({
   api,
-  editorView
+  editorView,
+  mediaViewerExtensions
 }) => {
   // Only traverse document once when media viewer is visible, media viewer items will not update
   // when document changes are made while media viewer is open
@@ -100,7 +101,8 @@ const MediaViewerFunctionalComponent = ({
     mediaClientConfig: mediaClientConfig,
     onClose: handleOnClose,
     selectedNodeAttrs: mediaViewerSelectedMedia,
-    items: mediaItems
+    items: mediaItems,
+    extensions: mediaViewerExtensions
   });
 };
 export const mediaPlugin = ({
@@ -339,7 +341,8 @@ export const mediaPlugin = ({
       }
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MediaViewerFunctionalComponent, {
         api: api,
-        editorView: editorView
+        editorView: editorView,
+        mediaViewerExtensions: options === null || options === void 0 ? void 0 : options.mediaViewerExtensions
       }), /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
         editorDomElement: editorView.dom,
         appearance: appearance,

package/dist/es2019/nodeviews/mediaGroup.js

@@ -35,9 +35,13 @@ class MediaGroupNodeView extends ReactNodeView {
       pluginInjectionApi
     } = props;
     const getPos = this.getPos;
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return /*#__PURE__*/React.createElement(WithProviders
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    , {
       providers: ['contextIdentifierProvider'],
-      providerFactory: providerFactory,
+      providerFactory: providerFactory
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       renderNode: ({
         contextIdentifierProvider
       }) => {

package/dist/es2019/nodeviews/mediaGroupNext.js

@@ -204,6 +204,7 @@ export const MediaGroupNext = injectIntl( /*#__PURE__*/React.memo(props => {
     setViewMediaClientConfig(mediaClientConfig);
   }, [mediaClientConfig]);
   useEffect(() => {
+    // eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
     mediaNodesWithOffsets.forEach(({
       node,
       offset

package/dist/es2019/nodeviews/mediaInline.js

@@ -55,6 +55,7 @@ const updateMediaNodeAttributes = async (props, mediaNodeUpdater) => {
       addPendingTask(copyNode);
       await copyNode;
     } catch (e) {
+      // eslint-disable-line no-unused-vars
       return;
     }
   }
@@ -132,7 +133,9 @@ export const MediaInline = props => {
       isSelected: props.isSelected,
       alt: alt,
       width: width,
-      height: height,
+      height: height
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       border: {
         borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
         borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
@@ -230,11 +233,15 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
       view
     } = this;
     const getPos = this.getPos;
-    return jsx(WithProviders, {
+    return jsx(WithProviders
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    , {
       providers: ['contextIdentifierProvider'],
-      providerFactory: providerFactory,
+      providerFactory: providerFactory
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       renderNode: ({
-        mediaProvider,
+        mediaProvider: _mediaProvider,
         contextIdentifierProvider
       }) => {
         return jsx(MediaInlineSharedState, {

package/dist/es2019/nodeviews/mediaNodeView/index.js

@@ -257,7 +257,9 @@ class MediaNodeView extends SelectionBasedNodeView {
     const {
       providerFactory
     } = this.reactComponentProps;
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return /*#__PURE__*/React.createElement(WithProviders
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    , {
       providers: ['contextIdentifierProvider'],
       providerFactory: providerFactory,
       renderNode: this.renderMediaNodeWithProviders

package/dist/es2019/nodeviews/mediaNodeView/media.js

@@ -305,7 +305,9 @@ export class MediaNode extends Component {
       onContextMenu: this.selectMediaSingle,
       borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
       selected: selected
-    }, /*#__PURE__*/React.createElement(AnalyticsContext, {
+    }, /*#__PURE__*/React.createElement(AnalyticsContext
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    , {
       data: {
         [MEDIA_CONTEXT]: {
           border: !!borderMark

package/dist/es2019/nodeviews/mediaSingle.js

@@ -211,9 +211,13 @@ class MediaSingleNodeView extends ReactNodeView {
 
     // getPos is a boolean for marks, since this is a node we know it must be a function
     const getPos = this.getPos;
-    return jsx(WithProviders, {
+    return jsx(WithProviders
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    , {
       providers: ['contextIdentifierProvider'],
-      providerFactory: providerFactory,
+      providerFactory: providerFactory
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       renderNode: ({
         contextIdentifierProvider
       }) => {

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

@@ -77,14 +77,18 @@ export const PixelEntry = ({
     mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
     mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
     minWidth: minWidth,
-    maxWidth: maxWidth,
+    maxWidth: maxWidth
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onChange: valid => {
       if (valid) {
         hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
       } else {
         hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
       }
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onSubmit: ({
       width,
       validation
@@ -93,7 +97,9 @@ export const PixelEntry = ({
       if (tr) {
         dispatch(tr);
       }
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onMigrate: () => {
       let tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
         ...selectedMediaSingleNode.node.attrs,
@@ -107,7 +113,9 @@ export const PixelEntry = ({
         tr = newTr !== undefined ? newTr : tr;
       }
       dispatch(tr);
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onCloseAndSave: ({
       width,
       validation

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

@@ -12,8 +12,7 @@ import { IconButton } from '@atlaskit/button/new';
 import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
 import Form, { Field } from '@atlaskit/form';
 import CrossIcon from '@atlaskit/icon/core/cross';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives, @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Inline, Box, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import Tooltip from '@atlaskit/tooltip';
@@ -193,7 +192,7 @@ export const PixelEntryComponent = ({
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
         , _extends({}, fieldProps, {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
           css: [pixelSizingWidthInput, pixelSizingInput],
           appearance: "none",
           isCompact: true,
@@ -219,7 +218,7 @@ export const PixelEntryComponent = ({
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
         , _extends({}, fieldProps, {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
           css: [pixelSizingHeightInput, pixelSizingInput],
           appearance: "none",
           isCompact: true,
@@ -294,71 +293,78 @@ export const PixelEntryComponentNext = ({
       }, shouldSetFocus);
     }
   }, [computedWidth, computedHeight, handleCloseAndSave]);
-  return jsx(Box, {
-    xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
-  }, jsx(Inline, {
-    alignBlock: "center",
-    spread: "space-between"
-  }, jsx(Box, {
-    paddingInlineStart: "space.100"
-  }, jsx(Text, {
-    color: "color.text.subtlest"
-  }, formatMessage(messages.inputWidthLabel))), jsx("div", {
-    css: fieldStyles
-  }, jsx(Tooltip, {
-    hideTooltipOnMouseDown: true,
-    hideTooltipOnClick: true,
-    position: "top",
-    content: formatMessage(messages.inputWidthTooltip, {
-      maxWidth
-    })
-  }, jsx(Textfield, {
-    name: "inputWidth",
-    value: computedWidth,
-    ref: widthInputRef,
-    height: "var(--ds-space-250, 20px)",
-    appearance: "none",
-    pattern: "\\d*",
-    "aria-label": formatMessage(messages.inputWidthAriaLabel, {
-      maxWidth
-    }),
-    onChange: handleFieldChange('inputWidth'),
-    onKeyDown: handleKeyDown
-  }))), jsx(Box, {
-    paddingInlineStart: "space.100"
-  }, jsx(Text, {
-    color: "color.text.subtlest"
-  }, formatMessage(messages.inputHeightTooltip))), jsx("div", {
-    css: fieldStyles
-  }, jsx(Tooltip, {
-    hideTooltipOnMouseDown: true,
-    hideTooltipOnClick: true,
-    content: formatMessage(messages.inputHeightTooltip),
-    position: "top"
-  }, jsx(Textfield, {
-    name: "inputHeight",
-    value: computedHeight,
-    height: "var(--ds-space-250, 20px)",
-    appearance: "none",
-    pattern: "\\d*",
-    "aria-label": formatMessage(messages.inputHeightAriaLabel),
-    onChange: handleFieldChange('inputHeight'),
-    onKeyDown: handleKeyDown
-  }))), !isViewMode && jsx(Fragment, null, jsx(Box, {
-    xcss: dividerStyles
-  }), jsx(IconButton, {
-    icon: () => jsx(CrossIcon, {
-      label: "",
-      color: "var(--ds-icon-subtlest, #6B6E76)"
-    }),
-    label: formatMessage(messages.closePixelEntry),
-    appearance: "subtle",
-    onClick: () => {
-      handleCloseAndSave({
-        inputWidth: computedWidth,
-        inputHeight: computedHeight
-      });
-    },
-    onKeyDown: handleCloseButtonKeyDown
-  }))));
+  return (
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    jsx(Box, {
+      xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
+    }, jsx(Inline, {
+      alignBlock: "center",
+      spread: "space-between"
+    }, jsx(Box, {
+      paddingInlineStart: "space.100"
+    }, jsx(Text, {
+      color: "color.text.subtlest"
+    }, formatMessage(messages.inputWidthLabel))), jsx("div", {
+      css: fieldStyles
+    }, jsx(Tooltip, {
+      hideTooltipOnMouseDown: true,
+      hideTooltipOnClick: true,
+      position: "top",
+      content: formatMessage(messages.inputWidthTooltip, {
+        maxWidth
+      })
+    }, jsx(Textfield, {
+      name: "inputWidth",
+      value: computedWidth,
+      ref: widthInputRef,
+      height: "var(--ds-space-250, 20px)",
+      appearance: "none",
+      pattern: "\\d*",
+      "aria-label": formatMessage(messages.inputWidthAriaLabel, {
+        maxWidth
+      }),
+      onChange: handleFieldChange('inputWidth'),
+      onKeyDown: handleKeyDown
+    }))), jsx(Box, {
+      paddingInlineStart: "space.100"
+    }, jsx(Text, {
+      color: "color.text.subtlest"
+    }, formatMessage(messages.inputHeightTooltip))), jsx("div", {
+      css: fieldStyles
+    }, jsx(Tooltip, {
+      hideTooltipOnMouseDown: true,
+      hideTooltipOnClick: true,
+      content: formatMessage(messages.inputHeightTooltip),
+      position: "top"
+    }, jsx(Textfield, {
+      name: "inputHeight",
+      value: computedHeight,
+      height: "var(--ds-space-250, 20px)",
+      appearance: "none",
+      pattern: "\\d*",
+      "aria-label": formatMessage(messages.inputHeightAriaLabel),
+      onChange: handleFieldChange('inputHeight'),
+      onKeyDown: handleKeyDown
+    }))), !isViewMode && jsx(Fragment, null, jsx(Box, {
+      xcss: dividerStyles
+    }), jsx(IconButton
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    , {
+      icon: () => jsx(CrossIcon, {
+        label: "",
+        color: "var(--ds-icon-subtlest, #6B6E76)"
+      }),
+      label: formatMessage(messages.closePixelEntry),
+      appearance: "subtle"
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
+      onClick: () => {
+        handleCloseAndSave({
+          inputWidth: computedWidth,
+          inputHeight: computedHeight
+        });
+      },
+      onKeyDown: handleCloseButtonKeyDown
+    }))))
+  );
 };

package/dist/es2019/ui/CommentBadge/index.js

@@ -61,8 +61,12 @@ export const CommentBadgeWrapper = ({
   return /*#__PURE__*/React.createElement(CommentBadgeNext, {
     onClick: onClick,
     mediaSingleElement: mediaSingleElement,
-    status: entered ? 'entered' : status,
-    onMouseEnter: () => setEntered(true),
+    status: entered ? 'entered' : status
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    onMouseEnter: () => setEntered(true)
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onMouseLeave: () => setEntered(false)
   });
 };

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

@@ -163,20 +163,26 @@ const ImageBorder = ({
       css: contextualSubMenu(0),
       ref: handleSubMenuRef
     }, jsx(ArrowKeyNavigationProvider, {
-      type: ArrowKeyNavigationType.MENU,
+      type: ArrowKeyNavigationType.MENU
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       handleClose: e => {
         e.preventDefault();
         e.stopPropagation();
         handleColorSubmenuEsc();
       },
       disableCloseOnArrowClick: true
-    }, jsx(ColorPalette, {
+    }, jsx(ColorPalette
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    , {
       onClick: color => {
         setBorder({
           color
         });
         setIsOpen(!isOpen);
-      },
+      }
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       onKeyDown: (color, _, event) => {
         if (event.key === 'Enter' || event.key === ' ') {
           var _openDropdownButtonRe;
@@ -189,7 +195,9 @@ const ImageBorder = ({
           (_openDropdownButtonRe = openDropdownButtonRef.current) === null || _openDropdownButtonRe === void 0 ? void 0 : _openDropdownButtonRe.focus();
         }
       },
-      selectedColor: color !== null && color !== void 0 ? color : null,
+      selectedColor: color !== null && color !== void 0 ? color : null
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       paletteOptions: {
         palette: borderColorPalette,
         paletteColorTooltipMessages: borderPaletteTooltipMessages,
@@ -233,7 +241,9 @@ const ImageBorder = ({
       className: DropdownMenuSharedCssClassName.SUBMENU,
       ref: sizeSubmenuRef
     }, isSizeSubmenuOpen && jsx(ArrowKeyNavigationProvider, {
-      type: ArrowKeyNavigationType.MENU,
+      type: ArrowKeyNavigationType.MENU
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       handleClose: e => {
         e.preventDefault();
         handleSizeSubmenuEsc();
@@ -347,11 +357,15 @@ const ImageBorder = ({
       spacing: "spacious",
       label: "",
       size: "small"
-    }),
+    })
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onClick: () => {
       setIsOpen(!isOpen);
       setIsOpenedByKeyboard(false);
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onKeyDown: e => handleTriggerToolbarByKeyboard(e, () => setIsOpen(!isOpen))
   }))), jsx(Popup, {
     target: popupTarget.current ? popupTarget.current : undefined,
@@ -370,6 +384,7 @@ const ImageBorder = ({
   //This needs be removed when the a11y is completely handled
   //Disabling key navigation now as it works only partially
   //Same with packages/editor/editor-plugin-table/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
   , {
     arrowKeyNavigationProviderOptions: {
       type: ArrowKeyNavigationType.MENU,
@@ -381,18 +396,26 @@ const ImageBorder = ({
     } : () => {
       var _openDropdownButtonRe3;
       (_openDropdownButtonRe3 = openDropdownButtonRef.current) === null || _openDropdownButtonRe3 === void 0 ? void 0 : _openDropdownButtonRe3.focus();
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     items: [{
       items
     }],
-    isOpen: isOpen,
-    shouldFocusFirstItem: () => isOpenByKeyboard,
+    isOpen: isOpen
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    shouldFocusFirstItem: () => isOpenByKeyboard
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onOpenChange: () => {
       setIsOpen(false);
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
       setIsOpenedByKeyboard(false);
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onItemActivated: ({
       item
     }) => {
@@ -422,7 +445,9 @@ const ImageBorder = ({
           setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
         }
       }
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onMouseEnter: ({
       item
     }) => {
@@ -436,7 +461,9 @@ const ImageBorder = ({
           setIsOpenedByKeyboard(false);
         }
       }
-    },
+    }
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onMouseLeave: ({
       item
     }) => {