@carbon/react 1.15.0 → 1.16.0

package/lib/components/FluidSelect/FluidSelect.Skeleton.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+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);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className"];
+
+var FluidSelectSkeleton = function FluidSelectSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var wrapperClasses = cx__default["default"](className, "".concat(prefix, "--skeleton"), "".concat(prefix, "--list-box"));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--list-box__wrapper--fluid")
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: wrapperClasses
+  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--list-box__label")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--list-box__field")
+  })));
+};
+
+FluidSelectSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string
+};
+var FluidSelectSkeleton$1 = FluidSelectSkeleton;
+
+exports["default"] = FluidSelectSkeleton$1;

package/lib/components/FluidSelect/FluidSelect.js

@@ -0,0 +1,103 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var Select = require('../Select/Select.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.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);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className", "children"];
+var FluidSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidSelect(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--select--fluid"), className);
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Select["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
+    className: classNames
+  }, other), children));
+});
+FluidSelect.propTypes = {
+  /**
+   * Provide the contents of your Select
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally provide the default value of the `<select>`
+   */
+  defaultValue: PropTypes__default["default"].any,
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify a custom `id` for the `<select>`
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Provide label text to be read by screen readers when interacting with the
+   * control
+   */
+  labelText: PropTypes__default["default"].node,
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes__default["default"].node
+};
+var FluidSelect$1 = FluidSelect;
+
+exports["default"] = FluidSelect$1;

package/lib/components/FluidTextArea/FluidTextArea.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var TextArea = require('../TextArea/TextArea.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 
@@ -102,7 +103,7 @@ FluidTextArea.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `FluidTextArea` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Max character count allowed for the textarea. This is needed in order for enableCounter to display

package/lib/components/InlineLoading/InlineLoading.js

@@ -31,7 +31,8 @@ function InlineLoading(_ref) {
       iconDescription = _ref.iconDescription,
       description = _ref.description,
       onSuccess = _ref.onSuccess,
-      successDelay = _ref.successDelay,
+      _ref$successDelay = _ref.successDelay,
+      successDelay = _ref$successDelay === void 0 ? 1500 : _ref$successDelay,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -118,8 +119,5 @@ InlineLoading.propTypes = {
    */
   successDelay: PropTypes__default["default"].number
 };
-InlineLoading.defaultProps = {
-  successDelay: 1500
-};
 
 exports["default"] = InlineLoading;

package/lib/components/ListBox/ListBox.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var React = require('react');
 var PropTypes = require('prop-types');
+var deprecate = require('../../prop-types/deprecate.js');
 var ListBoxPropTypes = require('./ListBoxPropTypes.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var ListBoxField = require('./ListBoxField.js');
@@ -119,7 +120,7 @@ ListBox.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `ListBox` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -22,10 +22,12 @@ require('../ListBox/index.js');
 var Selection = require('../../internal/Selection.js');
 var itemToString = require('./tools/itemToString.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var useId = require('../../internal/useId.js');
 var sorting = require('./tools/sorting.js');
 var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
@@ -77,35 +79,43 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
       warn = _ref.warn,
       warnText = _ref.warnText;
 
-  var _useState = React.useState(open),
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
+  var _useState = React.useState(false),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
 
   var _useState3 = React.useState(open),
       _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      prevOpen = _useState4[0],
-      setPrevOpen = _useState4[1];
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
 
-  var _useState5 = React.useState(''),
+  var _useState5 = React.useState(open),
       _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      inputValue = _useState6[0],
-      setInputValue = _useState6[1];
+      prevOpen = _useState6[0],
+      setPrevOpen = _useState6[1];
 
-  var _useState7 = React.useState([]),
+  var _useState7 = React.useState(''),
       _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      topItems = _useState8[0],
-      setTopItems = _useState8[1];
+      inputValue = _useState8[0],
+      setInputValue = _useState8[1];
 
-  var _useState9 = React.useState(false),
+  var _useState9 = React.useState([]),
       _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-      inputFocused = _useState10[0],
-      setInputFocused = _useState10[1];
+      topItems = _useState10[0],
+      setTopItems = _useState10[1];
 
-  var _useState11 = React.useState(null),
+  var _useState11 = React.useState(false),
       _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-      highlightedIndex = _useState12[0],
-      setHighlightedIndex = _useState12[1];
+      inputFocused = _useState12[0],
+      setInputFocused = _useState12[1];
+
+  var _useState13 = React.useState(null),
+      _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
+      highlightedIndex = _useState14[0],
+      setHighlightedIndex = _useState14[1];
 
   var textInput = React.useRef();
   var filterableMultiSelectInstanceId = useId.useId();
@@ -119,7 +129,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
 
   var inline = type === 'inline';
   var showWarning = !invalid && warn;
-  var wrapperClasses = cx__default["default"]("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused), _cx));
   var helperId = !helperText ? undefined : "filterablemultiselect-helper-text-".concat(filterableMultiSelectInstanceId);
   var labelId = "".concat(id, "-label");
   var titleClasses = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
@@ -309,11 +319,22 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
         }, {
           suppressRefError: true
         });
+
+        var handleFocus = function handleFocus(evt) {
+          if (evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) || evt.target.classList.contains("".concat(prefix, "--list-box__selection"))) {
+            setIsFocused(false);
+          } else {
+            setIsFocused(evt.type === 'focus' ? true : false);
+          }
+        };
+
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: wrapperClasses
         }, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
           className: titleClasses
         }, labelProps), titleText) : null, /*#__PURE__*/React__default["default"].createElement(ListBox["default"], {
+          onFocus: isFluid ? handleFocus : null,
+          onBlur: isFluid ? handleFocus : null,
           className: className,
           disabled: disabled,
           light: light,
@@ -471,7 +492,7 @@ FilterableMultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollu
   /**
    * `true` to use the light version.
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `FilterableMultiSelect` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Specify the locale of the control. Used for the default `compareItems`
@@ -551,7 +572,6 @@ FilterableMultiSelect.defaultProps = {
   itemToString: itemToString.defaultItemToString,
   locale: 'en',
   sortItems: sorting.defaultSortItems,
-  light: false,
   open: false,
   selectionFeedback: 'top-after-reopen'
 };

package/lib/components/MultiSelect/MultiSelect.js

@@ -23,8 +23,10 @@ var sorting = require('./tools/sorting.js');
 var Selection = require('../../internal/Selection.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
 var match = require('../../internal/keyboard/match.js');
 var ListBox = require('../ListBox/ListBox.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
@@ -86,6 +88,9 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
       selected = _ref.selectedItems;
   var prefix = usePrefix.usePrefix();
 
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
   var _useRef = React.useRef(getInstanceId()),
       multiSelectInstanceId = _useRef.current;
 
@@ -94,20 +99,25 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
       highlightedIndex = _useState2[0],
       setHighlightedIndex = _useState2[1];
 
-  var _useState3 = React.useState(open),
+  var _useState3 = React.useState(false),
       _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      isOpen = _useState4[0],
-      setIsOpen = _useState4[1];
+      isFocused = _useState4[0],
+      setIsFocused = _useState4[1];
 
   var _useState5 = React.useState(open),
       _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      prevOpenProp = _useState6[0],
-      setPrevOpenProp = _useState6[1];
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
 
-  var _useState7 = React.useState([]),
+  var _useState7 = React.useState(open),
       _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      topItems = _useState8[0],
-      setTopItems = _useState8[1];
+      prevOpenProp = _useState8[0],
+      setPrevOpenProp = _useState8[1];
+
+  var _useState9 = React.useState([]),
+      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+      topItems = _useState10[0],
+      setTopItems = _useState10[1];
 
   var _useSelection = Selection.useSelection({
     disabled: disabled,
@@ -161,7 +171,7 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
   var inline = type === 'inline';
   var showWarning = !invalid && warn;
   var enabled = index.useFeatureFlag('enable-v11-release');
-  var wrapperClasses = cx__default["default"]("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _cx));
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--focus"), !isOpen && isFluid && isFocused), _cx));
   var titleClasses = cx__default["default"]("".concat(prefix, "--label"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
   var helperId = !helperText ? undefined : "multiselect-helper-text-".concat(multiSelectInstanceId);
   var fieldLabelId = "multiselect-field-label-".concat(multiSelectInstanceId);
@@ -226,6 +236,11 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
   };
 
   var toggleButtonProps = getToggleButtonProps();
+
+  var handleFocus = function handleFocus(evt) {
+    evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
+  };
+
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -233,6 +248,8 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
   }, getLabelProps()), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--visually-hidden")
   }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText)), /*#__PURE__*/React__default["default"].createElement(ListBox["default"], {
+    onFocus: isFluid ? handleFocus : null,
+    onBlur: isFluid ? handleFocus : null,
     type: type,
     size: size,
     className: className,
@@ -383,7 +400,7 @@ MultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBab
   /**
    * `true` to use the light version.
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `MultiSelect` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Specify the locale of the control. Used for the default `compareItems`
@@ -465,7 +482,6 @@ MultiSelect.defaultProps = {
   initialSelectedItems: [],
   sortItems: sorting.defaultSortItems,
   type: 'default',
-  light: false,
   title: false,
   open: false,
   selectionFeedback: 'top-after-reopen',

package/lib/components/NumberInput/NumberInput.js

@@ -26,7 +26,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["allowEmpty", "className", "disabled", "defaultValue", "helperText", "hideLabel", "hideSteppers", "iconDescription", "id", "label", "invalid", "invalidText", "light", "max", "min", "onChange", "onClick", "onKeyUp", "readOnly", "size", "step", "translateWithId", "warn", "warnText", "value"];
+var _excluded = ["allowEmpty", "className", "disabled", "disableWheel", "defaultValue", "helperText", "hideLabel", "hideSteppers", "iconDescription", "id", "label", "invalid", "invalidText", "light", "max", "min", "onChange", "onClick", "onKeyUp", "readOnly", "size", "step", "translateWithId", "warn", "warnText", "value"];
 
 var _defaultTranslations, _Subtract, _Add;
 var translationIds = {
@@ -44,6 +44,8 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
       customClassName = props.className,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$disableWheel = props.disableWheel,
+      disableWheelProp = _props$disableWheel === void 0 ? false : _props$disableWheel,
       defaultValue = props.defaultValue,
       _props$helperText = props.helperText,
       helperText = _props$helperText === void 0 ? '' : _props$helperText,
@@ -182,6 +184,24 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     onClick: _onClick,
     onChange: handleOnChange,
     onKeyUp: onKeyUp,
+    onFocus: function onFocus(e) {
+      if (disableWheelProp) {
+        e.target.addEventListener('wheel', disableWheel);
+      }
+
+      if (rest.onFocus) {
+        rest.onFocus(e);
+      }
+    },
+    onBlur: function onBlur(e) {
+      if (disableWheelProp) {
+        e.target.removeEventListener('wheel', disableWheel);
+      }
+
+      if (rest.onBlur) {
+        rest.onBlur(e);
+      }
+    },
     pattern: "[0-9]*",
     readOnly: readOnly,
     step: step,
@@ -264,6 +284,11 @@ NumberInput.propTypes = {
    */
   defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
 
+  /**
+   * Specify if the wheel functionality for the input should be disabled, or not
+   */
+  disableWheel: PropTypes__default["default"].bool,
+
   /**
    * Specify if the control should be disabled, or not
    */
@@ -459,6 +484,25 @@ function getInputValidity(_ref4) {
 
   return true;
 }
+/**
+ * It prevents any wheel event from emitting.
+ *
+ * We want to prevent this input field from changing by the user accidentally
+ * when the user scrolling up or down in a long form. So we prevent the default
+ * behavior of wheel events when it is focused.
+ *
+ * Because React uses passive event handler by default, we can't just call
+ * `preventDefault` in the `onWheel` event handler. So we have to get the input
+ * ref and add our event handler manually.
+ *
+ * @see https://github.com/facebook/react/pull/19654
+ * @param {WheelEvent} e A wheel event.
+ */
+
+
+function disableWheel(e) {
+  e.preventDefault();
+}
 /**
  * Clamp the given value between the upper bound `max` and the lower bound `min`
  * @param {number} max

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -526,8 +526,8 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
 _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: FeatureFlags__namespace.enabled('enable-v11-release') ? null : 'Open and close list of options',
+  iconDescription: 'Open and close list of options',
   open: false,
   direction: FloatingMenu.DIRECTION_BOTTOM,
   flipped: false,