@carbon/react 1.1.0-rc.0 → 1.2.0

package/es/components/AspectRatio/AspectRatio.js

@@ -61,7 +61,7 @@ AspectRatio.propTypes = {
    * Specify the ratio to be used by the aspect ratio container. This will
    * determine what aspect ratio your content will be displayed in.
    */
-  ratio: PropTypes.oneOf(['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'])
+  ratio: PropTypes.oneOf(['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '3x2', '2x3', '1x1'])
 };
 
 export { AspectRatio as default };

package/es/components/ClassPrefix/index.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 PropTypes from 'prop-types';
+import React__default from 'react';
+import { PrefixContext } from '../../internal/usePrefix.js';
+
+function ClassPrefix(_ref) {
+  var children = _ref.children,
+      prefix = _ref.prefix;
+  return /*#__PURE__*/React__default.createElement(PrefixContext.Provider, {
+    value: prefix
+  }, children);
+}
+
+ClassPrefix.propTypes = {
+  children: PropTypes.node,
+
+  /**
+   * The value used to prefix the CSS selectors used by Carbon components
+   */
+  prefix: PropTypes.string.isRequired
+};
+
+export { ClassPrefix };

package/es/components/FileUploader/index.js

@@ -7,6 +7,7 @@
 
 import * as FeatureFlags from '@carbon/feature-flags';
 import FileUploader from './FileUploader.js';
+export { default as FileUploader } from './FileUploader.js';
 import { createClassWrapper } from '../../internal/createClassWrapper.js';
 
 var index = FeatureFlags.enabled('enable-v11-release') ? createClassWrapper(FileUploader) : FileUploader;

package/es/components/Pagination/next/Pagination.js

@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof,
 import { CaretLeft, CaretRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState } from 'react';
+import React__default, { useRef, useState } from 'react';
 import Select from '../../Select/Select.js';
 import SelectItem from '../../SelectItem/SelectItem.js';
 import { equals } from '../../../tools/array.js';
@@ -108,6 +108,8 @@ var Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_ref
 
   var prefix = usePrefix();
   var inputId = useFallbackId(id);
+  var backBtnRef = useRef(null);
+  var forwardBtnRef = useRef(null);
 
   var _useState = useState(function () {
     return mapPageSizesToObject(controlledPageSizes);
@@ -209,24 +211,40 @@ var Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_ref
 
   function incrementPage() {
     var nextPage = page + 1;
-    setPage(nextPage);
+    setPage(nextPage); // when the increment button reaches the last page,
+    // the icon button becomes disabled and the focus shifts to `main`
+    // this presents an a11y problem for keyboard & screen reader users
+    // instead, we want the focus to shift to the other pagination btn
+
+    if (nextPage === totalPages) {
+      backBtnRef.current.focus();
+    }
 
     if (onChange) {
       onChange({
         page: nextPage,
-        pageSize: pageSize
+        pageSize: pageSize,
+        backBtnRef: backBtnRef
       });
     }
   }
 
   function decrementPage() {
     var nextPage = page - 1;
-    setPage(nextPage);
+    setPage(nextPage); // when the decrement button reaches the first page,
+    // the icon button becomes disabled and the focus shifts to `main`
+    // this presents an a11y problem for keyboard & screen reader users
+    // instead, we want the focus to shift to the other pagination btn
+
+    if (nextPage === 1) {
+      forwardBtnRef.current.focus();
+    }
 
     if (onChange) {
       onChange({
         page: nextPage,
-        pageSize: pageSize
+        pageSize: pageSize,
+        forwardBtnRef: forwardBtnRef
       });
     }
   }
@@ -279,14 +297,16 @@ var Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_ref
     kind: "ghost",
     className: backButtonClasses,
     label: backwardText,
-    onClick: decrementPage
+    onClick: decrementPage,
+    ref: backBtnRef
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null))), /*#__PURE__*/React__default.createElement(IconButton, {
     align: "top-right",
     disabled: forwardButtonDisabled || isLastPage,
     kind: "ghost",
     className: forwardButtonClasses,
     label: forwardText,
-    onClick: incrementPage
+    onClick: incrementPage,
+    ref: forwardBtnRef
   }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))))));
 });
 Pagination.propTypes = {

package/es/components/Slider/Slider.js

@@ -479,6 +479,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           step: step,
           onChange: _this2.onChange,
           onBlur: _this2.onBlur,
+          onKeyUp: _this2.onInputKeyUp,
           "data-invalid": isValid ? null : true,
           "aria-invalid": isValid ? null : true
         })));
