@carbon/react 1.6.0 → 1.8.0-rc.0

package/es/components/ComposedModal/ComposedModal.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends, inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, createClass as _createClass, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from '../Button/Button.js';

package/es/components/ComposedModal/index.js

@@ -9,11 +9,11 @@ import * as FeatureFlags from '@carbon/feature-flags';
 import { ModalHeader as ModalHeader$1 } from './next/ModalHeader.js';
 import { ModalFooter as ModalFooter$1 } from './next/ModalFooter.js';
 import ComposedModalNext from './next/ComposedModal.js';
-import ComposedModal, { ModalHeader as ModalHeader$2, ModalFooter as ModalFooter$2 } from './ComposedModal.js';
-export { ModalBody, default } from './ComposedModal.js';
+import ComposedModal$1, { ModalHeader as ModalHeader$2, ModalFooter as ModalFooter$2 } from './ComposedModal.js';
+export { ModalBody } from './ComposedModal.js';
 
 var ModalHeader = FeatureFlags.enabled('enable-v11-release') ? ModalHeader$1 : ModalHeader$2;
 var ModalFooter = FeatureFlags.enabled('enable-v11-release') ? ModalFooter$1 : ModalFooter$2;
-FeatureFlags.enabled('enable-v11-release') ? ComposedModalNext : ComposedModal;
+var ComposedModal = FeatureFlags.enabled('enable-v11-release') ? ComposedModalNext : ComposedModal$1;
 
-export { ModalFooter, ModalHeader };
+export { ComposedModal, ModalFooter, ModalHeader };

package/es/components/DataTable/DataTable.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, assertThisInitialized as _assertThisInitialized, slicedToArray as _slicedToArray, createClass as _createClass } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { defineProperty as _defineProperty, inherits as _inherits, createSuper as _createSuper, createClass as _createClass, classCallCheck as _classCallCheck, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, assertThisInitialized as _assertThisInitialized, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import isEqual from 'lodash.isequal';

package/es/components/DataTable/Table.js

@@ -6,10 +6,11 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { TableContext } from './TableContext.js';
 
 var _excluded = ["className", "children", "useZebraStyles", "size", "isSortable", "useStaticWidth", "stickyHeader", "overflowMenuOnHover"];
 var Table = function Table(_ref) {
@@ -25,11 +26,18 @@ var Table = function Table(_ref) {
       overflowMenuOnHover = _ref.overflowMenuOnHover,
       other = _objectWithoutProperties(_ref, _excluded);
 
+  var _useContext = useContext(TableContext),
+      titleId = _useContext.titleId,
+      descriptionId = _useContext.descriptionId;
+
   var prefix = usePrefix();
   var componentClass = cx("".concat(prefix, "--data-table"), className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--data-table--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--data-table--sort"), isSortable), _defineProperty(_cx, "".concat(prefix, "--data-table--zebra"), useZebraStyles), _defineProperty(_cx, "".concat(prefix, "--data-table--static"), useStaticWidth), _defineProperty(_cx, "".concat(prefix, "--data-table--sticky-header"), stickyHeader), _defineProperty(_cx, "".concat(prefix, "--data-table--visible-overflow-menu"), !overflowMenuOnHover), _cx));
   var table = /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--data-table-content")
-  }, /*#__PURE__*/React__default.createElement("table", _extends({}, other, {
+  }, /*#__PURE__*/React__default.createElement("table", _extends({
+    "aria-labelledby": titleId,
+    "aria-describedby": descriptionId
+  }, other, {
     className: componentClass
   }), children));
   return stickyHeader ? /*#__PURE__*/React__default.createElement("section", {

package/es/components/DataTable/TableContainer.js

@@ -8,8 +8,10 @@
 import { objectWithoutProperties as _objectWithoutProperties, 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, { useMemo } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useId } from '../../internal/useId.js';
+import { TableContext } from './TableContext.js';
 
 var _excluded = ["className", "children", "title", "description", "stickyHeader", "useStaticWidth"];
 
@@ -24,17 +26,30 @@ var TableContainer = function TableContainer(_ref) {
       useStaticWidth = _ref.useStaticWidth,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var baseId = useId('tc');
+  var titleId = "".concat(baseId, "-title");
+  var descriptionId = "".concat(baseId, "-description");
   var prefix = usePrefix();
   var tableContainerClasses = cx(className, "".concat(prefix, "--data-table-container"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--data-table--max-width"), stickyHeader), _defineProperty(_cx, "".concat(prefix, "--data-table-container--static"), useStaticWidth), _cx));
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  var value = useMemo(function () {
+    return {
+      titleId: title ? titleId : null,
+      descriptionId: description ? descriptionId : null
+    };
+  }, [title, description, titleId, descriptionId]);
+  return /*#__PURE__*/React__default.createElement(TableContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: tableContainerClasses
   }), title && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--data-table-header")
   }, /*#__PURE__*/React__default.createElement("h4", {
-    className: "".concat(prefix, "--data-table-header__title")
+    className: "".concat(prefix, "--data-table-header__title"),
+    id: titleId
   }, title), /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(prefix, "--data-table-header__description")
-  }, description)), children);
+    className: "".concat(prefix, "--data-table-header__description"),
+    id: descriptionId
+  }, description)), children));
 };
 
 TableContainer.propTypes = {

package/es/components/DataTable/TableContext.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { createContext } from 'react';
+
+var TableContext = /*#__PURE__*/createContext({
+  titleId: null,
+  descriptionId: null
+});
+
+export { TableContext };

package/es/components/DataTable/TableSelectRow.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import InlineCheckbox from '../InlineCheckbox/InlineCheckbox.js';
-import RadioButton from '../RadioButton/index.js';
+import RadioButton from '../RadioButton/RadioButton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var TableSelectRow = function TableSelectRow(_ref) {

package/es/components/FileUploader/FileUploader.js

@@ -41,6 +41,8 @@ var FileUploader = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "nodes", []);
 
