carbon-react 101.4.2 → 102.0.0

package/lib/__internal__/character-count/character-count.component.js

@@ -25,8 +25,9 @@ const CharacterCount = ({
   theme,
   ...props
 }) => /*#__PURE__*/_react.default.createElement(_characterCount.default, _extends({
-  theme: theme
-}, props), value, "/", limit);
+  theme: theme,
+  "aria-live": "polite"
+}, props), `${value}/${limit}`);
 
 exports.CharacterCount = CharacterCount;
 CharacterCount.propTypes = {

package/lib/__internal__/label/label.component.js

@@ -65,8 +65,9 @@ const Label = ({
   pl,
   isRequired
 }) => {
-  const [isFocused, setFocus] = (0, _react.useState)(false);
   const {
+    hasFocus,
+    hasMouseOver,
     onMouseEnter,
     onMouseLeave
   } = (0, _react.useContext)(_inputBehaviour.InputContext);
@@ -86,11 +87,6 @@ const Label = ({
   };
 
   const icon = () => {
-    const wrapperProps = {
-      onFocus: () => setFocus(true),
-      onBlur: () => setFocus(false)
-    };
-
     if (useValidationIcon && shouldDisplayValidationIcon({
       error,
       warning,
@@ -113,11 +109,11 @@ const Label = ({
       }));
     }
 
-    return help && /*#__PURE__*/_react.default.createElement(_iconWrapper.default, wrapperProps, /*#__PURE__*/_react.default.createElement(_help.default, {
+    return help && /*#__PURE__*/_react.default.createElement(_iconWrapper.default, null, /*#__PURE__*/_react.default.createElement(_help.default, {
       tooltipId: tooltipId,
       tabIndex: helpTabIndex,
       type: helpIcon,
-      isFocused: isFocused
+      isFocused: hasFocus || hasMouseOver
     }, help));
   };
 

package/lib/__internal__/popover/popover.component.js

@@ -15,6 +15,8 @@ var _core = require("@popperjs/core");
 
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 
+var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -33,6 +35,7 @@ const Popover = ({
 
   if (!elementDOM.current && !disablePortal) {
     elementDOM.current = document.createElement("div");
+    elementDOM.current.classList.add(_carbonScopedTokensProvider.tokensClassName);
     document.body.appendChild(elementDOM.current);
   }
 

package/lib/__internal__/validations/validation-icon.component.js

@@ -91,7 +91,8 @@ const ValidationIcon = ({
     onBlur: e => {
       setTriggeredByIcon(false);
       if (onBlur) onBlur(e);
-    }
+    },
+    isPartOfInput: isPartOfInput
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_icon.default, {
     key: `${validationType}-icon`,
     type: validationType,

package/lib/__internal__/validations/validation-icon.style.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
@@ -15,9 +15,13 @@ var _icon = _interopRequireDefault(require("../../components/icon/icon.style"));
 
 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; }
+
 const ValidationIconStyle = _styledComponents.default.span`
   background: none;
-  cursor: pointer;
+  cursor: default;
   display: flex;
   align-items: center;
   margin-top: 0;
@@ -25,6 +29,12 @@ const ValidationIconStyle = _styledComponents.default.span`
   border: 0;
   outline: none;
 
+  ${({
+  isPartOfInput
+}) => isPartOfInput && (0, _styledComponents.css)`
+      cursor: pointer;
+    `}
+
   ${_icon.default}:before {
     color: ${({
   validationType,

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/help/help.component.js

@@ -139,7 +139,7 @@ Help.propTypes = { ...marginPropTypes,
   /** A path for the anchor */
   href: _propTypes.default.string,
 
-  /** A boolean received from IconWrapper */
+  /** Overrides the visibility of the Tooltip if true */
   isFocused: _propTypes.default.bool,
 
   /** <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>

package/lib/components/help/help.d.ts

@@ -13,7 +13,7 @@ export interface HelpProps extends MarginProps {
   helpId?: string;
   /** A path for the anchor */
   href?: string;
-  /** A boolean received from IconWrapper */
+  /** Overrides the visibility of the Tooltip if true */
   isFocused?: boolean;
   /** Overrides the default tabindex of the component */
   tabIndex?: number | string;

package/lib/components/portal/portal.js

@@ -15,6 +15,8 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 
 var _browser = _interopRequireDefault(require("../../__internal__/utils/helpers/browser"));
 
+var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -63,7 +65,7 @@ const Portal = ({
       setPortalNode(node);
     } else if (!node) {
       node = document.createElement("div");
-      node.classList.add(portalClassName);
+      node.classList.add(portalClassName, _carbonScopedTokensProvider.tokensClassName);
       node.setAttribute("data-portal-exit", uniqueId);
 
       if (id !== undefined) {

package/lib/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js

@@ -3,28 +3,56 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.GlobalTokens = exports.tokensClassName = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _generateCssVariables = _interopRequireDefault(require("../generate-css-variables.util"));
 
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+
+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 _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); }
+
 /**
  *
  * Converts theme properties to css variables form and set them locally for
  * given scope
  *
  */
-const CarbonScopedTokensProvider = _styledComponents.default.div`
+const tokensClassName = `sageDesignTokens-${(0, _guid.default)()}`;
+exports.tokensClassName = tokensClassName;
+const GlobalTokens = (0, _styledComponents.createGlobalStyle)`
+  .${tokensClassName} {
+    ${({
+  theme
+}) => (0, _generateCssVariables.default)(theme.compatibility)}
+  }
+`;
+exports.GlobalTokens = GlobalTokens;
+const TokensProviderWrapper = _styledComponents.default.div`
   margin: 0;
   padding: 0;
   width: auto;
   display: inline;
-  ${({
-  theme
-}) => (0, _generateCssVariables.default)(theme.compatibility)}
 `;
+
+const CarbonScopedTokensProvider = ({
+  children,
+  theme,
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(TokensProviderWrapper, _extends({}, props, {
+  className: tokensClassName
+}), /*#__PURE__*/_react.default.createElement(GlobalTokens, {
+  theme: theme
+}), children);
+
 var _default = CarbonScopedTokensProvider;
 exports.default = _default;

package/package.json

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