@atlaskit/smart-card 17.3.0 → 17.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 17.3.1
+
+### Patch Changes
+
+- [`66dc86e0331`](https://bitbucket.org/atlassian/atlassian-frontend/commits/66dc86e0331) - Flexible UI: Check for null element
+
 ## 17.3.0
 
 ### Minor Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.3.0",
+	"version": "17.3.1",
 	"sideEffects": false
 }

package/dist/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.getGapSize = exports.getBaseStyles = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -82,6 +82,10 @@ var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _actionGroup.default;
 };
 
+var isElementNull = function isElementNull(children) {
+  return Boolean(children.type() === null);
+};
+
 var isElementOrElementGroup = function isElementOrElementGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && ((0, _flexible.isFlexibleUiElement)(node) || node.type === _elementGroup.default);
 };
@@ -110,9 +114,13 @@ var renderElementItems = function renderElementItems() {
     var Element = Elements[name];
 
     if (Element) {
-      return [].concat((0, _toConsumableArray2.default)(acc), [/*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
+      var element = /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
         key: idx
-      }, props))]);
+      }, props));
+
+      if (!isElementNull(element)) {
+        return [].concat((0, _toConsumableArray2.default)(acc), [element]);
+      }
     }
 
     return acc;

package/dist/cjs/view/FlexibleCard/components/elements/utils.js

@@ -84,17 +84,6 @@ var getContextKey = function getContextKey(name) {
   return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
 };
 
-var getFormattedMessage = function getFormattedMessage(descriptor, value) {
-  return value ? {
-    message: {
-      descriptor: descriptor,
-      values: {
-        context: value
-      }
-    }
-  } : undefined;
-};
-
 var getData = function getData(elementName, contextKey, context) {
   if (!context) {
     return undefined;
@@ -103,52 +92,72 @@ var getData = function getData(elementName, contextKey, context) {
   var data = context[contextKey];
 
   switch (elementName) {
+    case _constants.ElementName.AuthorGroup:
+    case _constants.ElementName.CollaboratorGroup:
+      return toAvatarGroupProps(data);
+
     case _constants.ElementName.CommentCount:
     case _constants.ElementName.ProgrammingLanguage:
     case _constants.ElementName.SubscriberCount:
-      return {
-        label: data
-      };
-
-    case _constants.ElementName.AuthorGroup:
-      return {
-        items: context.authorGroup
-      };
-
-    case _constants.ElementName.CollaboratorGroup:
-      return {
-        items: context.collaboratorGroup
-      };
+      return toBadgeProps(data);
 
     case _constants.ElementName.CreatedBy:
-      return getFormattedMessage(_messages.messages.created_by, context.createdBy);
+      return toFormattedTextProps(_messages.messages.created_by, context.createdBy);
+
+    case _constants.ElementName.CreatedOn:
+      return toDateTimeProps('created', context.createdOn);
 
     case _constants.ElementName.ModifiedBy:
-      return getFormattedMessage(_messages.messages.modified_by, context.modifiedBy);
+      return toFormattedTextProps(_messages.messages.modified_by, context.modifiedBy);
 
     case _constants.ElementName.ModifiedOn:
-      return context.modifiedOn ? {
-        date: new Date(context.modifiedOn),
-        type: 'modified'
-      } : undefined;
-
-    case _constants.ElementName.CreatedOn:
-      return context.createdOn ? {
-        date: new Date(context.createdOn),
-        type: 'created'
-      } : undefined;
+      return toDateTimeProps('modified', context.modifiedOn);
 
     case _constants.ElementName.Title:
-      return {
-        text: context.title,
-        url: context.url
-      };
+      return toLinkProps(context.title, context.url);
 
     default:
       return data;
   }
 };
 
+var toAvatarGroupProps = function toAvatarGroupProps(items) {
+  return items ? {
+    items: items
+  } : undefined;
+};
+
+var toBadgeProps = function toBadgeProps(label) {
+  return label ? {
+    label: label
+  } : undefined;
+};
+
+var toDateTimeProps = function toDateTimeProps(type, dateString) {
+  return dateString ? {
+    date: new Date(dateString),
+    type: type
+  } : undefined;
+};
+
+var toFormattedTextProps = function toFormattedTextProps(descriptor, context) {
+  return context ? {
+    message: {
+      descriptor: descriptor,
+      values: {
+        context: context
+      }
+    }
+  } : undefined;
+};
+
+var toLinkProps = function toLinkProps(text, url) {
+  return text ? {
+    text: text,
+    url: url
+  } : undefined;
+};
+
 var createElement = function createElement(name) {
   var _ref = elementMappings[name] || {},
       BaseElement = _ref.component,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.3.0",
+	"version": "17.3.1",
 	"sideEffects": false
 }

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -62,6 +62,10 @@ export const getBaseStyles = (direction, size) => css`
 
 const isActionGroup = node => /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;
 
+const isElementNull = children => {
+  return Boolean(children.type() === null);
+};
+
 const isElementOrElementGroup = node => /*#__PURE__*/React.isValidElement(node) && (isFlexibleUiElement(node) || node.type === ElementGroup);
 
 export const renderChildren = (children, size) => React.Children.map(children, child => {
@@ -86,9 +90,13 @@ export const renderElementItems = (items = []) => {
     const Element = Elements[name];
 
     if (Element) {
-      return [...acc, /*#__PURE__*/React.createElement(Element, _extends({
+      const element = /*#__PURE__*/React.createElement(Element, _extends({
         key: idx
-      }, props))];
+      }, props));
+
+      if (!isElementNull(element)) {
+        return [...acc, element];
+      }
     }
 
     return acc;

package/dist/es2019/view/FlexibleCard/components/elements/utils.js

@@ -67,15 +67,6 @@ const getContextKey = name => {
   return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
 };
 
-const getFormattedMessage = (descriptor, value) => value ? {
-  message: {
-    descriptor,
-    values: {
-      context: value
-    }
-  }
-} : undefined;
-
 const getData = (elementName, contextKey, context) => {
   if (!context) {
     return undefined;
@@ -84,52 +75,72 @@ const getData = (elementName, contextKey, context) => {
   const data = context[contextKey];
 
   switch (elementName) {
+    case ElementName.AuthorGroup:
+    case ElementName.CollaboratorGroup:
+      return toAvatarGroupProps(data);
+
     case ElementName.CommentCount:
     case ElementName.ProgrammingLanguage:
     case ElementName.SubscriberCount:
-      return {
-        label: data
-      };
-
-    case ElementName.AuthorGroup:
-      return {
-        items: context.authorGroup
-      };
-
-    case ElementName.CollaboratorGroup:
-      return {
-        items: context.collaboratorGroup
-      };
+      return toBadgeProps(data);
 
     case ElementName.CreatedBy:
-      return getFormattedMessage(messages.created_by, context.createdBy);
+      return toFormattedTextProps(messages.created_by, context.createdBy);
+
+    case ElementName.CreatedOn:
+      return toDateTimeProps('created', context.createdOn);
 
     case ElementName.ModifiedBy:
-      return getFormattedMessage(messages.modified_by, context.modifiedBy);
+      return toFormattedTextProps(messages.modified_by, context.modifiedBy);
 
     case ElementName.ModifiedOn:
-      return context.modifiedOn ? {
-        date: new Date(context.modifiedOn),
-        type: 'modified'
-      } : undefined;
-
-    case ElementName.CreatedOn:
-      return context.createdOn ? {
-        date: new Date(context.createdOn),
-        type: 'created'
-      } : undefined;
+      return toDateTimeProps('modified', context.modifiedOn);
 
     case ElementName.Title:
-      return {
-        text: context.title,
-        url: context.url
-      };
+      return toLinkProps(context.title, context.url);
 
     default:
       return data;
   }
 };
 
+const toAvatarGroupProps = items => {
+  return items ? {
+    items
+  } : undefined;
+};
+
+const toBadgeProps = label => {
+  return label ? {
+    label
+  } : undefined;
+};
+
+const toDateTimeProps = (type, dateString) => {
+  return dateString ? {
+    date: new Date(dateString),
+    type
+  } : undefined;
+};
+
+const toFormattedTextProps = (descriptor, context) => {
+  return context ? {
+    message: {
+      descriptor,
+      values: {
+        context
+      }
+    }
+  } : undefined;
+};
+
+const toLinkProps = (text, url) => {
+  return text ? {
+    text,
+    url
+  } : undefined;
+};
+
 export const createElement = name => {
   const {
     component: BaseElement,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.3.0",
+	"version": "17.3.1",
 	"sideEffects": false
 }

package/dist/esm/view/FlexibleCard/components/blocks/utils.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["name"],
@@ -51,6 +51,10 @@ var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;
 };
 
+var isElementNull = function isElementNull(children) {
+  return Boolean(children.type() === null);
+};
+
 var isElementOrElementGroup = function isElementOrElementGroup(node) {
   return /*#__PURE__*/React.isValidElement(node) && (isFlexibleUiElement(node) || node.type === ElementGroup);
 };
@@ -77,9 +81,13 @@ export var renderElementItems = function renderElementItems() {
     var Element = Elements[name];
 
     if (Element) {
-      return [].concat(_toConsumableArray(acc), [/*#__PURE__*/React.createElement(Element, _extends({
+      var element = /*#__PURE__*/React.createElement(Element, _extends({
         key: idx
-      }, props))]);
+      }, props));
+
+      if (!isElementNull(element)) {
+        return [].concat(_toConsumableArray(acc), [element]);
+      }
     }
 
     return acc;

package/dist/esm/view/FlexibleCard/components/elements/utils.js

@@ -57,17 +57,6 @@ var getContextKey = function getContextKey(name) {
   return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
 };
 
-var getFormattedMessage = function getFormattedMessage(descriptor, value) {
-  return value ? {
-    message: {
-      descriptor: descriptor,
-      values: {
-        context: value
-      }
-    }
-  } : undefined;
-};
-
 var getData = function getData(elementName, contextKey, context) {
   if (!context) {
     return undefined;
@@ -76,52 +65,72 @@ var getData = function getData(elementName, contextKey, context) {
   var data = context[contextKey];
 
   switch (elementName) {
+    case ElementName.AuthorGroup:
+    case ElementName.CollaboratorGroup:
+      return toAvatarGroupProps(data);
+
     case ElementName.CommentCount:
     case ElementName.ProgrammingLanguage:
     case ElementName.SubscriberCount:
-      return {
-        label: data
-      };
-
-    case ElementName.AuthorGroup:
-      return {
-        items: context.authorGroup
-      };
-
-    case ElementName.CollaboratorGroup:
-      return {
-        items: context.collaboratorGroup
-      };
+      return toBadgeProps(data);
 
     case ElementName.CreatedBy:
-      return getFormattedMessage(messages.created_by, context.createdBy);
+      return toFormattedTextProps(messages.created_by, context.createdBy);
+
+    case ElementName.CreatedOn:
+      return toDateTimeProps('created', context.createdOn);
 
     case ElementName.ModifiedBy:
-      return getFormattedMessage(messages.modified_by, context.modifiedBy);
+      return toFormattedTextProps(messages.modified_by, context.modifiedBy);
 
     case ElementName.ModifiedOn:
-      return context.modifiedOn ? {
-        date: new Date(context.modifiedOn),
-        type: 'modified'
-      } : undefined;
-
-    case ElementName.CreatedOn:
-      return context.createdOn ? {
-        date: new Date(context.createdOn),
-        type: 'created'
-      } : undefined;
+      return toDateTimeProps('modified', context.modifiedOn);
 
     case ElementName.Title:
-      return {
-        text: context.title,
-        url: context.url
-      };
+      return toLinkProps(context.title, context.url);
 
     default:
       return data;
   }
 };
 
+var toAvatarGroupProps = function toAvatarGroupProps(items) {
+  return items ? {
+    items: items
+  } : undefined;
+};
+
+var toBadgeProps = function toBadgeProps(label) {
+  return label ? {
+    label: label
+  } : undefined;
+};
+
+var toDateTimeProps = function toDateTimeProps(type, dateString) {
+  return dateString ? {
+    date: new Date(dateString),
+    type: type
+  } : undefined;
+};
+
+var toFormattedTextProps = function toFormattedTextProps(descriptor, context) {
+  return context ? {
+    message: {
+      descriptor: descriptor,
+      values: {
+        context: context
+      }
+    }
+  } : undefined;
+};
+
+var toLinkProps = function toLinkProps(text, url) {
+  return text ? {
+    text: text,
+    url: url
+  } : undefined;
+};
+
 export var createElement = function createElement(name) {
   var _ref = elementMappings[name] || {},
       BaseElement = _ref.component,

package/dist/types/view/FlexibleCard/components/elements/avatar-group/types.d.ts

@@ -1,5 +1,5 @@
 import { ElementProps } from '../types';
-declare type AvatarItemProps = {
+export declare type AvatarItemProps = {
     src?: string;
     name: string;
 };
@@ -7,4 +7,3 @@ export declare type AvatarGroupProps = ElementProps & {
     items?: AvatarItemProps[];
     maxCount?: number;
 };
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.3.0",
+  "version": "17.3.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"