@carbon/react 1.16.0-rc.0 → 1.16.0

package/es/components/CodeSnippet/CodeSnippet.js

@@ -245,7 +245,6 @@ function CodeSnippet(_ref) {
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--snippet-btn--text")
   }, expandCodeBtnText), /*#__PURE__*/React__default.createElement(ChevronDown, {
-    "aria-label": expandCodeBtnText,
     className: "".concat(prefix, "--icon-chevron--down ").concat(prefix, "--snippet__icon"),
     name: "chevron--down",
     role: "img"

package/es/components/NumberInput/NumberInput.js

@@ -16,7 +16,7 @@ import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 
-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 = {
@@ -34,6 +34,8 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
       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,
@@ -172,6 +174,24 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     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,
@@ -254,6 +274,11 @@ NumberInput.propTypes = {
    */
   defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+  /**
+   * Specify if the wheel functionality for the input should be disabled, or not
+   */
+  disableWheel: PropTypes.bool,
+
   /**
    * Specify if the control should be disabled, or not
    */
@@ -449,6 +474,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/es/components/ProgressIndicator/ProgressIndicator.Skeleton.js

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { CircleDash } from '@carbon/icons-react';
 
-var _excluded = ["className"];
+var _excluded = ["className", "vertical"];
 
 var _CircleDash, _Step, _Step2, _Step3, _Step4;
 
@@ -31,11 +31,12 @@ function Step() {
 
 function ProgressIndicatorSkeleton(_ref) {
   var className = _ref.className,
+      vertical = _ref.vertical,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("ul", _extends({
-    className: cx("".concat(prefix, "--progress"), "".concat(prefix, "--skeleton"), className)
+    className: cx("".concat(prefix, "--progress"), "".concat(prefix, "--skeleton"), _defineProperty({}, "".concat(prefix, "--progress--vertical"), vertical), className)
   }, rest), _Step || (_Step = /*#__PURE__*/React__default.createElement(Step, null)), _Step2 || (_Step2 = /*#__PURE__*/React__default.createElement(Step, null)), _Step3 || (_Step3 = /*#__PURE__*/React__default.createElement(Step, null)), _Step4 || (_Step4 = /*#__PURE__*/React__default.createElement(Step, null)));
 }
 
@@ -43,7 +44,12 @@ ProgressIndicatorSkeleton.propTypes = {
   /**
    * Specify an optional className to add.
    */
-  className: PropTypes.string
+  className: PropTypes.string,
+
+  /**
+   * Determines whether or not the ProgressIndicator should be rendered vertically.
+   */
+  vertical: PropTypes.bool
 };
 
 export { ProgressIndicatorSkeleton as default };

package/es/components/TextInput/TextInput.js

@@ -109,7 +109,7 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
   var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), normalizedProps.disabled), _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
   var fieldOuterWrapperClasses = cx("".concat(prefix, "--text-input__field-outer-wrapper"), _defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
   var fieldWrapperClasses = cx("".concat(prefix, "--text-input__field-wrapper"), _defineProperty({}, "".concat(prefix, "--text-input__field-wrapper--warning"), normalizedProps.warn));
-  var iconClasses = cx((_classNames7 = {}, _defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _defineProperty(_classNames7, "".concat(prefix, "--text-input__readonly-icon"), readOnly), _classNames7));
+  var iconClasses = cx((_classNames7 = {}, _defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _classNames7));
   var counterClasses = cx("".concat(prefix, "--label"), (_classNames8 = {}, _defineProperty(_classNames8, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_classNames8, "".concat(prefix, "--text-input__label-counter"), true), _classNames8));
   var counter = enableCounter && maxCount ? /*#__PURE__*/React__default.createElement("div", {
     className: counterClasses

package/es/internal/useNormalizedInputProps.js

@@ -6,7 +6,7 @@
  */
 
 import React__default from 'react';
-import { EditOff, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { usePrefix } from './usePrefix.js';
 
 /**
@@ -65,22 +65,18 @@ function useNormalizedInputProps(_ref) {
     helperId: "".concat(id, "-helper-text")
   };
 
-  if (readOnly) {
-    normalizedProps.icon = EditOff;
-  } else {
-    if (normalizedProps.invalid) {
-      normalizedProps.icon = WarningFilled;
-      normalizedProps.validation = /*#__PURE__*/React__default.createElement("div", {
-        className: "".concat(prefix, "--form-requirement"),
-        id: normalizedProps.invalidId
-      }, invalidText);
-    } else if (normalizedProps.warn) {
-      normalizedProps.icon = WarningAltFilled;
-      normalizedProps.validation = /*#__PURE__*/React__default.createElement("div", {
-        className: "".concat(prefix, "--form-requirement"),
-        id: normalizedProps.warnId
-      }, warnText);
-    }
+  if (normalizedProps.invalid) {
+    normalizedProps.icon = WarningFilled;
+    normalizedProps.validation = /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--form-requirement"),
+      id: normalizedProps.invalidId
+    }, invalidText);
+  } else if (normalizedProps.warn) {
+    normalizedProps.icon = WarningAltFilled;
+    normalizedProps.validation = /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--form-requirement"),
+      id: normalizedProps.warnId
+    }, warnText);
   }
 
   return normalizedProps;

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -256,7 +256,6 @@ function CodeSnippet(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--snippet-btn--text")
   }, expandCodeBtnText), /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
-    "aria-label": expandCodeBtnText,
     className: "".concat(prefix, "--icon-chevron--down ").concat(prefix, "--snippet__icon"),
     name: "chevron--down",
     role: "img"

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/ProgressIndicator/ProgressIndicator.Skeleton.js

@@ -22,7 +22,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className"];
+var _excluded = ["className", "vertical"];
 
 var _CircleDash, _Step, _Step2, _Step3, _Step4;
 
@@ -41,11 +41,12 @@ function Step() {
 
 function ProgressIndicatorSkeleton(_ref) {
   var className = _ref.className,
+      vertical = _ref.vertical,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"]("".concat(prefix, "--progress"), "".concat(prefix, "--skeleton"), className)
+    className: cx__default["default"]("".concat(prefix, "--progress"), "".concat(prefix, "--skeleton"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--progress--vertical"), vertical), className)
   }, rest), _Step || (_Step = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step2 || (_Step2 = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step3 || (_Step3 = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step4 || (_Step4 = /*#__PURE__*/React__default["default"].createElement(Step, null)));
 }
 
@@ -53,7 +54,12 @@ ProgressIndicatorSkeleton.propTypes = {
   /**
    * Specify an optional className to add.
    */
-  className: PropTypes__default["default"].string
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Determines whether or not the ProgressIndicator should be rendered vertically.
+   */
+  vertical: PropTypes__default["default"].bool
 };
 
 exports["default"] = ProgressIndicatorSkeleton;

package/lib/components/TextInput/TextInput.js

@@ -138,7 +138,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
   var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), normalizedProps.disabled), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
   var fieldOuterWrapperClasses = cx__default["default"]("".concat(prefix, "--text-input__field-outer-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
   var fieldWrapperClasses = cx__default["default"]("".concat(prefix, "--text-input__field-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input__field-wrapper--warning"), normalizedProps.warn));
-  var iconClasses = cx__default["default"]((_classNames7 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__readonly-icon"), readOnly), _classNames7));
+  var iconClasses = cx__default["default"]((_classNames7 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _classNames7));
   var counterClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames8 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--text-input__label-counter"), true), _classNames8));
   var counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: counterClasses

package/lib/internal/useNormalizedInputProps.js

@@ -73,22 +73,18 @@ function useNormalizedInputProps(_ref) {
     helperId: "".concat(id, "-helper-text")
   };
 
-  if (readOnly) {
-    normalizedProps.icon = iconsReact.EditOff;
-  } else {
-    if (normalizedProps.invalid) {
-      normalizedProps.icon = iconsReact.WarningFilled;
-      normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "".concat(prefix, "--form-requirement"),
-        id: normalizedProps.invalidId
-      }, invalidText);
-    } else if (normalizedProps.warn) {
-      normalizedProps.icon = iconsReact.WarningAltFilled;
-      normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "".concat(prefix, "--form-requirement"),
-        id: normalizedProps.warnId
-      }, warnText);
-    }
+  if (normalizedProps.invalid) {
+    normalizedProps.icon = iconsReact.WarningFilled;
+    normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(prefix, "--form-requirement"),
+      id: normalizedProps.invalidId
+    }, invalidText);
+  } else if (normalizedProps.warn) {
+    normalizedProps.icon = iconsReact.WarningAltFilled;
+    normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(prefix, "--form-requirement"),
+      id: normalizedProps.warnId
+    }, warnText);
   }
 
   return normalizedProps;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.16.0-rc.0",
+  "version": "1.16.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.9.0",
     "@carbon/icons-react": "^11.10.0",
     "@carbon/layout": "^11.7.0",
-    "@carbon/styles": "^1.16.0-rc.0",
+    "@carbon/styles": "^1.16.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -73,7 +73,7 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@carbon/test-utils": "^10.26.0",
-    "@carbon/themes": "^11.11.0-rc.0",
+    "@carbon/themes": "^11.11.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
@@ -131,5 +131,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "a55b418b5a33d88d224b9c35f62ebd09c9586764"
+  "gitHead": "c77cccfd9ee14e87f60daefbc518d63204606e2b"
 }