@carbon/react 1.22.0-rc.0 → 1.22.0

package/es/components/FluidSelect/FluidSelect.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import Select from '../Select/Select.js';
+import '../Select/Select.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 

package/es/components/IconButton/index.js

@@ -32,6 +32,7 @@ var IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(prop
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     align: align,
     className: "".concat(prefix, "--icon-tooltip"),
+    closeOnActivation: true,
     defaultOpen: defaultOpen,
     enterDelayMs: enterDelayMs,
     label: label,

package/es/components/OverflowMenu/OverflowMenu.js

@@ -15,10 +15,10 @@ import FloatingMenu, { DIRECTION_TOP, DIRECTION_BOTTOM } from '../../internal/Fl
 import { OverflowMenuVertical } from '@carbon/icons-react';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
-import * as FeatureFlags from '@carbon/feature-flags';
 import deprecate from '../../prop-types/deprecate.js';
+import { IconButton } from '../IconButton/index.js';
 import { matches } from '../../internal/keyboard/match.js';
-import { ArrowDown, ArrowUp, ArrowRight, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
+import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["id", "ariaLabel", "children", "iconDescription", "direction", "flipped", "focusTrap", "menuOffset", "menuOffsetFlip", "iconClass", "onClick", "onOpen", "selectorPrimaryFocus", "renderIcon", "innerRef", "menuOptionsClass", "light", "size"];
 
@@ -129,14 +129,14 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (evt) {
-      if (matches(evt, [ArrowDown])) {
-        _this.setState({
-          open: !_this.state.open
-        });
+    _defineProperty(_assertThisInitialized(_this), "closeMenuAndFocus", function () {
+      var wasOpen = _this.state.open;
 
-        _this.props.onClick(evt);
-      }
+      _this.closeMenu(function () {
+        if (wasOpen) {
+          _this.focusMenuEl();
+        }
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleKeyPress", function (evt) {
@@ -146,13 +146,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
 
 
       if (matches(evt, [Escape])) {
-        var wasOpen = _this.state.open;
-
-        _this.closeMenu(function () {
-          if (wasOpen) {
-            _this.focusMenuEl();
-          }
-        }); // Stop the esc keypress from bubbling out and closing something it shouldn't
+        _this.closeMenuAndFocus(); // Stop the esc keypress from bubbling out and closing something it shouldn't
 
 
         evt.stopPropagation();
@@ -187,8 +181,6 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleOverflowMenuItemFocus", function (_ref) {
-      var _overflowMenuItem$cur;
-
       var currentIndex = _ref.currentIndex,
           direction = _ref.direction;
       var enabledIndices = React__default.Children.toArray(_this.props.children).reduce(function (acc, curr, i) {
@@ -202,7 +194,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
       var nextValidIndex = function () {
         var nextIndex = enabledIndices.indexOf(currentIndex) + direction;
 
-        switch (enabledIndices.indexOf(currentIndex) + direction) {
+        switch (nextIndex) {
           case -1:
             return enabledIndices.length - 1;
 
@@ -214,9 +206,9 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         }
       }();
 
-      var overflowMenuItem = _this["overflowMenuItem".concat(enabledIndices[nextValidIndex])].overflowMenuItem;
+      var overflowMenuItem = _this["overflowMenuItem".concat(enabledIndices[nextValidIndex])];
 
-      overflowMenuItem === null || overflowMenuItem === void 0 ? void 0 : (_overflowMenuItem$cur = overflowMenuItem.current) === null || _overflowMenuItem$cur === void 0 ? void 0 : _overflowMenuItem$cur.focus();
+      overflowMenuItem === null || overflowMenuItem === void 0 ? void 0 : overflowMenuItem.focus();
     });
 
     _defineProperty(_assertThisInitialized(_this), "_bindMenuBody", function (menuBody) {
@@ -240,7 +232,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
 
           if (typeof target.matches === 'function') {
             if (!menuBody.contains(target) && triggerEl && !target.matches(".".concat(_this.context, "--overflow-menu,.").concat(_this.context, "--overflow-menu-options"))) {
-              _this.closeMenu();
+              _this.closeMenuAndFocus();
             }
           }
         }, !hasFocusin);
@@ -324,7 +316,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         var _child$props;
 
         return /*#__PURE__*/React__default.cloneElement(child, {
-          closeMenu: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.closeMenu) || _this2.closeMenu,
+          closeMenu: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.closeMenu) || _this2.closeMenuAndFocus,
           handleOverflowMenuItemFocus: _this2.handleOverflowMenuItemFocus,
           ref: function ref(e) {
             _this2["overflowMenuItem".concat(index)] = e;
@@ -336,7 +328,8 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         className: overflowMenuOptionsClasses,
         tabIndex: "-1",
         role: "menu",
-        "aria-label": ariaLabel
+        "aria-label": ariaLabel,
+        onKeyDown: this.handleKeyPress
       }, childrenWithProps);
       var wrappedMenuBody = /*#__PURE__*/React__default.createElement(FloatingMenu, {
         focusTrap: focusTrap,
@@ -357,17 +350,18 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
       };
       return /*#__PURE__*/React__default.createElement(ClickListener, {
         onClickOutside: this.handleClickOutside
-      }, /*#__PURE__*/React__default.createElement("button", _extends({}, other, {
+      }, /*#__PURE__*/React__default.createElement("span", {
+        className: "".concat(prefix, "--overflow-menu__wrapper")
+      }, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, other, {
         type: "button",
         "aria-haspopup": true,
         "aria-expanded": this.state.open,
         className: overflowMenuClasses,
-        onKeyDown: this.handleKeyPress,
         onClick: this.handleClick,
-        "aria-label": ariaLabel,
         id: id,
-        ref: mergeRefs(this._triggerRef, ref)
-      }), /*#__PURE__*/React__default.createElement(IconElement, iconProps), open && this.state.hasMountedTrigger && wrappedMenuBody));
+        ref: mergeRefs(this._triggerRef, ref),
+        label: iconDescription
+      }), /*#__PURE__*/React__default.createElement(IconElement, iconProps)), open && this.state.hasMountedTrigger && wrappedMenuBody));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -388,7 +382,7 @@ _defineProperty(OverflowMenu, "propTypes", {
   /**
    * The ARIA label.
    */
-  ariaLabel: FeatureFlags.enabled('enable-v11-release') ? PropTypes.string.isRequired : PropTypes.string,
+  ariaLabel: PropTypes.string.isRequired,
 
   /**
    * The child nodes.
@@ -434,7 +428,7 @@ _defineProperty(OverflowMenu, "propTypes", {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make OverflowMenu background color same as container background color.
    */
-  light: FeatureFlags.enabled('enable-v11-release') ? deprecate(PropTypes.bool, 'The `light` prop for `OverflowMenu` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.') : PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `OverflowMenu` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
 
   /**
    * The adjustment in position applied to the floating menu.
@@ -501,14 +495,14 @@ _defineProperty(OverflowMenu, "propTypes", {
   /**
    * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
    */
-  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.oneOf(['sm', 'md', 'lg', 'xl'])
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
 });
 
 _defineProperty(OverflowMenu, "contextType", PrefixContext);
 
 _defineProperty(OverflowMenu, "defaultProps", {
-  ariaLabel: FeatureFlags.enabled('enable-v11-release') ? null : 'Open and close list of options',
-  iconDescription: 'Open and close list of options',
+  ariaLabel: null,
+  iconDescription: 'Options',
   open: false,
   direction: DIRECTION_BOTTOM,
   flipped: false,

package/es/components/Pagination/Pagination.js

@@ -11,6 +11,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState } from 'react';
 import Select from '../Select/Select.js';
+import '../Select/Select.Skeleton.js';
 import SelectItem from '../SelectItem/SelectItem.js';
 import { equals } from '../../tools/array.js';
 import { useFallbackId } from '../../internal/useId.js';

package/es/components/Pagination/experimental/PageSelector.js

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import setupGetInstanceId from '../../../tools/setupGetInstanceId.js';
 import Select from '../../Select/Select.js';
+import '../../Select/Select.Skeleton.js';
 import SelectItem from '../../SelectItem/SelectItem.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 

package/es/components/Pagination/experimental/Pagination.js

@@ -12,6 +12,7 @@ import cx from 'classnames';
 import { CaretLeft, CaretRight } from '@carbon/icons-react';
 import Button from '../../Button/Button.js';
 import Select from '../../Select/Select.js';
+import '../../Select/Select.Skeleton.js';
 import SelectItem from '../../SelectItem/SelectItem.js';
 import { IconButton } from '../../IconButton/index.js';
 import * as FeatureFlags from '@carbon/feature-flags';

package/es/components/Select/Select.Skeleton.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+import PropTypes from 'prop-types';
+import { HTMLAttributes } from 'react';
+export interface SelectSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add to the form item wrapper.
+     */
+    className?: string;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+}
+declare const SelectSkeleton: {
+    ({ hideLabel, className, ...rest }: SelectSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add to the form item wrapper.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the label should be hidden, or not
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
+    };
+};
+export default SelectSkeleton;
+export { SelectSkeleton };

package/es/components/Select/index.js

@@ -7,3 +7,4 @@
 
 import Select from './Select.js';
 export { default as Select, default } from './Select.js';
+export { default as SelectSkeleton } from './Select.Skeleton.js';

package/es/components/Tooltip/Tooltip.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useEffect } from 'react';
@@ -15,9 +15,9 @@ import { useId } from '../../internal/useId.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';
+import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["align", "className", "children", "label", "description", "enterDelayMs", "leaveDelayMs", "defaultOpen"];
+var _excluded = ["align", "className", "children", "label", "description", "enterDelayMs", "leaveDelayMs", "defaultOpen", "closeOnActivation"];
 
 function Tooltip(_ref) {
   var _ref$align = _ref.align,
@@ -32,6 +32,8 @@ function Tooltip(_ref) {
       leaveDelayMs = _ref$leaveDelayMs === void 0 ? 300 : _ref$leaveDelayMs,
       _ref$defaultOpen = _ref.defaultOpen,
       defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+      _ref$closeOnActivatio = _ref.closeOnActivation,
+      closeOnActivation = _ref$closeOnActivatio === void 0 ? false : _ref$closeOnActivatio,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var containerRef = useRef(null);
@@ -52,10 +54,28 @@ function Tooltip(_ref) {
     onBlur: function onBlur() {
       return setOpen(false);
     },
+    onClick: function onClick() {
+      return closeOnActivation && setOpen(false);
+    },
     // This should be placed on the trigger in case the element is disabled
     onMouseEnter: onMouseEnter
   };
 
+  function getChildEventHandlers(childProps) {
+    var eventHandlerFunctions = ['onFocus', 'onBlur', 'onClick', 'onMouseEnter'];
+    var eventHandlers = {};
+    eventHandlerFunctions.forEach(function (functionName) {
+      eventHandlers[functionName] = function (evt) {
+        triggerProps[functionName]();
+
+        if (childProps !== null && childProps !== void 0 && childProps[functionName]) {
+          childProps === null || childProps === void 0 ? void 0 : childProps[functionName](evt);
+        }
+      };
+    });
+    return eventHandlers;
+  }
+
   if (label) {
     triggerProps['aria-labelledby'] = id;
   } else {
@@ -67,6 +87,10 @@ function Tooltip(_ref) {
       event.stopPropagation();
       setOpen(false);
     }
+
+    if (open && closeOnActivation && (match(event, Enter) || match(event, Space))) {
+      setOpen(false);
+    }
   }
 
   function onMouseEnter() {
@@ -94,7 +118,7 @@ function Tooltip(_ref) {
     onMouseLeave: onMouseLeave,
     open: open,
     ref: containerRef
-  }), /*#__PURE__*/React__default.cloneElement(child, triggerProps), /*#__PURE__*/React__default.createElement(PopoverContent, {
+  }), /*#__PURE__*/React__default.cloneElement(child, _objectSpread2(_objectSpread2({}, triggerProps), getChildEventHandlers(child.props))), /*#__PURE__*/React__default.createElement(PopoverContent, {
     "aria-hidden": "true",
     className: "".concat(prefix, "--tooltip-content"),
     id: id,
@@ -119,6 +143,11 @@ Tooltip.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Determines wether the tooltip should close when inner content is activated (click, Enter or Space)
+   */
+  closeOnActivation: PropTypes.bool,
+
   /**
    * Specify whether the tooltip should be open when it first renders
    */

package/es/internal/FloatingMenu.js

@@ -266,10 +266,7 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
       tabbableNode || // First sequentially focusable node
       focusableNode || // First programmatic focusable node
       menuBody;
-
-      if (_this.props.focusTrap) {
-        focusTarget.focus();
-      }
+      focusTarget.focus();
 
       if (focusTarget === menuBody && process.env.NODE_ENV !== "production") {
         process.env.NODE_ENV !== "production" ? warning(focusableNode === null, 'Floating Menus must have at least a programmatically focusable child. ' + 'This can be accomplished by adding tabIndex="-1" to the content element.') : void 0;

package/lib/components/FluidSelect/FluidSelect.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var Select = require('../Select/Select.js');
+require('../Select/Select.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 

package/lib/components/IconButton/index.js

@@ -42,6 +42,7 @@ var IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Icon
   return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     align: align,
     className: "".concat(prefix, "--icon-tooltip"),
+    closeOnActivation: true,
     defaultOpen: defaultOpen,
     enterDelayMs: enterDelayMs,
     label: label,

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -19,36 +19,17 @@ var FloatingMenu = require('../../internal/FloatingMenu.js');
 var iconsReact = require('@carbon/icons-react');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var FeatureFlags = require('@carbon/feature-flags');
 var deprecate = require('../../prop-types/deprecate.js');
+var index = require('../IconButton/index.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
 var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
 var _excluded = ["id", "ariaLabel", "children", "iconDescription", "direction", "flipped", "focusTrap", "menuOffset", "menuOffsetFlip", "iconClass", "onClick", "onOpen", "selectorPrimaryFocus", "renderIcon", "innerRef", "menuOptionsClass", "light", "size"];
 
@@ -159,14 +140,14 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleKeyDown", function (evt) {
-      if (match.matches(evt, [keys.ArrowDown])) {
-        _this.setState({
-          open: !_this.state.open
-        });
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "closeMenuAndFocus", function () {
+      var wasOpen = _this.state.open;
 
-        _this.props.onClick(evt);
-      }
+      _this.closeMenu(function () {
+        if (wasOpen) {
+          _this.focusMenuEl();
+        }
+      });
     });
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleKeyPress", function (evt) {
@@ -176,13 +157,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
 
 
       if (match.matches(evt, [keys.Escape])) {
-        var wasOpen = _this.state.open;
-
-        _this.closeMenu(function () {
-          if (wasOpen) {
-            _this.focusMenuEl();
-          }
-        }); // Stop the esc keypress from bubbling out and closing something it shouldn't
+        _this.closeMenuAndFocus(); // Stop the esc keypress from bubbling out and closing something it shouldn't
 
 
         evt.stopPropagation();
@@ -217,8 +192,6 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
     });
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOverflowMenuItemFocus", function (_ref) {
-      var _overflowMenuItem$cur;
-
       var currentIndex = _ref.currentIndex,
           direction = _ref.direction;
       var enabledIndices = React__default["default"].Children.toArray(_this.props.children).reduce(function (acc, curr, i) {
@@ -232,7 +205,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
       var nextValidIndex = function () {
         var nextIndex = enabledIndices.indexOf(currentIndex) + direction;
 
-        switch (enabledIndices.indexOf(currentIndex) + direction) {
+        switch (nextIndex) {
           case -1:
             return enabledIndices.length - 1;
 
@@ -244,9 +217,9 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         }
       }();
 
-      var overflowMenuItem = _this["overflowMenuItem".concat(enabledIndices[nextValidIndex])].overflowMenuItem;
+      var overflowMenuItem = _this["overflowMenuItem".concat(enabledIndices[nextValidIndex])];
 
-      overflowMenuItem === null || overflowMenuItem === void 0 ? void 0 : (_overflowMenuItem$cur = overflowMenuItem.current) === null || _overflowMenuItem$cur === void 0 ? void 0 : _overflowMenuItem$cur.focus();
+      overflowMenuItem === null || overflowMenuItem === void 0 ? void 0 : overflowMenuItem.focus();
     });
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_bindMenuBody", function (menuBody) {
@@ -270,7 +243,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
 
           if (typeof target.matches === 'function') {
             if (!menuBody.contains(target) && triggerEl && !target.matches(".".concat(_this.context, "--overflow-menu,.").concat(_this.context, "--overflow-menu-options"))) {
-              _this.closeMenu();
+              _this.closeMenuAndFocus();
             }
           }
         }, !hasFocusin);
@@ -354,7 +327,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         var _child$props;
 
         return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          closeMenu: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.closeMenu) || _this2.closeMenu,
+          closeMenu: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.closeMenu) || _this2.closeMenuAndFocus,
           handleOverflowMenuItemFocus: _this2.handleOverflowMenuItemFocus,
           ref: function ref(e) {
             _this2["overflowMenuItem".concat(index)] = e;
@@ -366,7 +339,8 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         className: overflowMenuOptionsClasses,
         tabIndex: "-1",
         role: "menu",
-        "aria-label": ariaLabel
+        "aria-label": ariaLabel,
+        onKeyDown: this.handleKeyPress
       }, childrenWithProps);
       var wrappedMenuBody = /*#__PURE__*/React__default["default"].createElement(FloatingMenu["default"], {
         focusTrap: focusTrap,
@@ -387,17 +361,18 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
       };
       return /*#__PURE__*/React__default["default"].createElement(ClickListener["default"], {
         onClickOutside: this.handleClickOutside
-      }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "".concat(prefix, "--overflow-menu__wrapper")
+      }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, other, {
         type: "button",
         "aria-haspopup": true,
         "aria-expanded": this.state.open,
         className: overflowMenuClasses,
-        onKeyDown: this.handleKeyPress,
         onClick: this.handleClick,
-        "aria-label": ariaLabel,
         id: id,
-        ref: mergeRefs["default"](this._triggerRef, ref)
-      }), /*#__PURE__*/React__default["default"].createElement(IconElement, iconProps), open && this.state.hasMountedTrigger && wrappedMenuBody));
+        ref: mergeRefs["default"](this._triggerRef, ref),
+        label: iconDescription
+      }), /*#__PURE__*/React__default["default"].createElement(IconElement, iconProps)), open && this.state.hasMountedTrigger && wrappedMenuBody));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -418,7 +393,7 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
   /**
    * The ARIA label.
    */
