@atlaskit/editor-plugin-extension 4.1.2 → 5.0.1

package/dist/es2019/ui/useConfigPanelPluginHook.js

@@ -0,0 +1,201 @@
+import React, { useEffect } from 'react';
+import { configPanelMessages, getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { Box } from '@atlaskit/primitives';
+import { clearEditingContext, forceAutoSave } from '../editor-commands/commands';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import { getSelectedExtension } from '../pm-plugins/utils';
+import ConfigPanelLoader from './ConfigPanel/ConfigPanelLoader';
+import { CONFIG_PANEL_ID, CONFIG_PANEL_WIDTH } from './ConfigPanel/constants';
+import HeaderAfterIconElement from './ConfigPanel/Header/HeaderAfterIconElement';
+import HeaderIcon from './ConfigPanel/Header/HeaderIcon';
+import { onChangeAction } from './context-panel';
+import { SaveIndicator } from './SaveIndicator/SaveIndicator';
+export function useConfigPanelPluginHook({
+  editorView,
+  api
+}) {
+  const editorState = editorView.state;
+  const {
+    extensionState
+  } = useSharedPluginState(api, ['extension']);
+  useEffect(() => {
+    const nodeWithPos = getSelectedExtension(editorState, true);
+    // Adding checks to bail out early
+    if (!nodeWithPos || !extensionState) {
+      hideConfigPanel(api);
+      return;
+    }
+    if (extensionState) {
+      const {
+        showContextPanel,
+        extensionProvider,
+        processParametersAfter
+      } = extensionState;
+      if (showContextPanel && extensionProvider && processParametersAfter) {
+        showConfigPanel({
+          api,
+          editorView,
+          extensionProvider,
+          nodeWithPos
+        });
+      } else {
+        hideConfigPanel(api);
+      }
+    }
+  }, [api, editorState, editorView, extensionState]);
+}
+export function hideConfigPanel(api) {
+  var _api$contextPanel, _api$contextPanel$act;
+  const closePanelById = api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : (_api$contextPanel$act = _api$contextPanel.actions) === null || _api$contextPanel$act === void 0 ? void 0 : _api$contextPanel$act.closePanelById;
+  if (closePanelById) {
+    closePanelById(CONFIG_PANEL_ID);
+  }
+}
+export function showConfigPanel({
+  api,
+  editorView,
+  extensionProvider,
+  nodeWithPos
+}) {
+  var _api$contextPanel2, _api$contextPanel2$ac;
+  const showContextPanel = api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : (_api$contextPanel2$ac = _api$contextPanel2.actions) === null || _api$contextPanel2$ac === void 0 ? void 0 : _api$contextPanel2$ac.showPanel;
+  if (showContextPanel) {
+    const nodeAttrs = nodeWithPos === null || nodeWithPos === void 0 ? void 0 : nodeWithPos.node.attrs;
+    const extensionType = nodeAttrs === null || nodeAttrs === void 0 ? void 0 : nodeAttrs.extensionType;
+    const extensionKey = nodeAttrs === null || nodeAttrs === void 0 ? void 0 : nodeAttrs.extensionKey;
+
+    /**
+     * Loading extension manifest fails when using
+     * 	extensionKey directly from nodeAttrs.
+     * Always get extensionKey from getExtensionKeyAndNodeKey to load
+     * 	extension manifest successfully.
+     */
+    const [extKey, _] = getExtensionKeyAndNodeKey(extensionKey, extensionType);
+    const HeadeIconWrapper = () => {
+      return /*#__PURE__*/React.createElement(HeaderIcon, {
+        extensionProvider: extensionProvider,
+        extensionKey: extKey,
+        extensionType: extensionType
+      });
+    };
+    const HeaderAfterIconElementWrapper = () => {
+      return /*#__PURE__*/React.createElement(HeaderAfterIconElement, {
+        extensionProvider: extensionProvider,
+        extensionKey: extKey,
+        extensionType: extensionType
+      });
+    };
+    const BodyComponent = getContextPanelBodyComponent({
+      api,
+      editorView,
+      extensionProvider,
+      nodeWithPos
+    });
+    showContextPanel({
+      id: CONFIG_PANEL_ID,
+      headerComponentElements: {
+        HeaderIcon: HeadeIconWrapper,
+        headerLabel: configPanelMessages.objectSidebarPanelHeaderLabel,
+        HeaderAfterIconElement: HeaderAfterIconElementWrapper
+      },
+      BodyComponent,
+      closeOptions: {
+        canClosePanel: () => {
+          const extensionState = getPluginState(editorView.state);
+          /**
+           * 	If context panel is open, then first update extension plugin state.
+           * 	Updating extension plugin state will trigger useEffect in useConfigPanelPluginHook,
+           * 		which will call hideConfigPanel.
+           */
+          if (extensionState !== null && extensionState !== void 0 && extensionState.showContextPanel) {
+            startClosingConfigPanel({
+              api,
+              editorView
+            });
+            return false;
+          }
+
+          // Return true if extension plugin state has been updated and hideConfigPanel has been called.
+          return true;
+        }
+      }
+    }, 'push', CONFIG_PANEL_WIDTH);
+  }
+}
+export async function startClosingConfigPanel({
+  api,
+  editorView
+}) {
+  var _api$contextPanel3;
+  const applyChange = api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange;
+  // Even if the save failed, we should proceed with closing the panel
+  clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
+  try {
+    await new Promise((resolve, reject) => {
+      forceAutoSave(applyChange)(resolve, reject)(editorView.state, editorView.dispatch);
+    });
+  } catch (e) {
+    // Even if the save failed, we should proceed with closing the panel
+    // eslint-disable-next-line no-console
+    console.error(`Autosave failed with error`, e);
+  }
+}
+export const getContextPanelBodyComponent = ({
+  api,
+  editorView,
+  extensionProvider,
+  nodeWithPos
+}) => {
+  var _api$featureFlags;
+  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  const editorState = editorView.state;
+  const extensionState = getPluginState(editorState);
+  const {
+    autoSaveResolve,
+    autoSaveReject,
+    processParametersBefore
+  } = extensionState;
+  const {
+    extensionType,
+    extensionKey,
+    parameters
+  } = nodeWithPos.node.attrs;
+  const [extKey, nodeKey] = getExtensionKeyAndNodeKey(extensionKey, extensionType);
+  const configParams = processParametersBefore ? processParametersBefore(parameters || {}) : parameters;
+  return () => /*#__PURE__*/React.createElement(Box, {
+    padding: "space.200"
+  }, /*#__PURE__*/React.createElement(SaveIndicator, {
+    duration: 5000,
+    visible: true
+  }, ({
+    onSaveStarted,
+    onSaveEnded
+  }) => {
+    return /*#__PURE__*/React.createElement(ConfigPanelLoader, {
+      api: api,
+      showHeader: true,
+      closeOnEsc: true,
+      extensionType: extensionType,
+      extensionKey: extKey,
+      nodeKey: nodeKey,
+      extensionParameters: parameters,
+      parameters: configParams,
+      extensionProvider: extensionProvider,
+      autoSaveTrigger: autoSaveResolve,
+      autoSaveReject: autoSaveReject,
+      onChange: async updatedParameters => {
+        await onChangeAction(editorView, updatedParameters, parameters, nodeWithPos, onSaveStarted);
+        onSaveEnded();
+        if (autoSaveResolve) {
+          autoSaveResolve();
+        }
+      },
+      onCancel: () => startClosingConfigPanel({
+        api,
+        editorView
+      }),
+      featureFlags: featureFlags
+    });
+  }));
+};

package/dist/esm/extensionPlugin.js

@@ -1,6 +1,7 @@
 import { extension, extensionFrame, inlineExtension, multiBodiedExtension } from '@atlaskit/adf-schema';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createEditSelectedExtensionAction, insertOrReplaceBodiedExtension as _insertOrReplaceBodiedExtension, insertOrReplaceExtension as _insertOrReplaceExtension } from './editor-actions/actions';
 import { forceAutoSave } from './editor-commands/commands';
 import { createExtensionAPI } from './pm-plugins/extension-api';
