carbon-react 97.0.0 → 99.0.0

package/lib/components/detail/detail.component.js

@@ -23,88 +23,30 @@ 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); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default);
 
-let Detail = /*#__PURE__*/function (_React$Component) {
-  _inherits(Detail, _React$Component);
-
-  var _super = _createSuper(Detail);
-
-  function Detail(...args) {
-    var _this;
-
-    _classCallCheck(this, Detail);
-
-    _this = _super.call(this, ...args);
-
-    _defineProperty(_assertThisInitialized(_this), "icon", () => {
-      if (!_this.props.icon) {
-        return null;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_detail.StyledDetailIcon, {
-        type: _this.props.icon,
-        "data-element": "icon"
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "footnote", () => {
-      if (!_this.props.footnote) {
-        return null;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_detail.StyledDetailFootnote, {
-        "data-element": "footnote",
-        hasIcon: _this.props.icon
-      }, _this.props.footnote);
-    });
-
-    return _this;
-  }
-
-  _createClass(Detail, [{
-    key: "render",
-    value:
-    /**
-     * @method render
-     * @return {Object} JSX
-     */
-    function render() {
-      const marginProps = (0, _utils.filterStyledSystemMarginProps)(this.props);
-      return /*#__PURE__*/_react.default.createElement(_detail.StyledDetail, _extends({
-        className: (0, _classnames.default)("carbon-detail", this.props.className),
-        hasIcon: this.props.icon
-      }, (0, _tags.default)("detail", this.props), marginProps), this.icon(), /*#__PURE__*/_react.default.createElement(_detail.StyledDetailContent, {
-        "data-element": "detail-content",
-        hasIcon: this.props.icon
-      }, this.props.children), this.footnote());
-    }
-  }]);
-
-  return Detail;
-}(_react.default.Component);
+const Detail = ({
+  className,
+  icon,
+  footnote,
+  children,
+  ...rest
+}) => {
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
+  return /*#__PURE__*/_react.default.createElement(_detail.StyledDetail, _extends({
+    className: (0, _classnames.default)("carbon-detail", className),
+    hasIcon: icon
+  }, (0, _tags.default)("detail", rest), marginProps), icon && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailIcon, {
+    type: icon,
+    "data-element": "icon"
+  }), /*#__PURE__*/_react.default.createElement(_detail.StyledDetailContent, {
+    "data-element": "detail-content",
+    hasIcon: icon
+  }, children), footnote && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailFootnote, {
+    "data-element": "footnote",
+    hasIcon: icon
+  }, footnote));
+};
 
 Detail.propTypes = { ...marginPropTypes,
 
@@ -114,7 +56,7 @@ Detail.propTypes = { ...marginPropTypes,
   className: _propTypes.default.string,
 
   /**
-   * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
+   * <a href="https://carbon.sage.com/?path=/docs/icon--list-of-icons#list-of-icons" target="_blank">List of supported icons</a>
    *
    * The type of icon to use.
    */

package/lib/components/portrait/portrait-gravatar.component.js

@@ -19,82 +19,36 @@ 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); }
-
-let PortraitGravatar = /*#__PURE__*/function (_React$Component) {
-  _inherits(PortraitGravatar, _React$Component);
-
-  var _super = _createSuper(PortraitGravatar);
-
-  function PortraitGravatar() {
-    _classCallCheck(this, PortraitGravatar);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(PortraitGravatar, [{
-    key: "gravatarSrc",
-    value:
-    /** Generates the Gravatar URL for the specified email address and dimensions. */
-    function gravatarSrc() {
-      const {
-        gravatarEmail,
-        size
-      } = this.props;
-      const {
-        dimensions
-      } = _portrait2.PORTRAIT_SIZE_PARAMS[size];
-      const base = "https://www.gravatar.com/avatar/";
-      const hash = (0, _md.default)(gravatarEmail.toLowerCase());
-      const fallbackOption = "404"; // "Return an HTTP 404 File Not Found response"
-
-      /** @see https://en.gravatar.com/site/implement/images/#default-image */
-
-      return `${base}${hash}?s=${dimensions}&d=${fallbackOption}`;
-    }
-    /** Renders the component. */
-
-  }, {
-    key: "render",
-    value: function render() {
-      const {
-        alt,
-        size,
-        shape,
-        errorCallback,
-        ...otherProps
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitGravatar, _extends({
-        src: this.gravatarSrc(),
-        alt: alt,
-        size: size,
-        shape: shape,
-        onError: errorCallback,
-        "data-element": "user-image"
-      }, otherProps));
-    }
-  }]);
-
-  return PortraitGravatar;
-}(_react.default.Component);
+const PortraitGravatar = ({
+  gravatarEmail,
+  size,
+  alt,
+  shape,
+  errorCallback,
+  ...rest
+}) => {
+  const gravatarSrc = () => {
+    const {
+      dimensions
+    } = _portrait2.PORTRAIT_SIZE_PARAMS[size];
+    const base = "https://www.gravatar.com/avatar/";
+    const hash = (0, _md.default)(gravatarEmail.toLowerCase());
+    const fallbackOption = "404"; // "Return an HTTP 404 File Not Found response"
+
+    /** @see https://en.gravatar.com/site/implement/images/#default-image */
+
+    return `${base}${hash}?s=${dimensions}&d=${fallbackOption}`;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitGravatar, _extends({
+    src: gravatarSrc(),
+    alt: alt,
+    size: size,
+    shape: shape,
+    onError: errorCallback,
+    "data-element": "user-image"
+  }, rest));
+};
 
 PortraitGravatar.propTypes = {
   /** The theme to use. */

package/lib/components/portrait/portrait-initials.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,145 +21,73 @@ var _portrait2 = require("./portrait.config");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-let PortraitInitials = /*#__PURE__*/function (_React$Component) {
-  _inherits(PortraitInitials, _React$Component);
+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; }
 
-  var _super = _createSuper(PortraitInitials);
-
-  function PortraitInitials(...args) {
-    var _this;
-
-    _classCallCheck(this, PortraitInitials);
-
-    _this = _super.call(this, ...args);
-
-    _defineProperty(_assertThisInitialized(_this), "cachedImageDataUrl", null);
-
-    return _this;
-  }
-
-  _createClass(PortraitInitials, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value:
-    /** Invoked before a mounted component receives new props. */
-    function UNSAFE_componentWillReceiveProps(nextProps) {
-      const shouldClearCache = this.props.theme !== nextProps.theme || this.props.initials !== nextProps.initials || this.props.size !== nextProps.size || this.props.darkBackground !== nextProps.darkBackground;
+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); }
 
-      if (shouldClearCache) {
-        this.cachedImageDataUrl = null;
-      }
-    }
-    /** Generates a graphic with initials. */
-
-  }, {
-    key: "generateDataUrl",
-    value: function generateDataUrl() {
-      if (this.cachedImageDataUrl) {
-        return this.cachedImageDataUrl;
-      }
-
-      const {
-        theme,
-        size,
-        darkBackground
-      } = this.props;
-      const {
-        textColor,
-        bgColor
-      } = (0, _portrait.getColorsForInitials)(theme, darkBackground);
-
-      let canvas = _browser.default.getDocument().createElement("canvas");
-
-      let context = canvas.getContext("2d");
-      let {
-        dimensions
-      } = _portrait2.PORTRAIT_SIZE_PARAMS[size];
-      dimensions -= 2; // Set canvas with & height
-
-      canvas.width = dimensions;
-      canvas.height = dimensions; // Select a font family to support different language characters
-      // like Arial
-
-      context.font = `${Math.round(canvas.width / 2.4)}px Lato, Arial`;
-      context.textAlign = "center"; // Setup background and front color
-
-      context = this.applyBackground(context, dimensions, bgColor);
-      context = this.applyText(context, dimensions, textColor); // Set image representation in default format (png)
-
-      const dataURI = canvas.toDataURL(); // Dispose canvas element
-
-      canvas = null;
-      this.cachedImageDataUrl = dataURI;
-      return this.cachedImageDataUrl;
-    }
-    /** Applies the background colour to the canvas. */
-
-  }, {
-    key: "applyBackground",
-    value: function applyBackground(canvasContext, dimensions, bgColor) {
-      canvasContext.fillStyle = bgColor;
-      canvasContext.fillRect(0, 0, dimensions, dimensions);
-      return canvasContext;
+const PortraitInitials = ({
+  theme,
+  initials,
+  size,
+  shape,
+  darkBackground,
+  alt,
+  ...rest
+}) => {
+  const [cachedImageDataUrl, setCachedImageDataUrl] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    setCachedImageDataUrl(null);
+  }, [theme, initials, size, darkBackground]);
+
+  const generateDataUrl = () => {
+    if (cachedImageDataUrl) {
+      return cachedImageDataUrl;
     }
-    /** Applies the initials text to the canvas. */
-
-  }, {
-    key: "applyText",
-    value: function applyText(canvasContext, dimensions, textColor) {
-      const letters = this.props.initials.slice(0, 3);
-      canvasContext.fillStyle = textColor;
-      canvasContext.fillText(letters.toUpperCase(), dimensions / 2, dimensions / 1.5);
-      return canvasContext;
-    }
-    /** Renders the component. */
-
-  }, {
-    key: "render",
-    value: function render() {
-      const {
-        size,
-        shape,
-        theme,
-        ...otherProps
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitials, _extends({
-        "data-element": "initials",
-        size: size,
-        shape: shape,
-        theme: theme
-      }, otherProps), /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitialsImg, {
-        src: this.generateDataUrl(),
-        alt: this.props.alt
-      }));
-    }
-  }]);
 
-  return PortraitInitials;
-}(_react.default.Component);
+    const {
+      textColor,
+      bgColor
+    } = (0, _portrait.getColorsForInitials)(theme, darkBackground);
+
+    let canvas = _browser.default.getDocument().createElement("canvas");
+
+    const context = canvas.getContext("2d");
+    let {
+      dimensions
+    } = _portrait2.PORTRAIT_SIZE_PARAMS[size];
+    dimensions -= 2; // Set canvas with & height
+
+    canvas.width = dimensions;
+    canvas.height = dimensions; // Select a font family to support different language characters
+    // like Arial
+
+    context.font = `${Math.round(canvas.width / 2.4)}px Lato, Arial`;
+    context.textAlign = "center"; // Setup background and front color
+
+    context.fillStyle = bgColor;
+    context.fillRect(0, 0, dimensions, dimensions);
+    context.fillStyle = textColor;
+    context.fillText(initials.slice(0, 3).toUpperCase(), dimensions / 2, dimensions / 1.5); // Set image representation in default format (png)
+
+    const dataURI = canvas.toDataURL(); // Dispose canvas element
+
+    canvas = null;
+    setCachedImageDataUrl(dataURI);
+    return dataURI;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitials, _extends({
+    "data-element": "initials",
+    size: size,
+    shape: shape,
+    theme: theme
+  }, rest), /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitialsImg, {
+    src: generateDataUrl(),
+    alt: alt
+  }));
+};
 
 PortraitInitials.propTypes = {
   /** The theme to use. */

package/lib/components/portrait/portrait.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -25,159 +25,101 @@ var _utils = require("../../style/utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+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 _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); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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 marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
-let Portrait = /*#__PURE__*/function (_React$Component) {
-  _inherits(Portrait, _React$Component);
-
-  var _super = _createSuper(Portrait);
-
-  function Portrait(...args) {
-    var _this;
-
-    _classCallCheck(this, Portrait);
-
-    _this = _super.call(this, ...args);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      externalError: false
+const Portrait = ({
+  alt,
+  darkBackground,
+  gravatar,
+  iconType,
+  initials,
+  shape,
+  size,
+  src,
+  onClick,
+  tooltipMessage,
+  tooltipId,
+  tooltipIsVisible,
+  tooltipPosition,
+  tooltipType,
+  tooltipSize,
+  tooltipBgColor,
+  tooltipFontColor,
+  ...rest
+}) => {
+  const [externalError, setExternalError] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setExternalError(false);
+  }, [gravatar, src]);
+  const tagProps = (0, _tags.default)("portrait", rest);
+
+  const renderComponent = () => {
+    let portrait = /*#__PURE__*/_react.default.createElement(_portrait.StyledIcon, {
+      type: iconType,
+      size: size,
+      shape: shape,
+      darkBackground: darkBackground
     });
 
-    return _this;
-  }
-
-  _createClass(Portrait, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      const relevantPropsChanged = this.props.gravatar !== prevProps.gravatar || this.props.src !== prevProps.src;
-
-      if (relevantPropsChanged) {
-        this.setState({
-          externalError: false
-        }); // eslint-disable-line react/no-did-update-set-state
-      }
-    }
-  }, {
-    key: "getMarginProps",
-    value: function getMarginProps() {
-      return (0, _utils.filterStyledSystemMarginProps)(this.props);
-    }
-  }, {
-    key: "externalImageLoadFailed",
-    value: function externalImageLoadFailed() {
-      this.setState({
-        externalError: true
+    if (initials) {
+      portrait = /*#__PURE__*/_react.default.createElement(_portraitInitials.default, {
+        size: size,
+        shape: shape,
+        initials: initials,
+        darkBackground: darkBackground,
+        alt: alt
       });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      const {
-        alt,
-        darkBackground,
-        gravatar,
-        iconType,
-        initials,
-        shape,
-        size,
-        src,
-        onClick,
-        tooltipMessage,
-        tooltipId,
-        tooltipIsVisible,
-        tooltipPosition,
-        tooltipType,
-        tooltipSize,
-        tooltipBgColor,
-        tooltipFontColor
-      } = this.props;
-      const tagProps = (0, _tags.default)("portrait", this.props);
-
-      let portrait = /*#__PURE__*/_react.default.createElement(_portrait.StyledIcon, {
-        type: iconType,
+
+    if (src && !externalError) {
+      portrait = /*#__PURE__*/_react.default.createElement(_portrait.StyledCustomImg, {
+        src: src,
+        alt: alt,
         size: size,
         shape: shape,
-        darkBackground: darkBackground
+        "data-element": "user-image",
+        onError: () => setExternalError(true)
       });
+    }
 
-      if (initials) {
-        portrait = /*#__PURE__*/_react.default.createElement(_portraitInitials.default, {
-          size: size,
-          shape: shape,
-          initials: initials,
-          darkBackground: darkBackground,
-          alt: alt
-        });
-      }
-
-      if (src && !this.state.externalError) {
-        portrait = /*#__PURE__*/_react.default.createElement(_portrait.StyledCustomImg, {
-          src: src,
-          alt: alt,
-          size: size,
-          shape: shape,
-          "data-element": "user-image",
-          onError: () => this.externalImageLoadFailed()
-        });
-      }
-
-      if (gravatar && !this.state.externalError) {
-        portrait = /*#__PURE__*/_react.default.createElement(_portraitGravatar.default, {
-          gravatarEmail: gravatar,
-          shape: shape,
-          size: size,
-          alt: alt,
-          errorCallback: () => this.externalImageLoadFailed()
-        });
-      }
-
-      if (tooltipMessage) {
-        return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-          message: tooltipMessage,
-          id: tooltipId,
-          position: tooltipPosition,
-          type: tooltipType,
-          size: tooltipSize,
-          isVisible: tooltipIsVisible,
-          bgColor: tooltipBgColor,
-          fontColor: tooltipFontColor
-        }, /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitContainer, _extends({}, this.getMarginProps(), {
-          onClick: onClick
-        }, tagProps), portrait));
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitContainer, _extends({}, this.getMarginProps(), {
+    if (gravatar && !externalError) {
+      portrait = /*#__PURE__*/_react.default.createElement(_portraitGravatar.default, {
+        gravatarEmail: gravatar,
+        shape: shape,
+        size: size,
+        alt: alt,
+        errorCallback: () => setExternalError(true)
+      });
+    }
+
+    if (tooltipMessage) {
+      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        message: tooltipMessage,
+        id: tooltipId,
+        position: tooltipPosition,
+        type: tooltipType,
+        size: tooltipSize,
+        isVisible: tooltipIsVisible,
+        bgColor: tooltipBgColor,
+        fontColor: tooltipFontColor
+      }, /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitContainer, _extends({}, (0, _utils.filterStyledSystemMarginProps)(rest), {
         onClick: onClick
-      }, tagProps), portrait);
+      }, tagProps), portrait));
     }
-  }]);
 
