@carbon/react 1.7.0 → 1.8.0-rc.0

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/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;