@@ -12,7 +13,9 @@ import { pluginKey } from './pm-plugins/plugin-key';
 import { bodiedExtensionSpecWithFixedToDOM } from './pm-plugins/toDOM-fixes/bodiedExtension';
 import { getToolbarConfig } from './pm-plugins/toolbar';
 import { createPlugin as createUniqueIdPlugin } from './pm-plugins/unique-id';
+// Remove below line when cleaning up platform_editor_ai_object_sidebar_injection feature flag
 import { getContextPanel } from './ui/context-panel';
+import { useConfigPanelPluginHook } from './ui/useConfigPanelPluginHook';
 export var extensionPlugin = function extensionPlugin(_ref) {
   var _api$featureFlags, _api$analytics2, _api$analytics3, _api$contextPanel3, _api$decorations, _api$contextPanel4, _api$analytics4;
   var _ref$config = _ref.config,
@@ -51,7 +54,9 @@ export var extensionPlugin = function extensionPlugin(_ref) {
       }
       var pluginState = pluginKey.getState(state);
       return {
-        showContextPanel: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showContextPanel
+        showContextPanel: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showContextPanel,
+        extensionProvider: pluginState === null || pluginState === void 0 ? void 0 : pluginState.extensionProvider,
+        processParametersAfter: pluginState === null || pluginState === void 0 ? void 0 : pluginState.processParametersAfter
       };
     },
     pmPlugins: function pmPlugins() {
@@ -167,12 +172,20 @@ export var extensionPlugin = function extensionPlugin(_ref) {
         breakoutEnabled: options.breakoutEnabled,
         hoverDecoration: _api === null || _api === void 0 || (_api$decorations = _api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration,
         applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange,
-        editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics4 = _api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions
+        editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics4 = _api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
+        extensionApi: editorExperiment('platform_editor_controls', 'variant1') ? _api : undefined
       }),
-      contextPanel: getContextPanel(function () {
+      contextPanel: !fg('platform_editor_ai_object_sidebar_injection') ? getContextPanel(function () {
         var _editorViewRef$curren;
         return (_editorViewRef$curren = editorViewRef.current) !== null && _editorViewRef$curren !== void 0 ? _editorViewRef$curren : undefined;
-      })(_api, featureFlags)
-    }
+      })(_api, featureFlags) : undefined
+    },
+    usePluginHook: fg('platform_editor_ai_object_sidebar_injection') ? function (_ref6) {
+      var editorView = _ref6.editorView;
+      useConfigPanelPluginHook({
+        editorView: editorView,
+        api: _api
+      });
+    } : undefined
   };
 };

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

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React from 'react';
 import { messages } from '@atlaskit/editor-common/extensions';
 import commonMessages from '@atlaskit/editor-common/messages';
 import { BODIED_EXT_MBE_MARGIN_TOP } from '@atlaskit/editor-common/styles';
