@atlaskit/editor-core 151.3.0 → 151.3.1

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, {