@carbon/react 1.7.0 → 1.9.0-rc.0

package/es/index.js

@@ -18,7 +18,7 @@ export { ClassPrefix } from './components/ClassPrefix/index.js';
 export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSnippet.Skeleton.js';
 export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet.js';
 export { default as ComboBox } from './components/ComboBox/ComboBox.js';
-export { ModalFooter, ModalHeader } from './components/ComposedModal/index.js';
+export { ComposedModal, ModalFooter, ModalHeader } from './components/ComposedModal/index.js';
 export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
@@ -39,12 +39,9 @@ export { default as InlineLoading } from './components/InlineLoading/InlineLoadi
 export { default as Link } from './components/Link/Link.js';
 export { default as ListItem } from './components/ListItem/ListItem.js';
 export { default as Loading } from './components/Loading/Loading.js';
-export { default as Modal } from './components/Modal/index.js';
+export { default as Modal } from './components/Modal/Modal.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
-export { FilterableMultiSelect } from './components/MultiSelect/index.js';
-export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, NotificationTextDetails, ToastNotification } from './components/Notification/index.js';
-export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
-export { default as NumberInput } from './components/NumberInput/NumberInput.js';
+import './components/MultiSelect/index.js';
 export { default as OrderedList } from './components/OrderedList/OrderedList.js';
 export { default as OverflowMenu } from './components/OverflowMenu/index.js';
 export { default as OverflowMenuItem } from './components/OverflowMenuItem/index.js';
@@ -52,8 +49,8 @@ export { default as Pagination } from './components/Pagination/index.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';
 export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButton.js';
 export { ProgressIndicator } from './components/ProgressIndicator/index.js';
-export { default as RadioButton } from './components/RadioButton/index.js';
-export { default as RadioButtonGroup } from './components/RadioButtonGroup/index.js';
+export { default as RadioButton } from './components/RadioButton/RadioButton.js';
+export { default as RadioButtonGroup } from './components/RadioButtonGroup/RadioButtonGroup.js';
 export { default as Search } from './components/Search/index.js';
 export { default as SearchFilterButton } from './components/SearchFilterButton/SearchFilterButton.js';
 export { default as SearchLayoutButton } from './components/SearchLayoutButton/SearchLayoutButton.js';
@@ -117,6 +114,7 @@ export { default as FileUploaderDropContainer } from './components/FileUploader/
 export { default as FileUploaderItem } from './components/FileUploader/FileUploaderItem.js';
 export { default as Row } from './components/Grid/Row.js';
 export { default as Column } from './components/Grid/Column.js';
+export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
 export { default as HeaderMenuButton } from './components/UIShell/HeaderMenuButton.js';
 export { default as HeaderName } from './components/UIShell/HeaderName.js';
 export { default as SkipToContent } from './components/UIShell/SkipToContent.js';
@@ -135,13 +133,13 @@ export { default as unstable_PageSelector } from './components/Pagination/experi
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js';
 export { default as unstable_TreeNode } from './components/TreeView/TreeNode.js';
-export { default as ComposedModal, ModalBody } from './components/ComposedModal/ComposedModal.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
 export { default as unstable_Menu } from './components/Menu/Menu.js';
 export { default as unstable_TreeView } from './components/TreeView/TreeView.js';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem.js';
+export { ModalBody } from './components/ComposedModal/ComposedModal.js';
 export { default as Table } from './components/DataTable/Table.js';
 export { default as TableActionList } from './components/DataTable/TableActionList.js';
 export { default as TableBatchAction } from './components/DataTable/TableBatchAction.js';
@@ -164,9 +162,12 @@ export { default as TableToolbarSearch } from './components/DataTable/TableToolb
 export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
 export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary.js';
 export { ErrorBoundaryContext } from './components/ErrorBoundary/ErrorBoundaryContext.js';
+export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
 export { Grid } from './components/Grid/Grid.js';
 export { ColumnHang } from './components/Grid/ColumnHang.js';
 export { FlexGrid } from './components/Grid/FlexGrid.js';