@@ -6,6 +7,7 @@ import { getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource }
 import { findParentNodeOfType, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import ContentWidthNarrowIcon from '@atlaskit/icon/core/content-width-narrow';
 import ContentWidthWideIcon from '@atlaskit/icon/core/content-width-wide';
+import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import EditIcon from '@atlaskit/icon/core/edit';
 import ExpandHorizontalIcon from '@atlaskit/icon/core/expand-horizontal';
@@ -132,7 +134,7 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
       editorAnalyticsAPI = extensionApi === null || extensionApi === void 0 || (_extensionApi$analyti = extensionApi.analytics) === null || _extensionApi$analyti === void 0 ? void 0 : _extensionApi$analyti.actions;
     }
     if (extensionState && !extensionState.showContextPanel && extensionState.element) {
-      var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4, _hoverDecoration5, _hoverDecoration6, _hoverDecoration7, _hoverDecoration8;
+      var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4;
       var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
       var editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
       var breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
@@ -208,13 +210,13 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
             left: nextPos.left
           };
         },
-        items: [].concat(_toConsumableArray(editButtonArray), _toConsumableArray(breakoutButtonArray), [{
+        items: [].concat(_toConsumableArray(editButtonArray), _toConsumableArray(breakoutButtonArray), _toConsumableArray(editorExperiment('platform_editor_controls', 'control') ? [{
           type: 'separator',
           hidden: editButtonArray.length === 0 && breakoutButtonArray.length === 0
         }, {
           type: 'extensions-placeholder',
           separator: 'end'
-        }], _toConsumableArray(editorExperiment('platform_editor_controls', 'control') ? [{
+        }, {
           type: 'copy-button',
           items: [{
             state: state,
@@ -239,28 +241,27 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
           tabIndex: null,
           confirmDialog: confirmDialog
         }] : [{
-          id: 'editor.extension.delete',
-          type: 'button',
-          icon: DeleteIcon,
-          iconFallback: RemoveIcon,
-          appearance: 'danger',
-          onClick: removeExtension(editorAnalyticsAPI),
-          onMouseEnter: (_hoverDecoration5 = hoverDecoration) === null || _hoverDecoration5 === void 0 ? void 0 : _hoverDecoration5(nodeType, true),
-          onMouseLeave: (_hoverDecoration6 = hoverDecoration) === null || _hoverDecoration6 === void 0 ? void 0 : _hoverDecoration6(nodeType, false),
-          onFocus: (_hoverDecoration7 = hoverDecoration) === null || _hoverDecoration7 === void 0 ? void 0 : _hoverDecoration7(nodeType, true),
-          onBlur: (_hoverDecoration8 = hoverDecoration) === null || _hoverDecoration8 === void 0 ? void 0 : _hoverDecoration8(nodeType, false),
-          focusEditoronEnter: true,
-          title: formatMessage(commonMessages.remove),
-          tabIndex: null,
-          confirmDialog: confirmDialog
-        }, {
-          type: 'separator'
+          type: 'separator',
+          fullHeight: true
         }, {
-          type: 'copy-button',
-          items: [{
-            state: state,
-            formatMessage: intl.formatMessage,
-            nodeType: nodeType
+          type: 'overflow-dropdown',
+          options: [{
+            title: 'Copy',
+            onClick: function onClick() {
+              var _extensionApi$core, _extensionApi$floatin;
+              extensionApi === null || extensionApi === void 0 || (_extensionApi$core = extensionApi.core) === null || _extensionApi$core === void 0 || _extensionApi$core.actions.execute( // @ts-ignore
+              extensionApi === null || extensionApi === void 0 || (_extensionApi$floatin = extensionApi.floatingToolbar) === null || _extensionApi$floatin === void 0 ? void 0 : _extensionApi$floatin.commands.copyNode(nodeType));
+              return true;
+            },
+            icon: /*#__PURE__*/React.createElement(CopyIcon, {
+              label: "Copy"
+            })
+          }, {
+            title: 'Delete',
+            onClick: removeExtension(editorAnalyticsAPI),
+            icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+              label: "Delete"
+            })
           }]
         }])),
         scrollable: true

package/dist/esm/ui/ConfigPanel/ConfigPanel.js

@@ -23,7 +23,9 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaski
 import { isTabGroup, configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import Form, { FormFooter } from '@atlaskit/form';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ALLOWED_LOGGED_MACRO_PARAMS } from './constants';
+import { DescriptionSummary } from './DescriptionSummary';
 import ErrorMessage from './ErrorMessage';
 import FormContent from './FormContent';
 import { FormErrorBoundary } from './FormErrorBoundary';
@@ -260,6 +262,10 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
     }());
     // memoized to prevent rerender on new parameters
     _defineProperty(_this, "renderHeader", memoizeOne(function (extensionManifest) {
+      // If below FG is true then Header will be rendered separately
+      if (fg('platform_editor_ai_object_sidebar_injection')) {
+        return null;
+      }
       var _this$props2 = _this.props,
         onCancel = _this$props2.onCancel,
         showHeader = _this$props2.showHeader;
@@ -426,7 +432,9 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
               noValidate: true,
               onKeyDown: handleKeyDown,
               "data-testid": "extension-config-panel"
-            }), _this2.renderHeader(extensionManifest), /*#__PURE__*/React.createElement(ConfigFormIntlWithBoundary, {
+            }), _this2.renderHeader(extensionManifest), fg('platform_editor_ai_object_sidebar_injection') && /*#__PURE__*/React.createElement(DescriptionSummary, {
+              extensionManifest: extensionManifest
+            }), /*#__PURE__*/React.createElement(ConfigFormIntlWithBoundary, {
               api: api,
               canSave: false,
               errorMessage: errorMessage,

package/dist/esm/ui/ConfigPanel/DescriptionSummary.js

@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react';
+import { useIntl } from 'react-intl-next';
+import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
+import { Box, Text, xcss } from '@atlaskit/primitives';
+import { HelpLink } from './HelpLink';
+var descriptionStyles = xcss({
+  marginBottom: 'space.300'
+});
+var helpLinkStyles = xcss({
+  paddingTop: 'space.150'
+});
+export function DescriptionSummary(_ref) {
+  var extensionManifest = _ref.extensionManifest;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var description = extensionManifest.description,
+    documentationUrl = extensionManifest.documentationUrl;
+  // Use a temporary allowlist of top 3 macros to test out a new "Documentation" CTA ("Need help?")
+  // This will be removed when Top 5 Modernized Macros updates are rolled out
+  var modernizedMacrosList = ['children', 'recently-updated', 'excerpt'];
+  var enableHelpCTA = modernizedMacrosList.includes(extensionManifest.key);
+  return /*#__PURE__*/React.createElement(Fragment, null, (description || documentationUrl) && /*#__PURE__*/React.createElement(Box, {
+    xcss: descriptionStyles
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    testId: "config-panel-header-description"
+  }, description && /*#__PURE__*/React.createElement(Fragment, null,
+  // Ignored via go/ees005
+  // eslint-disable-next-line require-unicode-regexp
+  description.replace(/([^.])$/, '$1.'), ' '), documentationUrl && (enableHelpCTA ? /*#__PURE__*/React.createElement(Box, {
+    xcss: helpLinkStyles
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, /*#__PURE__*/React.createElement(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: formatMessage(messages.help)
+  }))) : /*#__PURE__*/React.createElement(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: formatMessage(messages.documentation)
+  })))));
+}

package/dist/esm/ui/ConfigPanel/Header/HeaderAfterIconElement.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+import { withExtensionManifest } from '../withExtensionManifest';
+var itemBodyStyles = xcss({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'space-between',
+  margin: 'space.200',
+  flexGrow: 3
+});
+var itemTextStyles = xcss({
+  maxWidth: '100%',
+  whiteSpace: 'initial'
+});
+var summaryStyles = xcss({
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  color: 'color.text.subtlest',
+  marginTop: 'space.050',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+function HeaderAfterIconElement(_ref) {
+  var extensionManifest = _ref.extensionManifest;
+  var title = extensionManifest.title;
+  var summary = extensionManifest.summary;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: itemBodyStyles
+  }, summary ? /*#__PURE__*/React.createElement(Box, {
+    xcss: itemTextStyles
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "context-panel-title",
+    "data-testid": "context-panel-title"
+  }, title), /*#__PURE__*/React.createElement(Box, {
+    xcss: summaryStyles
+  }, summary)) : /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    alignItems: "center",
+    testId: "context-panel-title"
+  }, title));
+}
+export default withExtensionManifest(HeaderAfterIconElement);

package/dist/esm/ui/ConfigPanel/Header/HeaderIcon.js

@@ -0,0 +1,40 @@
+import React, { Suspense, lazy, useMemo } from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+import { withExtensionManifest } from '../withExtensionManifest';
+var iconWidth = '40px';
+var itemIconStyles = xcss({
+  width: iconWidth,
+  height: iconWidth,
+  overflow: 'hidden',
+  border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+function HeaderIcon(_ref) {
+  var extensionManifest = _ref.extensionManifest;
+  var icon = extensionManifest.icons['48'];
+  var title = extensionManifest.title;
+  var ResolvedIcon = useMemo(function () {
+    return /*#__PURE__*/lazy(function () {
+      return icon().then(function (Cmp) {
+        if ('default' in Cmp) {
+          return Cmp;
+        }
+        return {
+          default: Cmp
+        };
+      });
+    });
+  }, [icon]);
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: itemIconStyles
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(ResolvedIcon, {
+    label: title
+  })));
+}
+export default withExtensionManifest(HeaderIcon);

package/dist/esm/ui/ConfigPanel/Header.js

@@ -14,6 +14,7 @@ import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { HelpLink } from './HelpLink';
 var iconWidth = 40;
 var buttonWidth = 40;
 var margin = 16;
@@ -152,14 +153,4 @@ var Header = function Header(_ref) {
     label: intl.formatMessage(messages.documentation)
   })))));
 };
