@carbon/react 1.6.0 → 1.8.0-rc.0

package/es/components/Popover/index.js

@@ -5,21 +5,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useRef, useMemo, useState } from 'react';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["align", "as", "caret", "className", "children", "dropShadow", "highContrast", "open"],
+var _excluded = ["align", "as", "autoAlign", "caret", "className", "children", "dropShadow", "highContrast", "open"],
     _excluded2 = ["className", "children"];
-var Popover = /*#__PURE__*/React__default.forwardRef(function Popover(props, ref) {
+var PopoverContext = /*#__PURE__*/React__default.createContext({
+  floating: {
+    current: null
+  }
+});
+var Popover = /*#__PURE__*/React__default.forwardRef(function Popover(props, forwardRef) {
   var _cx;
 
   var _props$align = props.align,
       align = _props$align === void 0 ? 'bottom' : _props$align,
       _props$as = props.as,
       BaseComponent = _props$as === void 0 ? 'span' : _props$as,
+      _props$autoAlign = props.autoAlign,
+      autoAlign = _props$autoAlign === void 0 ? false : _props$autoAlign,
       _props$caret = props.caret,
       caret = _props$caret === void 0 ? true : _props$caret,
       customClassName = props.className,
@@ -32,11 +41,121 @@ var Popover = /*#__PURE__*/React__default.forwardRef(function Popover(props, ref
       rest = _objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix();
-  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), true), _defineProperty(_cx, customClassName, !!customClassName), _cx));
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+  var floating = useRef();
+  var popover = useRef();
+  var value = useMemo(function () {
+    return {
+      floating: floating
+    };
+  }, []);
+  var ref = useMergedRefs([forwardRef, popover]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      autoAligned = _useState2[0],
+      setAutoAligned = _useState2[1];
+
+  var _useState3 = useState(align),
+      _useState4 = _slicedToArray(_useState3, 2),
+      autoAlignment = _useState4[0],
+      setAutoAlignment = _useState4[1];
+
+  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned), _defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _defineProperty(_cx, customClassName, !!customClassName), _cx));
+  useIsomorphicEffect(function () {
+    if (!autoAlign) {
+      setAutoAligned(false);
+      return;
+    }
+
+    if (!floating.current) {
+      return;
+    }
+
+    if (autoAligned === true) {
+      return;
+    }
+
+    var rect = floating.current.getBoundingClientRect(); // The conditions, per side, of when the popover is not visible, excluding the popover's internal padding(16)
+
+    var conditions = {
+      left: rect.x < -16,
+      top: rect.y < -16,
+      right: rect.x + (rect.width - 16) > document.documentElement.clientWidth,
+      bottom: rect.y + (rect.height - 16) > document.documentElement.clientHeight
+    };
+
+    if (!conditions.left && !conditions.top && !conditions.right && !conditions.bottom) {
+      setAutoAligned(false);
+      return;
+    }
+
+    var alignments = ['top', 'top-left', 'right-bottom', 'right', 'right-top', 'bottom-left', 'bottom', 'bottom-right', 'left-top', 'left', 'left-bottom', 'top-right']; // Creates the prioritized list of options depending on ideal alignment coming from `align`
+
+    var options = [align];
+    var option = alignments[(alignments.indexOf(align) + 1) % alignments.length];
+
+    while (option) {
+      if (options.includes(option)) {
+        break;
+      }
+
+      options.push(option);
+      option = alignments[(alignments.indexOf(option) + 1) % alignments.length];
+    }
+
+    function isVisible(alignment) {
+      popover.current.classList.add("".concat(prefix, "--popover--").concat(alignment));
+      var rect = floating.current.getBoundingClientRect(); // Check if popover is not visible to the left of the screen
+
+      if (rect.x < -16) {
+        popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+        return false;
+      } // Check if popover is not visible at the top of the screen
+
+
+      if (rect.y < -16) {
+        popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+        return false;
+      } // Check if popover is not visible to right of screen
+
+
+      if (rect.x + (rect.width - 16) > document.documentElement.clientWidth) {
+        popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+        return false;
+      } // Check if popover is not visible to bottom of screen
+
+
+      if (rect.y + (rect.height - 16) > document.documentElement.clientHeight) {
+        popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+        return false;
+      }
+
+      popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+      return true;
+    }
+
+    var alignment = null;
+
+    for (var i = 0; i < options.length; i++) {
+      var _option = options[i];
+
+      if (isVisible(_option)) {
+        alignment = _option;
+        break;
+      }
+    }
+
+    if (alignment) {
+      setAutoAligned(true);
+      setAutoAlignment(alignment);
+    }
+  }, [autoAligned, align, autoAlign, prefix]);
+  return /*#__PURE__*/React__default.createElement(PopoverContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
     className: className,
     ref: ref
-  }), children);
+  }), children));
 }); // Note: this displayName is temporarily set so that Storybook ArgTable
 // correctly displays the name of this component
 
@@ -56,6 +175,11 @@ Popover.propTypes = {
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
 
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to futurue changes.
+   */
+  autoAlign: PropTypes.bool,
+
   /**
    * Specify whether a caret should be rendered
    */
@@ -87,12 +211,17 @@ Popover.propTypes = {
    */
   open: PropTypes.bool.isRequired
 };
-var PopoverContent = /*#__PURE__*/React__default.forwardRef(function PopoverContent(_ref, ref) {
+var PopoverContent = /*#__PURE__*/React__default.forwardRef(function PopoverContent(_ref, forwardRef) {
   var className = _ref.className,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded2);
 
   var prefix = usePrefix();
+
+  var _React$useContext = React__default.useContext(PopoverContext),
+      floating = _React$useContext.floating;
+
+  var ref = useMergedRefs([floating, forwardRef]);
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
     className: "".concat(prefix, "--popover")
   }), /*#__PURE__*/React__default.createElement("span", {

package/es/components/ProgressBar/ProgressBar.js

@@ -84,9 +84,9 @@ function ProgressBar(_ref) {
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--progress-bar__track"),
     role: "progressbar",
+    "aria-busy": !isFinished,
     "aria-invalid": isError,
     "aria-labelledby": labelId,
-    "aria-describedby": helperText ? helperId : null,
     "aria-valuemin": !indeterminate ? 0 : null,
     "aria-valuemax": !indeterminate ? max : null,
     "aria-valuenow": !indeterminate ? cappedValue : null
@@ -96,9 +96,12 @@ function ProgressBar(_ref) {
       transform: "scaleX(".concat(percentage, ")")
     } : null
   })), helperText && /*#__PURE__*/React__default.createElement("div", {
-    id: helperId,
     className: "".concat(prefix, "--progress-bar__helper-text")
-  }, helperText));
+  }, helperText, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--visually-hidden"),
+    "aria-live": "polite",
+    id: helperId
+  }, isFinished ? 'Done' : 'Loading')));
 }
 
 ProgressBar.propTypes = {

package/es/components/RadioButton/RadioButton.js

@@ -5,89 +5,66 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import cx from 'classnames';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
-import { warning } from '../../internal/warning.js';
-import uniqueId from '../../tools/uniqueId.js';
+import cx from 'classnames';
 import '../Text/index.js';
-import { PrefixContext } from '../../internal/usePrefix.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { useId } from '../../internal/useId.js';
 import { Text } from '../Text/Text.js';
 
-var _excluded = ["className", "labelText", "labelPosition", "innerRef", "hideLabel"];
-
-var RadioButton = /*#__PURE__*/function (_React$Component) {
-  _inherits(RadioButton, _React$Component);
-
-  var _super = _createSuper(RadioButton);
-
-  function RadioButton() {
-    var _this;
-
-    _classCallCheck(this, RadioButton);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "prefix", _this.context);
-
-    _defineProperty(_assertThisInitialized(_this), "uid", _this.props.id || uniqueId());
-
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function (evt) {
-      _this.props.onChange(_this.props.value, _this.props.name, evt);
-    });
-
-    return _this;
+var _excluded = ["className", "disabled", "hideLabel", "id", "labelPosition", "labelText", "name", "onChange", "value"];
+var RadioButton = /*#__PURE__*/React__default.forwardRef(function RadioButton(_ref, ref) {
+  var className = _ref.className,
+      disabled = _ref.disabled,
+      hideLabel = _ref.hideLabel,
+      id = _ref.id,
+      _ref$labelPosition = _ref.labelPosition,
+      labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
+      _ref$labelText = _ref.labelText,
+      labelText = _ref$labelText === void 0 ? '' : _ref$labelText,
+      name = _ref.name,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var uid = useId('radio-button');
+  var uniqueId = id || uid;
+
+  function handleOnChange(event) {
+    onChange(value, name, event);
   }
 
-  _createClass(RadioButton, [{
-    key: "render",
-    value: function render() {
-      var prefix = this.prefix;
-
-      var _this$props = this.props,
-          className = _this$props.className,
-          labelText = _this$props.labelText,
-          labelPosition = _this$props.labelPosition,
-          ref = _this$props.innerRef,
-          hideLabel = _this$props.hideLabel,
-          other = _objectWithoutProperties(_this$props, _excluded);
-
-      if (process.env.NODE_ENV !== "production") {
-        process.env.NODE_ENV !== "production" ? warning(labelPosition !== 'top' && labelPosition !== 'bottom', '`top`/`bottom` values for `labelPosition` property in the `RadioButton` component is deprecated ' + 'and being removed in the next release of `carbon-components-react`.') : void 0;
-      }
-
-      var innerLabelClasses = cx(_defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
-      var wrapperClasses = cx(className, "".concat(prefix, "--radio-button-wrapper"), _defineProperty({}, "".concat(prefix, "--radio-button-wrapper--label-").concat(labelPosition), labelPosition !== 'right'));
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: wrapperClasses
-      }, /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
-        type: "radio",
-        className: "".concat(prefix, "--radio-button"),
-        onChange: this.handleChange,
-        id: this.uid,
-        ref: ref
-      })), /*#__PURE__*/React__default.createElement("label", {
-        htmlFor: this.uid,
-        className: "".concat(prefix, "--radio-button__label")
-      }, /*#__PURE__*/React__default.createElement("span", {
-        className: "".concat(prefix, "--radio-button__appearance")
-      }), labelText && /*#__PURE__*/React__default.createElement(Text, {
-        className: innerLabelClasses
-      }, labelText)));
-    }
-  }]);
-
-  return RadioButton;
-}(React__default.Component);
-
-_defineProperty(RadioButton, "propTypes", {
+  var innerLabelClasses = cx(_defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
+  var wrapperClasses = cx(className, "".concat(prefix, "--radio-button-wrapper"), _defineProperty({}, "".concat(prefix, "--radio-button-wrapper--label-").concat(labelPosition), labelPosition !== 'right'));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default.createElement("input", _extends({}, rest, {
+    type: "radio",
+    className: "".concat(prefix, "--radio-button"),
+    onChange: handleOnChange,
+    id: uniqueId,
+    ref: ref,
+    disabled: disabled,
+    value: value,
+    name: name
+  })), /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: uniqueId,
+    className: "".concat(prefix, "--radio-button__label")
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--radio-button__appearance")
+  }), labelText && /*#__PURE__*/React__default.createElement(Text, {
+    className: innerLabelClasses
+  }, labelText)));
+});
+RadioButton.displayName = 'RadioButton';
+RadioButton.propTypes = {
   /**
-   * Specify whether the <RadioButton> is currently checked
+   * Specify whether the `<RadioButton>` is currently checked
    */
   checked: PropTypes.bool,
 
@@ -97,7 +74,7 @@ _defineProperty(RadioButton, "propTypes", {
   className: PropTypes.string,
 
   /**
-   * Specify whether the <RadioButton> should be checked by default
+   * Specify whether the `<RadioButton>` should be checked by default
    */
   defaultChecked: PropTypes.bool,
 
@@ -120,7 +97,7 @@ _defineProperty(RadioButton, "propTypes", {
    * Provide where label text should be placed
    * NOTE: `top`/`bottom` are deprecated
    */
-  labelPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  labelPosition: PropTypes.oneOf(['right', 'left']),
 
   /**
    * Provide label text to be read by screen readers when interacting with the
@@ -145,28 +122,10 @@ _defineProperty(RadioButton, "propTypes", {
   onClick: PropTypes.func,
 
   /**
-   * Specify the value of the <RadioButton>
+   * Specify the value of the `<RadioButton>`
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-});
+};
+var RadioButton$1 = RadioButton;
 
-_defineProperty(RadioButton, "contextType", PrefixContext);
-
-_defineProperty(RadioButton, "defaultProps", {
-  labelText: '',
-  labelPosition: 'right',
-  onChange: function onChange() {},
-  value: ''
-});
-var RadioButtonClassic = (function () {
-  var forwardRef = function forwardRef(props, ref) {
-    return /*#__PURE__*/React__default.createElement(RadioButton, _extends({}, props, {
-      innerRef: ref
-    }));
-  };
-
-  forwardRef.displayName = 'RadioButton';
-  return /*#__PURE__*/React__default.forwardRef(forwardRef);
-})();
-
-export { RadioButton, RadioButtonClassic as default };
+export { RadioButton$1 as default };

package/es/components/RadioButton/index.js

@@ -5,11 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as FeatureFlags from '@carbon/feature-flags';
-import RadioButtonNext from './next/RadioButton.js';
-import RadioButtonClassic from './RadioButton.js';
-
-var RadioButton = FeatureFlags.enabled('enable-v11-release') ? RadioButtonNext : RadioButtonClassic;
-var RadioButton$1 = RadioButton;
-
-export { RadioButton$1 as default };
+import RadioButton from './RadioButton.js';
+export { default } from './RadioButton.js';

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -5,121 +5,87 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useState } from 'react';
 import cx from 'classnames';
-import { warning } from '../../internal/warning.js';
 import { Legend } from '../Text/index.js';
-import { FeatureFlagContext } from '../FeatureFlags/index.js';
-import { PrefixContext } from '../../internal/usePrefix.js';
-
-var RadioButtonGroup = /*#__PURE__*/function (_React$Component) {
-  _inherits(RadioButtonGroup, _React$Component);
-
-  var _super = _createSuper(RadioButtonGroup);
-
-  function RadioButtonGroup() {
-    var _this;
-
-    _classCallCheck(this, RadioButtonGroup);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function RadioButtonGroup(_ref, ref) {
+  var _classNames;
+
+  var children = _ref.children,
+      className = _ref.className,
+      defaultSelected = _ref.defaultSelected,
+      disabled = _ref.disabled,
+      _ref$labelPosition = _ref.labelPosition,
+      labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
+      legendText = _ref.legendText,
+      name = _ref.name,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _ref$orientation = _ref.orientation,
+      orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
+      valueSelected = _ref.valueSelected;
+  var prefix = usePrefix();
+
+  var _useState = useState(valueSelected !== null && valueSelected !== void 0 ? valueSelected : defaultSelected),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var _useState3 = useState(valueSelected),
+      _useState4 = _slicedToArray(_useState3, 2),
+      prevValueSelected = _useState4[0],
+      setPrevValueSelected = _useState4[1];
+  /**
+   * prop + state alignment - getDerivedStateFromProps
+   * only update if selected prop changes
+   */
 
-    _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      selected: typeof _this.props.valueSelected !== 'undefined' ? _this.props.valueSelected : _this.props.defaultSelected
-    });
+  if (valueSelected !== prevValueSelected) {
+    setSelected(valueSelected);
+    setPrevValueSelected(valueSelected);
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "getRadioButtons", function () {
-      var children = React__default.Children.map(_this.props.children, function (radioButton) {
-        var value = radioButton.props.value;
-        /* istanbul ignore if */
-
-        if (typeof radioButton.props.checked !== 'undefined') {
-          process.env.NODE_ENV !== "production" ? warning(false, "Instead of using the checked property on the RadioButton, set\n            the defaultSelected property or valueSelected property on the RadioButtonGroup.") : void 0;
-        }
-
-        return /*#__PURE__*/React__default.cloneElement(radioButton, {
-          name: _this.props.name,
-          key: value,
-          value: value,
-          onChange: _this.handleChange,
-          checked: value === _this.state.selected
-        });
+  function getRadioButtons() {
+    var mappedChildren = React__default.Children.map(children, function (radioButton) {
+      var value = radioButton.props.value;
+      return /*#__PURE__*/React__default.cloneElement(radioButton, {
+        name: name,
+        key: value,
+        value: value,
+        onChange: handleOnChange,
+        checked: value === selected
       });
-      return children;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function (newSelection, value, evt) {
-      if (newSelection !== _this.state.selected) {
-        _this.setState({
-          selected: newSelection
-        });
-
-        _this.props.onChange(newSelection, _this.props.name, evt);
-      }
     });
-
-    return _this;
+    return mappedChildren;
   }
 
-  _createClass(RadioButtonGroup, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          disabled = _this$props.disabled,
-          className = _this$props.className,
-          hideLegend = _this$props.hideLegend,
-          orientation = _this$props.orientation,
-          labelPosition = _this$props.labelPosition,
-          legendText = _this$props.legendText;
-      var scope = this.context;
-      var enabled;
-
-      if (scope.enabled) {
-        enabled = scope.enabled('enable-v11-release');
-      }
-
-      return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, function (prefix) {
-        var _classNames;
-
-        var wrapperClasses = cx("".concat(prefix, "--radio-button-group"), [enabled ? null : className], (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _classNames));
-        var legendClasses = cx("".concat(prefix, "--label"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLegend));
-        return /*#__PURE__*/React__default.createElement("div", {
-          className: enabled ? cx("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
-        }, /*#__PURE__*/React__default.createElement("fieldset", {
-          className: wrapperClasses,
-          disabled: disabled
-        }, legendText && /*#__PURE__*/React__default.createElement(Legend, {
-          className: legendClasses
-        }, legendText), _this2.getRadioButtons()));
-      });
+  function handleOnChange(newSelection, value, evt) {
+    if (newSelection !== selected) {
+      setSelected(newSelection);
+      onChange(newSelection, name, evt);
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(_ref, state) {
-      var valueSelected = _ref.valueSelected,
-          defaultSelected = _ref.defaultSelected;
-      var prevValueSelected = state.prevValueSelected;
-      return prevValueSelected === valueSelected ? null : {
-        selected: typeof valueSelected !== 'undefined' ? valueSelected : defaultSelected,
-        prevValueSelected: valueSelected
-      };
-    }
-  }]);
-
-  return RadioButtonGroup;
-}(React__default.Component);
+  }
 
-_defineProperty(RadioButtonGroup, "propTypes", {
+  var fieldsetClasses = cx("".concat(prefix, "--radio-button-group"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _classNames));
+  var wrapperClasses = cx("".concat(prefix, "--form-item"), className);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: wrapperClasses,
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement("fieldset", {
+    className: fieldsetClasses,
+    disabled: disabled
+  }, legendText && /*#__PURE__*/React__default.createElement(Legend, {
+    className: "".concat(prefix, "--label")
+  }, legendText), getRadioButtons()));
+});
+RadioButtonGroup.propTypes = {
   /**
-   * Provide a collection of <RadioButton> components to render in the group
+   * Provide a collection of `<RadioButton>` components to render in the group
    */
   children: PropTypes.node,
 
@@ -129,7 +95,7 @@ _defineProperty(RadioButtonGroup, "propTypes", {
   className: PropTypes.string,
 
   /**
-   * Specify the <RadioButton> to be selected by default
+   * Specify the `<RadioButton>` to be selected by default
    */
   defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -138,11 +104,6 @@ _defineProperty(RadioButtonGroup, "propTypes", {
    */
   disabled: PropTypes.bool,
 
-  /**
-   * Specify whether the legend should be hidden, or not
-   */
-  hideLegend: PropTypes.bool,
-
   /**
    * Provide where label text should be placed
    */
@@ -174,17 +135,7 @@ _defineProperty(RadioButtonGroup, "propTypes", {
    * Specify the value that is currently selected in the group
    */
   valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-});
-
-_defineProperty(RadioButtonGroup, "defaultProps", {
-  orientation: 'horizontal',
-  labelPosition: 'right',
-  hideLegend: false,
-  onChange:
-  /* istanbul ignore next */
-  function onChange() {}
-});
-
-_defineProperty(RadioButtonGroup, "contextType", FeatureFlagContext);
+};
+var RadioButtonGroup$1 = RadioButtonGroup;
 
-export { RadioButtonGroup as default };
+export { RadioButtonGroup$1 as default };