@atlaskit/editor-core 151.3.0 → 153.0.1

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { N40 } from '@atlaskit/theme/colors';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import styled from 'styled-components';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import SectionMessage from '@atlaskit/section-message';
 import Button from '@atlaskit/button/custom-theme-button';
 import Select from '@atlaskit/select';

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
 const TabWrapper = styled.div`

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

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import SectionMessage from '@atlaskit/section-message';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../plugins/analytics';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import Loadable from 'react-loadable';
 import Button from '@atlaskit/button/custom-theme-button';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';

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

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   submit: {
     id: 'fabric.editor.configPanel.submit',

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

@@ -1,4 +1,4 @@
-import { isFieldset, isDateRange, isTabGroup, isExpand, getFieldSerializer, getFieldDeserializer } from '@atlaskit/editor-common/extensions';
+import { isFieldset, isDateRange, isTabGroup, isTabField, isExpand, getFieldSerializer, getFieldDeserializer } from '@atlaskit/editor-common/extensions';
 import { getNameFromDuplicateField, isDuplicateField } from './utils';
 
 const isOption = option => {
@@ -8,10 +8,9 @@ const isOption = option => {
 const isOptions = options => {
   return Array.isArray(options) && options.every(isOption);
 };
-/** maps the typed-values from the Form values object */
-
 
-function extract(value, field) {
+/** maps the typed-values from the Form values object */
+function extract(value, field, options) {
   if (isOptions(value)) {
     return value.map(item => item.value);
   } else if (isOption(value)) {
@@ -24,79 +23,235 @@ function extract(value, field) {
     }
 
     return Number(value);
+  } // Workaround for https://product-fabric.atlassian.net/browse/DST-2701
+  else if (options !== null && options !== void 0 && options.useDefaultValue && value === undefined && 'defaultValue' in field) {
+    return field.defaultValue;
   }
 
   return value;
 }
 
-export const serialize = async (manifest, data, fields, depth = 0) => {
+export const findDuplicateFields = fields => findDuplicateFieldsInternal(flattenFields(fields));
+
+const findDuplicateFieldsInternal = fields => {
+  const allowDuplicatesMap = {};
+  return fields.find(field => {
+    if (isExpand(field)) {
+      return findDuplicateFieldsInternal(field.fields);
+    } else if (isTabGroup(field)) {
+      return field.fields.find(tabField => findDuplicateFieldsInternal(tabField.fields));
+    } else if (allowDuplicatesMap[field.name] === undefined) {
+      allowDuplicatesMap[field.name] = !!field.allowDuplicates;
+      return;
+    } else if (!field.allowDuplicates || !allowDuplicatesMap[field.name]) {
+      return field;
+    }
+
+    return;
+  });
+};
+
+export const serialize = async (manifest, data, fields, options = {}) => {
   const result = [];
+  const {
+    depth = 0,
+    parentType
+  } = options;
+  const flattenedFields = flattenFields(fields);
+  const fillResults = flattenedFields.map(async field => {
+    if (isTabGroup(field)) {
+      const tabGroupData = await serializeTabGroupField(manifest, field, data);
+      result.push(...tabGroupData);
+    } else if (isTabField(field)) {
+      const tabData = await serializeTabField(manifest, field, data);
+      result.push(...tabData);
+    } else if (isExpand(field)) {
+      const expandData = await serializeExpandField(manifest, field, data);
+      result.push(...expandData);
+    } // WARNING: don't recursively serialize, limit to depth < 1
+    // serializable?
+    else if (isFieldset(field) && depth === 0) {
+      const fieldsetData = await serializeFieldset(manifest, field, data, depth);
 
-  if (data) {
-    for (const name in data) {
-      const field = fields.find(field => field.name === getNameFromDuplicateField(name));
+      if (fieldsetData) {
+        result.push(fieldsetData);
+      }
+    } else {
+      const value = extract(data[field.name], field, {
+        useDefaultValue: true
+      }); // ignore undefined values
+
+      if (value !== undefined) {
+        result.push({
+          [field.name]: value
+        });
+      }
+    }
+  });
+  await Promise.all(fillResults); // Crunch fields down to parameters
 
-      if (field === undefined) {
-        continue;
-      } // ignore undefined values
+  const parameters = result.reduce((obj, current) => {
+    for (const key in current) {
+      obj[key] = current[key];
+    }
 
+    return obj;
+  }, {}); // Fix up duplicate values (currently only for fieldsets)
 
-      let value = extract(data[name], field);
+  const hasDuplicateFields = parentType === 'fieldset' && !!flattenedFields.find(field => field.allowDuplicates);
 
-      if (value === undefined) {
-        continue;
-      }
+  if (hasDuplicateFields) {
+    return serializeMergeDuplicateFieldData(parameters, data, flattenedFields);
+  }
 
-      if (isTabGroup(field)) {
-        const {
-          fields: tabs
-        } = field;
-        value = {};
+  return parameters;
+};
 
-        const resolveTabValues = async (tabField, groupData) => {
-          return await serialize(manifest, groupData[tabField.name] || {}, tabField.fields);
-        };
+const serializeFieldset = async (manifest, field, data, depth) => {
+  let fieldSerializer;
 
-        for (let i = 0; i < tabs.length; i++) {
-          const tabField = tabs[i];
-          value[tabField.name] = await resolveTabValues(tabField, data[field.name] || {});
-        }
-      } else if (isExpand(field)) {
-        value = await serialize(manifest, data[field.name] || {}, field.fields);
-      } // WARNING: don't recursively serialize, limit to depth < 1
-      // serializable?
-      else if (isFieldset(field) && depth === 0) {
-        const fieldSerializer = await getFieldSerializer(manifest, field.options.transformer);
-
-        if (fieldSerializer) {
-          const {
-            fields: fieldsetFields
-          } = field;
-          const extracted = await serialize(manifest, value, fieldsetFields, depth + 1);
-          value = fieldSerializer(extracted);
-        }
+  try {
+    fieldSerializer = await getFieldSerializer(manifest, field.options.transformer);
+  } catch (ex) {
+    // We only throw if there is data that may be lost
+    if (data[field.name] !== undefined) {
+      throw ex;
+    }
+  }
+
+  if (!fieldSerializer) {
+    return;
+  }
+
+  const {
+    fields: fieldsetFields
+  } = field;
+  const fieldParams = extract(data[field.name], field, {
+    useDefaultValue: true
+  }) || {};
+  const extracted = await serialize(manifest, fieldParams, fieldsetFields, {
+    depth: depth + 1,
+    parentType: 'fieldset'
+  });
+  return {
+    [field.name]: fieldSerializer(extracted)
+  };
+};
+
+const serializeExpandField = async (manifest, field, data) => {
+  const expandData = field.hasGroupedValues ? data[field.name] || {} : data;
+  const value = await serialize(manifest, expandData, field.fields, {
+    parentType: 'expand'
+  });
+  const results = [];
+
+  if (!field.hasGroupedValues) {
+    for (const fieldName in value) {
+      results.push({
+        [fieldName]: value[fieldName]
+      });
+    }
+  } else {
+    results.push({
+      [field.name]: value
+    });
+  }
+
+  return results;
+};
+
+const resolveTabValues = async (manifest, tabField, groupData) => {
+  const tabFieldParams = tabField.hasGroupedValues ? groupData[tabField.name] || {} : groupData;
+  return await serialize(manifest, tabFieldParams, tabField.fields, {
+    parentType: 'tab'
+  });
+};
+
+const serializeTabGroupField = async (manifest, field, data) => {
+  const {
+    fields: tabs
+  } = field;
+  const results = [];
+  const value = {};
+
+  for (let i = 0; i < tabs.length; i++) {
+    const tabField = tabs[i];
+    const tabFieldParameters = await resolveTabValues(manifest, tabField, field.hasGroupedValues ? data[field.name] || {} : data);
+
+    if (tabField.hasGroupedValues) {
+      // Keep namespaced by tab
+      value[tabField.name] = tabFieldParameters;
+    } else {
+      // Copy into tabGroup value
+      for (const fieldName in tabFieldParameters) {
+        value[fieldName] = tabFieldParameters[fieldName];
       }
+    }
+  } // Now for tabGroup...
+
 
-      result.push({
-        [field.name]: value
+  if (field.hasGroupedValues) {
+    results.push({
+      [field.name]: value
+    });
+  } else {
+    for (const fieldName in value) {
+      results.push({
+        [fieldName]: value
       });
     }
-  } // when there are duplicate fields we return an array eg. [{ title: 'one' }, { title: 'two' }]
-  // when there aren't we return an object eg. { title: 'one' }
+  }
 
+  return results;
+};
 
-  const hasDuplicateFields = !!Object.keys(data).find(key => isDuplicateField(key));
+const serializeTabField = async (manifest, field, data) => {
+  const results = [];
+  const tabField = field;
+  const tabFieldParameters = await resolveTabValues(manifest, tabField, data);
 
-  if (hasDuplicateFields) {
-    return result;
+  if (tabField.hasGroupedValues) {
+    // Keep namespaced by tab
+    results.push({
+      [tabField.name]: tabFieldParameters
+    });
+  } else {
+    // Copy into tabGroup value
+    for (const fieldName in tabFieldParameters) {
+      results.push({
+        [fieldName]: tabFieldParameters[fieldName]
+      });
+    }
   }
 
-  return result.reduce((obj, current) => {
-    for (const key in current) {
-      obj[key] = current[key];
+  return results;
+};
+
+const serializeMergeDuplicateFieldData = (parameters, formData, flattenedFields) => {
+  // Weed out all the non-duplicate field names
+  const allDuplicateFieldNames = Object.keys(formData).filter(key => isDuplicateField(key));
+  return flattenedFields.reduce((newParams, field) => {
+    const paramValue = parameters[field.name];
+
+    if (!field.allowDuplicates && paramValue !== undefined) {
+      newParams[field.name] = paramValue;
+    } else {
+      // extract the given duplicate values through the field
+      const duplicateValues = allDuplicateFieldNames.filter(name => getNameFromDuplicateField(name) === field.name).map(duplicateFieldName => extract(formData[duplicateFieldName], field, {
+        useDefaultValue: true
+      })); // Merge and ensure that all values are worth serializing
+
+      const mergedValues = [paramValue, // first value
+      ...duplicateValues].filter(value => value !== undefined);
+
+      if (mergedValues.length > 0) {
+        // Replace so the duplicate field values are saved under the
+        // fieldName as an array
+        newParams[field.name] = mergedValues;
+      }
     }
 
-    return obj;
+    return newParams;
   }, {});
 };
 
@@ -137,21 +292,51 @@ function injectDefaultValues(data, fields) {
     }
   }
 
-  if (doParametersContainDuplicateFields(copy)) {
-    return copy;
-  }
-
   return convertToParametersObject(copy);
 }
+/**
+ * Flattens the given FieldDefinition[] so it resembles the expected data
+ * structure in result Parameters.
+ */
+
+
+const flattenFields = fields => {
+  const flattenAccumulator = (accumulator, field) => {
+    if (isTabGroup(field)) {
+      if (field.hasGroupedValues) {
+        accumulator.push(field);
+      } else {
+        const flattenedTabs = field.fields.reduce((tabAccumulator, tab) => {
+          return tabAccumulator.concat(tab.hasGroupedValues ? tab : tab.fields.reduce(flattenAccumulator, []));
+        }, []);
+        accumulator.push(...flattenedTabs);
+      }
+    } else if (isExpand(field)) {
+      if (field.hasGroupedValues) {
+        accumulator.push(field);
+      } else {
+        const flattenedExpand = field.fields.reduce(flattenAccumulator, []);
+        accumulator.push(...flattenedExpand);
+      }
+    } else {
+      accumulator.push(field);
+    }
+
+    return accumulator;
+  };
+
+  return fields.reduce(flattenAccumulator, []);
+};
 
 export const deserialize = async (manifest, data, fields, depth = 0) => {
   const dataArray = convertToParametersArray(data);
   let result = [];
   const errors = [];
+  const flattenedFields = flattenFields(fields);
 
   for (const item of dataArray) {
     const [name, originalValue] = Object.entries(item)[0];
-    const field = fields.find(field => field.name === getNameFromDuplicateField(name));
+    const field = flattenedFields.find(field => field.name === getNameFromDuplicateField(name));
 
     if (field === undefined) {
       continue;
@@ -193,21 +378,7 @@ export const deserialize = async (manifest, data, fields, depth = 0) => {
     result.errors = convertToParametersObject(errors);
   }
 
-  return injectDefaultValues(result, fields);
-};
-
-const doParametersContainDuplicateFields = parameters => {
-  const keyMap = new Set();
-
-  for (const param of parameters) {
-    const key = Object.keys(param)[0];
-
-    if (keyMap.has(key)) {
-      return true;
-    }
-
-    keyMap.add(key);
-  }
+  return injectDefaultValues(result, flattenedFields);
 };
 
 const convertToParametersObject = (parameters = []) => {

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

@@ -8,7 +8,6 @@ export const fromEntries = iterable => {
     return obj;
   }, {});
 };
-export const toEntries = parameters => Array.isArray(parameters) ? parameters.reduce((prev, curr) => [...prev, ...Object.entries(curr)], []) : Object.entries(parameters);
 
 const isEmptyString = value => typeof value === 'string' && value === '';
 
@@ -50,7 +49,7 @@ export const getSafeParentedName = (name, parentName) => {
 const duplicateFieldRegex = /:[0-9]+$/;
 export const isDuplicateField = key => duplicateFieldRegex.test(key);
 export const getNameFromDuplicateField = key => key.replace(duplicateFieldRegex, '');
-/* 
+/*
     ColorPickerButton only accepts 8 digit hex alpha values, for example:
     #123fffaa (8 digits, hex alpha)
     */

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { PureComponent } from 'react';
+import { PureComponent } from 'react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import DropdownList from '@atlaskit/droplist';
 import { Popup } from '@atlaskit/editor-common';
 import withOuterListeners from '../with-outer-listeners';

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

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
-import styled from 'styled-components';
-import DropList from '@atlaskit/droplist';
+import styled from 'styled-components'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
+import DropList from '@atlaskit/droplist'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import Item, { ItemGroup } from '@atlaskit/item';
 import Tooltip from '@atlaskit/tooltip';
 import { Popup } from '@atlaskit/editor-common';
@@ -84,6 +86,7 @@ export default class DropdownMenuWrapper extends PureComponent {
       key: item.key || item.content,
       isSelected: item.isActive
     }, /*#__PURE__*/React.createElement(Item, {
+      role: "menuitem",
       elemBefore: item.elemBefore,
       elemAfter: item.elemAfter,
       isDisabled: item.isDisabled,
@@ -154,7 +157,8 @@ export default class DropdownMenuWrapper extends PureComponent {
         minWidth: fitWidth || 0
       }
     }), items.map((group, index) => /*#__PURE__*/React.createElement(ItemGroup, {
-      key: index
+      key: index,
+      role: "menu"
     }, group.items.map(item => this.renderItem(item))))));
   }
 

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import Item, { itemThemeNamespace } from '@atlaskit/item'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 

package/dist/es2019/ui/ElementBrowser/ModalElementBrowser.js

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import styled from 'styled-components';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { DN50, N0 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';

package/dist/es2019/ui/ElementBrowser/categories.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export function getCategories(intl) {
   return [{
     title: intl.formatMessage(messages.all),

package/dist/es2019/ui/ElementBrowser/components/ElementList/ElementList.js

@@ -4,6 +4,7 @@ import memoizeOne from 'memoize-one';
 import styled, { ThemeProvider, css } from 'styled-components';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { Collection } from 'react-virtualized/dist/commonjs/Collection';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import Item from '@atlaskit/item';
 import { B100, N20, N200 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';

package/dist/es2019/ui/ElementBrowser/components/ElementList/EmptyState.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import NotFoundIllustration from './NotFoundIllustration';
 export default function EmptyState({

package/dist/es2019/ui/ElementBrowser/components/ElementSearch.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import styled from 'styled-components';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import Textfield from '@atlaskit/textfield';
 import SearchIcon from '@atlaskit/icon/glyph/search';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';

package/dist/es2019/ui/ElementBrowser/components/StatelessElementBrowser.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { memo, useState, useCallback, useEffect } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import styled, { css } from 'styled-components';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from '../../../plugins/analytics';

package/dist/es2019/ui/ElementBrowser/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   help: {
     id: 'fabric.editor.elementBrowser.help',

package/dist/es2019/ui/LinkSearch/LinkSearchListItem.js

@@ -4,13 +4,13 @@ import styled from 'styled-components'; // AFP-2532 TODO: Fix automatic suppress
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { fontSizeSmall } from '@atlaskit/theme';
-import { N20, N800, N100 } from '@atlaskit/theme/colors';
+import { N20, N300, N800 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import formatDistance from 'date-fns/formatDistance';
 import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
 import format from 'date-fns/format';
 import { getCorrectAltByIconUrl } from './listItemAlts';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import messages from '../../messages';
 export const Container = styled.li`
   background-color: ${props => props.selected ? N20 : 'transparent'};
@@ -30,7 +30,7 @@ export const Name = styled.div`
   line-height: 20px;
 `;
 export const ContainerName = styled.div`
-  color: ${N100};
+  color: ${N300};
   line-height: 14px;
   font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
 `;