carbon-react 96.0.0 → 98.0.0

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -212,8 +212,8 @@ const MultiActionButton = ({
 
 MultiActionButton.propTypes = { ...marginPropTypes,
 
-  /** Button type: "primary" | "secondary". */
-  buttonType: _propTypes.default.oneOf(["primary", "secondary"]),
+  /** Button type: "primary" | "secondary" | "tertiary" */
+  buttonType: _propTypes.default.oneOf(["primary", "secondary", "tertiary"]),
 
   /** The additional button to display. */
   children: _propTypes.default.node.isRequired,

package/lib/components/multi-action-button/multi-action-button.config.js

@@ -8,5 +8,5 @@ const MULTI_ACTION_BUTTON_ALIGNMENTS = ["left", "right"];
 exports.MULTI_ACTION_BUTTON_ALIGNMENTS = MULTI_ACTION_BUTTON_ALIGNMENTS;
 const MULTI_ACTION_BUTTON_SIZES = ["small", "medium", "large"];
 exports.MULTI_ACTION_BUTTON_SIZES = MULTI_ACTION_BUTTON_SIZES;
-const MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary"];
+const MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];
 exports.MULTI_ACTION_BUTTON_THEMES = MULTI_ACTION_BUTTON_THEMES;

package/lib/components/multi-action-button/multi-action-button.d.ts

@@ -1,5 +1,8 @@
 import SplitButton from "../split-button";
 
-declare class MultiActionButton extends SplitButton {}
+declare class MultiActionButton extends SplitButton {
+  /** Button type: "primary" | "secondary" | "tertiary" */
+  buttonType?: "primary" | "secondary" | "tertiary";
+}
 
 export default MultiActionButton;

package/lib/components/textarea/textarea-test.stories.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _specialCharacters = _interopRequireWildcard(require("../../../.storybook/utils/argTypes/specialCharacters"));
+
+var _ = _interopRequireDefault(require("."));
+
+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); }
+
+var _default = {
+  component: _.default,
+  title: "Textarea/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  },
+  argTypes: {
+    labelAlign: {
+      options: ["left", "right"],
+      control: {
+        type: "select"
+      }
+    },
+    cols: {
+      control: {
+        min: 0,
+        max: 100,
+        step: 1,
+        type: "range"
+      }
+    },
+    rows: {
+      control: {
+        min: 0,
+        max: 100,
+        step: 1,
+        type: "range"
+      }
+    },
+    inputWidth: {
+      control: {
+        min: 0,
+        max: 100,
+        step: 1,
+        type: "range"
+      }
+    },
+    labelWidth: {
+      control: {
+        min: 0,
+        max: 100,
+        step: 1,
+        type: "range"
+      }
+    },
+    adaptiveLabelBreakpoint: {
+      control: {
+        type: "number"
+      }
+    },
+    placeholderSpecialCharacters: _specialCharacters.default,
+    labelSpecialCharacters: _specialCharacters.default,
+    labelHelpSpecialCharacters: _specialCharacters.default,
+    characterLimitSpecialCharacters: {
+      options: [..._specialCharacters.default.options, ..._specialCharacters.number.options],
+      mapping: { ..._specialCharacters.default.mapping,
+        ..._specialCharacters.number.mapping
+      }
+    },
+    fieldHelpSpecialCharacters: _specialCharacters.default
+  },
+  args: {
+    expandable: false,
+    cols: 0,
+    rows: 0,
+    disabled: false,
+    autoFocus: false,
+    readOnly: false,
+    placeholder: "",
+    fieldHelp: "",
+    characterLimit: "",
+    inputWidth: 100,
+    warnOverLimit: false,
+    enforceCharacterLimit: true,
+    label: "",
+    labelHelp: "",
+    labelInline: false,
+    labelWidth: 30,
+    labelAlign: undefined,
+    adaptiveLabelBreakpoint: undefined,
+    required: false,
+    placeholderSpecialCharacters: undefined,
+    labelSpecialCharacters: undefined,
+    labelHelpSpecialCharacters: undefined,
+    characterLimitSpecialCharacters: undefined,
+    fieldHelpSpecialCharacters: undefined
+  }
+};
+exports.default = _default;
+
+const Default = ({
+  placeholder,
+  placeholderSpecialCharacters,
+  label,
+  labelSpecialCharacters,
+  labelHelp,
+  labelHelpSpecialCharacters,
+  characterLimit,
+  characterLimitSpecialCharacters,
+  fieldHelp,
+  fieldHelpSpecialCharacters,
+  ...args
+}) => {
+  const [state, setState] = (0, _react.useState)("");
+
+  const handleChange = ({
+    target: {
+      value
+    }
+  }) => {
+    setState(value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    name: "textarea",
+    onChange: handleChange,
+    value: state,
+    placeholder: placeholder || placeholderSpecialCharacters,
+    label: label || labelSpecialCharacters,
+    labelHelp: labelHelp || labelHelpSpecialCharacters,
+    helpAriaLabel: labelHelp || labelHelpSpecialCharacters,
+    characterLimit: characterLimit || characterLimitSpecialCharacters,
+    fieldHelp: fieldHelp || fieldHelpSpecialCharacters
+  }));
+};
+
+exports.Default = Default;