+export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, ToastNotification } from './components/Notification/Notification.js';
+export { NumberInput } from './components/NumberInput/NumberInput.js';
 export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
 export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
 export { ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';

package/es/internal/createClassWrapper.js

@@ -20,11 +20,8 @@ function createClassWrapper(Component) {
     return /*#__PURE__*/React__default.createElement(Component, props);
   }
 
-  if (process.env.NODE_ENV !== "production") {
-    var name = Component.displayName || Component.name;
-    ClassWrapper.displayName = "ClassWrapper(".concat(name, ")");
-  }
-
+  var name = Component.displayName || Component.name;
+  ClassWrapper.displayName = "ClassWrapper(".concat(name, ")");
   return ClassWrapper;
 }
 

package/lib/components/ComposedModal/index.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var FeatureFlags = require('@carbon/feature-flags');
 var ModalHeader$1 = require('./next/ModalHeader.js');
 var ModalFooter$1 = require('./next/ModalFooter.js');
-var ComposedModal$1 = require('./next/ComposedModal.js');
-var ComposedModal = require('./ComposedModal.js');
+var ComposedModal$2 = require('./next/ComposedModal.js');
+var ComposedModal$1 = require('./ComposedModal.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -35,11 +35,11 @@ function _interopNamespace(e) {
 
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var ModalHeader = FeatureFlags__namespace.enabled('enable-v11-release') ? ModalHeader$1.ModalHeader : ComposedModal.ModalHeader;
-var ModalFooter = FeatureFlags__namespace.enabled('enable-v11-release') ? ModalFooter$1.ModalFooter : ComposedModal.ModalFooter;
-FeatureFlags__namespace.enabled('enable-v11-release') ? ComposedModal$1["default"] : ComposedModal["default"];
+var ModalHeader = FeatureFlags__namespace.enabled('enable-v11-release') ? ModalHeader$1.ModalHeader : ComposedModal$1.ModalHeader;
+var ModalFooter = FeatureFlags__namespace.enabled('enable-v11-release') ? ModalFooter$1.ModalFooter : ComposedModal$1.ModalFooter;
+var ComposedModal = FeatureFlags__namespace.enabled('enable-v11-release') ? ComposedModal$2["default"] : ComposedModal$1["default"];
 
-exports.ModalBody = ComposedModal.ModalBody;
-exports["default"] = ComposedModal["default"];
+exports.ModalBody = ComposedModal$1.ModalBody;
+exports.ComposedModal = ComposedModal;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;

package/lib/components/ComposedModal/next/ComposedModal.js

@@ -225,7 +225,7 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
     className: "".concat(prefix, "--visually-hidden")
   }, "Focus sentinel")));
 });
