carbon-react 101.4.5 → 102.2.0

package/lib/__internal__/label/icon-wrapper.style.js

@@ -11,8 +11,6 @@ var _validationIcon = _interopRequireDefault(require("../validations/validation-
 
 var _help = _interopRequireDefault(require("../../components/help/help.style"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const IconWrapperStyle = _styledComponents.default.div`
@@ -27,17 +25,12 @@ const IconWrapperStyle = _styledComponents.default.div`
   vertical-align: top;
 
   :focus {
-    outline: ${({
-  theme
-}) => `2px solid ${theme.colors.focus}`};
+    outline: 2px solid var(--colorsSemanticFocus500);
   }
 
   ${_validationIcon.default}, ${_help.default} {
     position: static;
   }
 `;
-IconWrapperStyle.defaultProps = {
-  theme: _base.default
-};
 var _default = IconWrapperStyle;
 exports.default = _default;

package/lib/__internal__/label/label.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 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; }
@@ -18,36 +16,30 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 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; }
 
 const LabelStyle = _styledComponents.default.label`
-  color: ${({
-  theme
-}) => theme.text.color};
+  color: var(--colorsYin090);
   display: block;
-  font-weight: 600;
+  font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
 
   ${({
-  isRequired,
-  theme
+  isRequired
 }) => isRequired && (0, _styledComponents.css)`
       ::after {
         content: "*";
-        color: ${theme.colors.asterisk};
+        color: var(--colorsSemanticNegative500);
         font-weight: 700;
-        margin-left: ${theme.spacing}px;
+        margin-left: var(--spacing100);
       }
     `}
 
   ${({
-  disabled,
-  theme
+  disabled
 }) => disabled && (0, _styledComponents.css)`
-      color: ${theme.disabled.disabled};
+      color: var(--colorsYin030);
     `}
 `;
-LabelStyle.defaultProps = {
-  theme: _base.default
-};
 LabelStyle.propTypes = {
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+  isRequired: _propTypes.default.bool
 };
 const StyledLabelContainer = _styledComponents.default.div`
   display: flex;
@@ -59,16 +51,15 @@ const StyledLabelContainer = _styledComponents.default.div`
   inline,
   pr,
   pl,
-  width,
-  theme
+  width
 }) => inline && (0, _styledComponents.css)`
       box-sizing: border-box;
       margin-bottom: 0;
       ${pr && (0, _styledComponents.css)`
-        padding-right: ${pr * theme.spacing}px;
+        padding-right: var(${pr === 1 ? "--spacing100" : "--spacing200"});
       `};
       ${pl && (0, _styledComponents.css)`
-        padding-left: ${pl * theme.spacing}px;
+        padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
       `};
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
       width: ${width === 0 ? StyledLabelContainer.defaultProps.width : width}%;
@@ -79,7 +70,7 @@ const StyledLabelContainer = _styledComponents.default.div`
 }) => optional && (0, _styledComponents.css)`
       ::after {
         content: "(optional)";
-        font-weight: 350;
+        font-weight: 350; //TODO: (tokens) use token var(--fontWeights400)
         margin-left: 4px;
       }
     `}
@@ -87,14 +78,12 @@ const StyledLabelContainer = _styledComponents.default.div`
 exports.StyledLabelContainer = StyledLabelContainer;
 StyledLabelContainer.defaultProps = {
   align: "right",
-  theme: _base.default,
   width: 30
 };
 StyledLabelContainer.propTypes = {
   align: _propTypes.default.oneOf(["left", "right"]),
   inline: _propTypes.default.bool,
   width: _propTypes.default.number,
-  readOnly: _propTypes.default.bool,
   pr: _propTypes.default.number,
   pl: _propTypes.default.number
 };

package/lib/components/button-toggle/button-toggle-input.component.js

@@ -19,6 +19,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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 ButtonToggleInput = /*#__PURE__*/_react.default.forwardRef((props, forwardRef) => {
   const {
     onFocus,
@@ -41,18 +43,13 @@ const ButtonToggleInput = /*#__PURE__*/_react.default.forwardRef((props, forward
     if (onFocus) onFocus(ev);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggleInput, {
+  return /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggleInput, _extends({}, props, {
     type: "radio",
-    name: props.name,
     id: props.guid,
-    disabled: props.disabled,
-    checked: props.checked,
-    onChange: props.onChange,
     onBlur: handleBlur,
     onFocus: handleFocus,
-    value: props.value,
     ref: forwardRef
-  });
+  }));
 });
 
 ButtonToggleInput.propTypes = {

package/lib/components/button-toggle/button-toggle.component.js

@@ -27,10 +27,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const ButtonToggle = props => {
   const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     buttonIcon,
     buttonIconSize,
     checked,
     children,
+    "data-component": dataComponent,
+    "data-element": dataElement,
+    "data-role": dataRole,
     disabled,
     grouped,
     name,
@@ -50,8 +55,10 @@ const ButtonToggle = props => {
 
   if (buttonIcon) {
     icon = /*#__PURE__*/_react.default.createElement(_buttonToggleIcon.default, {
+      "aria-hidden": true,
       buttonIcon: buttonIcon,
       buttonIconSize: buttonIconSize,
+      hasNoContent: !children,
       disabled: disabled
     });
   }
@@ -61,10 +68,15 @@ const ButtonToggle = props => {
   }
 
   return /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggle, {
-    "data-component": "button-toggle",
+    "data-component": dataComponent || "button-toggle",
+    "data-element": dataElement,
+    "data-role": dataRole,
     grouped: grouped,
     onClick: handleClick
   }, /*#__PURE__*/_react.default.createElement(_buttonToggleInput.default, {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "data-element": "button-toggle-input",
     name: name,
     checked: checked,
     disabled: disabled,
@@ -86,9 +98,24 @@ const ButtonToggle = props => {
 };
 
 ButtonToggle.propTypes = {
+  /** Prop to specify the aria-label of the component */
+  "aria-label": _propTypes.default.string,
+
+  /** Prop to specify the aria-labelledby property of the component */
+  "aria-labelledby": _propTypes.default.string,
+
   /** Set the checked value of the radio button */
   checked: _propTypes.default.bool,
 
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": _propTypes.default.string,
+
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": _propTypes.default.string,
+
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": _propTypes.default.string,
+
   /** Name used on the hidden radio button. */
   name: _propTypes.default.string,
 

package/lib/components/button-toggle/button-toggle.d.ts

@@ -2,10 +2,20 @@ import * as React from "react";
 import { ButtonToggleIconSizes } from "./button-toggle-types";
 
 export interface ButtonToggleProps {
+  /** Prop to specify the aria-label of the component */
+  "aria-label"?: string;
+  /** Prop to specify the aria-labelledby property of the component */
+  "aria-labelledby"?: string;
   /** buttonIcon to render. */
   buttonIcon?: string;
   /** Sets the size of the buttonIcon (eg. large) */
   buttonIconSize?: ButtonToggleIconSizes;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
   /** ButtonToggle size */
   size?: "small" | "medium" | "large";
   /** Set the checked value of the radio button */

package/lib/components/button-toggle/button-toggle.style.js

@@ -134,8 +134,11 @@ const iconFontSizes = {
   largeIcon: 32
 };
 const StyledButtonToggleIcon = _styledComponents.default.div`
-  margin-right: 8px;
-
+  ${({
+  hasNoContent
+}) => hasNoContent ? "" : (0, _styledComponents.css)`
+          margin-right: 8px;
+        `}
   ${({
   buttonIconSize
 }) => buttonIconSize === "large" && (0, _styledComponents.css)`

package/lib/components/button-toggle-group/button-toggle-group.component.js

@@ -80,7 +80,7 @@ const ButtonToggleGroup = ({
     "data-element": dataElement
   }, validationProps, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.default, _extends({
     "aria-label": label,
-    role: "group",
+    role: "radiogroup",
     inputWidth: inputWidth
   }, validationProps), /*#__PURE__*/_react.default.createElement(_radioButtonMapper.default, {
     name: name,

package/lib/components/decimal/decimal.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,268 +21,211 @@ var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-conte
 
 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 _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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 _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 Decimal = /*#__PURE__*/function (_React$Component) {
-  _inherits(Decimal, _React$Component);
-
-  var _super = _createSuper(Decimal);
-
-  function Decimal(props, context) {
-    var _this;
-
-    _classCallCheck(this, Decimal);
-
-    _this = _super.call(this, props, context);
-
-    _defineProperty(_assertThisInitialized(_this), "emptyValue", _this.props.allowEmptyValue ? "" : "0.00");
-
-    _defineProperty(_assertThisInitialized(_this), "callOnChange", () => {
-      if (_this.props.onChange) {
-        _this.props.onChange(_this.createEvent());
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onChange", ev => {
-      const {
-        target: {
-          value
-        }
-      } = ev;
-
-      _this.setState({
-        value: _this.toStandardDecimal(value),
-        visibleValue: value
-      }, () => {
-        _this.callOnChange();
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onBlur", () => {
-      let shouldCallOnChange = false;
-
-      _this.setState(({
-        value,
-        visibleValue
-      }) => {
-        if (!visibleValue) {
-          shouldCallOnChange = value !== _this.emptyValue;
-          return {
-            value: _this.emptyValue,
-            visibleValue: _this.formatValue(_this.emptyValue)
-          };
-        }
-
-        return {
-          visibleValue: _this.formatValue(value)
-        };
-      }, () => {
-        if (shouldCallOnChange) {
-          _this.callOnChange();
-        }
+const Decimal = ({
+  align = "right",
+  defaultValue,
+  precision = 2,
+  inputWidth,
+  readOnly,
+  onChange,
+  onBlur,
+  onKeyPress,
+  id,
+  name,
+  allowEmptyValue = false,
+  required,
+  locale,
+  value,
+  ...rest
+}) => {
+  const l = (0, _react.useContext)(_i18nContext.default);
+  const emptyValue = allowEmptyValue ? "" : "0.00";
+
+  const getSafeValueProp = initialValue => {
+    // We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
+    (0, _invariant.default)(typeof initialValue === "string", "Decimal `value` prop must be a string");
+
+    if (initialValue && !allowEmptyValue) {
+      (0, _invariant.default)(initialValue !== "", "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or `0.00`");
+    }
 
-        if (_this.props.onBlur) {
-          _this.props.onBlur(_this.createEvent());
-        }
-      });
-    });
+    return initialValue;
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "createEvent", () => {
-      const standardVisible = _this.toStandardDecimal(_this.state.visibleValue);
-
-      const formattedValue = _this.isNaN(standardVisible) ? _this.state.visibleValue : _this.formatValue(standardVisible);
-      return {
-        target: {
-          name: _this.props.name,
-          id: _this.props.id,
-          value: {
-            rawValue: _this.state.value,
-            formattedValue
-          }
-        }
-      };
-    });
+  const getSeparator = (0, _react.useCallback)(separatorType => {
+    const numberWithGroupAndDecimalSeparator = 10000.1;
+    return Intl.NumberFormat(locale || l.locale()).formatToParts(numberWithGroupAndDecimalSeparator).find(part => part.type === separatorType).value;
+  }, [l, locale]);
+  const isNaN = (0, _react.useCallback)(valueToTest => {
+    return Number.isNaN(Number(valueToTest));
+  }, []);
+  /**
+   * Format a user defined value
+   */
 
-    _defineProperty(_assertThisInitialized(_this), "isNaN", value => {
-      return Number.isNaN(Number(value));
-    });
+  const formatValue = (0, _react.useCallback)(valueToFormat => {
+    if (isNaN(valueToFormat)) {
+      return valueToFormat;
+    }
+    /* Guards against any white-space only strings like "   " being 
+     mishandled and returned as `NaN` for the value displayed in the textbox */
 
-    _defineProperty(_assertThisInitialized(_this), "getSafeValueProp", isInitialValue => {
-      const {
-        value,
-        allowEmptyValue
-      } = _this.props; // We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
 
-      (0, _invariant.default)(typeof value === "string", "Decimal `value` prop must be a string");
+    if (valueToFormat === "" || valueToFormat.match(/\s+/g)) {
+      return valueToFormat;
+    }
 
-      if (isInitialValue && !allowEmptyValue) {
-        (0, _invariant.default)(value !== "", "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or `0.00`");
-      }
+    const separator = getSeparator("decimal");
+    const [integer, remainder] = valueToFormat.split(".");
+    const formattedInteger = Intl.NumberFormat(locale || l.locale(), {
+      maximumFractionDigits: 0
+    }).format(integer);
+    let formattedNumber = formattedInteger;
+
+    if ((remainder === null || remainder === void 0 ? void 0 : remainder.length) > precision) {
+      formattedNumber += `${separator + remainder}`;
+    } else if ((remainder === null || remainder === void 0 ? void 0 : remainder.length) <= precision) {
+      formattedNumber += `${separator + remainder + "0".repeat(precision - remainder.length)}`;
+    } else {
+      formattedNumber += `${precision ? separator + "0".repeat(precision) : ""}`;
+    }
 
-      return value;
-    });
+    return formattedNumber;
+  }, [getSeparator, isNaN, l, locale, precision]); // Return previous value before state is changed. Used to compare prevState and newState.
 
-    _defineProperty(_assertThisInitialized(_this), "removeDelimiters", value => {
-      const delimiterMatcher = new RegExp(`[\\${_this.getSeparator("group")} ]*`, "g");
-      return value.replace(delimiterMatcher, "");
+  function usePrevious(arg) {
+    const ref = (0, _react.useRef)();
+    (0, _react.useEffect)(() => {
+      ref.current = arg;
     });
+    return ref.current;
+  }
+  /**
+   * Determine if the precision value has changed from the previous ref value for precision
+   */
 
-    _defineProperty(_assertThisInitialized(_this), "formatValue", value => {
-      if (_this.isNaN(value)) {
-        return value;
-      }
-      /* Guards against any white-space only strings like "   " being 
-         mishandled and returned as `NaN` for visibleValue */
-
-
-      if (value === "" || value.match(/\s+/g)) {
-        return value;
-      }
-
-      const separator = _this.getSeparator("decimal");
-
-      const [integer, remainder] = value.split(".");
-      const formattedInteger = Intl.NumberFormat(_this.props.locale || _this.context.locale(), {
-        maximumFractionDigits: 0
-      }).format(integer);
-      let formattedNumber = formattedInteger;
-
-      if (remainder && remainder.length > _this.props.precision) {
-        formattedNumber += `${separator + remainder}`;
-      } else if (remainder && remainder.length <= _this.props.precision) {
-        formattedNumber += `${separator + remainder + "0".repeat(_this.props.precision - remainder.length)}`;
-      } else {
-        formattedNumber += `${_this.props.precision ? separator + "0".repeat(_this.props.precision) : ""}`;
-      }
 
-      return formattedNumber;
-    });
+  const prevPrecisionValue = usePrevious(precision);
+  (0, _react.useEffect)(() => {
+    if (prevPrecisionValue && prevPrecisionValue !== precision) {
+      // eslint-disable-next-line no-console
+      console.error("Decimal `precision` prop has changed value. Changing the Decimal `precision` prop has no effect.");
+    }
+  }, [precision]);
+  const removeDelimiters = (0, _react.useCallback)(valueToFormat => {
+    const delimiterMatcher = new RegExp(`[\\${getSeparator("group")} ]*`, "g");
+    return valueToFormat.replace(delimiterMatcher, "");
+  }, [getSeparator]);
+  /**
+   * Convert raw input to a standard decimal format
+   */
 
-    _defineProperty(_assertThisInitialized(_this), "toStandardDecimal", i18nValue => {
-      const valueWithoutNBS = _this.getSeparator("group").match(/\s+/) && !i18nValue.match(/\s{2,}/) ? i18nValue.replace(/\s+/g, "") : i18nValue;
-      /* If a value is passed in that is a number but has too many delimiters in succession, we want to handle this
-      value without formatting it or removing delimiters. We also want to consider that,
-      if a value consists of only delimiters, we want to treat that 
-      value in the same way as if the value was NaN. We want to pass this value to the 
-      formatValue function, before the delimiters can be removed. */
+  const toStandardDecimal = (0, _react.useCallback)(i18nValue => {
+    const valueWithoutNBS = getSeparator("group").match(/\s+/) && !i18nValue.match(/\s{2,}/) ? i18nValue.replace(/\s+/g, "") : i18nValue;
+    /* If a value is passed in that is a number but has too many delimiters in succession, we want to handle this
+    value without formatting it or removing delimiters. We also want to consider that,
+    if a value consists of only delimiters, we want to treat that 
+    value in the same way as if the value was NaN. We want to pass this value to the 
+    formatValue function, before the delimiters can be removed. */
 
-      const errorsWithDelimiter = new RegExp(`([^A-Za-z0-9]{2,})|(^[^A-Za-z0-9-]+)|([^0-9a-z-,.])|([^0-9-,.]+)|([W,.])$`, "g");
+    const errorsWithDelimiter = new RegExp(`([^A-Za-z0-9]{2,})|(^[^A-Za-z0-9-]+)|([^0-9a-z-,.])|([^0-9-,.]+)|([W,.])$`, "g");
+    const separator = getSeparator("decimal");
+    const separatorRegex = new RegExp(separator === "." ? `\\${separator}` : separator, "g");
 
-      const separator = _this.getSeparator("decimal");
+    if (valueWithoutNBS.match(errorsWithDelimiter) || (valueWithoutNBS.match(separatorRegex) || []).length > 1) {
+      return valueWithoutNBS;
+    }
 
-      const separatorRegex = new RegExp(separator === "." ? `\\${separator}` : separator, "g");
+    const withoutDelimiters = removeDelimiters(valueWithoutNBS);
+    return withoutDelimiters.replace(new RegExp(`\\${separator}`, "g"), ".");
+  }, [getSeparator, removeDelimiters]);
+  const decimalValue = getSafeValueProp(defaultValue || value || emptyValue);
+  const [stateValue, setStateValue] = (0, _react.useState)(isNaN(toStandardDecimal(decimalValue)) ? decimalValue : formatValue(decimalValue));
 
-      if (valueWithoutNBS.match(errorsWithDelimiter) || (valueWithoutNBS.match(separatorRegex) || []).length > 1) {
-        return valueWithoutNBS;
+  const createEvent = (formatted, raw) => {
+    return {
+      target: {
+        name,
+        id,
+        value: {
+          formattedValue: formatValue(toStandardDecimal(formatted)),
+          rawValue: raw || toStandardDecimal(formatted)
+        }
       }
-
-      const withoutDelimiters = _this.removeDelimiters(valueWithoutNBS);
-
-      return withoutDelimiters.replace(new RegExp(`\\${separator}`, "g"), ".");
-    });
-
-    const isControlled = _this.isControlled();
-
-    const _value = isControlled ? _this.getSafeValueProp(true) : _this.props.defaultValue || _this.emptyValue;
-
-    _this.state = {
-      value: _value,
-      visibleValue: _this.formatValue(_value),
-      isControlled
     };
-    return _this;
-  }
+  };
+
+  const handleOnChange = ev => {
+    const {
+      value: val
+    } = ev.target;
+    setStateValue(val);
+    if (onChange) onChange(createEvent(val));
+  };
+
+  const handleOnBlur = ev => {
+    const {
+      value: updatedValue
+    } = ev.target;
+    let event;
+
+    if (updatedValue) {
+      const standardVisible = toStandardDecimal(updatedValue);
+      const formattedValue = isNaN(standardVisible) ? updatedValue : formatValue(standardVisible);
+      event = createEvent(formattedValue, standardVisible);
+      setStateValue(formattedValue);
+    } else {
+      event = createEvent(emptyValue);
+      setStateValue(emptyValue);
+    }
 
-  _createClass(Decimal, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      const message = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-      const isControlled = this.isControlled();
-      (0, _invariant.default)(this.state.isControlled === isControlled, message);
+    if (onBlur) onBlur(event);
+  };
 
-      if (prevProps.precision !== this.props.precision) {
-        // eslint-disable-next-line no-console
-        console.error("Decimal `precision` prop has changed value. Changing the Decimal `precision` prop has no effect.");
-      }
+  const isComponentControlled = value !== undefined;
+  const prevControlledState = usePrevious(isComponentControlled);
+  (0, _react.useEffect)(() => {
+    const message = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
+    (0, _invariant.default)(prevControlledState !== isComponentControlled, message);
+  }, [isComponentControlled]);
+  (0, _react.useEffect)(() => {
+    const unformattedValue = toStandardDecimal(stateValue);
 
-      if (isControlled) {
-        const valueProp = this.getSafeValueProp();
+    if (isComponentControlled) {
+      const valueProp = getSafeValueProp(value);
 
-        if (valueProp !== prevState.value) {
-          this.setState({
-            value: valueProp,
-            visibleValue: this.formatValue(valueProp)
-          });
-        }
+      if (unformattedValue !== valueProp) {
+        setStateValue(formatValue(value));
       }
-    }
-  }, {
-    key: "isControlled",
-    value:
-    /**
-     * Determine if the component is controlled at the time of call
-     */
-    function isControlled() {
-      return this.props.value !== undefined;
-    }
-  }, {
-    key: "getSeparator",
-    value: function getSeparator(separatorType) {
-      const numberWithGroupAndDecimalSeparator = 10000.1;
-      return Intl.NumberFormat(this.props.locale || this.context.locale()).formatToParts(numberWithGroupAndDecimalSeparator).find(part => part.type === separatorType).value;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      const {
-        name,
-        defaultValue,
-        locale,
-        ...rest
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, rest, {
-        onChange: this.onChange,
-        onBlur: this.onBlur,
-        value: this.state.visibleValue
-      })), /*#__PURE__*/_react.default.createElement("input", {
-        name: name,
-        value: this.toStandardDecimal(this.state.visibleValue),
-        type: "hidden",
-        "data-component": "hidden-input"
-      }));
-    }
-  }]);
-
-  return Decimal;
-}(_react.default.Component);
-
-_defineProperty(Decimal, "maxPrecision", 15);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [value]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
+    onKeyPress: onKeyPress,
+    align: align,
+    readOnly: readOnly,
+    required: required,
+    inputWidth: inputWidth,
+    onChange: handleOnChange,
+    onBlur: handleOnBlur,
+    value: stateValue,
+    "data-component": "decimal"
+  }, rest)), /*#__PURE__*/_react.default.createElement("input", {
+    name: name,
+    value: toStandardDecimal(stateValue),
+    type: "hidden",
+    "data-component": "hidden-input"
+  }));
+};
 
-Decimal.contextType = _i18nContext.default;
 Decimal.propTypes = {
   /** Styled-system margin props */
   ...marginPropTypes,
@@ -300,7 +243,7 @@ Decimal.propTypes = {
    */
   // eslint-disable-next-line consistent-return
   precision: props => {
-    if (!Number.isInteger(props.precision) || props.precision < 0 || props.precision > Decimal.maxPrecision) {
+    if (!Number.isInteger(props.precision) || props.precision < 0 || props.precision > 15) {
       return new Error("Precision prop must be a number greater than 0 or equal to or less than 15.");
     }
   },
@@ -366,11 +309,5 @@ Decimal.propTypes = {
   /** Aria label for rendered help component */
   helpAriaLabel: _propTypes.default.string
 };
-Decimal.defaultProps = {
-  align: "right",
-  precision: 2,
-  allowEmptyValue: false,
-  "data-component": "decimal"
-};
 var _default = Decimal;
 exports.default = _default;

package/lib/components/radio-button/radio-button.style.js

@@ -37,10 +37,9 @@ const RadioButtonStyle = (0, _styledComponents.default)(_checkbox.default)`
   fieldHelpInline,
   reverse,
   size,
-  theme,
   inline
 }) => (0, _styledComponents.css)`
-    margin-bottom: ${theme.space[2]}px;
+    margin-bottom: var(--spacing150);
 
     :last-of-type {
       margin-bottom: 0;
@@ -79,16 +78,16 @@ const RadioButtonStyle = (0, _styledComponents.default)(_checkbox.default)`
     }
 
     ${_hiddenCheckableInput.default}:checked + ${_checkableInputSvgWrapper.default} circle {
-      fill: ${theme.text.color};
+      fill: var(--colorsUtilityYin090);
     }
 
     ${disabled && (0, _styledComponents.css)`
       circle {
-        fill: ${theme.disabled.input};
+        fill: var(--colorsCtilityDisabled400);
       }
 
       ${_hiddenCheckableInput.default}:checked + ${_checkableInputSvgWrapper.default} circle {
-        fill: ${theme.disabled.border};
+        fill: var(--colorsUtilityDisabled600);
       }
     `}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "101.4.5",
+  "version": "102.2.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -17,7 +17,8 @@
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
     "test": "jest --config=./jest.conf.json",
     "test-update": "jest --config=./jest.conf.json --updateSnapshot",
-    "test-cypress": "cypress open",
+    "test:cypress": "cypress open",
+    "cypress:react": "npx cypress open-ct",
     "debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
     "format": "prettier --write './src'",
     "lint": "eslint ./src",
@@ -27,7 +28,7 @@
     "watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
     "build-storybook": "build-storybook -c .storybook -s .assets",
     "start:static": "npx http-server -p 9001 ./storybook-static",
-    "babel": "cross-env NODE_ENV=production babel ./src --config-file ./babel.config.js --out-dir ./lib --ignore '**/*/__spec__.js','**/*.spec.js','**/__definition__.js' --quiet",
+    "babel": "cross-env NODE_ENV=production babel ./src --config-file ./babel.config.js --out-dir ./lib --ignore '**/*/__spec__.js','**/*.spec.js','**/__definition__.js','**/*.test.js' --quiet",
     "clean-lib": "rimraf ./lib",
     "copy-files": "cpy \"**/\" \"!**/(*.js|*.md|*.mdx|*.stories.*|*.snap)\" ../lib/ --cwd=src --parents",
     "commit": "git-cz",
@@ -59,6 +60,8 @@
     "@babel/preset-typescript": "7.12.7",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@cypress/react": "^5.9.2",
+    "@cypress/webpack-dev-server": "^1.4.0",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/exec": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -136,7 +139,8 @@
     "semver": "^7.3.5",
     "sprintf-js": "^1.1.2",
     "styled-components": "^4.4.1",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.5",
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
     "@octokit/rest": "^18.12.0",