package/lib/components/textarea/textarea.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.OriginalTextarea = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -35,229 +35,167 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 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 _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-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 _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 _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 getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
-let Textarea = /*#__PURE__*/function (_React$Component) {
-  _inherits(Textarea, _React$Component);
-
-  var _super = _createSuper(Textarea);
-
-  function Textarea(...args) {
-    var _this;
-
-    _classCallCheck(this, Textarea);
-
-    _this = _super.call(this, ...args);
-
-    _defineProperty(_assertThisInitialized(_this), "minHeight", 0);
-
-    _defineProperty(_assertThisInitialized(_this), "id", _this.props.id || (0, _guid.default)());
-
-    _defineProperty(_assertThisInitialized(_this), "_input", /*#__PURE__*/_react.default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "expandTextarea", () => {
-      const textarea = _this._input.current;
-
-      if (textarea.scrollHeight > _this.minHeight) {
-        // Reset height to zero - IE specific
-        textarea.style.height = "0px"; // Set the height so all content is shown
-
-        textarea.style.height = `${Math.max(textarea.scrollHeight, _this.minHeight)}px`;
-      }
-    });
+const Textarea = ({
+  autoFocus,
+  fieldHelp,
+  label,
+  size,
+  children,
+  characterLimit,
+  enforceCharacterLimit = true,
+  warnOverLimit = false,
+  onChange,
+  disabled = false,
+  labelInline,
+  labelAlign,
+  labelHelp,
+  labelSpacing,
+  inputIcon,
+  id: idProp,
+  error,
+  warning,
+  info,
+  name,
+  readOnly = false,
+  placeholder,
+  expandable = false,
+  rows,
+  cols,
+  validationOnLabel = false,
+  adaptiveLabelBreakpoint,
+  inputWidth,
+  labelWidth = 30,
+  tooltipPosition,
+  value,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  helpAriaLabel,
+  ...props
+}) => {
+  const locale = (0, _react.useContext)(_i18nContext.default);
+  const {
+    current: id
+  } = (0, _react.useRef)(idProp || (0, _guid.default)());
+  const inputRef = (0, _react.useRef)();
+  const minHeight = (0, _react.useRef)(0);
+
+  const expandTextarea = () => {
+    const textarea = inputRef.current;
+
+    if (textarea.scrollHeight > minHeight.current) {
+      // Reset height to zero - IE specific
+      textarea.style.height = "0px"; // Set the height so all content is shown
+
+      textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
+    }
+  };
 
-    return _this;
-  }
-
-  _createClass(Textarea, [{
-    key: "componentDidMount",
-    value:
-    /**
-     * A lifecycle method that is called after initial render.
-     * Allows access to refs and DOM to set expandable variables
-     */
-    function componentDidMount() {
-      if (this.props.expandable) {
-        window.addEventListener("resize", this.expandTextarea); // Set the min height to the initially rendered height.
-        // Without minHeight expandable textareas will only have
-        // one line when no content is present.
-
-        this.minHeight = this._input.current.clientHeight;
-        this.expandTextarea();
-      }
+  (0, _react.useEffect)(() => {
+    if (expandable) {
+      expandTextarea();
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.props.expandable) {
-        window.removeEventListener("resize", this.expandTextarea);
-      }
+  });
+  (0, _react.useEffect)(() => {
+    if (expandable) {
+      window.addEventListener("resize", expandTextarea);
+      minHeight.current = inputRef.current.clientHeight;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      const {
-        expandable
-      } = this.props;
 
+    return () => {
       if (expandable) {
-        this.expandTextarea();
-      }
-    }
-  }, {
-    key: "overLimit",
-    get: function () {
-      const value = this.props.value || "";
-      return value.length > parseInt(this.props.characterLimit, 10);
-    }
-  }, {
-    key: "characterCount",
-    get: function () {
-      const value = this.props.value || "";
-      const {
-        characterLimit,
-        warnOverLimit
-      } = this.props;
-
-      if (!characterLimit) {
-        return null;
+        window.removeEventListener("resize", expandTextarea);
       }
+    };
+  }, [expandable]);
 
-      return /*#__PURE__*/_react.default.createElement(_characterCount.default, {
-        isOverLimit: this.overLimit && warnOverLimit,
-        value: getFormatNumber(value.length, this.context.locale()),
-        limit: getFormatNumber(characterLimit, this.context.locale()),
-        "data-element": "character-limit"
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      const {
-        autoFocus,
-        fieldHelp,
-        label,
-        size,
-        children,
-        characterLimit,
-        enforceCharacterLimit,
-        onChange,
-        disabled,
-        labelInline,
-        labelAlign,
-        labelHelp,
-        labelSpacing,
-        inputIcon,
-        error,
-        warning,
-        info,
-        name,
-        readOnly,
-        placeholder,
-        rows,
-        cols,
-        validationOnLabel,
-        adaptiveLabelBreakpoint,
-        inputWidth,
-        labelWidth,
-        tooltipPosition,
-        "data-component": dataComponent,
-        "data-element": dataElement,
-        "data-role": dataRole,
-        helpAriaLabel,
-        ...props
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
-        helpAriaLabel: helpAriaLabel,
-        tooltipPosition: tooltipPosition
-      }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_textarea.default, _extends({
-        labelInline: labelInline,
-        "data-component": dataComponent,
-        "data-role": dataRole,
-        "data-element": dataElement
-      }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_formField.default, {
-        fieldHelp: fieldHelp,
-        error: error,
-        warning: warning,
-        info: info,
-        label: label,
-        disabled: disabled,
-        id: this.id,
-        labelInline: labelInline,
-        labelAlign: labelAlign,
-        labelWidth: labelWidth,
-        labelHelp: labelHelp,
-        labelSpacing: labelSpacing,
-        isRequired: props.required,
-        useValidationIcon: validationOnLabel,
-        adaptiveLabelBreakpoint: adaptiveLabelBreakpoint
-      }, /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
-        size: size,
-        disabled: disabled,
-        readOnly: readOnly,
-        inputWidth: typeof inputWidth === "number" ? inputWidth : 100 - labelWidth,
-        error: error,
-        warning: warning,
-        info: info
-      }, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
-        autoFocus: autoFocus,
-        name: name,
-        "aria-invalid": !!error,
-        ref: this._input,
-        maxLength: enforceCharacterLimit && characterLimit ? characterLimit : undefined,
-        onChange: onChange,
-        disabled: disabled,
-        readOnly: readOnly,
-        labelInline: labelInline,
-        placeholder: disabled ? "" : placeholder,
-        rows: rows,
-        cols: cols,
-        id: this.id,
-        as: "textarea"
-      }, props)), children, /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, {
-        disabled: disabled,
-        readOnly: readOnly,
-        inputIcon: inputIcon,
-        size: size,
-        error: error,
-        warning: warning,
-        info: info,
-        useValidationIcon: !validationOnLabel
-      }))), this.characterCount)));
+  const isOverLimit = () => {
+    return (value || "").length > parseInt(characterLimit, 10);
+  };
+
+  const characterCount = () => {
+    if (!characterLimit) {
+      return null;
     }
-  }]);
 