-ComposedModal.propTypes = (_ComposedModal$propTy = {}, _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "size", PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
+ComposedModal.propTypes = (_ComposedModal$propTy = {}, _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "size", PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
 ComposedModal.defaultProps = {
   onKeyDown: function onKeyDown() {},
   selectorPrimaryFocus: '[data-modal-primary-focus]'

package/lib/components/DataTable/DataTable.js

@@ -14,12 +14,12 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var isEqual = require('lodash.isequal');
 var getDerivedStateFromProps = require('./state/getDerivedStateFromProps.js');
-var sorting = require('./state/sorting.js');
+var sorting$1 = require('./state/sorting.js');
 var cells = require('./tools/cells.js');
 var denormalize = require('./tools/denormalize.js');
 var events = require('../../tools/events.js');
 var filter = require('./tools/filter.js');
-var sorting$1 = require('./tools/sorting.js');
+var sorting = require('./tools/sorting.js');
 var instanceId = require('./tools/instanceId.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -90,7 +90,7 @@ var DataTable = /*#__PURE__*/function (_React$Component) {
         isSortable: isSortable,
         isSortHeader: sortHeaderKey === header.key,
         onClick: function onClick(event) {
-          var nextSortState = sorting.getNextSortState(_this.props, _this.state, {
+          var nextSortState = sorting$1.getNextSortState(_this.props, _this.state, {
             key: header.key
           });
 
@@ -387,7 +387,7 @@ var DataTable = /*#__PURE__*/function (_React$Component) {
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleSortBy", function (headerKey) {
       return function () {
         _this.setState(function (state) {
-          return sorting.getNextSortState(_this.props, state, {
+          return sorting$1.getNextSortState(_this.props, state, {
             key: headerKey
           });
         });
@@ -626,7 +626,7 @@ _rollupPluginBabelHelpers.defineProperty(DataTable, "propTypes", {
 });
 
 _rollupPluginBabelHelpers.defineProperty(DataTable, "defaultProps", {
-  sortRow: sorting$1.defaultSortRow,
+  sortRow: sorting.defaultSortRow,
   filterRows: filter.defaultFilterRows,
   locale: 'en',
   size: 'lg',

package/lib/components/DataTable/Table.js

@@ -14,6 +14,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var TableContext = require('./TableContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,11 +36,18 @@ var Table = function Table(_ref) {
       overflowMenuOnHover = _ref.overflowMenuOnHover,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
+  var _useContext = React.useContext(TableContext.TableContext),
+      titleId = _useContext.titleId,
+      descriptionId = _useContext.descriptionId;
+
   var prefix = usePrefix.usePrefix();
   var componentClass = cx__default["default"]("".concat(prefix, "--data-table"), className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--sort"), isSortable), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--zebra"), useZebraStyles), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--static"), useStaticWidth), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--sticky-header"), stickyHeader), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--visible-overflow-menu"), !overflowMenuOnHover), _cx));
   var table = /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--data-table-content")
-  }, /*#__PURE__*/React__default["default"].createElement("table", _rollupPluginBabelHelpers["extends"]({}, other, {
+  }, /*#__PURE__*/React__default["default"].createElement("table", _rollupPluginBabelHelpers["extends"]({
+    "aria-labelledby": titleId,
+    "aria-describedby": descriptionId
+  }, other, {
     className: componentClass
   }), children));
   return stickyHeader ? /*#__PURE__*/React__default["default"].createElement("section", {

package/lib/components/DataTable/TableContainer.js

@@ -14,6 +14,8 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
+var useId = require('../../internal/useId.js');
+var TableContext = require('./TableContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,17 +36,30 @@ var TableContainer = function TableContainer(_ref) {
       useStaticWidth = _ref.useStaticWidth,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
+  var baseId = useId.useId('tc');
+  var titleId = "".concat(baseId, "-title");
+  var descriptionId = "".concat(baseId, "-description");
   var prefix = usePrefix.usePrefix();
   var tableContainerClasses = cx__default["default"](className, "".concat(prefix, "--data-table-container"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--max-width"), stickyHeader), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table-container--static"), useStaticWidth), _cx));
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  var value = React.useMemo(function () {
+    return {
+      titleId: title ? titleId : null,
+      descriptionId: description ? descriptionId : null
+    };
+  }, [title, description, titleId, descriptionId]);
+  return /*#__PURE__*/React__default["default"].createElement(TableContext.TableContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: tableContainerClasses
   }), title && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--data-table-header")
   }, /*#__PURE__*/React__default["default"].createElement("h4", {
-    className: "".concat(prefix, "--data-table-header__title")
+    className: "".concat(prefix, "--data-table-header__title"),
+    id: titleId
   }, title), /*#__PURE__*/React__default["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/lib/components/DataTable/TableContext.js

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var TableContext = /*#__PURE__*/React.createContext({
+  titleId: null,
+  descriptionId: null
+});
+
+exports.TableContext = TableContext;

package/lib/components/DataTable/TableSelectRow.js

@@ -14,7 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var InlineCheckbox = require('../InlineCheckbox/InlineCheckbox.js');
-var index = require('../RadioButton/index.js');
+var RadioButton = require('../RadioButton/RadioButton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -44,7 +44,7 @@ var TableSelectRow = function TableSelectRow(_ref) {
     checked: checked,
     disabled: disabled
   };
-  var InlineInputComponent = radio ? index["default"] : InlineCheckbox["default"];
+  var InlineInputComponent = radio ? RadioButton["default"] : InlineCheckbox["default"];
   var tableSelectRowClasses = cx__default["default"]("".concat(prefix, "--table-column-checkbox"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--table-column-radio"), radio), _classNames));
   return /*#__PURE__*/React__default["default"].createElement("td", {
     className: tableSelectRowClasses

package/lib/components/FileUploader/FileUploader.js

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

package/lib/components/FileUploader/FileUploaderButton.js

@@ -45,7 +45,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-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() {}
 
@@ -74,6 +74,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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -125,6 +126,7 @@ function FileUploaderButton(_ref) {
   }
 
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
+    ref: innerRef,
     tabIndex: disabled ? -1 : tabIndex || 0,
     className: classes,
     onKeyDown: onKeyDown,

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -24,7 +24,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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;
@@ -40,6 +40,7 @@ function FileUploaderDropContainer(_ref) {
       pattern = _ref.pattern,
       role = _ref.role,
       tabIndex = _ref.tabIndex,
+      innerRef = _ref.innerRef,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -135,6 +136,7 @@ function FileUploaderDropContainer(_ref) {
       handleChange(evt);
     }
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
+    ref: innerRef,
     className: labelClasses,
     htmlFor: uid,
     tabIndex: tabIndex || 0,

package/lib/components/FileUploader/FileUploaderItem.js

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

package/lib/components/InlineLoading/InlineLoading.js

@@ -25,8 +25,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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,
@@ -40,10 +38,12 @@ function InlineLoading(_ref) {
   var loadingClasses = cx__default["default"]("".concat(prefix, "--inline-loading"), className);
 
   var getLoading = function getLoading() {
+    var iconLabel = iconDescription ? iconDescription : status;
+
     if (status === 'error') {
       return /*#__PURE__*/React__default["default"].createElement(iconsReact.ErrorFilled, {
         className: "".concat(prefix, "--inline-loading--error")
-      }, _title || (_title = /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription)));
+      }, /*#__PURE__*/React__default["default"].createElement("title", null, iconLabel));
     }
 
     if (status === 'finished') {
@@ -54,13 +54,17 @@ function InlineLoading(_ref) {
       }, successDelay);
       return /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkFilled, {
         className: "".concat(prefix, "--inline-loading__checkmark-container")
-      }, _title2 || (_title2 = /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription)));
+      }, /*#__PURE__*/React__default["default"].createElement("title", null, iconLabel));
     }
 
     if (status === 'inactive' || status === 'active') {
+      if (!iconDescription) {
+        iconLabel = status === 'active' ? 'loading' : 'not loading';
+      }
+
       return /*#__PURE__*/React__default["default"].createElement(Loading["default"], {
         small: true,
-        description: iconDescription,
+        description: iconLabel,
         withOverlay: false,
         active: status === 'active'
       });

package/lib/components/Loading/Loading.js

@@ -13,8 +13,8 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var deprecate = require('../../prop-types/deprecate.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,14 +22,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["id", "active", "className", "withOverlay", "small", "description"];
-var getInstanceId = setupGetInstanceId["default"]();
+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,
@@ -37,22 +35,13 @@ function Loading(_ref) {
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-
-  var _useRef = React.useRef(getInstanceId()),
-      instanceId = _useRef.current;
-
   var loadingClassName = cx__default["default"](customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--loading"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--loading--small"), small), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--loading--stop"), !active), _cx));
   var overlayClassName = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--loading-overlay"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--loading-overlay--stop"), !active), _cx2));
-  var loadingId = id || "loading-id-".concat(instanceId);
   var loading = /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-atomic": "true",
-    "aria-labelledby": loadingId,
     "aria-live": active ? 'assertive' : 'off',
     className: loadingClassName
-  }), /*#__PURE__*/React__default["default"].createElement("label", {
-    id: loadingId,
-    className: "".concat(prefix, "--visually-hidden")
-  }, description), /*#__PURE__*/React__default["default"].createElement("svg", {
+  }), /*#__PURE__*/React__default["default"].createElement("svg", {
     className: "".concat(prefix, "--loading__svg"),
     viewBox: "0 0 100 100"
   }, /*#__PURE__*/React__default["default"].createElement("title", null, description), small ? /*#__PURE__*/React__default["default"].createElement("circle", {
@@ -90,7 +79,7 @@ Loading.propTypes = {
   /**
    * Provide an `id` to uniquely identify the label
    */
-  id: PropTypes__default["default"].string,
+  id: deprecate["default"](PropTypes__default["default"].string, "\nThe prop `id` is no longer needed."),
 
   /**
    * Specify whether you would like the small variant of <Loading>
@@ -106,7 +95,7 @@ Loading.defaultProps = {
   active: true,
   withOverlay: true,
   small: false,
-  description: 'Active loading indicator'
+  description: 'loading'
 };
 
 exports["default"] = Loading;

package/lib/components/Menu/Menu.js

@@ -322,7 +322,7 @@ Menu.propTypes = {
   /**
    * Optionally pass an element the Menu should be appended to as a child. Defaults to document.body.
    */
-  target: PropTypes__default["default"].element,
+  target: PropTypes__default["default"].object,
 
   /**
    * Specify the x position where this menu is rendered