@carbon/react 1.22.0-rc.0 → 1.23.0-rc.0

package/lib/components/DatePicker/DatePicker.js

@@ -14,7 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var flatpickr = require('flatpickr');
-var index = require('../../node_modules/flatpickr/dist/l10n/index.js');
+var l10n = require('flatpickr/dist/l10n/index');
 var DatePickerInput = require('../DatePickerInput/DatePickerInput.js');
 var appendToPlugin = require('./plugins/appendToPlugin.js');
 var fixEventsPlugin = require('./plugins/fixEventsPlugin.js');
@@ -34,16 +34,17 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(flatpickr);
+var l10n__default = /*#__PURE__*/_interopDefaultLegacy(l10n);
 
 var _excluded = ["allowInput", "appendTo", "children", "className", "closeOnSelect", "dateFormat", "datePickerType", "disable", "enable", "inline", "invalid", "invalidText", "warn", "warnText", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "readOnly", "short", "value"];
 
-index["default"].en.weekdays.shorthand.forEach(function (_day, index$1) {
-  var currentDay = index["default"].en.weekdays.shorthand;
+l10n__default["default"].en.weekdays.shorthand.forEach(function (_day, index) {
+  var currentDay = l10n__default["default"].en.weekdays.shorthand;
 
-  if (currentDay[index$1] === 'Thu' || currentDay[index$1] === 'Th') {
-    currentDay[index$1] = 'Th';
+  if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
+    currentDay[index] = 'Th';
   } else {
-    currentDay[index$1] = currentDay[index$1].charAt(0);
+    currentDay[index] = currentDay[index].charAt(0);
   }
 });
 var forEach = Array.prototype.forEach;
@@ -291,9 +292,9 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
 
     if (_rollupPluginBabelHelpers["typeof"](locale) === 'object') {
       var location = locale.locale ? locale.locale : 'en';
-      localeData = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, index["default"][location]), locale);
+      localeData = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, l10n__default["default"][location]), locale);
     } else {
-      localeData = index["default"][locale];
+      localeData = l10n__default["default"][locale];
     }
 
     var start = startInputField.current;

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -69,7 +69,16 @@ var carbonFlatpickrFixEventsPlugin = (function (config) {
 
         if (selectedToDate && currentValueToDate && selectedToDate !== currentValueToDate) {
           // Update the calendar with the value of the `to` date input
-          fp.setDate([inputFrom.value, inputTo && inputTo.value], false, fp.config.dateFormat);
+          fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+        }
+      } // save end date in calendar inmediately after it's been written down
+
+
+      if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
+        var currentEndDate = new Date(inputTo.value);
+
+        if (currentEndDate.toString() !== 'Invalid Date') {
+          fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
         }
       }
     };

package/lib/components/DatePicker/plugins/rangePlugin.js

@@ -9,7 +9,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var rangePlugin = require('../../../node_modules/flatpickr/dist/plugins/rangePlugin.js');
+var rangePlugin = require('flatpickr/dist/plugins/rangePlugin');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var rangePlugin__default = /*#__PURE__*/_interopDefaultLegacy(rangePlugin);
 
 /**
  * @param {object} config Plugin configuration.
@@ -20,7 +24,7 @@ var rangePlugin = require('../../../node_modules/flatpickr/dist/plugins/rangePlu
  */
 
 var carbonFlatpickrRangePlugin = (function (config) {
-  var factory = rangePlugin["default"](Object.assign({
+  var factory = rangePlugin__default["default"](Object.assign({
     position: 'left'
   }, config));
   return function (fp) {

package/lib/components/FileUploader/FileUploaderButton.js

@@ -17,6 +17,7 @@ var types = require('../../prop-types/types.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FeatureFlags = require('@carbon/feature-flags');
+var deprecate = require('../../prop-types/deprecate.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -45,7 +46,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", "innerRef"];
+var _excluded = ["accept", "buttonKind", "className", "disabled", "disableLabelChanges", "id", "labelText", "multiple", "onChange", "name", "size", "innerRef"];
 
 function noop() {}
 
@@ -67,13 +68,9 @@ function FileUploaderButton(_ref) {
       multiple = _ref$multiple === void 0 ? false : _ref$multiple,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? 'button' : _ref$role,
       name = _ref.name,
       _ref$size = _ref.size,
       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);
 
@@ -102,6 +99,7 @@ function FileUploaderButton(_ref) {
 
   function onClick(event) {
     event.target.value = null;
+    inputNode.current.click();
   }
 
   function onKeyDown(event) {
@@ -125,16 +123,17 @@ function FileUploaderButton(_ref) {
     onChange(event);
   }
 
-  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,
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    type: "button",
+    disabled: disabled,
     className: classes,
-    onKeyDown: onKeyDown,
+    onClick: onClick,
+    onKeyDown: onKeyDown
+  }, other), labelText), /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "".concat(prefix, "--visually-hidden"),
+    ref: innerRef,
     htmlFor: inputId
-  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
-    role: role,
-    "aria-disabled": disabled
-  }, labelText)), /*#__PURE__*/React__default["default"].createElement("input", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, labelText)), /*#__PURE__*/React__default["default"].createElement("input", {
     className: "".concat(prefix, "--visually-hidden"),
     ref: inputNode,
     id: inputId,
@@ -144,8 +143,7 @@ function FileUploaderButton(_ref) {
     multiple: multiple,
     accept: accept,
     name: name,
-    onChange: handleOnChange,
-    onClick: onClick
+    onChange: handleOnChange
   }));
 }
 
@@ -223,7 +221,7 @@ FileUploaderButton.propTypes = {
   /**
    * Provide a custom tabIndex value for the `<FileUploaderButton>`
    */
-  tabIndex: PropTypes__default["default"].number
+  tabIndex: deprecate["default"](PropTypes__default["default"].number, 'The `tabIndex` prop for `FileUploaderButton` has ' + 'been deprecated since it now renders a button element by default.')
 };
 
 exports["default"] = FileUploaderButton;

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/NumberInput/NumberInput.d.ts

@@ -0,0 +1,132 @@
+/**
+ * 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 React, { ReactNode } from 'react';
+export declare const translationIds: {
+    'increment.number': string;
+    'decrement.number': string;
+};
+type ExcludedAttributes = 'defaultValue' | 'id' | 'min' | 'max' | 'onChange' | 'onClick' | 'size' | 'step' | 'value';
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * `true` to allow empty string.
+     */
+    allowEmpty?: boolean;
+    /**
+     * Specify an optional className to be applied to the wrapper node
+     */
+    className?: string;
+    /**
+     * Optional starting value for uncontrolled state
+     */
+    defaultValue?: number | string;
+    /**
+     * Specify if the wheel functionality for the input should be disabled, or not
+     */
+    disableWheel?: boolean;
+    /**
+     * Specify if the control should be disabled, or not
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify whether you want the steppers to be hidden
+     */
+    hideSteppers?: boolean;
+    /**
+     * Provide a description for up/down icons that can be read by screen readers
+     */
+    iconDescription?: string;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id: string;
+    /**
+     * Specify if the currently value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: ReactNode;
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label?: ReactNode;
+    /**
+     * `true` to use the light version.
+     *
+     * @deprecated The `light` prop for `NumberInput` is no longer needed and has
+     *     been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.
+     */
+    light?: boolean;
+    /**
+     * The maximum value.
+     */
+    max?: number;
+    /**
+     * The minimum value.
+     */
+    min?: number;
+    /**
+     * Provide an optional handler that is called when the internal state of
+     * NumberInput changes. This handler is called with event and state info.
+     * `(event, { value, direction }) => void`
+     */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement>, state: {
+        value: number | string;
+        direction: string;
+    }) => void;
+    /**
+     * Provide an optional function to be called when the up/down button is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, state?: {
+        value: number | string;
+        direction: string;
+    }) => void;
+    /**
+     * Provide an optional function to be called when a key is pressed in the number input
+     */
+    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * Specify if the component should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Number Input.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify how much the values should increase/decrease upon clicking on up/down button
+     */
+    step?: number;
+    /**
+     * Provide custom text for the component for each translation id
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify the value of the input
+     */
+    value?: number | string;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+}
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<unknown>>;
+export { NumberInput };

package/lib/components/NumberInput/NumberInput.js

@@ -137,11 +137,12 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
   var iconClasses = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _cx3));
 
   if (controlledValue !== prevControlledValue) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     setValue(controlledValue);
     setPrevControlledValue(controlledValue);
   }
 
-  var ariaDescribedBy = null;
+  var ariaDescribedBy = undefined;
 
   if (normalizedProps.invalid) {
     ariaDescribedBy = normalizedProps.invalidId;
@@ -168,7 +169,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
   }
 
   var handleFocus = function handleFocus(evt) {
-    if (evt.target.type === 'button') {
+    if ('type' in evt.target && evt.target.type === 'button') {
       setIsFocused(false);
     } else {
       setIsFocused(evt.type === 'focus' ? true : false);
@@ -176,10 +177,11 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
   };
 
   var outerElementClasses = cx__default["default"]("".concat(prefix, "--form-item"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, customClassName, !!customClassName), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--invalid"), isFluid && normalizedProps.invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--focus"), isFluid && isFocused), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--disabled"), isFluid && disabled), _cx4));
+  var Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: outerElementClasses,
-    onFocus: isFluid ? handleFocus : null,
-    onBlur: isFluid ? handleFocus : null
+    onFocus: isFluid ? handleFocus : undefined,
+    onBlur: isFluid ? handleFocus : undefined
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: numberInputClasses,
     "data-invalid": normalizedProps.invalid ? true : undefined
@@ -225,7 +227,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     step: step,
     type: "number",
     value: value
-  })), normalizedProps.icon ? /*#__PURE__*/React__default["default"].createElement(normalizedProps.icon, {
+  })), Icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses
   }) : null, !hideSteppers && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--number__controls")
@@ -248,7 +250,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
         _onClick(event, state);
       }
     },
-    tabIndex: "-1",
+    tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
   }, _Subtract || (_Subtract = /*#__PURE__*/React__default["default"].createElement(iconsReact.Subtract, {
@@ -274,7 +276,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
         _onClick(event, state);
       }
     },
-    tabIndex: "-1",
+    tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
   }, _Add || (_Add = /*#__PURE__*/React__default["default"].createElement(iconsReact.Add, {

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');