@carbon/react 1.6.0 → 1.8.0-rc.0

package/lib/components/Popover/index.js

@@ -13,6 +13,8 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -21,15 +23,22 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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["default"].forwardRef(function Popover(props, ref) {
+var PopoverContext = /*#__PURE__*/React__default["default"].createContext({
+  floating: {
+    current: null
+  }
+});
+var Popover = /*#__PURE__*/React__default["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,
@@ -42,11 +51,121 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), true), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  var floating = React.useRef();
+  var popover = React.useRef();
+  var value = React.useMemo(function () {
+    return {
+      floating: floating
+    };
+  }, []);
+  var ref = useMergedRefs.useMergedRefs([forwardRef, popover]);
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      autoAligned = _useState2[0],
+      setAutoAligned = _useState2[1];
+
+  var _useState3 = React.useState(align),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      autoAlignment = _useState4[0],
+      setAutoAlignment = _useState4[1];
+
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  useIsomorphicEffect["default"](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["default"].createElement(PopoverContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["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
 
@@ -66,6 +185,11 @@ Popover.propTypes = {
    */
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].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__default["default"].bool,
+
   /**
    * Specify whether a caret should be rendered
    */
@@ -97,12 +221,17 @@ Popover.propTypes = {
    */
   open: PropTypes__default["default"].bool.isRequired
 };
-var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function PopoverContent(_ref, ref) {
+var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function PopoverContent(_ref, forwardRef) {
   var className = _ref.className,
       children = _ref.children,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded2);
 
   var prefix = usePrefix.usePrefix();
+
+  var _React$useContext = React__default["default"].useContext(PopoverContext),
+      floating = _React$useContext.floating;
+
+  var ref = useMergedRefs.useMergedRefs([floating, forwardRef]);
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: "".concat(prefix, "--popover")
   }), /*#__PURE__*/React__default["default"].createElement("span", {

package/lib/components/ProgressBar/ProgressBar.js

@@ -94,9 +94,9 @@ function ProgressBar(_ref) {
   })), /*#__PURE__*/React__default["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
@@ -106,9 +106,12 @@ function ProgressBar(_ref) {
       transform: "scaleX(".concat(percentage, ")")
     } : null
   })), helperText && /*#__PURE__*/React__default["default"].createElement("div", {
-    id: helperId,
     className: "".concat(prefix, "--progress-bar__helper-text")
-  }, helperText));
+  }, helperText, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--visually-hidden"),
+    "aria-live": "polite",
+    id: helperId
+  }, isFinished ? 'Done' : 'Loading')));
 }
 
 ProgressBar.propTypes = {

package/lib/components/RadioButton/RadioButton.js

@@ -10,94 +10,71 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var warning = require('../../internal/warning.js');
-var uniqueId = require('../../tools/uniqueId.js');
+var cx = require('classnames');
 require('../Text/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useId = require('../../internal/useId.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "labelText", "labelPosition", "innerRef", "hideLabel"];
-
-var RadioButton = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(RadioButton, _React$Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(RadioButton);
-
-  function RadioButton() {
-    var _this;
-
-    _rollupPluginBabelHelpers.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));
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "prefix", _this.context);
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "uid", _this.props.id || uniqueId["default"]());
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var uid = useId.useId('radio-button');
+  var uniqueId = id || uid;
+
+  function handleOnChange(event) {
+    onChange(value, name, event);
   }
 
