carbon-react 87.2.0 → 88.0.0

package/lib/components/flat-table/flat-table-body/flat-table-body.component.js

@@ -11,11 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const FlatTableBody = ({
+const FlatTableBody = /*#__PURE__*/_react.default.forwardRef(({
   children
-}) => {
-  return /*#__PURE__*/_react.default.createElement("tbody", null, children);
-};
+}, ref) => {
+  return /*#__PURE__*/_react.default.createElement("tbody", {
+    ref: ref
+  }, children);
+});
 
 FlatTableBody.propTypes = {
   /** Array of FlatTableRow. */

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDnd = require("react-dnd");
+
+var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _icon = _interopRequireDefault(require("../../icon/icon.style"));
+
+var _flatTableBody = _interopRequireDefault(require("../flat-table-body/flat-table-body.component"));
+
+var _flatTableCell = _interopRequireDefault(require("../flat-table-cell/flat-table-cell.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const DropTarget = ({
+  children,
+  getOrder,
+  ...rest
+}) => {
+  const [, drop] = (0, _reactDnd.useDrop)({
+    accept: "flatTableRow",
+
+    drop() {
+      getOrder();
+    }
+
+  });
+  return /*#__PURE__*/_react.default.createElement(_flatTableBody.default, _extends({
+    ref: drop
+  }, rest), children);
+};
+
+const FlatTableBodyDraggable = ({
+  children,
+  getOrder
+}) => {
+  const [draggableItems, setDraggableItems] = (0, _react.useState)(_react.default.Children.toArray(children));
+  const isFirstRender = (0, _react.useRef)(true);
+  (0, _react.useEffect)(() => {
+    if (!isFirstRender.current) {
+      setDraggableItems(_react.default.Children.toArray(children));
+    } else {
+      isFirstRender.current = false;
+    }
+  }, [children]);
+
+  const findItem = id => {
+    const draggableItem = draggableItems.filter(item => `${item.props.id}` === id)[0];
+    return {
+      draggableItem,
+      index: draggableItems.indexOf(draggableItem)
+    };
+  };
+
+  const moveItem = (id, atIndex) => {
+    const {
+      draggableItem,
+      index
+    } = findItem(id);
+    const copyOfDraggableItems = [...draggableItems];
+    copyOfDraggableItems.splice(index, 1);
+    copyOfDraggableItems.splice(atIndex, 0, draggableItem);
+    setDraggableItems(copyOfDraggableItems);
+  };
+
+  const getItemsId = () => {
+    if (!getOrder) {
+      return;
+    }
+
+    const draggableItemIds = draggableItems.map(draggableItem => draggableItem.props.id);
+    getOrder(draggableItemIds);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
+    backend: _reactDndHtml5Backend.default
+  }, /*#__PURE__*/_react.default.createElement(DropTarget, {
+    getOrder: getItemsId
+  }, draggableItems.map(item => /*#__PURE__*/_react.default.cloneElement(item, {
+    id: `${item.props.id}`,
+    moveItem,
+    findItem,
+    draggable: true
+  }, [/*#__PURE__*/_react.default.createElement(_flatTableCell.default, {
+    key: item.props.id
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "drag"
+  })), item.props.children]))));
+};
+
+FlatTableBodyDraggable.propTypes = {
+  getOrder: _propTypes.default.func,
+  children: _propTypes.default.node.isRequired
+};
+DropTarget.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  getOrder: _propTypes.default.func
+};
+var _default = FlatTableBodyDraggable;
+exports.default = _default;

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export interface FlatTableBodyDraggableProps {
+  /** Array of FlatTableRow. */
+  children: React.ReactNode;
+  /** Callback fired when order is changed */
+  getOrder?: (draggableItemIds: number[]) => void;
+}
+
+declare function FlatTableBodyDraggable(props: FlatTableBodyDraggableProps): JSX.Element;
+
+export default FlatTableBodyDraggable;

package/lib/components/flat-table/flat-table-body-draggable/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flat-table-body-draggable";
+export * from "./flat-table-body-draggable";