-  ariaLabel: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].string.isRequired : PropTypes__default["default"].string,
+  ariaLabel: PropTypes__default["default"].string.isRequired,
 
   /**
    * The child nodes.
@@ -464,7 +439,7 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make OverflowMenu background color same as container background color.
    */
-  light: FeatureFlags__namespace.enabled('enable-v11-release') ? deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `OverflowMenu` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.') : PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `OverflowMenu` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
 
   /**
    * The adjustment in position applied to the floating menu.
@@ -531,14 +506,14 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
   /**
    * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
    */
-  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg']) : PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl'])
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
 });
 
 _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "contextType", usePrefix.PrefixContext);
 
 _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "defaultProps", {
-  ariaLabel: FeatureFlags__namespace.enabled('enable-v11-release') ? null : 'Open and close list of options',
-  iconDescription: 'Open and close list of options',
+  ariaLabel: null,
+  iconDescription: 'Options',
   open: false,
   direction: FloatingMenu.DIRECTION_BOTTOM,
   flipped: false,

package/lib/components/Pagination/Pagination.js

@@ -15,6 +15,7 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var Select = require('../Select/Select.js');
+require('../Select/Select.Skeleton.js');
 var SelectItem = require('../SelectItem/SelectItem.js');
 var array = require('../../tools/array.js');
 var useId = require('../../internal/useId.js');

package/lib/components/Pagination/experimental/PageSelector.js

@@ -15,6 +15,7 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var setupGetInstanceId = require('../../../tools/setupGetInstanceId.js');
 var Select = require('../../Select/Select.js');
+require('../../Select/Select.Skeleton.js');
 var SelectItem = require('../../SelectItem/SelectItem.js');
 var usePrefix = require('../../../internal/usePrefix.js');
 

package/lib/components/Pagination/experimental/Pagination.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var Button = require('../../Button/Button.js');
 var Select = require('../../Select/Select.js');
+require('../../Select/Select.Skeleton.js');
 var SelectItem = require('../../SelectItem/SelectItem.js');
 var index = require('../../IconButton/index.js');
 var FeatureFlags = require('@carbon/feature-flags');

package/lib/components/Select/Select.Skeleton.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+import PropTypes from 'prop-types';
+import { HTMLAttributes } from 'react';
+export interface SelectSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add to the form item wrapper.
+     */
+    className?: string;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+}
+declare const SelectSkeleton: {
+    ({ hideLabel, className, ...rest }: SelectSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add to the form item wrapper.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the label should be hidden, or not
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
+    };
+};
+export default SelectSkeleton;
+export { SelectSkeleton };