-  _rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
-
-      if (process.env.NODE_ENV !== "production") {
-        process.env.NODE_ENV !== "production" ? warning.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__default["default"](_rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
-      var wrapperClasses = cx__default["default"](className, "".concat(prefix, "--radio-button-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--radio-button-wrapper--label-").concat(labelPosition), labelPosition !== 'right'));
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: wrapperClasses
-      }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, {
-        type: "radio",
-        className: "".concat(prefix, "--radio-button"),
-        onChange: this.handleChange,
-        id: this.uid,
-        ref: ref
-      })), /*#__PURE__*/React__default["default"].createElement("label", {
-        htmlFor: this.uid,
-        className: "".concat(prefix, "--radio-button__label")
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        className: "".concat(prefix, "--radio-button__appearance")
-      }), labelText && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-        className: innerLabelClasses
-      }, labelText)));
-    }
-  }]);
-
-  return RadioButton;
-}(React__default["default"].Component);
-
-_rollupPluginBabelHelpers.defineProperty(RadioButton, "propTypes", {
+  var innerLabelClasses = cx__default["default"](_rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
+  var wrapperClasses = cx__default["default"](className, "".concat(prefix, "--radio-button-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--radio-button-wrapper--label-").concat(labelPosition), labelPosition !== 'right'));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    type: "radio",
+    className: "".concat(prefix, "--radio-button"),
+    onChange: handleOnChange,
+    id: uniqueId,
+    ref: ref,
+    disabled: disabled,
+    value: value,
+    name: name
+  })), /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: uniqueId,
+    className: "".concat(prefix, "--radio-button__label")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--radio-button__appearance")
+  }), labelText && /*#__PURE__*/React__default["default"].createElement(Text.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__default["default"].bool,
 
@@ -107,7 +84,7 @@ _rollupPluginBabelHelpers.defineProperty(RadioButton, "propTypes", {
   className: PropTypes__default["default"].string,
 
   /**
-   * Specify whether the <RadioButton> should be checked by default
+   * Specify whether the `<RadioButton>` should be checked by default
    */
   defaultChecked: PropTypes__default["default"].bool,
 
@@ -130,7 +107,7 @@ _rollupPluginBabelHelpers.defineProperty(RadioButton, "propTypes", {
    * Provide where label text should be placed
    * NOTE: `top`/`bottom` are deprecated
    */
-  labelPosition: PropTypes__default["default"].oneOf(['top', 'right', 'bottom', 'left']),
+  labelPosition: PropTypes__default["default"].oneOf(['right', 'left']),
 
   /**
    * Provide label text to be read by screen readers when interacting with the
@@ -155,29 +132,10 @@ _rollupPluginBabelHelpers.defineProperty(RadioButton, "propTypes", {
   onClick: PropTypes__default["default"].func,
 
   /**
-   * Specify the value of the <RadioButton>
+   * Specify the value of the `<RadioButton>`
    */
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
-});
+};
+var RadioButton$1 = RadioButton;
 
-_rollupPluginBabelHelpers.defineProperty(RadioButton, "contextType", usePrefix.PrefixContext);
-
-_rollupPluginBabelHelpers.defineProperty(RadioButton, "defaultProps", {
-  labelText: '',
-  labelPosition: 'right',
-  onChange: function onChange() {},
-  value: ''
-});
-var RadioButtonClassic = (function () {
-  var forwardRef = function forwardRef(props, ref) {
-    return /*#__PURE__*/React__default["default"].createElement(RadioButton, _rollupPluginBabelHelpers["extends"]({}, props, {
-      innerRef: ref
-    }));
-  };
-
-  forwardRef.displayName = 'RadioButton';
-  return /*#__PURE__*/React__default["default"].forwardRef(forwardRef);
-})();
-
-exports.RadioButton = RadioButton;
-exports["default"] = RadioButtonClassic;
+exports["default"] = RadioButton$1;

package/lib/components/RadioButton/index.js

@@ -9,31 +9,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FeatureFlags = require('@carbon/feature-flags');
-var RadioButton$2 = require('./next/RadioButton.js');
-var RadioButton$3 = require('./RadioButton.js');
+var RadioButton = require('./RadioButton.js');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
 
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var RadioButton = FeatureFlags__namespace.enabled('enable-v11-release') ? RadioButton$2["default"] : RadioButton$3["default"];
-var RadioButton$1 = RadioButton;
-
-exports["default"] = RadioButton$1;
+exports["default"] = RadioButton["default"];