-  return Textarea;
-}(_react.default.Component);
+    return /*#__PURE__*/_react.default.createElement(_characterCount.default, {
+      isOverLimit: isOverLimit() && warnOverLimit,
+      value: getFormatNumber((value || "").length, locale.locale()),
+      limit: getFormatNumber(characterLimit, locale.locale()),
+      "data-element": "character-limit"
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    tooltipPosition: tooltipPosition,
+    helpAriaLabel: helpAriaLabel
+  }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_textarea.default, _extends({
+    labelInline: labelInline,
+    "data-component": dataComponent,
+    "data-role": dataRole,
+    "data-element": dataElement
+  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_formField.default, {
+    fieldHelp: fieldHelp,
+    error: error,
+    warning: warning,
+    info: info,
+    label: label,
+    disabled: disabled,
+    id: id,
+    labelInline: labelInline,
+    labelAlign: labelAlign,
+    labelWidth: labelWidth,
+    labelHelp: labelHelp,
+    labelSpacing: labelSpacing,
+    isRequired: props.required,
+    useValidationIcon: validationOnLabel,
+    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint
+  }, /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
+    size: size,
+    disabled: disabled,
+    readOnly: readOnly,
+    inputWidth: typeof inputWidth === "number" ? inputWidth : 100 - labelWidth,
+    error: error,
+    warning: warning,
+    info: info
+  }, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
+    autoFocus: autoFocus,
+    name: name,
+    "aria-invalid": !!error,
+    ref: inputRef,
+    maxLength: enforceCharacterLimit && characterLimit ? characterLimit : undefined,
+    onChange: onChange,
+    disabled: disabled,
+    readOnly: readOnly,
+    labelInline: labelInline,
+    placeholder: disabled ? "" : placeholder,
+    rows: rows,
+    cols: cols,
+    id: id,
+    as: "textarea"
+  }, props)), children, /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, {
+    disabled: disabled,
+    readOnly: readOnly,
+    inputIcon: inputIcon,
+    size: size,
+    error: error,
+    warning: warning,
+    info: info,
+    useValidationIcon: !validationOnLabel
+  }))), characterCount())));
+};
 
 exports.OriginalTextarea = Textarea;