package/lib/components/flat-table/flat-table-body-draggable/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _flatTableBodyDraggable.default;
+  }
+});
+
+var _flatTableBodyDraggable = _interopRequireDefault(require("./flat-table-body-draggable.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDnd = require("react-dnd");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const FlatTableRowDraggable = ({
+  children,
+  id,
+  findItem,
+  moveItem
+}) => {
+  const originalIndex = findItem(id).index;
+  const [{
+    isDragging
+  }, drag] = (0, _reactDnd.useDrag)({
+    item: {
+      type: "flatTableRow",
+      id,
+      originalIndex
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging()
+    }),
+    end: (dropResult, monitor) => {
+      const {
+        id: droppedId,
+        originalIndex: oIndex
+      } = monitor.getItem();
+      const didDrop = monitor.didDrop();
+
+      if (!didDrop) {
+        moveItem(droppedId, oIndex);
+      }
+    }
+  });
+  const [, drop] = (0, _reactDnd.useDrop)({
+    accept: "flatTableRow",
+    canDrop: () => false,
+
+    hover({
+      id: draggedId
+    }) {
+      if (draggedId !== id) {
+        const {
+          index: overIndex
+        } = findItem(id);
+        moveItem(draggedId, overIndex);
+      }
+    }
+
+  });
+  return /*#__PURE__*/_react.default.cloneElement(children, {
+    id,
+    isDragging,
+    ref: node => drag(drop(node))
+  });
+};
+
+FlatTableRowDraggable.propTypes = {
+  /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
+  children: _propTypes.default.node.isRequired,
+
+  /** ID for use in drag and drop functionality */
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+
+  /** function to find an item in the list of draggable items */
+  findItem: _propTypes.default.func.isRequired,
+
+  /** function to reposition an item in the list of draggable items */
+  moveItem: _propTypes.default.func.isRequired,
+
+  /** item is draggable */
+  draggable: _propTypes.default.bool
+};
+var _default = FlatTableRowDraggable;
+exports.default = _default;

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+export interface FlatTableRowDraggableProps {
+  /** Array of FlatTableRow. */
+  children: React.ReactNode;
+  /** ID for use in drag and drop functionality */
+  id?: number | string;
+  /** function to find an item in the list of draggable items */
+  findItem: () => object;
+  /** function to reposition an item in the list of draggable items */
+  moveItem: () => void;
+  /** item is draggable */
+  draggable?: boolean;
+}
+
+declare function FlatTableRowDraggable(props: FlatTableRowDraggableProps): JSX.Element;
+
+export default FlatTableRowDraggable;

package/lib/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -19,6 +19,8 @@ var _flatTableCheckbox = _interopRequireDefault(require("../flat-table-checkbox"
 
 var _flatTableRowHeader = _interopRequireDefault(require("../flat-table-row-header"));
 
+var _flatTableRowDraggable = _interopRequireDefault(require("./__internal__/flat-table-row-draggable.component"));
+
 var _flatTable = require("../flat-table.component");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,7 +46,11 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   bgColor,
   horizontalBorderColor,
   horizontalBorderSize = "small",
-  applyBorderLeft
+  applyBorderLeft,
+  id,
+  draggable,
+  findItem,
+  moveItem
 }, ref) => {
   const [isExpanded, setIsExpanded] = (0, _react.useState)(expanded);
   const rowRef = ref || (0, _react.useRef)();
@@ -123,9 +129,8 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     setIsExpanded(expanded);
   }, [expanded]);