-  return Portrait;
-}(_react.default.Component);
+    return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitContainer, _extends({}, (0, _utils.filterStyledSystemMarginProps)(rest), {
+      onClick: onClick
+    }, tagProps), portrait);
+  };
+
+  return renderComponent();
+};
 
 Portrait.propTypes = { ...marginPropTypes,
 

package/lib/components/search/search.component.js

@@ -175,6 +175,7 @@ const Search = ({
     onKeyDown: onKeyDown,
     inputRef: assignInput
   }), searchButton && /*#__PURE__*/_react.default.createElement(_search.StyledSearchButton, null, Boolean(isFocused || (!isControlled ? searchValue.length : value.length)) && /*#__PURE__*/_react.default.createElement(_button.default, _extends({
+    tabIndex: iconTabIndex,
     size: "medium",
     px: "16px"
   }, buttonProps), /*#__PURE__*/_react.default.createElement(_search.StyledButtonIcon, null, /*#__PURE__*/_react.default.createElement(_icon.default, {

package/lib/components/toast/toast.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -27,167 +27,107 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-let Toast = /*#__PURE__*/function (_React$Component) {
-  _inherits(Toast, _React$Component);
-
-  var _super = _createSuper(Toast);
-
-  function Toast(props) {
-    var _this;
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-    _classCallCheck(this, Toast);
+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; }
 
-    _this = _super.call(this, props);
+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); }
 
-    _defineProperty(_assertThisInitialized(_this), "dismissToast", ev => {
-      const isTopmost = _modalManager.default.isTopmost(_this.toastRef.current);
+const Toast = ({
+  as = "warning",
+  children,
+  className,
+  id,
+  isCenter = true,
+  maxWidth,
+  onDismiss,
+  open = true,
+  targetPortalId,
+  timeout,
+  variant,
+  ...restProps
+}) => {
+  const toastRef = (0, _react.useRef)();
+  const timer = (0, _react.useRef)();
+  const componentClasses = (0, _react.useMemo)(() => {
+    return (0, _classnames.default)(className);
+  }, [className]);
+  const dismissToast = (0, _react.useCallback)(ev => {
+    const isTopmost = _modalManager.default.isTopmost(toastRef.current);
+
+    if (onDismiss && _events.default.isEscKey(ev) && isTopmost) {
+      ev.stopImmediatePropagation();
+      onDismiss(ev);
+    }
+  }, [onDismiss]);
+  (0, _react.useEffect)(() => {
+    const currentElement = toastRef.current;
 
-      if (_this.props.onDismiss && _events.default.isEscKey(ev) && isTopmost) {
-        ev.stopImmediatePropagation();
+    _modalManager.default.addModal(currentElement);
 
-        _this.props.onDismiss(ev);
-      }
-    });
+    document.addEventListener("keyup", dismissToast);
+    return () => {
+      _modalManager.default.removeModal(currentElement);
 
-    _this.toastRef = /*#__PURE__*/_react.default.createRef();
-    _this.timer = /*#__PURE__*/_react.default.createRef();
-    return _this;
-  }
+      document.removeEventListener("keyup", dismissToast);
+    };
+  }, [dismissToast]);
+  (0, _react.useEffect)(() => {
+    clearTimeout(timer.current);
 
-  _createClass(Toast, [{
-    key: "componentClasses",
-    get:
-    /** Classes to be applied to the component. */
-    function () {
-      return (0, _classnames.default)(this.props.className);
+    if (!timeout || !open || !onDismiss) {
+      return;
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      _modalManager.default.addModal(this.toastRef.current);
 
-      document.addEventListener("keyup", this.dismissToast);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      _modalManager.default.removeModal(this.toastRef.current);
+    timer.current = setTimeout(() => onDismiss(), timeout);
+  }, [onDismiss, open, timeout]);
+
+  function renderCloseIcon() {
+    if (!onDismiss) return null;
+    return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+      "data-element": "close",
+      onAction: onDismiss
+    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+      type: "close"
+    }));
+  }
 
-      document.removeEventListener("keyup", this.dismissToast);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      const {
-        timeout,
-        open,
-        onDismiss
-      } = this.props;
-      clearTimeout(this.timer.current);
-
-      if (!timeout || !open) {
-        return;
+  function renderToastContent() {
+    if (!open) return null;
+    const toastProps = {
+      isCenter,
+      variant: variant || as,
+      id,
+      maxWidth
+    };
+    return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+      enter: true,
+      classNames: "toast",
+      timeout: {
+        appear: 1600,
+        enter: 1500,
+        exit: 500
       }
+    }, /*#__PURE__*/_react.default.createElement(_toast.ToastStyle, _extends({
+      className: componentClasses
+    }, (0, _tags.default)(restProps["data-component"] || "toast", restProps), toastProps), /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
+      variant: toastProps.variant
+    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+      type: toastProps.variant
+    })), /*#__PURE__*/_react.default.createElement(_toast.ToastContentStyle, {
+      variant: toastProps.variant,
+      isDismiss: onDismiss
+    }, children), renderCloseIcon()));
+  }
 
-      this.timer.current = setTimeout(() => onDismiss(), timeout);
-    }
-  }, {
-    key: "closeIcon",
-    value: function closeIcon() {
-      const {
-        onDismiss
-      } = this.props;
-      if (!onDismiss) return null;
-      return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-        "data-element": "close",
-        onAction: onDismiss
-      }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-        type: "close"
-      }));
-    }
-    /** Content rendered for the toast. */
-
-  }, {
-    key: "toastContent",
-    value: function toastContent() {
-      if (!this.props.open) return null;
-      const {
-        isCenter,
-        variant,
-        id,
-        as,
-        onDismiss,
-        children,
-        maxWidth
-      } = this.props;
-      const toastProps = {
-        isCenter,
-        variant: variant || as,
-        id,
-        maxWidth
-      };
-      return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
-        enter: true,
-        classNames: "toast",
-        timeout: {
-          appear: 1600,
-          enter: 1500,
-          exit: 500
-        }
-      }, /*#__PURE__*/_react.default.createElement(_toast.ToastStyle, _extends({
-        className: this.componentClasses
-      }, (0, _tags.default)(this.props["data-component"] || "toast", this.props), toastProps), /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
-        variant: toastProps.variant
-      }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-        type: toastProps.variant
-      })), /*#__PURE__*/_react.default.createElement(_toast.ToastContentStyle, {
-        variant: toastProps.variant,
-        isDismiss: onDismiss
-      }, children), this.closeIcon()));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      const {
-        targetPortalId,
-        isCenter
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement(_toast.StyledPortal, {
-        id: targetPortalId,
-        isCenter: isCenter
-      }, /*#__PURE__*/_react.default.createElement(_toast.ToastWrapper, {
-        isCenter: isCenter,
-        ref: this.toastRef
-      }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, this.toastContent())));
-    }
-  }]);
-
-  return Toast;
-}(_react.default.Component);
+  return /*#__PURE__*/_react.default.createElement(_toast.StyledPortal, {
+    id: targetPortalId,
+    isCenter: isCenter
+  }, /*#__PURE__*/_react.default.createElement(_toast.ToastWrapper, {
+    isCenter: isCenter,
+    ref: toastRef
+  }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, renderToastContent())));
+};
 
 Toast.propTypes = {
   /** Customizes the appearance in the DLS theme */
@@ -226,11 +166,5 @@ Toast.propTypes = {
   /** Maximum toast width */
   maxWidth: _propTypes.default.string
 };
-Toast.defaultProps = {
-  as: "warning",
-  onDismiss: null,
-  open: true,
-  isCenter: true
-};
 var _default = Toast;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "97.0.0",
+  "version": "99.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -97,6 +97,7 @@
     "cypress": "^8.3.1",
     "cypress-axe": "^0.13.0",
     "cypress-cucumber-preprocessor": "^4.2.0",
+    "cypress-each": "^1.5.0",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.5.1",
     "cypress-storybook": "^0.5.1",
@@ -119,6 +120,7 @@
     "events": "~1.1.1",
     "husky": "^4.3.6",
     "jest": "^26.6.3",
+    "jest-canvas-mock": "^2.3.1",
     "jest-styled-components": "^6.3.1",
     "lint-staged": "^10.5.3",
     "mockdate": "^2.0.2",
@@ -137,7 +139,7 @@
   "dependencies": {
     "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.9.0",
-    "@sage/design-tokens": "^1.73.0",
+    "@sage/design-tokens": "^1.80.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "classnames": "~2.2.6",