package/lib/components/Select/index.js

@@ -10,8 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Select = require('./Select.js');
+var Select_Skeleton = require('./Select.Skeleton.js');
 
 
 
 exports.Select = Select["default"];
 exports["default"] = Select["default"];
+exports.SelectSkeleton = Select_Skeleton["default"];

package/lib/components/Tooltip/Tooltip.js

@@ -27,7 +27,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["align", "className", "children", "label", "description", "enterDelayMs", "leaveDelayMs", "defaultOpen"];
+var _excluded = ["align", "className", "children", "label", "description", "enterDelayMs", "leaveDelayMs", "defaultOpen", "closeOnActivation"];
 
 function Tooltip(_ref) {
   var _ref$align = _ref.align,
@@ -42,6 +42,8 @@ function Tooltip(_ref) {
       leaveDelayMs = _ref$leaveDelayMs === void 0 ? 300 : _ref$leaveDelayMs,
       _ref$defaultOpen = _ref.defaultOpen,
       defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+      _ref$closeOnActivatio = _ref.closeOnActivation,
+      closeOnActivation = _ref$closeOnActivatio === void 0 ? false : _ref$closeOnActivatio,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var containerRef = React.useRef(null);
@@ -62,10 +64,28 @@ function Tooltip(_ref) {
     onBlur: function onBlur() {
       return setOpen(false);
     },
+    onClick: function onClick() {
+      return closeOnActivation && setOpen(false);
+    },
     // This should be placed on the trigger in case the element is disabled
     onMouseEnter: onMouseEnter
   };
 
+  function getChildEventHandlers(childProps) {
+    var eventHandlerFunctions = ['onFocus', 'onBlur', 'onClick', 'onMouseEnter'];
+    var eventHandlers = {};
+    eventHandlerFunctions.forEach(function (functionName) {
+      eventHandlers[functionName] = function (evt) {
+        triggerProps[functionName]();
+
+        if (childProps !== null && childProps !== void 0 && childProps[functionName]) {
+          childProps === null || childProps === void 0 ? void 0 : childProps[functionName](evt);
+        }
+      };
+    });
+    return eventHandlers;
+  }
+
   if (label) {
     triggerProps['aria-labelledby'] = id;
   } else {
@@ -77,6 +97,10 @@ function Tooltip(_ref) {
       event.stopPropagation();
       setOpen(false);
     }
+
+    if (open && closeOnActivation && (match.match(event, keys.Enter) || match.match(event, keys.Space))) {
+      setOpen(false);
+    }
   }
 
   function onMouseEnter() {
@@ -104,7 +128,7 @@ function Tooltip(_ref) {
     onMouseLeave: onMouseLeave,
     open: open,
     ref: containerRef
-  }), /*#__PURE__*/React__default["default"].cloneElement(child, triggerProps), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
+  }), /*#__PURE__*/React__default["default"].cloneElement(child, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, triggerProps), getChildEventHandlers(child.props))), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
     "aria-hidden": "true",
     className: "".concat(prefix, "--tooltip-content"),
     id: id,
@@ -129,6 +153,11 @@ Tooltip.propTypes = {
    */
   className: PropTypes__default["default"].string,
 
+  /**
+   * Determines wether the tooltip should close when inner content is activated (click, Enter or Space)
+   */
+  closeOnActivation: PropTypes__default["default"].bool,
+
   /**
    * Specify whether the tooltip should be open when it first renders
    */

package/lib/internal/FloatingMenu.js

@@ -277,10 +277,7 @@ var FloatingMenu = /*#__PURE__*/function (_React$Component) {
       tabbableNode || // First sequentially focusable node
       focusableNode || // First programmatic focusable node
       menuBody;
-
-      if (_this.props.focusTrap) {
-        focusTarget.focus();
-      }
+      focusTarget.focus();
 
       if (focusTarget === menuBody && process.env.NODE_ENV !== "production") {
         process.env.NODE_ENV !== "production" ? warning.warning(focusableNode === null, 'Floating Menus must have at least a programmatically focusable child. ' + 'This can be accomplished by adding tabIndex="-1" to the content element.') : void 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.22.0-rc.0",
+  "version": "1.22.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.12.0",
-    "@carbon/icons-react": "^11.16.0-rc.0",
+    "@carbon/icons-react": "^11.16.0",
     "@carbon/layout": "^11.11.0",
-    "@carbon/styles": "^1.22.0-rc.0",
+    "@carbon/styles": "^1.22.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -135,5 +135,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "3e7357ecc2ee754a8d5a2c23c1082d5cdd425faa"
+  "gitHead": "f4c904ce641392046ad21e6c77394a53f6cf0f30"
 }