-  return /*#__PURE__*/_react.default.createElement(_drawer.DrawerSidebarContext.Consumer, null, ({
-    isInSidebar
-  }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_flatTableRow.default, _extends({
+
+  const rowComponent = isInSidebar => /*#__PURE__*/_react.default.createElement(_flatTableRow.default, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
     isSubRow: isSubRow,
@@ -143,7 +148,8 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     bgColor: bgColor,
     horizontalBorderColor: horizontalBorderColor,
     horizontalBorderSize: horizontalBorderSize,
-    applyBorderLeft: applyBorderLeft
+    applyBorderLeft: applyBorderLeft,
+    draggable: draggable
   }, interactiveRowProps), _react.default.Children.map(children, (child, index) => {
     return child && /*#__PURE__*/_react.default.cloneElement(child, {
       expandable: expandable && index === firstCellIndex(),
@@ -154,7 +160,17 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
       leftPosition: leftPositions[index],
       ...child.props
     });
-  })), isExpanded && subRows && _react.default.Children.map(subRows, (child, index) => child && /*#__PURE__*/_react.default.cloneElement(child, {
+  }));
+
+  const draggableComponent = isInSidebar => /*#__PURE__*/_react.default.createElement(_flatTableRowDraggable.default, {
+    id: id,
+    moveItem: moveItem,
+    findItem: findItem
+  }, rowComponent(isInSidebar));
+
+  return /*#__PURE__*/_react.default.createElement(_drawer.DrawerSidebarContext.Consumer, null, ({
+    isInSidebar
+  }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, draggable ? draggableComponent(isInSidebar) : rowComponent(isInSidebar), isExpanded && subRows && _react.default.Children.map(subRows, (child, index) => child && /*#__PURE__*/_react.default.cloneElement(child, {
     isSubRow: true,
     isFirstSubRow: index === 0,
     ...child.props
@@ -205,7 +221,28 @@ FlatTableRow.propTypes = {
   stickyOffset: _propTypes.default.number,
 
   /** @ignore @private applies a border-left to the first child */
-  applyBorderLeft: _propTypes.default.bool
+  applyBorderLeft: _propTypes.default.bool,
+
+  /** ID for use in drag and drop functionality
+   * @private
+   * @ignore
+   */
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+
+  /**
+   * @private
+   * @ignore
+   */
+  findItem: _propTypes.default.func,
+
+  /**
+   * @private
+   * @ignore
+   */
+  moveItem: _propTypes.default.func,
+
+  /** @ignore @private position in header if multiple rows */
+  draggable: _propTypes.default.bool
 };
 var _default = FlatTableRow;
 exports.default = _default;

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -92,7 +92,9 @@ const StyledFlatTableRow = _styledComponents.default.tr`
   isFirstSubRow,
   size,
   theme,
-  applyBorderLeft
+  applyBorderLeft,
+  isDragging,
+  draggable
 }) => {
   const backgroundColor = bgColor ? (0, _color.toColor)(theme, bgColor) : undefined;
   const customBorderColor = horizontalBorderColor ? (0, _color.toColor)(theme, horizontalBorderColor) : undefined;
@@ -123,6 +125,9 @@ const StyledFlatTableRow = _styledComponents.default.tr`
 
       ${_flatTableHeader.default} {
         border-bottom: 1px solid ${borderColor(colorTheme, theme)};
+        :first-child {
+          border-left: 1px solid ${borderColor(colorTheme, theme)};
+        }
       }
 
       ${stickyOffset > 0 && (0, _styledComponents.css)`
@@ -255,6 +260,21 @@ const StyledFlatTableRow = _styledComponents.default.tr`
         }
       `}
 
+      ${isDragging && (0, _styledComponents.css)`
+        border: ${isInSidebar ? theme.palette.slateTint(40) : theme.palette.slateTint(55)}
+          2px solid;
+        cursor: grabbing;
+        ${allCellTypes} {
+          background-color: ${isInSidebar ? theme.palette.slateTint(60) : theme.palette.slateTint(75)};
+        }
+      `}
+
+      ${draggable && (0, _styledComponents.css)`
+        ${_icon.default}:first-of-type {
+          font-size: 16px;
+        }
+      `}
+
       ${isFirstSubRow && (0, _styledComponents.css)`
         ${allCellTypes} {
           box-shadow: inset 0 6px 4px -4px ${theme.flatTable.subRow.shadow};

package/lib/components/flat-table/index.d.ts

@@ -5,6 +5,7 @@ export { default as FlatTable } from "./flat-table";
 export { default as FlatTableHead } from "./flat-table-head";
 export { default as FlatTableHeader } from "./flat-table-header";
 export { default as FlatTableBody } from "./flat-table-body";
+export { default as FlatTableBodyDraggable } from "./flat-table-body-draggable";
 export { default as FlatTableRow } from "./flat-table-row";
 export { default as FlatTableRowHeader } from "./flat-table-row-header";
 export { default as FlatTableCell } from "./flat-table-cell";
@@ -14,6 +15,7 @@ export * from "./flat-table";
 export * from "./flat-table-head";
 export * from "./flat-table-header";
 export * from "./flat-table-body";
+export * from "./flat-table-body-draggable";
 export * from "./flat-table-row";
 export * from "./flat-table-row-header";
 export * from "./flat-table-cell";

package/lib/components/flat-table/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "FlatTableCheckbox", {
     return _flatTableCheckbox.default;
   }
 });
+Object.defineProperty(exports, "FlatTableBodyDraggable", {
+  enumerable: true,
+  get: function () {
+    return _flatTableBodyDraggable.default;
+  }
+});
 Object.defineProperty(exports, "Sort", {
   enumerable: true,
   get: function () {
@@ -74,6 +80,8 @@ var _flatTableCell = _interopRequireDefault(require("./flat-table-cell/flat-tabl
 
 var _flatTableCheckbox = _interopRequireDefault(require("./flat-table-checkbox/flat-table-checkbox.component"));
 
+var _flatTableBodyDraggable = _interopRequireDefault(require("./flat-table-body-draggable/flat-table-body-draggable.component"));
+
 var _sort = _interopRequireDefault(require("./sort/sort.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/navigation-bar/navigation-bar.component.js

@@ -24,13 +24,17 @@ const NavigationBar = ({
   isLoading = false,
   children,
   ariaLabel,
+  stickyOffset = "0",
+  stickyPosition,
   ...props
 }) => {
   return /*#__PURE__*/_react.default.createElement(_navigationBar.default, _extends({
     role: "navigation",
     "aria-label": ariaLabel,
     navigationType: navigationType,
-    "data-component": "navigation-bar"
+    "data-component": "navigation-bar",
+    stickyOffset: stickyOffset,
+    stickyPosition: stickyPosition
   }, props), !isLoading && children);
 };
 
@@ -41,11 +45,17 @@ NavigationBar.propTypes = {
   children: _propTypes.default.node,
   ariaLabel: _propTypes.default.string,
 
-  /** color scheme of navigation component */
+  /** Color scheme of navigation component */
   navigationType: _propTypes.default.oneOf(["light", "dark"]),
 
-  /** if 'true' the children will not be visible */
-  isLoading: _propTypes.default.bool
+  /** If 'true' the children will not be visible */
+  isLoading: _propTypes.default.bool,
+
+  /** Defines the position of sticky navigation bar */
+  stickyPosition: _propTypes.default.oneOf(["top", "bottom"]),
+
+  /** Defines the offset of sticky navigation bar */
+  stickyOffset: _propTypes.default.string
 };
 var _default = NavigationBar;
 exports.default = _default;

package/lib/components/navigation-bar/navigation-bar.d.ts

@@ -7,6 +7,8 @@ export interface NavigationBarProp extends SpaceProps {
   ariaLabel?: string;
   navigationType?: "light" | "dark";
   isLoading?: boolean;
+  stickyPosition?: "top" | "bottom";
+  stickyOffset?: string;
 }
 
 declare function NavigationBar(props: NavigationBarProp): JSX.Element;

package/lib/components/navigation-bar/navigation-bar.style.js

@@ -49,6 +49,14 @@ const StyledNavigationBar = _styledComponents.default.nav`
     margin-right: 10px;
   }
 
+  ${({
+  stickyPosition,
+  stickyOffset
+}) => stickyPosition && (0, _styledComponents.css)`
+      position: sticky;
+      ${stickyPosition}: ${stickyOffset}
+    `};
+
   ${({
   navigationType,
   theme

package/lib/components/profile/profile.component.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _ether = require("../../utils/ether/ether");
 
 var _tags = _interopRequireDefault(require("../../utils/helpers/tags/tags"));
@@ -25,117 +23,59 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
-let Profile = /*#__PURE__*/function (_React$Component) {
-  _inherits(Profile, _React$Component);
-
-  var _super = _createSuper(Profile);
-
-  function Profile() {
-    _classCallCheck(this, Profile);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Profile, [{
-    key: "hasSrc",
-    get:
-    /** Determines whether a `src` prop has been supplied */
-    function () {
-      return Boolean(this.props.src);
-    }
-    /** Returns the classes for the component. */
-
-  }, {
-    key: "classes",
-    get: function () {
-      return (0, _classnames.default)(this.props.className);
-    }
-    /** Returns the initials for the name. */
-
-  }, {
-    key: "initials",
-    get: function () {
-      if (this.props.initials) return this.props.initials;
-      return (0, _ether.acronymize)(this.props.name);
-    }
-  }, {
-    key: "marginProps",
-    get: function () {
-      return (0, _utils.filterStyledSystemMarginProps)(this.props);
-    }
-    /** Returns the avatar portion of the profile. */
-
-  }, {
-    key: "avatar",
-    get: function () {
-      if (this.hasSrc) {
-        return /*#__PURE__*/_react.default.createElement(_profile.ProfileAvatarStyle, {
-          src: this.props.src,
-          alt: this.initials,
-          initials: this.initials,
-          size: this.props.size,
-          shape: "square",
-          "data-element": "user-image"
-        });
-      }
-
+const Profile = ({
+  src,
+  className,
+  initials,
+  name,
+  size,
+  email,
+  ...props
+}) => {
+  const getInitials = () => {
+    if (initials) return initials;
+    return (0, _ether.acronymize)(name);
+  };
+
+  const avatar = () => {
+    if (src) {
       return /*#__PURE__*/_react.default.createElement(_profile.ProfileAvatarStyle, {
-        initials: this.initials,
-        gravatar: this.props.email,
-        size: this.props.size
+        src: src,
+        alt: getInitials(),
+        initials: getInitials(),
+        size: size,
+        shape: "square",
+        "data-element": "user-image"
       });
     }
-    /** Returns the text portion of the profile. */
-
-  }, {
-    key: "text",
-    get: function () {
-      return /*#__PURE__*/_react.default.createElement(_profile.ProfileDetailsStyle, {
-        size: this.props.size,
-        hasSrc: this.hasSrc
-      }, /*#__PURE__*/_react.default.createElement(_profile.ProfileNameStyle, {
-        size: this.props.size,
-        "data-element": "name"
-      }, this.props.name), /*#__PURE__*/_react.default.createElement(_profile.ProfileEmailStyle, {
-        size: this.props.size,
-        "data-element": "email"
-      }, this.props.email));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_profile.ProfileStyle, _extends({
-        large: this.props.large,
-        className: this.classes,
-        hasSrc: this.hasSrc
-      }, (0, _tags.default)("profile", this.props), this.marginProps), this.avatar, this.text);
-    }
-  }]);
 
-  return Profile;
-}(_react.default.Component);
+    return /*#__PURE__*/_react.default.createElement(_profile.ProfileAvatarStyle, {
+      initials: getInitials(),
+      gravatar: email,
+      size: size
+    });
+  };
+
+  const text = () => {
+    return /*#__PURE__*/_react.default.createElement(_profile.ProfileDetailsStyle, {
+      size: size,
+      hasSrc: !!src
+    }, /*#__PURE__*/_react.default.createElement(_profile.ProfileNameStyle, {
+      size: size,
+      "data-element": "name"
+    }, name), /*#__PURE__*/_react.default.createElement(_profile.ProfileEmailStyle, {
+      size: size,
+      "data-element": "email"
+    }, email));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_profile.ProfileStyle, _extends({
+    className: className,
+    hasSrc: !!src
+  }, (0, _tags.default)("profile", props), (0, _utils.filterStyledSystemMarginProps)(props)), avatar(), text());
+};
 
 Profile.propTypes = { ...marginPropTypes,
 
@@ -154,14 +94,8 @@ Profile.propTypes = { ...marginPropTypes,
   /** Define initials to display if there is no Gravatar image. */
   initials: _propTypes.default.string,
 
-  /** [Legacy] Enable a larger theme for the name. */
-  large: _propTypes.default.bool,
-
   /** Allow to setup size for the component */
   size: _propTypes.default.oneOf(["XS", "S", "M", "ML", "L", "XL", "XXL"])
 };
-Profile.defaultProps = {
-  large: false
-};
 var _default = Profile;
 exports.default = _default;

package/lib/components/profile/profile.d.ts

@@ -11,8 +11,6 @@ export interface ProfileProps {
   email: string;
   /** Define initials to display if there is no Gravatar image. */
   initials?: string;
-  /** [Legacy] Enable a larger theme for the name. */
-  large?: boolean;
   /** Allow to setup size for the component */
   size?: "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
 }

package/lib/components/tile-select/tile-select.component.js

@@ -56,6 +56,7 @@ const TileSelect = ({
   actionButtonAdornment,
   footer,
   prefixAdornment,
+  additionalInformation,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -125,7 +126,9 @@ const TileSelect = ({
     mr: 3
   }, prefixAdornment), /*#__PURE__*/_react.default.createElement(_box.default, {
     flexGrow: "1"
-  }, /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTitleContainer, null, title && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTitle, checkPropTypeIsNode(title), title), subtitle && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledSubtitle, checkPropTypeIsNode(subtitle), subtitle), titleAdornment && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAdornment, null, titleAdornment)), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, checkPropTypeIsNode(description), description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer)), (customActionButton || checked) && renderActionButton()))));
+  }, /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTitleContainer, null, title && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTitle, checkPropTypeIsNode(title), title), subtitle && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledSubtitle, checkPropTypeIsNode(subtitle), subtitle), titleAdornment && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAdornment, {
+    hasAdditionalInformation: !!additionalInformation
+  }, titleAdornment)), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, checkPropTypeIsNode(description), description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer)), (customActionButton || checked) && renderActionButton()))));
 };
 
 TileSelect.defaultProps = {
@@ -186,7 +189,10 @@ TileSelect.propTypes = { ...marginPropTypes,
   footer: _propTypes.default.node,
 
   /** Component to render in the top left corner of TileSelect */
-  prefixAdornment: _propTypes.default.node
+  prefixAdornment: _propTypes.default.node,
+
+  /** Component to render additional information row between title and description */
+  additionalInformation: _propTypes.default.node
 };
 TileSelect.displayName = "TileSelect";
 var _default = TileSelect;

package/lib/components/tile-select/tile-select.d.ts

@@ -36,6 +36,8 @@ export interface TileSelectProps extends MarginProps {
   footer?: React.ReactNode;
   /** Component to render in the top left corner of TileSelect */
   prefixAdornment?: React.ReactNode;
+  /** Component to render additional information row between title and description */
+  additionalInformation?: React.ReactNode;
 }
 
 declare function TileSelect(props: TileSelectProps): JSX.Element;

package/lib/components/tile-select/tile-select.style.js

@@ -45,7 +45,9 @@ const StyledSubtitle = _styledComponents.default.h4`
 exports.StyledSubtitle = StyledSubtitle;
 const StyledAdornment = _styledComponents.default.div`
   z-index: 500;
-  margin-bottom: 8px;
+  margin-bottom: ${({
+  hasAdditionalInformation
+}) => hasAdditionalInformation ? "4" : "8"}px;
 `;
 exports.StyledAdornment = StyledAdornment;
 const StyledDescription = _styledComponents.default.p`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "87.2.0",
+  "version": "88.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {