@atlaskit/editor-core 151.1.2 → 152.0.0

package/dist/es2019/plugins/tasks-and-decisions/pm-plugins/main.js

@@ -1,6 +1,6 @@
 import { NodeSelection, Plugin } from 'prosemirror-state';
 import { uuid } from '@atlaskit/adf-schema';
-import { nodesBetweenChanged } from '../../../utils';
+import { nodesBetweenChanged, SetAttrsStep } from '../../../utils';
 import { createSelectionClickHandler } from '../../selection/utils';
 import { decisionItemNodeView } from '../nodeviews/decisionItem';
 import { taskItemNodeViewFactory } from '../nodeviews/taskItem';
@@ -145,10 +145,10 @@ export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory
             } = node.attrs;
 
             if (localId === undefined || localId === null || localId === '') {
-              tr.setNodeMarkup(pos, undefined, {
+              tr.step(new SetAttrsStep(pos, {
                 localId: uuid.generate(),
                 ...rest
-              });
+              }));
               modified = true;
             }
           }

package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -206,7 +206,8 @@ class ToolbarTextColor extends React.Component {
     }, /*#__PURE__*/React.createElement(ColorPalette, {
       palette: palette,
       onClick: color => this.changeTextColor(color, pluginState.disabled),
-      selectedColor: pluginState.color
+      selectedColor: pluginState.color,
+      isShowingMoreColors: isShowingMoreColors
     })), showMoreColorsToggle && /*#__PURE__*/React.createElement(ShowMoreWrapper, null, /*#__PURE__*/React.createElement(Button, {
       appearance: "subtle",
       onClick: this.handleShowMoreToggle,

package/dist/es2019/plugins/text-formatting/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { code, em, strike, strong, subsup, underline } from '@atlaskit/adf-schema';
 import WithPluginState from '../../ui/WithPluginState';
 import { plugin as textFormattingPlugin, pluginKey as textFormattingPluginKey } from './pm-plugins/main';
-import { plugin as clearFormattingPlugin } from './pm-plugins/clear-formatting';
+import { plugin as clearFormattingPlugin, pluginKey as clearFormattingPluginKey } from './pm-plugins/clear-formatting';
 import clearFormattingKeymapPlugin from './pm-plugins/clear-formatting-keymap';
 import textFormattingCursorPlugin from './pm-plugins/cursor';
 import textFormattingInputRulePlugin from './pm-plugins/input-rule';
@@ -81,7 +81,8 @@ const textFormatting = (options = {}) => ({
   }) {
     return /*#__PURE__*/React.createElement(WithPluginState, {
       plugins: {
-        textFormattingState: textFormattingPluginKey
+        textFormattingState: textFormattingPluginKey,
+        clearFormattingPluginState: clearFormattingPluginKey
       },
       render: () => {
         return /*#__PURE__*/React.createElement(Toolbar, {

package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -1,5 +1,6 @@
 import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
-import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import { ItemGroup, itemThemeNamespace } from '@atlaskit/item';
 import { themed } from '@atlaskit/theme/components';
 import { ThemeProvider } from 'styled-components';

package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
 import { N200 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/theme/constants'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import Item from '@atlaskit/item';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import styled from 'styled-components';

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -1,39 +1,72 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import AvatarsWithPluginState from '../../../plugins/collab-edit/ui';
+import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/FindReplaceToolbarButtonWithState';
+import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper';
 import Toolbar from '../../Toolbar';
-import { MainToolbar, MainToolbarIconBefore, MainToolbarCustomComponentsSlot } from './MainToolbar';
+import { MainToolbar, MainToolbarIconBefore, MainToolbarFirstChild, MainToolbarSecondChild, NonCustomToolbarWrapper, CustomToolbarWrapper, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 export const FullPageToolbar = /*#__PURE__*/React.memo(props => {
+  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags4, _props$featureFlags5;
+
+  const [shouldSplitToolbar, setShouldSplitToolbar] = useState(false);
+  const nonCustomToolbar = /*#__PURE__*/React.createElement(NonCustomToolbarWrapper, null, props.beforeIcon && /*#__PURE__*/React.createElement(MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
+    editorView: props.editorView,
+    editorActions: props.editorActions,
+    eventDispatcher: props.eventDispatcher,
+    providerFactory: props.providerFactory,
+    appearance: props.appearance,
+    items: props.primaryToolbarComponents,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsScrollableElement: props.popupsScrollableElement,
+    disabled: props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    containerElement: props.containerElement,
+    hasMinWidth: props.hasMinWidth
+  }));
+  const customToolbar = /*#__PURE__*/React.createElement(CustomToolbarWrapper, null, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? /*#__PURE__*/React.createElement(BeforePrimaryToolbarWrapper, {
+    beforePrimaryToolbarComponents: props.customPrimaryToolbarComponents.before
+  }) : null, (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
+    editorView: props.editorView,
+    eventDispatcher: props.eventDispatcher,
+    inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
+    inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
+    isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
+  }), (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.findReplace && (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.twoLineEditorToolbar ? /*#__PURE__*/React.createElement(FindReplaceToolbarButtonWithState, {
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsScrollableElement: props.popupsScrollableElement,
+    editorView: props.editorView,
+    containerElement: props.containerElement,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
+  }) : null, !!props.customPrimaryToolbarComponents && 'after' in props.customPrimaryToolbarComponents ? props.customPrimaryToolbarComponents.after : props.customPrimaryToolbarComponents);
+  useEffect(() => {
+    var _props$featureFlags6;
+
+    if ((_props$featureFlags6 = props.featureFlags) !== null && _props$featureFlags6 !== void 0 && _props$featureFlags6.twoLineEditorToolbar) {
+      const updateOnResize = () => {
+        setShouldSplitToolbar(window.innerWidth <= MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT);
+      };
+
+      window.addEventListener('resize', updateOnResize);
+      updateOnResize();
+      return () => window.removeEventListener('resize', updateOnResize);
+    }
+  });
   return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
     width: contextPanelWidth
   }) => {
-    var _props$featureFlags;
+    var _props$featureFlags7, _props$featureFlags8, _props$featureFlags9;
 
     return /*#__PURE__*/React.createElement(MainToolbar, {
       "data-testid": "ak-editor-main-toolbar",
-      showKeyline: props.showKeyline || contextPanelWidth > 0
-    }, props.beforeIcon && /*#__PURE__*/React.createElement(MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
-      editorView: props.editorView,
-      editorActions: props.editorActions,
-      eventDispatcher: props.eventDispatcher,
-      providerFactory: props.providerFactory,
-      appearance: props.appearance,
-      items: props.primaryToolbarComponents,
-      popupsMountPoint: props.popupsMountPoint,
-      popupsBoundariesElement: props.popupsBoundariesElement,
-      popupsScrollableElement: props.popupsScrollableElement,
-      disabled: props.disabled,
-      dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-      containerElement: props.containerElement,
-      hasMinWidth: props.hasMinWidth
-    }), /*#__PURE__*/React.createElement(MainToolbarCustomComponentsSlot, {
-      "data-testid": 'avatar-group-outside-plugin'
-    }, (props === null || props === void 0 ? void 0 : (_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.showAvatarGroupAsPlugin) === true ? null : /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
-      editorView: props.editorView,
-      eventDispatcher: props.eventDispatcher,
-      inviteToEditComponent: props.collabEdit && props.collabEdit.inviteToEditComponent,
-      inviteToEditHandler: props.collabEdit && props.collabEdit.inviteToEditHandler,
-      isInviteToEditButtonSelected: props.collabEdit && props.collabEdit.isInviteToEditButtonSelected
-    }), props.customPrimaryToolbarComponents));
+      showKeyline: props.showKeyline || contextPanelWidth > 0,
+      twoLineEditorToolbar: !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)
+    }, /*#__PURE__*/React.createElement(MainToolbarFirstChild, {
+      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)
+    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/React.createElement(MainToolbarSecondChild, {
+      "data-testid": 'avatar-group-outside-plugin',
+      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar)
+    }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));
   });
 });

package/dist/es2019/ui/Appearance/FullPage/MainToolbar.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { akEditorMenuZIndex, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
+export const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 const toolbarLineHeight = 56;
 export const MainToolbar = styled.div`
   position: relative;
@@ -18,6 +19,13 @@ export const MainToolbar = styled.div`
     height: 0 !important;
   }
 
+  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
+    ${props => props.twoLineEditorToolbar && `
+        flex-wrap: wrap;
+        height: calc(${toolbarLineHeight}px * 2);
+      `}
+  }
+
   @media (max-width: ${akEditorMobileMaxWidth}px) {
     display: grid;
     height: calc(${toolbarLineHeight}px * 2);
@@ -34,21 +42,46 @@ export const MainToolbarIconBefore = styled.div`
   }
 `;
 MainToolbarIconBefore.displayName = 'MainToolbarIconBefore';
-export const MainToolbarCustomComponentsSlot = styled.div`
+export const MainToolbarFirstChild = styled.div`
   display: flex;
-  justify-content: flex-end;
   flex-grow: 1;
+
+  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
+    ${props => props.twoLineEditorToolbar && `
+        flex: 1 1 100%;
+        height: ${toolbarLineHeight}px;
+        justify-content: flex-end;
+        // ED-10241: We add fit-content to ensure that MainToolbar does not
+        // shrink more than the size of its contents. This will prevent the
+        // find/replace icon from being overlapped during a confluence
+        // publish operation
+        min-width: fit-content;
+      `}
+  }
+  @media (max-width: ${akEditorMobileMaxWidth}px) {
+    grid-column: 1;
+    grid-row: 1;
+  }
+`;
+MainToolbarFirstChild.displayName = 'MainToolbarFirstChild';
+export const MainToolbarSecondChild = styled.div`
   // ED-10241: We add fit-content to ensure that MainToolbar does not
   // shrink more than the size of its contents. This will prevent the
   // find/replace icon from being overlapped during a confluence
   // publish operation
   min-width: fit-content;
-  @media (max-width: ${akEditorMobileMaxWidth}px) {
-    grid-column: 1;
-    grid-row: 1;
+  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
+    ${props => props.twoLineEditorToolbar && `
+        display: flex;
+        flex-grow: 1;
+        flex: 1 1 100%;
+        margin: auto;
+        height: ${toolbarLineHeight}px;
+        min-width: 0;
+      `}
   }
 `;
-MainToolbarCustomComponentsSlot.displayName = 'MainToolbar';
+MainToolbarSecondChild.displayName = 'MainToolbarSecondChild';
 export const SecondaryToolbar = styled.div`
   box-sizing: border-box;
   justify-content: flex-end;
@@ -57,4 +90,15 @@ export const SecondaryToolbar = styled.div`
   display: flex;
   padding: 24px 0;
 `;
-SecondaryToolbar.displayName = 'SecondaryToolbar';
+SecondaryToolbar.displayName = 'SecondaryToolbar';
+export const NonCustomToolbarWrapper = styled.div`
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+`;
+NonCustomToolbarWrapper.displayName = 'NonCustomToolbar';
+export const CustomToolbarWrapper = styled.div`
+  align-items: center;
+  display: flex;
+`;
+CustomToolbarWrapper.displayName = 'CustomToolbar';

package/dist/es2019/ui/ColorPalette/Color/index.js

@@ -1,19 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N0 } from '@atlaskit/theme/colors';
 import { Button, ButtonWrapper } from './styles';
-import Tooltip from '@atlaskit/tooltip'; // IMO these should live inside @atlaskit/theme
-
-const messages = defineMessages({
-  selected: {
-    id: 'fabric.editor.selected',
-    defaultMessage: 'Selected',
-    description: 'If the item is selected or not.'
-  }
-});
+import Tooltip from '@atlaskit/tooltip';
 
 class Color extends PureComponent {
   constructor(...args) {
@@ -36,21 +27,20 @@ class Color extends PureComponent {
 
   render() {
     const {
+      autoFocus,
       tabIndex,
       value,
       label,
       isSelected,
       borderColor,
-      checkMarkColor = N0,
-      intl: {
-        formatMessage
-      }
+      checkMarkColor = N0
     } = this.props;
-    const ariaLabelText = isSelected ? `${label} ${formatMessage(messages.selected)}` : label;
     return /*#__PURE__*/React.createElement(Tooltip, {
       content: label
     }, /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
-      "aria-label": ariaLabelText,
+      "aria-label": label,
+      role: "radio",
+      "aria-checked": isSelected,
       onClick: this.onClick,
       onMouseDown: this.onMouseDown,
       tabIndex: tabIndex,
@@ -58,7 +48,8 @@ class Color extends PureComponent {
       style: {
         backgroundColor: value || 'transparent',
         border: `1px solid ${borderColor}`
-      }
+      },
+      autoFocus: autoFocus
     }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
       primaryColor: checkMarkColor,
       label: ""
@@ -67,4 +58,4 @@ class Color extends PureComponent {
 
 }
 
-export default injectIntl(Color);
+export default Color;

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

@@ -23,6 +23,7 @@ const ColorPalette = props => {
     onClick,
     selectedColor,
     className,
+    isShowingMoreColors,
     intl: {
       formatMessage
     }
@@ -36,22 +37,24 @@ const ColorPalette = props => {
       return resultArray;
     }, []);
   }, [palette, cols]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(row => /*#__PURE__*/React.createElement(ColorPaletteWrapper, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map((row, rowIdx) => /*#__PURE__*/React.createElement(ColorPaletteWrapper, {
     className: className,
-    key: `row-first-color-${row[0].value}`
+    key: `row-first-color-${row[0].value}`,
+    role: "radiogroup"
   }, row.map(({
     value,
     label,
     border,
     message
-  }) => /*#__PURE__*/React.createElement(Color, {
+  }, colorIdx) => /*#__PURE__*/React.createElement(Color, {
     key: value,
     value: value,
     borderColor: border,
     label: message ? formatMessage(message) : label,
     onClick: onClick,
     isSelected: value === selectedColor,
-    checkMarkColor: getContrastColor(value, [N0, N500])
+    checkMarkColor: getContrastColor(value, [N0, N500]),
+    autoFocus: isShowingMoreColors && rowIdx === 1 && colorIdx === 0
   })))));
 };
 

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

@@ -19,7 +19,7 @@ const ColorPickerWrapper = styled.div`
   border-radius: ${borderRadius()}px;
   background-color: white;
   box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
-  padding: 4px;
+  padding: 8px 0px;
 `;
 
 const ColorPickerButton = props => {

package/dist/es2019/ui/ConfigPanel/ConfigPanel.js

@@ -6,11 +6,12 @@ import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-n
 import Form from '@atlaskit/form';
 import { isTabGroup } from '@atlaskit/editor-common/extensions';
 import _isEqual from 'lodash/isEqual';
+import _mergeRecursive from 'lodash/merge';
 import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from '../../plugins/analytics';
 import LoadingState from './LoadingState';
 import Header from './Header';
 import ErrorMessage from './ErrorMessage';
-import { serialize, deserialize } from './transformers';
+import { serialize, deserialize, findDuplicateFields } from './transformers';
 import { injectIntl } from 'react-intl';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/custom-theme-button';
@@ -19,6 +20,7 @@ import { pluginKey as extensionPluginKey } from '../../plugins/extension/plugin-
 import WithPluginState from '../WithPluginState';
 import FormContent from './FormContent';
 import { messages } from './messages';
+import { FormErrorBoundary } from './FormErrorBoundary';
 
 function ConfigForm({
   canSave,
@@ -32,8 +34,19 @@ function ConfigForm({
   onCancel,
   onFieldChange,
   parameters,
-  submitting
+  submitting,
+  contextIdentifierProvider
 }) {
+  useEffect(() => {
+    if (fields) {
+      const firstDuplicateField = findDuplicateFields(fields);
+
+      if (firstDuplicateField) {
+        throw new Error(`Possible duplicate field name: \`${firstDuplicateField.name}\`.`);
+      }
+    }
+  }, [fields]);
+
   if (isLoading || !hasParsedParameters && errorMessage === null) {
     return /*#__PURE__*/React.createElement(LoadingState, null);
   }
@@ -44,34 +57,27 @@ function ConfigForm({
     });
   }
 
-  return /*#__PURE__*/React.createElement(WithPluginState, {
-    plugins: {
-      extension: extensionPluginKey
-    },
-    render: ({
-      extension
-    }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormContent, {
-      fields: fields,
-      parameters: parameters,
-      extensionManifest: extensionManifest,
-      onFieldChange: onFieldChange,
-      firstVisibleFieldName: firstVisibleFieldName,
-      contextIdentifierProvider: extension === null || extension === void 0 ? void 0 : extension.contextIdentifierProvider
-    }), /*#__PURE__*/React.createElement("div", {
-      style: canSave ? {} : {
-        display: 'none'
-      }
-    }, /*#__PURE__*/React.createElement(FormFooter, {
-      align: "start"
-    }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
-      type: "submit",
-      appearance: "primary"
-    }, intl.formatMessage(messages.submit)), /*#__PURE__*/React.createElement(Button, {
-      appearance: "default",
-      isDisabled: submitting,
-      onClick: onCancel
-    }, intl.formatMessage(messages.cancel))))))
-  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormContent, {
+    fields: fields,
+    parameters: parameters,
+    extensionManifest: extensionManifest,
+    onFieldChange: onFieldChange,
+    firstVisibleFieldName: firstVisibleFieldName,
+    contextIdentifierProvider: contextIdentifierProvider
+  }), /*#__PURE__*/React.createElement("div", {
+    style: canSave ? {} : {
+      display: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(FormFooter, {
+    align: "start"
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    appearance: "primary"
+  }, intl.formatMessage(messages.submit)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    isDisabled: submitting,
+    onClick: onCancel
+  }, intl.formatMessage(messages.cancel))))));
 }
 
 const ConfigFormIntl = injectIntl(ConfigForm);
@@ -126,14 +132,48 @@ class ConfigPanel extends React.Component {
     });
 
     _defineProperty(this, "backfillTabFormData", (fields, formData, currentParameters) => {
-      const mergedTabGroups = fields.filter(isTabGroup).reduce((acc, field) => ({ ...acc,
-        [field.name]: { ...(currentParameters[field.name] || {}),
-          ...(formData[field.name] || {})
+      const getRelevantData = (field, formParams, currentParams, backfill) => {
+        if (field.hasGroupedValues && !(field.name in backfill)) {
+          backfill[field.name] = {};
         }
-      }), {});
-      return { ...formData,
-        ...mergedTabGroups
-      };
+
+        const actualFormParams = field.hasGroupedValues ? formParams[field.name] || {} : formParams;
+        const actualCurrentParams = field.hasGroupedValues ? currentParams[field.name] || {} : currentParams;
+        const actualBackfillParams = field.hasGroupedValues ? backfill[field.name] : backfill;
+        return {
+          formParams: actualFormParams,
+          currentParams: actualCurrentParams,
+          backfillParams: actualBackfillParams
+        };
+      }; // Traverse any tab structures and backfill field values on tabs
+      // which aren't shown. This filter should be ok because tabs are
+      // currently only allowed on top level
+
+
+      const mergedTabGroups = fields.filter(isTabGroup).reduce((missingBackfill, tabGroup) => {
+        const {
+          formParams: tabGroupFormData,
+          currentParams: tabGroupCurrentData,
+          backfillParams: tabGroupParams
+        } = getRelevantData(tabGroup, formData, currentParameters, missingBackfill); // Loop through tabs and see what fields are missing from current data
+
+        tabGroup.fields.forEach(tabField => {
+          const {
+            formParams: tabFormData,
+            currentParams: tabCurrentData,
+            backfillParams: tabParams
+          } = getRelevantData(tabField, tabGroupFormData, tabGroupCurrentData, tabGroupParams);
+          tabField.fields.forEach(field => {
+            if (field.name in tabFormData || !(field.name in tabCurrentData)) {
+              return;
+            }
+
+            tabParams[field.name] = tabCurrentData[field.name];
+          });
+        });
+        return missingBackfill;
+      }, {});
+      return _mergeRecursive({}, mergedTabGroups, formData);
     });
 
     _defineProperty(this, "handleSubmit", async formData => {
@@ -352,18 +392,30 @@ class ConfigPanel extends React.Component {
           noValidate: true,
           onKeyDown: handleKeyDown,
           "data-testid": "extension-config-panel"
-        }), this.renderHeader(extensionManifest), /*#__PURE__*/React.createElement(ConfigFormIntl, {
-          canSave: !autoSave,
-          errorMessage: errorMessage,
-          extensionManifest: extensionManifest,
-          fields: fields,
-          firstVisibleFieldName: firstVisibleFieldName,
-          hasParsedParameters: hasParsedParameters,
-          isLoading: isLoading || false,
-          onCancel: onCancel,
-          onFieldChange: onFieldChange,
-          parameters: currentParameters,
-          submitting: submitting
+        }), this.renderHeader(extensionManifest), /*#__PURE__*/React.createElement(WithPluginState, {
+          plugins: {
+            extension: extensionPluginKey
+          },
+          render: ({
+            extension
+          }) => /*#__PURE__*/React.createElement(FormErrorBoundary, {
+            contextIdentifierProvider: extension === null || extension === void 0 ? void 0 : extension.contextIdentifierProvider,
+            extensionKey: extensionManifest.key,
+            fields: fields || []
+          }, /*#__PURE__*/React.createElement(ConfigFormIntl, {
+            canSave: !autoSave,
+            errorMessage: errorMessage,
+            extensionManifest: extensionManifest,
+            fields: fields,
+            firstVisibleFieldName: firstVisibleFieldName,
+            hasParsedParameters: hasParsedParameters,
+            isLoading: isLoading || false,
+            onCancel: onCancel,
+            onFieldChange: onFieldChange,
+            parameters: currentParameters,
+            submitting: submitting,
+            contextIdentifierProvider: extension === null || extension === void 0 ? void 0 : extension.contextIdentifierProvider
+          }))
         }));
       });
     });