@@ -596,6 +597,11 @@ _defineProperty(Slider, "propTypes", {
    */
   onChange: PropTypes.func,
 
+  /**
+   * Provide an optional function to be called when a key is pressed in the number input
+   */
+  onInputKeyUp: PropTypes.func,
+
   /**
    * The callback to get notified of value on handle release.
    */

package/es/components/Tooltip/next/Tooltip.js

@@ -8,11 +8,11 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef } from 'react';
+import React__default, { useRef, useEffect } from 'react';
 import { Popover, PopoverContent } from '../../Popover/index.js';
 import { useDelayedState } from '../../../internal/useDelayedState.js';
 import { useId } from '../../../internal/useId.js';
-import { useNoInteractiveChildren } from '../../../internal/useNoInteractiveChildren.js';
+import { useNoInteractiveChildren, getInteractiveContent } from '../../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 import { match } from '../../../internal/keyboard/match.js';
 import { Escape } from '../../../internal/keyboard/keys.js';
@@ -78,6 +78,13 @@ function Tooltip(_ref) {
   }
 
   useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
+  useEffect(function () {
+    var interactiveContent = getInteractiveContent(containerRef.current);
+
+    if (!interactiveContent) {
+      setOpen(false);
+    }
+  });
   return /*#__PURE__*/React__default.createElement(Popover, _extends({}, rest, {
     align: align,
     className: cx("".concat(prefix, "--tooltip"), customClassName),

package/es/components/TreeView/TreeNode.js

@@ -64,15 +64,12 @@ function TreeNode(_ref) {
   var toggleClasses = cx("".concat(prefix, "--tree-parent-node__toggle-icon"), _defineProperty({}, "".concat(prefix, "--tree-parent-node__toggle-icon--expanded"), expanded));
 
   function handleToggleClick(event) {
-    if (onToggle) {
-      onToggle(event, {
-        id: id,
-        isExpanded: !expanded,
-        label: label,
-        value: value
-      });
-    }
-
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
+      id: id,
+      isExpanded: !expanded,
+      label: label,
+      value: value
+    });
     setExpanded(!expanded);
   }
 
@@ -80,29 +77,25 @@ function TreeNode(_ref) {
     event.stopPropagation();
 
     if (!disabled) {
-      if (onTreeSelect) {
-        onTreeSelect(event, {
-          id: id,
-          label: label,
-          value: value
-        });
-      }
-
-      if (onNodeSelect) {
-        onNodeSelect(event, {
-          id: id,
-          label: label,
-          value: value
-        });
-      }
+      var _rest$onClick;
 
-      if (rest.onClick) {
-        rest.onClick(event);
-      }
+      onTreeSelect === null || onTreeSelect === void 0 ? void 0 : onTreeSelect(event, {
+        id: id,
+        label: label,
+        value: value
+      });
+      onNodeSelect === null || onNodeSelect === void 0 ? void 0 : onNodeSelect(event, {
+        id: id,
+        label: label,
+        value: value
+      });
+      rest === null || rest === void 0 ? void 0 : (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 ? void 0 : _rest$onClick.call(rest, event);
     }
   }
 
   function handleKeyDown(event) {
+    var _rest$onKeyDown;
+
     if (matches(event, [ArrowLeft, ArrowRight, Enter])) {
       event.stopPropagation();
     }
@@ -121,7 +114,7 @@ function TreeNode(_ref) {
       };
 
       if (children && expanded) {
-        onToggle(event, {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
           id: id,
           isExpanded: false,
           label: label,
@@ -147,7 +140,7 @@ function TreeNode(_ref) {
          */
         currentNode.current.lastChild.firstChild.focus();
       } else {
-        onToggle(event, {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
           id: id,
           isExpanded: true,
           label: label,
@@ -162,21 +155,23 @@ function TreeNode(_ref) {
       handleClick(event);
     }
 
-    if (rest.onKeyDown) {
-      rest.onKeyDown(event);
-    }
+    rest === null || rest === void 0 ? void 0 : (_rest$onKeyDown = rest.onKeyDown) === null || _rest$onKeyDown === void 0 ? void 0 : _rest$onKeyDown.call(rest, event);
   }
 
   function handleFocusEvent(event) {
-    if (event.type === 'blur' && rest.onBlur) {
-      rest.onBlur(event);
+    if (event.type === 'blur') {
+      var _rest$onBlur;
+
+      rest === null || rest === void 0 ? void 0 : (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 ? void 0 : _rest$onBlur.call(rest, event);
     }
 
-    if (event.type === 'focus' && rest.onFocus) {
-      rest.onFocus(event);
+    if (event.type === 'focus') {
+      var _rest$onFocus;
+
+      rest === null || rest === void 0 ? void 0 : (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest, event);
     }
 
-    onNodeFocusEvent && onNodeFocusEvent(event);
+    onNodeFocusEvent === null || onNodeFocusEvent === void 0 ? void 0 : onNodeFocusEvent(event);
   }
 
   useEffect(function () {

package/es/components/TreeView/TreeView.js

@@ -74,9 +74,7 @@ function TreeView(_ref) {
       setActive(nodeId);
     }
 
-    if (onSelect) {
-      onSelect(event, node);
-    }
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, node);
   }
 
   function handleFocusEvent(event) {
@@ -128,6 +126,8 @@ function TreeView(_ref) {
   });
 
   function handleKeyDown(event) {
+    var _rest$onKeyDown;
+
     event.stopPropagation();
 
     if (matches(event, [ArrowUp, ArrowDown])) {
@@ -151,9 +151,7 @@ function TreeView(_ref) {
       nextFocusNode.focus();
     }
 
-    if (rest.onKeyDown) {
-      rest.onKeyDown(event);
-    }
+    rest === null || rest === void 0 ? void 0 : (_rest$onKeyDown = rest.onKeyDown) === null || _rest$onKeyDown === void 0 ? void 0 : _rest$onKeyDown.call(rest, event);
   }
 
   useEffect(function () {

package/es/index.js

@@ -14,6 +14,7 @@ export { default as Button } from './components/Button/Button.js';
 export { default as ButtonSet } from './components/ButtonSet/ButtonSet.js';
 export { default as CheckboxSkeleton } from './components/Checkbox/Checkbox.Skeleton.js';
 export { default as Checkbox } from './components/Checkbox/Checkbox.js';
+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';
@@ -125,7 +126,7 @@ export { default as unstable_MenuRadioGroup } from './components/Menu/MenuRadioG
 export { default as unstable_MenuSelectableItem } from './components/Menu/MenuSelectableItem.js';
 export { default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
-export { default as unstable_ProgressBar } from './components/ProgressBar/ProgressBar.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';

package/es/internal/useSavedCallback.js

@@ -24,7 +24,7 @@ function useSavedCallback(callback) {
   });
   return useCallback(function () {
     if (savedCallback.current) {
-      return savedCallback.current();
+      return savedCallback.current.apply(savedCallback, arguments);
     }
   }, []);
 }

package/lib/components/AspectRatio/AspectRatio.js

@@ -71,7 +71,7 @@ AspectRatio.propTypes = {
    * Specify the ratio to be used by the aspect ratio container. This will
    * determine what aspect ratio your content will be displayed in.
    */
-  ratio: PropTypes__default["default"].oneOf(['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'])
+  ratio: PropTypes__default["default"].oneOf(['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '3x2', '2x3', '1x1'])
 };
 
 exports["default"] = AspectRatio;

package/lib/components/ClassPrefix/index.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ClassPrefix(_ref) {
+  var children = _ref.children,
+      prefix = _ref.prefix;
+  return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Provider, {
+    value: prefix
+  }, children);
+}
+
+ClassPrefix.propTypes = {
+  children: PropTypes__default["default"].node,
+
+  /**
+   * The value used to prefix the CSS selectors used by Carbon components
+   */
+  prefix: PropTypes__default["default"].string.isRequired
+};
+
+exports.ClassPrefix = ClassPrefix;

package/lib/components/FileUploader/index.js

@@ -35,4 +35,5 @@ var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
 var index = FeatureFlags__namespace.enabled('enable-v11-release') ? createClassWrapper.createClassWrapper(FileUploader["default"]) : FileUploader["default"];
 
+exports.FileUploader = FileUploader["default"];
 exports["default"] = index;

package/lib/components/Pagination/next/Pagination.js

@@ -118,6 +118,8 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagi
 
   var prefix = usePrefix.usePrefix();
   var inputId = useId.useFallbackId(id);
+  var backBtnRef = React.useRef(null);
+  var forwardBtnRef = React.useRef(null);
 
   var _useState = React.useState(function () {
     return mapPageSizesToObject(controlledPageSizes);
@@ -219,24 +221,40 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagi
 
   function incrementPage() {
     var nextPage = page + 1;
-    setPage(nextPage);
+    setPage(nextPage); // when the increment button reaches the last page,
+    // the icon button becomes disabled and the focus shifts to `main`
+    // this presents an a11y problem for keyboard & screen reader users
+    // instead, we want the focus to shift to the other pagination btn
+
+    if (nextPage === totalPages) {
+      backBtnRef.current.focus();
+    }
 
     if (onChange) {
       onChange({
         page: nextPage,
-        pageSize: pageSize
+        pageSize: pageSize,
+        backBtnRef: backBtnRef
       });
     }
   }
 
   function decrementPage() {
     var nextPage = page - 1;
-    setPage(nextPage);
+    setPage(nextPage); // when the decrement button reaches the first page,
+    // the icon button becomes disabled and the focus shifts to `main`
+    // this presents an a11y problem for keyboard & screen reader users
+    // instead, we want the focus to shift to the other pagination btn
+
+    if (nextPage === 1) {
+      forwardBtnRef.current.focus();
+    }
 
     if (onChange) {
       onChange({
         page: nextPage,
-        pageSize: pageSize
+        pageSize: pageSize,
+        forwardBtnRef: forwardBtnRef
       });
     }
   }
@@ -289,14 +307,16 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagi
     kind: "ghost",
     className: backButtonClasses,
     label: backwardText,
-    onClick: decrementPage
+    onClick: decrementPage,
+    ref: backBtnRef
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null))), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     align: "top-right",
     disabled: forwardButtonDisabled || isLastPage,
     kind: "ghost",
     className: forwardButtonClasses,
     label: forwardText,
-    onClick: incrementPage
+    onClick: incrementPage,
+    ref: forwardBtnRef
   }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null))))));
 });
 Pagination.propTypes = {

package/lib/components/Slider/Slider.js

@@ -509,6 +509,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           step: step,
           onChange: _this2.onChange,
           onBlur: _this2.onBlur,
+          onKeyUp: _this2.onInputKeyUp,
           "data-invalid": isValid ? null : true,
           "aria-invalid": isValid ? null : true
         })));
@@ -626,6 +627,11 @@ _rollupPluginBabelHelpers.defineProperty(Slider, "propTypes", {
    */
   onChange: PropTypes__default["default"].func,
 
+  /**
+   * Provide an optional function to be called when a key is pressed in the number input
+   */
+  onInputKeyUp: PropTypes__default["default"].func,
+
   /**
    * The callback to get notified of value on handle release.
    */

package/lib/components/Tooltip/next/Tooltip.js

@@ -88,6 +88,13 @@ function Tooltip(_ref) {
   }
 
   useNoInteractiveChildren.useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
+  React.useEffect(function () {
+    var interactiveContent = useNoInteractiveChildren.getInteractiveContent(containerRef.current);
+
+    if (!interactiveContent) {
+      setOpen(false);
+    }
+  });
   return /*#__PURE__*/React__default["default"].createElement(index.Popover, _rollupPluginBabelHelpers["extends"]({}, rest, {
     align: align,
     className: cx__default["default"]("".concat(prefix, "--tooltip"), customClassName),

package/lib/components/TreeView/TreeNode.js

@@ -74,15 +74,12 @@ function TreeNode(_ref) {
   var toggleClasses = cx__default["default"]("".concat(prefix, "--tree-parent-node__toggle-icon"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tree-parent-node__toggle-icon--expanded"), expanded));
 
   function handleToggleClick(event) {
-    if (onToggle) {
-      onToggle(event, {
-        id: id,
-        isExpanded: !expanded,
-        label: label,
-        value: value
-      });
-    }
-
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
+      id: id,
+      isExpanded: !expanded,
+      label: label,
+      value: value
+    });
     setExpanded(!expanded);
   }
 
@@ -90,29 +87,25 @@ function TreeNode(_ref) {
     event.stopPropagation();
 
     if (!disabled) {
-      if (onTreeSelect) {
-        onTreeSelect(event, {
-          id: id,
-          label: label,
-          value: value
-        });
-      }
-
-      if (onNodeSelect) {
-        onNodeSelect(event, {
-          id: id,
-          label: label,
-          value: value
-        });
-      }
+      var _rest$onClick;
 
-      if (rest.onClick) {
-        rest.onClick(event);
-      }
+      onTreeSelect === null || onTreeSelect === void 0 ? void 0 : onTreeSelect(event, {
+        id: id,
+        label: label,
+        value: value
+      });
+      onNodeSelect === null || onNodeSelect === void 0 ? void 0 : onNodeSelect(event, {
+        id: id,
+        label: label,
+        value: value
+      });
+      rest === null || rest === void 0 ? void 0 : (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 ? void 0 : _rest$onClick.call(rest, event);
     }
   }
 
   function handleKeyDown(event) {
+    var _rest$onKeyDown;
+
     if (match.matches(event, [keys.ArrowLeft, keys.ArrowRight, keys.Enter])) {
       event.stopPropagation();
     }
@@ -131,7 +124,7 @@ function TreeNode(_ref) {
       };
 
       if (children && expanded) {
-        onToggle(event, {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
           id: id,
           isExpanded: false,
           label: label,
@@ -157,7 +150,7 @@ function TreeNode(_ref) {
          */
         currentNode.current.lastChild.firstChild.focus();
       } else {
-        onToggle(event, {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
           id: id,
           isExpanded: true,
           label: label,
@@ -172,21 +165,23 @@ function TreeNode(_ref) {
       handleClick(event);
     }
 
-    if (rest.onKeyDown) {
-      rest.onKeyDown(event);
-    }
+    rest === null || rest === void 0 ? void 0 : (_rest$onKeyDown = rest.onKeyDown) === null || _rest$onKeyDown === void 0 ? void 0 : _rest$onKeyDown.call(rest, event);
   }
 
   function handleFocusEvent(event) {
-    if (event.type === 'blur' && rest.onBlur) {
-      rest.onBlur(event);
+    if (event.type === 'blur') {
+      var _rest$onBlur;
+
+      rest === null || rest === void 0 ? void 0 : (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 ? void 0 : _rest$onBlur.call(rest, event);
     }
 
-    if (event.type === 'focus' && rest.onFocus) {
-      rest.onFocus(event);
+    if (event.type === 'focus') {
+      var _rest$onFocus;
+
+      rest === null || rest === void 0 ? void 0 : (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest, event);
     }
 
-    onNodeFocusEvent && onNodeFocusEvent(event);
+    onNodeFocusEvent === null || onNodeFocusEvent === void 0 ? void 0 : onNodeFocusEvent(event);
   }
 
   React.useEffect(function () {

package/lib/components/TreeView/TreeView.js

@@ -103,9 +103,7 @@ function TreeView(_ref) {
       setActive(nodeId);
     }
 
-    if (onSelect) {
-      onSelect(event, node);
-    }
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, node);
   }
 
   function handleFocusEvent(event) {
@@ -157,6 +155,8 @@ function TreeView(_ref) {
   });
 
   function handleKeyDown(event) {
+    var _rest$onKeyDown;
+
     event.stopPropagation();
 
     if (match.matches(event, [keys.ArrowUp, keys.ArrowDown])) {
@@ -180,9 +180,7 @@ function TreeView(_ref) {
       nextFocusNode.focus();
     }
 
-    if (rest.onKeyDown) {
-      rest.onKeyDown(event);
-    }
+    rest === null || rest === void 0 ? void 0 : (_rest$onKeyDown = rest.onKeyDown) === null || _rest$onKeyDown === void 0 ? void 0 : _rest$onKeyDown.call(rest, event);
   }
 
   React.useEffect(function () {

package/lib/index.js

@@ -18,15 +18,16 @@ var Button = require('./components/Button/Button.js');
 var ButtonSet = require('./components/ButtonSet/ButtonSet.js');
 var Checkbox_Skeleton = require('./components/Checkbox/Checkbox.Skeleton.js');
 var Checkbox = require('./components/Checkbox/Checkbox.js');
+var index$i = require('./components/ClassPrefix/index.js');
 var CodeSnippet_Skeleton = require('./components/CodeSnippet/CodeSnippet.Skeleton.js');
 var CodeSnippet = require('./components/CodeSnippet/CodeSnippet.js');
 var ComboBox = require('./components/ComboBox/ComboBox.js');
-var index$i = require('./components/ComposedModal/index.js');
+var index$j = require('./components/ComposedModal/index.js');
 var index = require('./components/ContentSwitcher/index.js');
 var Copy = require('./components/Copy/Copy.js');
 var CopyButton = require('./components/CopyButton/CopyButton.js');
 var DangerButton = require('./components/DangerButton/DangerButton.js');
-var index$j = require('./components/DataTable/index.js');
+var index$k = require('./components/DataTable/index.js');
 var index$1 = require('./components/DatePicker/index.js');
 var index$2 = require('./components/DatePickerInput/index.js');
 var Dropdown_Skeleton = require('./components/Dropdown/Dropdown.Skeleton.js');
@@ -43,8 +44,8 @@ var ListItem = require('./components/ListItem/ListItem.js');
 var Loading = require('./components/Loading/Loading.js');
 var index$4 = require('./components/Modal/index.js');
 var ModalWrapper = require('./components/ModalWrapper/ModalWrapper.js');
-var index$k = require('./components/MultiSelect/index.js');
-var index$l = require('./components/Notification/index.js');
+var index$l = require('./components/MultiSelect/index.js');
+var index$m = require('./components/Notification/index.js');
 var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
 var NumberInput = require('./components/NumberInput/NumberInput.js');
 var OrderedList = require('./components/OrderedList/OrderedList.js');
@@ -53,7 +54,7 @@ var index$6 = require('./components/OverflowMenuItem/index.js');
 var index$7 = require('./components/Pagination/index.js');
 var PaginationNav = require('./components/PaginationNav/PaginationNav.js');
 var PrimaryButton = require('./components/PrimaryButton/PrimaryButton.js');
-var index$m = require('./components/ProgressIndicator/index.js');
+var index$n = require('./components/ProgressIndicator/index.js');
 var index$8 = require('./components/RadioButton/index.js');
 var index$9 = require('./components/RadioButtonGroup/index.js');
 var index$a = require('./components/Search/index.js');
@@ -67,7 +68,7 @@ var SelectItem = require('./components/SelectItem/SelectItem.js');
 var SelectItemGroup = require('./components/SelectItemGroup/SelectItemGroup.js');
 var Switch = require('./components/Switch/Switch.js');
 var index$b = require('./components/Slider/index.js');
-var index$n = require('./components/StructuredList/index.js');
+var index$o = require('./components/StructuredList/index.js');
 var index$c = require('./components/Tab/index.js');
 var TabContent = require('./components/TabContent/TabContent.js');
 var index$d = require('./components/Tabs/index.js');
@@ -76,13 +77,13 @@ var Tag = require('./components/Tag/Tag.js');
 var TextArea_Skeleton = require('./components/TextArea/TextArea.Skeleton.js');
 var TextArea = require('./components/TextArea/TextArea.js');
 require('./components/TextInput/index.js');
-var index$o = require('./components/Tile/index.js');
+var index$p = require('./components/Tile/index.js');
 var RadioTile = require('./components/RadioTile/RadioTile.js');
 var index$e = require('./components/TileGroup/index.js');
 var index$f = require('./components/TimePicker/index.js');
 var index$g = require('./components/TimePickerSelect/index.js');
 var index$h = require('./components/Toggle/index.js');
-var index$p = require('./components/Toggletip/index.js');
+var index$q = require('./components/Toggletip/index.js');
 var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
 var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
 var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlaceholder.js');
@@ -101,18 +102,18 @@ var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
 var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
 var Icon_Skeleton = require('./components/Icon/Icon.Skeleton.js');
 var DatePicker_Skeleton = require('./components/DatePicker/DatePicker.Skeleton.js');
-var index$q = require('./components/UIShell/index.js');
-var index$r = require('./components/FeatureFlags/index.js');
-var index$s = require('./components/Heading/index.js');
-var index$t = require('./components/IconButton/index.js');
-var index$u = require('./components/Layer/index.js');
+var index$r = require('./components/UIShell/index.js');
+var index$s = require('./components/FeatureFlags/index.js');
+var index$t = require('./components/Heading/index.js');
+var index$u = require('./components/IconButton/index.js');
+var index$v = require('./components/Layer/index.js');
 require('./components/Menu/index.js');
-var index$v = require('./components/OverflowMenuV2/index.js');
-var index$w = require('./components/Popover/index.js');
-var index$x = require('./components/Stack/index.js');
+var index$w = require('./components/OverflowMenuV2/index.js');
+var index$x = require('./components/Popover/index.js');
+var index$y = require('./components/Stack/index.js');
 var DefinitionTooltip = require('./components/Tooltip/next/DefinitionTooltip.js');
 require('./components/TreeView/index.js');
-var index$y = require('./components/Theme/index.js');
+var index$z = require('./components/Theme/index.js');
 var AspectRatio = require('./components/AspectRatio/AspectRatio.js');
 var Filename = require('./components/FileUploader/Filename.js');
 var FileUploaderButton = require('./components/FileUploader/FileUploaderButton.js');
@@ -207,16 +208,17 @@ exports.Button = Button["default"];
 exports.ButtonSet = ButtonSet["default"];
 exports.CheckboxSkeleton = Checkbox_Skeleton["default"];
 exports.Checkbox = Checkbox["default"];
+exports.ClassPrefix = index$i.ClassPrefix;
 exports.CodeSnippetSkeleton = CodeSnippet_Skeleton["default"];
 exports.CodeSnippet = CodeSnippet["default"];
 exports.ComboBox = ComboBox["default"];
-exports.ModalFooter = index$i.ModalFooter;
-exports.ModalHeader = index$i.ModalHeader;
+exports.ModalFooter = index$j.ModalFooter;
+exports.ModalHeader = index$j.ModalHeader;
 exports.ContentSwitcher = index["default"];
 exports.Copy = Copy["default"];
 exports.CopyButton = CopyButton["default"];
 exports.DangerButton = DangerButton["default"];
-exports.DataTable = index$j["default"];
+exports.DataTable = index$k["default"];
 exports.DatePicker = index$1["default"];
 exports.DatePickerInput = index$2["default"];
 exports.DropdownSkeleton = Dropdown_Skeleton["default"];
@@ -233,13 +235,13 @@ exports.ListItem = ListItem["default"];
 exports.Loading = Loading["default"];
 exports.Modal = index$4["default"];
 exports.ModalWrapper = ModalWrapper["default"];
-exports.FilterableMultiSelect = index$k.FilterableMultiSelect;
-exports.ActionableNotification = index$l.ActionableNotification;
-exports.InlineNotification = index$l.InlineNotification;
-exports.NotificationActionButton = index$l.NotificationActionButton;
-exports.NotificationButton = index$l.NotificationButton;
-exports.NotificationTextDetails = index$l.NotificationTextDetails;
-exports.ToastNotification = index$l.ToastNotification;
+exports.FilterableMultiSelect = index$l.FilterableMultiSelect;
+exports.ActionableNotification = index$m.ActionableNotification;
+exports.InlineNotification = index$m.InlineNotification;
+exports.NotificationActionButton = index$m.NotificationActionButton;
+exports.NotificationButton = index$m.NotificationButton;
+exports.NotificationTextDetails = index$m.NotificationTextDetails;
+exports.ToastNotification = index$m.ToastNotification;
 exports.NumberInputSkeleton = NumberInput_Skeleton["default"];
 exports.NumberInput = NumberInput["default"];
 exports.OrderedList = OrderedList["default"];
@@ -248,7 +250,7 @@ exports.OverflowMenuItem = index$6["default"];
 exports.Pagination = index$7["default"];
 exports.PaginationNav = PaginationNav["default"];
 exports.PrimaryButton = PrimaryButton["default"];
-exports.ProgressIndicator = index$m.ProgressIndicator;
+exports.ProgressIndicator = index$n.ProgressIndicator;
 exports.RadioButton = index$8["default"];
 exports.RadioButtonGroup = index$9["default"];
 exports.Search = index$a["default"];
@@ -262,12 +264,12 @@ exports.SelectItem = SelectItem["default"];
 exports.SelectItemGroup = SelectItemGroup["default"];
 exports.Switch = Switch["default"];
 exports.Slider = index$b["default"];
-exports.StructuredListBody = index$n.StructuredListBody;
-exports.StructuredListCell = index$n.StructuredListCell;
-exports.StructuredListHead = index$n.StructuredListHead;
-exports.StructuredListInput = index$n.StructuredListInput;
-exports.StructuredListRow = index$n.StructuredListRow;
-exports.StructuredListWrapper = index$n.StructuredListWrapper;
+exports.StructuredListBody = index$o.StructuredListBody;
+exports.StructuredListCell = index$o.StructuredListCell;
+exports.StructuredListHead = index$o.StructuredListHead;
+exports.StructuredListInput = index$o.StructuredListInput;
+exports.StructuredListRow = index$o.StructuredListRow;
+exports.StructuredListWrapper = index$o.StructuredListWrapper;
 exports.Tab = index$c["default"];
 exports.TabContent = TabContent["default"];
 exports.Tabs = index$d["default"];
@@ -275,22 +277,22 @@ exports.TagSkeleton = Tag_Skeleton["default"];
 exports.Tag = Tag["default"];
 exports.TextAreaSkeleton = TextArea_Skeleton["default"];
 exports.TextArea = TextArea["default"];
-exports.ClickableTile = index$o.ClickableTile;
-exports.ExpandableTile = index$o.ExpandableTile;
-exports.SelectableTile = index$o.SelectableTile;
-exports.Tile = index$o.Tile;
-exports.TileAboveTheFoldContent = index$o.TileAboveTheFoldContent;
-exports.TileBelowTheFoldContent = index$o.TileBelowTheFoldContent;
+exports.ClickableTile = index$p.ClickableTile;
+exports.ExpandableTile = index$p.ExpandableTile;
+exports.SelectableTile = index$p.SelectableTile;
+exports.Tile = index$p.Tile;
+exports.TileAboveTheFoldContent = index$p.TileAboveTheFoldContent;
+exports.TileBelowTheFoldContent = index$p.TileBelowTheFoldContent;
 exports.RadioTile = RadioTile["default"];
 exports.TileGroup = index$e["default"];
 exports.TimePicker = index$f["default"];
 exports.TimePickerSelect = index$g["default"];
 exports.Toggle = index$h["default"];
-exports.Toggletip = index$p.Toggletip;
-exports.ToggletipActions = index$p.ToggletipActions;
-exports.ToggletipButton = index$p.ToggletipButton;
-exports.ToggletipContent = index$p.ToggletipContent;
-exports.ToggletipLabel = index$p.ToggletipLabel;
+exports.Toggletip = index$q.Toggletip;
+exports.ToggletipActions = index$q.ToggletipActions;
+exports.ToggletipButton = index$q.ToggletipButton;
+exports.ToggletipContent = index$q.ToggletipContent;
+exports.ToggletipLabel = index$q.ToggletipLabel;
 exports.UnorderedList = UnorderedList["default"];
 exports.SkeletonText = SkeletonText["default"];
 exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
@@ -309,24 +311,24 @@ exports.ToggleSkeleton = Toggle_Skeleton["default"];
 exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
 exports.IconSkeleton = Icon_Skeleton["default"];
 exports.DatePickerSkeleton = DatePicker_Skeleton["default"];
-exports.HeaderNavigation = index$q.HeaderNavigation;
-exports.SideNavMenu = index$q.SideNavMenu;
-exports.unstable_FeatureFlags = index$r.FeatureFlags;
-exports.unstable_useFeatureFlag = index$r.useFeatureFlag;
-exports.unstable_useFeatureFlags = index$r.useFeatureFlags;
-exports.Heading = index$s.Heading;
-exports.Section = index$s.Section;
-exports.IconButton = index$t.IconButton;
-exports.Layer = index$u.Layer;
-exports.unstable_OverflowMenuV2 = index$v.OverflowMenuV2;
-exports.Popover = index$w.Popover;
-exports.PopoverContent = index$w.PopoverContent;
-exports.HStack = index$x.HStack;
-exports.VStack = index$x.VStack;
+exports.HeaderNavigation = index$r.HeaderNavigation;
+exports.SideNavMenu = index$r.SideNavMenu;
+exports.unstable_FeatureFlags = index$s.FeatureFlags;
+exports.unstable_useFeatureFlag = index$s.useFeatureFlag;
+exports.unstable_useFeatureFlags = index$s.useFeatureFlags;
+exports.Heading = index$t.Heading;
+exports.Section = index$t.Section;
+exports.IconButton = index$u.IconButton;
+exports.Layer = index$v.Layer;
+exports.unstable_OverflowMenuV2 = index$w.OverflowMenuV2;
+exports.Popover = index$x.Popover;
+exports.PopoverContent = index$x.PopoverContent;
+exports.HStack = index$y.HStack;
+exports.VStack = index$y.VStack;
 exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
-exports.GlobalTheme = index$y.GlobalTheme;
-exports.Theme = index$y.Theme;
-exports.useTheme = index$y.useTheme;
+exports.GlobalTheme = index$z.GlobalTheme;
+exports.Theme = index$z.Theme;
+exports.useTheme = index$z.useTheme;
 exports.AspectRatio = AspectRatio["default"];
 exports.Filename = Filename["default"];
 exports.FileUploaderButton = FileUploaderButton["default"];
@@ -343,7 +345,7 @@ exports.unstable_MenuRadioGroup = MenuRadioGroup["default"];
 exports.unstable_MenuSelectableItem = MenuSelectableItem["default"];
 exports.unstable_PageSelector = PageSelector["default"];
 exports.unstable_Pagination = Pagination["default"];
-exports.unstable_ProgressBar = ProgressBar["default"];
+exports.ProgressBar = ProgressBar["default"];
 exports.unstable_TreeNode = TreeNode["default"];
 exports.ComposedModal = ComposedModal["default"];
 exports.ModalBody = ComposedModal.ModalBody;

package/lib/internal/useSavedCallback.js

@@ -28,7 +28,7 @@ function useSavedCallback(callback) {
   });
   return React.useCallback(function () {
     if (savedCallback.current) {
-      return savedCallback.current();
+      return savedCallback.current.apply(savedCallback, arguments);
     }
   }, []);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.1.0-rc.0",
+  "version": "1.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -45,9 +45,9 @@
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/icons-react": "^11.1.0-rc.0",
-    "@carbon/layout": "^11.1.0-rc.0",
-    "@carbon/styles": "^1.1.0-rc.0",
+    "@carbon/icons-react": "^11.2.0",
+    "@carbon/layout": "^11.1.0",
+    "@carbon/styles": "^1.2.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.1",
     "copy-to-clipboard": "^3.3.1",
@@ -73,10 +73,10 @@
     "@babel/plugin-transform-react-constant-elements": "^7.16.7",
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
-    "@carbon/test-utils": "^10.23.0-rc.0",
-    "@carbon/themes": "^11.1.0-rc.0",
+    "@carbon/test-utils": "^10.23.0",
+    "@carbon/themes": "^11.2.0",
     "@cypress/react": "^5.11.0",
-    "@cypress/webpack-dev-server": "1.8.3",
+    "@cypress/webpack-dev-server": "1.8.4",
     "@percy/cypress": "^3.1.1",
     "@percy/storybook": "^4.1.0",
     "@rollup/plugin-babel": "^5.3.0",
@@ -102,7 +102,7 @@
     "browserslist-config-carbon": "^11.0.0",
     "css-loader": "^6.5.1",
     "cypress": "9.5.3",
-    "cypress-real-events": "1.6.0",
+    "cypress-real-events": "1.7.0",
     "fast-glob": "^3.2.7",
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.5.0",
@@ -136,5 +136,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "8487e08b549acfed947b37fccd37ed38fe9b5aa6"
+  "gitHead": "28cf6f75d268e3103a23a3ce1d50127189703964"
 }

package/scss/_type.scss

@@ -1,9 +0,0 @@
-// Code generated by @carbon/react. DO NOT EDIT.
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@forward '@carbon/styles/scss/type';