+    _defineProperty(_assertThisInitialized(_this), "uploaderButton", /*#__PURE__*/React__default.createRef());
+
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (evt) {
       evt.stopPropagation();
       var filenames = Array.prototype.map.call(evt.target.files, function (file) {
@@ -73,6 +75,8 @@ var FileUploader = /*#__PURE__*/function (_React$Component) {
 
         if (_this.props.onDelete) {
           _this.props.onDelete(evt);
+
+          _this.uploaderButton.current.focus();
         }
 
         _this.props.onClick(evt);
@@ -128,6 +132,7 @@ var FileUploader = /*#__PURE__*/function (_React$Component) {
       }, labelTitle), /*#__PURE__*/React__default.createElement("p", {
         className: getHelperLabelClasses("".concat(prefix, "--label-description"))
       }, labelDescription), /*#__PURE__*/React__default.createElement(FileUploaderButton, {
+        innerRef: this.uploaderButton,
         disabled: disabled,
         labelText: buttonLabel,
         multiple: multiple,
@@ -148,11 +153,13 @@ var FileUploader = /*#__PURE__*/function (_React$Component) {
           } // eslint-disable-line
 
         }, other), /*#__PURE__*/React__default.createElement("p", {
-          className: "".concat(prefix, "--file-filename")
+          className: "".concat(prefix, "--file-filename"),
+          id: name
         }, name), /*#__PURE__*/React__default.createElement("span", {
           className: "".concat(prefix, "--file__state-container")
         }, /*#__PURE__*/React__default.createElement(Filename, {
           iconDescription: iconDescription,
+          "aria-describedby": name,
           status: filenameStatus,
           onKeyDown: function onKeyDown(evt) {
             if (matches(evt, [Enter, Space])) {

package/es/components/FileUploader/FileUploaderButton.js

@@ -16,7 +16,7 @@ import * as FeatureFlags from '@carbon/feature-flags';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["accept", "buttonKind", "className", "disabled", "disableLabelChanges", "id", "labelText", "multiple", "onChange", "role", "name", "size", "tabIndex"];
+var _excluded = ["accept", "buttonKind", "className", "disabled", "disableLabelChanges", "id", "labelText", "multiple", "onChange", "role", "name", "size", "tabIndex", "innerRef"];
 
 function noop() {}
 
@@ -45,6 +45,7 @@ function FileUploaderButton(_ref) {
       size = _ref$size === void 0 ? 'md' : _ref$size,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+      innerRef = _ref.innerRef,
       other = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
@@ -96,6 +97,7 @@ function FileUploaderButton(_ref) {
   }
 
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("label", _extends({
+    ref: innerRef,
     tabIndex: disabled ? -1 : tabIndex || 0,
     className: classes,
     onKeyDown: onKeyDown,

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -14,7 +14,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["accept", "className", "id", "disabled", "labelText", "multiple", "name", "onAddFiles", "pattern", "role", "tabIndex"];
+var _excluded = ["accept", "className", "id", "disabled", "labelText", "multiple", "name", "onAddFiles", "pattern", "role", "tabIndex", "innerRef"];
 
 function FileUploaderDropContainer(_ref) {
   var _classNames2;
@@ -30,6 +30,7 @@ function FileUploaderDropContainer(_ref) {
       pattern = _ref.pattern,
       role = _ref.role,
       tabIndex = _ref.tabIndex,
+      innerRef = _ref.innerRef,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
@@ -125,6 +126,7 @@ function FileUploaderDropContainer(_ref) {
       handleChange(evt);
     }
   }, /*#__PURE__*/React__default.createElement("label", _extends({
+    ref: innerRef,
     className: labelClasses,
     htmlFor: uid,
     tabIndex: tabIndex || 0,

package/es/components/FileUploader/FileUploaderItem.js

@@ -42,11 +42,13 @@ function FileUploaderItem(_ref) {
     className: classes
   }, other), /*#__PURE__*/React__default.createElement("p", {
     className: "".concat(prefix, "--file-filename"),
-    title: name
+    title: name,
+    id: name
   }, name), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--file__state-container")
   }, /*#__PURE__*/React__default.createElement(Filename, {
     iconDescription: iconDescription,
+    "aria-describedby": name,
     status: status,
     invalid: invalid,
     onKeyDown: function onKeyDown(evt) {

package/es/components/Form/Form.js

@@ -22,7 +22,7 @@ var Form = function Form(_ref) {
   var classNames = cx("".concat(prefix, "--form"), className);
   return /*#__PURE__*/React__default.createElement("form", _extends({
     className: classNames
-  }, other), ' ', children, ' ');
+  }, other), children);
 };
 
 Form.propTypes = {

package/es/components/FormGroup/FormGroup.js

@@ -21,7 +21,7 @@ var FormGroup = function FormGroup(_ref) {
       className = _ref.className,
       message = _ref.message,
       messageText = _ref.messageText,
-      other = _objectWithoutProperties(_ref, _excluded);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
   var classNamesFieldset = cx("".concat(prefix, "--fieldset"), className);
@@ -29,11 +29,11 @@ var FormGroup = function FormGroup(_ref) {
     'data-invalid': ''
   }, {
     className: classNamesFieldset
-  }, other, {
-    "aria-labelledby": other['aria-labelledby'] || legendId
+  }, rest, {
+    "aria-labelledby": rest['aria-labelledby'] || legendId
   }), /*#__PURE__*/React__default.createElement("legend", {
     className: "".concat(prefix, "--label"),
-    id: legendId || other['aria-labelledby']
+    id: legendId || rest['aria-labelledby']
   }, legendText), children, message ? /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--form__requirements")
   }, messageText) : null);

package/es/components/FormItem/FormItem.js

@@ -13,17 +13,17 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 var _excluded = ["className", "children"];
 
-var FormItem = function FormItem(_ref) {
+function FormItem(_ref) {
   var className = _ref.className,
       children = _ref.children,
-      other = _objectWithoutProperties(_ref, _excluded);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
   var classNames = cx("".concat(prefix, "--form-item"), className);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classNames
-  }, other), children);
-};
+  }, rest), children);
+}
 
 FormItem.propTypes = {
   /**
@@ -36,6 +36,5 @@ FormItem.propTypes = {
    */
   className: PropTypes.string
 };
-var FormItem$1 = FormItem;
 
-export { FormItem$1 as default };
+export { FormItem as default };

package/es/components/InlineLoading/InlineLoading.js

@@ -15,8 +15,6 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 var _excluded = ["className", "status", "iconDescription", "description", "onSuccess", "successDelay"];
 function InlineLoading(_ref) {
-  var _title, _title2;
-
   var className = _ref.className,
       _ref$status = _ref.status,
       status = _ref$status === void 0 ? 'active' : _ref$status,
@@ -30,10 +28,12 @@ function InlineLoading(_ref) {
   var loadingClasses = cx("".concat(prefix, "--inline-loading"), className);
 
   var getLoading = function getLoading() {
+    var iconLabel = iconDescription ? iconDescription : status;
+
     if (status === 'error') {
       return /*#__PURE__*/React__default.createElement(ErrorFilled, {
         className: "".concat(prefix, "--inline-loading--error")
-      }, _title || (_title = /*#__PURE__*/React__default.createElement("title", null, iconDescription)));
+      }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
     }
 
     if (status === 'finished') {
@@ -44,13 +44,17 @@ function InlineLoading(_ref) {
       }, successDelay);
       return /*#__PURE__*/React__default.createElement(CheckmarkFilled, {
         className: "".concat(prefix, "--inline-loading__checkmark-container")
-      }, _title2 || (_title2 = /*#__PURE__*/React__default.createElement("title", null, iconDescription)));
+      }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
     }
 
     if (status === 'inactive' || status === 'active') {
+      if (!iconDescription) {
+        iconLabel = status === 'active' ? 'loading' : 'not loading';
+      }
+
       return /*#__PURE__*/React__default.createElement(Loading, {
         small: true,
-        description: iconDescription,
+        description: iconLabel,
         withOverlay: false,
         active: status === 'active'
       });

package/es/components/Loading/Loading.js

@@ -8,18 +8,16 @@
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef } from 'react';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
+import deprecate from '../../prop-types/deprecate.js';
 
-var _excluded = ["id", "active", "className", "withOverlay", "small", "description"];
-var getInstanceId = setupGetInstanceId();
+var _excluded = ["active", "className", "withOverlay", "small", "description"];
 
 function Loading(_ref) {
   var _cx, _cx2;
 
-  var id = _ref.id,
-      active = _ref.active,
+  var active = _ref.active,
       customClassName = _ref.className,
       withOverlay = _ref.withOverlay,
       small = _ref.small,
@@ -27,22 +25,13 @@ function Loading(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-
-  var _useRef = useRef(getInstanceId()),
-      instanceId = _useRef.current;
-
   var loadingClassName = cx(customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--loading"), true), _defineProperty(_cx, "".concat(prefix, "--loading--small"), small), _defineProperty(_cx, "".concat(prefix, "--loading--stop"), !active), _cx));
   var overlayClassName = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--loading-overlay"), true), _defineProperty(_cx2, "".concat(prefix, "--loading-overlay--stop"), !active), _cx2));
-  var loadingId = id || "loading-id-".concat(instanceId);
   var loading = /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     "aria-atomic": "true",
-    "aria-labelledby": loadingId,
     "aria-live": active ? 'assertive' : 'off',
     className: loadingClassName
-  }), /*#__PURE__*/React__default.createElement("label", {
-    id: loadingId,
-    className: "".concat(prefix, "--visually-hidden")
-  }, description), /*#__PURE__*/React__default.createElement("svg", {
+  }), /*#__PURE__*/React__default.createElement("svg", {
     className: "".concat(prefix, "--loading__svg"),
     viewBox: "0 0 100 100"
   }, /*#__PURE__*/React__default.createElement("title", null, description), small ? /*#__PURE__*/React__default.createElement("circle", {
@@ -80,7 +69,7 @@ Loading.propTypes = {
   /**
    * Provide an `id` to uniquely identify the label
    */
-  id: PropTypes.string,
+  id: deprecate(PropTypes.string, "\nThe prop `id` is no longer needed."),
 
   /**
    * Specify whether you would like the small variant of <Loading>
@@ -96,7 +85,7 @@ Loading.defaultProps = {
   active: true,
   withOverlay: true,
   small: false,
-  description: 'Active loading indicator'
+  description: 'loading'
 };
 
 export { Loading as default };