package/dist/es2019/ui/ConfigPanel/FormContent.js

@@ -134,35 +134,44 @@ export function FieldComponent({
       });
 
     case 'expand':
-      // if expand is under a tab.
-      const resolvedParentName = parentName ? `${parentName}.${field.name}` : field.name;
-      return /*#__PURE__*/React.createElement(Expand, {
-        field: field,
-        isExpanded: field.isExpanded
-      }, /*#__PURE__*/React.createElement(FormContent, {
-        parentName: resolvedParentName,
-        fields: field.fields,
-        parameters: parameters[field.name] || {},
-        onFieldChange: onFieldChange,
-        extensionManifest: extensionManifest
-      }));
-
-    case 'tab-group':
-      const renderPanel = tabField => {
-        const tabParameters = parameters[field.name] || {};
-        return /*#__PURE__*/React.createElement(FormContent, {
-          parentName: `${field.name}.${tabField.name}`,
-          fields: tabField.fields,
-          parameters: tabParameters[tabField.name] || {},
+      {
+        // if expand is under a tab with hasGroupedValues=true
+        const resolvedParentName = [parentName, field.hasGroupedValues ? field.name : undefined].filter(val => !!val).join('.') || undefined;
+        const resolvedParameters = !field.hasGroupedValues ? parameters : parameters[field.name] || {};
+        return /*#__PURE__*/React.createElement(Expand, {
+          field: field,
+          isExpanded: field.isExpanded
+        }, /*#__PURE__*/React.createElement(FormContent, {
+          parentName: resolvedParentName,
+          fields: field.fields,
+          parameters: resolvedParameters,
           onFieldChange: onFieldChange,
           extensionManifest: extensionManifest
-        });
-      };
+        }));
+      }
 
-      return /*#__PURE__*/React.createElement(TabGroup, {
-        field: field,
-        renderPanel: renderPanel
-      });
+    case 'tab-group':
+      {
+        const tabGroupField = field;
+        const tabGroupParams = tabGroupField.hasGroupedValues ? parameters[tabGroupField.name] || {} : parameters;
+
+        const renderPanel = tabField => {
+          const parentName = [tabGroupField.hasGroupedValues ? tabGroupField.name : undefined, tabField.hasGroupedValues ? tabField.name : undefined].filter(val => !!val).join('.') || undefined;
+          const tabParameters = tabField.hasGroupedValues ? tabGroupParams[tabField.name] || {} : tabGroupParams;
+          return /*#__PURE__*/React.createElement(FormContent, {
+            parentName: parentName,
+            fields: tabField.fields,
+            parameters: tabParameters,
+            onFieldChange: onFieldChange,
+            extensionManifest: extensionManifest
+          });
+        };
+
+        return /*#__PURE__*/React.createElement(TabGroup, {
+          field: tabGroupField,
+          renderPanel: renderPanel
+        });
+      }
 
     default:
       return /*#__PURE__*/React.createElement(UnhandledType, {