-Textarea.contextType = _i18nContext.default;
 Textarea.propTypes = { ...marginPropTypes,
 
   /** Automatically focus the input on component mount */
@@ -381,14 +319,5 @@ Textarea.propTypes = { ...marginPropTypes,
   /** Aria label for rendered help component */
   helpAriaLabel: _propTypes.default.string
 };
-Textarea.defaultProps = {
-  labelWidth: 30,
-  disabled: false,
-  expandable: false,
-  enforceCharacterLimit: true,
-  readOnly: false,
-  warnOverLimit: false,
-  validationOnLabel: false
-};
 var _default = Textarea;
 exports.default = _default;

package/lib/components/textarea/textarea.d.ts

@@ -74,7 +74,7 @@ export interface TextareaProps
   helpAriaLabel?: string;
 }
 
-declare class Textarea extends React.Component<TextareaProps> {}
+declare function Textarea(props: TextareaProps): JSX.Element;
 
 export { Textarea as OriginalTextarea };
 export default Textarea;

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": "96.0.0",
+  "version": "98.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -31,8 +31,7 @@
     "babel": "cross-env NODE_ENV=production babel ./src --config-file ./babel.config.js --out-dir ./lib --ignore '**/*/__spec__.js','**/*.spec.js','**/__definition__.js' --quiet",
     "clean-lib": "rimraf ./lib",
     "copy-files": "cpy \"**/\" \"!**/(*.js|*.md|*.mdx|*.stories.*|*.snap)\" ../lib/ --cwd=src --parents",
-    "commit": "git-cz",
-    "chromatic": "chromatic"
+    "commit": "git-cz"
   },
   "repository": {
     "type": "git",
@@ -89,6 +88,7 @@
     "babel-jest": "^26.6.3",
     "browserslist": "^4.16.6",
     "chalk": "^4.1.1",
+    "chromatic": "^6.0.5",
     "commitizen": "^4.2.4",
     "conventional-changelog-conventionalcommits": "^4.5.0",
     "core-js": "^3.1.4",
@@ -137,7 +137,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",