-var HelpLink = function HelpLink(_ref2) {
-  var documentationUrl = _ref2.documentationUrl,
-    label = _ref2.label;
-  return jsx("a", {
-    target: "_blank",
-    rel: "noopener noreferrer",
-    href: documentationUrl,
-    "data-testid": "config-panel-header-documentation-link"
-  }, label);
-};
 export default injectIntl(Header);

package/dist/esm/ui/ConfigPanel/HelpLink.js

@@ -0,0 +1,15 @@
+import React from 'react';
+export var HelpLink = function HelpLink(_ref) {
+  var documentationUrl = _ref.documentationUrl,
+    label = _ref.label;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/no-html-anchor
+    React.createElement("a", {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: documentationUrl,
+      "data-testid": "config-panel-header-documentation-link"
+    }, label)
+  );
+};

package/dist/esm/ui/ConfigPanel/constants.js

@@ -4,4 +4,6 @@ export var ALLOWED_LOGGED_MACRO_PARAMS = {
   'recently-updated': ['width', 'types', 'max', 'theme', 'showProfilePic', 'hideHeading'],
   excerpt: ['hidden']
 };
-export var ALLOWED_PARAM_TYPES = ['enum', 'number', 'boolean'];
+export var ALLOWED_PARAM_TYPES = ['enum', 'number', 'boolean'];
+export var CONFIG_PANEL_WIDTH = 320;
+export var CONFIG_PANEL_ID = 'extensions-panel';

package/dist/esm/ui/ConfigPanel/withExtensionManifest.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["extensionKey", "extensionProvider", "extensionType"];
+import React from 'react';
+import { useStateFromPromise } from './use-state-from-promise';
+export function withExtensionManifest(WrappedComponent) {
+  return function WithExtensionManifest(props) {
+    var extensionKey = props.extensionKey,
+      extensionProvider = props.extensionProvider,
+      extensionType = props.extensionType,
+      restProps = _objectWithoutProperties(props, _excluded);
+    var _useStateFromPromise = useStateFromPromise(function () {
+        return extensionProvider.getExtension(extensionType, extensionKey);
+      }, [extensionProvider, extensionType, extensionKey]),
+      _useStateFromPromise2 = _slicedToArray(_useStateFromPromise, 1),
+      extensionManifest = _useStateFromPromise2[0];
+    return extensionManifest ?
+    /*#__PURE__*/
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/jsx-props-no-spreading
+    React.createElement(WrappedComponent, _extends({
+      extensionManifest: extensionManifest
+    }, restProps)) : null;
+  };
+}