@carbon/react 1.29.0-rc.0 → 1.29.0

package/es/components/Slider/Slider.d.ts

@@ -41,9 +41,13 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      */
     inputType?: string;
     /**
-     * `true` to specify if the control is invalid.
+     * `Specify whether the Slider is currently invalid
      */
     invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the Slider is in an invalid state
+     */
+    invalidText?: React.ReactNode;
     /**
      * The label for the slider.
      */
@@ -119,6 +123,14 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      * The value.
      */
     value: number;
+    /**
+     * 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?: React.ReactNode;
 }
 interface CalcValueProps {
     clientX?: number;
@@ -160,9 +172,13 @@ export default class Slider extends PureComponent<SliderProps> {
          */
         inputType: PropTypes.Requireable<string>;
         /**
-         * `true` to specify if the control is invalid.
+         * `Specify whether the Slider is currently invalid
          */
         invalid: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the text that is displayed when the Slider is in an invalid state
+         */
+        invalidText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * The label for the slider.
          */
@@ -229,6 +245,14 @@ export default class Slider extends PureComponent<SliderProps> {
          * The value.
          */
         value: PropTypes.Validator<number>;
+        /**
+         * `Specify whether the Slider is in a warn state
+         */
+        warn: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the text that is displayed when the Slider is in an warn state
+         */
+        warnText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
     static defaultProps: {
         hideTextInput: boolean;

package/es/components/Slider/Slider.js

@@ -16,6 +16,7 @@ import { matches } from '../../internal/keyboard/match.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { FeatureFlagContext } from '../FeatureFlags/index.js';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
 const defaultFormatLabel = (value, label) => {
   return typeof label === 'function' ? label(value) : `${value}${label}`;
@@ -414,11 +415,14 @@ class Slider extends PureComponent {
       step,
       stepMultiplier: _stepMultiplier,
       inputType,
+      invalidText,
       required,
       disabled,
       name,
       light,
       readOnly,
+      warn,
+      warnText,
       ...other
     } = this.props;
     delete other.onRelease;
@@ -446,8 +450,9 @@ class Slider extends PureComponent {
       }, [enabled ? null : className]);
       const inputClasses = cx(`${prefix}--text-input`, `${prefix}--slider-text-input`, {
         [`${prefix}--text-input--light`]: light,
-        [`${prefix}--text-input--invalid`]: isValid === false,
-        [`${prefix}--slider-text-input--hidden`]: hideTextInput
+        [`${prefix}--text-input--invalid`]: !readOnly && isValid === false,
+        [`${prefix}--slider-text-input--hidden`]: hideTextInput,
+        [`${prefix}--slider-text-input--warn`]: !readOnly && warn
       });
       return /*#__PURE__*/React__default.createElement("div", {
         className: enabled ? cx(`${prefix}--form-item`, className) : `${prefix}--form-item`
@@ -469,7 +474,7 @@ class Slider extends PureComponent {
         onKeyDown: this.onKeyDown,
         role: "presentation",
         tabIndex: -1,
-        "data-invalid": isValid ? null : true
+        "data-invalid": !isValid && !readOnly ? true : null
       }, other), /*#__PURE__*/React__default.createElement("div", {
         className: `${prefix}--slider__thumb`,
         role: "slider",
@@ -506,10 +511,18 @@ class Slider extends PureComponent {
         onChange: this.onChange,
         onBlur: this.onBlur,
         onKeyUp: this.props.onInputKeyUp,
-        "data-invalid": isValid ? null : true,
-        "aria-invalid": isValid ? undefined : true,
+        "data-invalid": !isValid && !readOnly ? true : null,
+        "aria-invalid": !isValid && !readOnly ? true : undefined,
         readOnly: readOnly
-      })));
+      }), !readOnly && isValid === false && /*#__PURE__*/React__default.createElement(WarningFilled, {
+        className: `${prefix}--slider__invalid-icon`
+      }), !readOnly && warn && isValid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+        className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
+      })), !readOnly && isValid === false && /*#__PURE__*/React__default.createElement("div", {
+        className: cx(`${prefix}--slider__validation-msg`, `${prefix}--slider__validation-msg--invalid`, `${prefix}--form-requirement`)
+      }, invalidText), !readOnly && warn && isValid && /*#__PURE__*/React__default.createElement("div", {
+        className: cx(`${prefix}--slider__validation-msg`, `${prefix}--form-requirement`)
+      }, warnText));
     });
   }
 
@@ -557,10 +570,15 @@ _defineProperty(Slider, "propTypes", {
   inputType: PropTypes.string,
 
   /**
-   * `true` to specify if the control is invalid.
+   * `Specify whether the Slider is currently invalid
    */
   invalid: PropTypes.bool,
 
+  /**
+   * Provide the text that is displayed when the Slider is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
   /**
    * The label for the slider.
    */
@@ -641,7 +659,17 @@ _defineProperty(Slider, "propTypes", {
   /**
    * The value.
    */
-  value: PropTypes.number.isRequired
+  value: PropTypes.number.isRequired,
+
+  /**
+   * `Specify whether the Slider is in a warn state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the Slider is in an warn state
+   */
+  warnText: PropTypes.node
 });
 
 _defineProperty(Slider, "defaultProps", {

package/es/components/UIShell/HeaderContainer.js

@@ -7,7 +7,7 @@
 
 import PropTypes from 'prop-types';
 import React__default, { useState, useCallback } from 'react';
-import { useEvent } from '../../internal/useEvent.js';
+import { useWindowEvent } from '../../internal/useEvent.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
@@ -18,7 +18,7 @@ const HeaderContainer = _ref => {
   } = _ref;
   //state for expandable sidenav
   const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
-  useEvent(window, 'keydown', event => {
+  useWindowEvent('keydown', event => {
     if (match(event, Escape)) {
       setIsSideNavExpandedState(false);
     }

package/es/internal/useEvent.js

@@ -7,25 +7,6 @@
 
 import { useRef, useEffect } from 'react';
 
-function useEvent(elementOrRef, eventName, callback) {
-  const savedCallback = useRef(null);
-  useEffect(() => {
-    savedCallback.current = callback;
-  });
-  useEffect(() => {
-    function handler(event) {
-      if (savedCallback.current) {
-        savedCallback.current(event);
-      }
-    }
-
-    const element = elementOrRef.current ?? elementOrRef;
-    element.addEventListener(eventName, handler);
-    return () => {
-      element.removeEventListener(eventName, handler);
-    };
-  }, [elementOrRef, eventName]);
-}
 function useWindowEvent(eventName, callback) {
   const savedCallback = useRef(null);
   useEffect(() => {
@@ -45,4 +26,4 @@ function useWindowEvent(eventName, callback) {
   }, [eventName]);
 }
 
-export { useEvent, useWindowEvent };
+export { useWindowEvent };

package/lib/components/Slider/Slider.d.ts

@@ -41,9 +41,13 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      */
     inputType?: string;
     /**
-     * `true` to specify if the control is invalid.
+     * `Specify whether the Slider is currently invalid
      */
     invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the Slider is in an invalid state
+     */
+    invalidText?: React.ReactNode;
     /**
      * The label for the slider.
      */
@@ -119,6 +123,14 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      * The value.
      */
     value: number;
+    /**
+     * 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?: React.ReactNode;
 }
 interface CalcValueProps {
     clientX?: number;
@@ -160,9 +172,13 @@ export default class Slider extends PureComponent<SliderProps> {
          */
         inputType: PropTypes.Requireable<string>;
         /**
-         * `true` to specify if the control is invalid.
+         * `Specify whether the Slider is currently invalid
          */
         invalid: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the text that is displayed when the Slider is in an invalid state
+         */
+        invalidText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * The label for the slider.
          */
@@ -229,6 +245,14 @@ export default class Slider extends PureComponent<SliderProps> {
          * The value.
          */
         value: PropTypes.Validator<number>;
+        /**
+         * `Specify whether the Slider is in a warn state
+         */
+        warn: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the text that is displayed when the Slider is in an warn state
+         */
+        warnText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
     static defaultProps: {
         hideTextInput: boolean;

package/lib/components/Slider/Slider.js

@@ -20,6 +20,7 @@ var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../FeatureFlags/index.js');
+var iconsReact = require('@carbon/icons-react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -444,11 +445,14 @@ class Slider extends React.PureComponent {
       step,
       stepMultiplier: _stepMultiplier,
       inputType,
+      invalidText,
       required,
       disabled,
       name,
       light,
       readOnly,
+      warn,
+      warnText,
       ...other
     } = this.props;
     delete other.onRelease;
@@ -476,8 +480,9 @@ class Slider extends React.PureComponent {
       }, [enabled ? null : className]);
       const inputClasses = cx__default["default"](`${prefix}--text-input`, `${prefix}--slider-text-input`, {
         [`${prefix}--text-input--light`]: light,
-        [`${prefix}--text-input--invalid`]: isValid === false,
-        [`${prefix}--slider-text-input--hidden`]: hideTextInput
+        [`${prefix}--text-input--invalid`]: !readOnly && isValid === false,
+        [`${prefix}--slider-text-input--hidden`]: hideTextInput,
+        [`${prefix}--slider-text-input--warn`]: !readOnly && warn
       });
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: enabled ? cx__default["default"](`${prefix}--form-item`, className) : `${prefix}--form-item`
@@ -499,7 +504,7 @@ class Slider extends React.PureComponent {
         onKeyDown: this.onKeyDown,
         role: "presentation",
         tabIndex: -1,
-        "data-invalid": isValid ? null : true
+        "data-invalid": !isValid && !readOnly ? true : null
       }, other), /*#__PURE__*/React__default["default"].createElement("div", {
         className: `${prefix}--slider__thumb`,
         role: "slider",
@@ -536,10 +541,18 @@ class Slider extends React.PureComponent {
         onChange: this.onChange,
         onBlur: this.onBlur,
         onKeyUp: this.props.onInputKeyUp,
-        "data-invalid": isValid ? null : true,
-        "aria-invalid": isValid ? undefined : true,
+        "data-invalid": !isValid && !readOnly ? true : null,
+        "aria-invalid": !isValid && !readOnly ? true : undefined,
         readOnly: readOnly
-      })));
+      }), !readOnly && isValid === false && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+        className: `${prefix}--slider__invalid-icon`
+      }), !readOnly && warn && isValid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+        className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
+      })), !readOnly && isValid === false && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cx__default["default"](`${prefix}--slider__validation-msg`, `${prefix}--slider__validation-msg--invalid`, `${prefix}--form-requirement`)
+      }, invalidText), !readOnly && warn && isValid && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cx__default["default"](`${prefix}--slider__validation-msg`, `${prefix}--form-requirement`)
+      }, warnText));
     });
   }
 
@@ -587,10 +600,15 @@ _rollupPluginBabelHelpers.defineProperty(Slider, "propTypes", {
   inputType: PropTypes__default["default"].string,
 
   /**
-   * `true` to specify if the control is invalid.
+   * `Specify whether the Slider is currently invalid
    */
   invalid: PropTypes__default["default"].bool,
 
+  /**
+   * Provide the text that is displayed when the Slider is in an invalid state
+   */
+  invalidText: PropTypes__default["default"].node,
+
   /**
    * The label for the slider.
    */
@@ -671,7 +689,17 @@ _rollupPluginBabelHelpers.defineProperty(Slider, "propTypes", {
   /**
    * The value.
    */
-  value: PropTypes__default["default"].number.isRequired
+  value: PropTypes__default["default"].number.isRequired,
+
+  /**
+   * `Specify whether the Slider is in a warn state
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the Slider is in an warn state
+   */
+  warnText: PropTypes__default["default"].node
 });
 
 _rollupPluginBabelHelpers.defineProperty(Slider, "defaultProps", {

package/lib/components/UIShell/HeaderContainer.js

@@ -27,7 +27,7 @@ const HeaderContainer = _ref => {
   } = _ref;
   //state for expandable sidenav
   const [isSideNavExpandedState, setIsSideNavExpandedState] = React.useState(isSideNavExpanded);
-  useEvent.useEvent(window, 'keydown', event => {
+  useEvent.useWindowEvent('keydown', event => {
     if (match.match(event, keys.Escape)) {
       setIsSideNavExpandedState(false);
     }

package/lib/internal/useEvent.js

@@ -11,25 +11,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-function useEvent(elementOrRef, eventName, callback) {
-  const savedCallback = React.useRef(null);
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  });
-  React.useEffect(() => {
-    function handler(event) {
-      if (savedCallback.current) {
-        savedCallback.current(event);
-      }
-    }
-
-    const element = elementOrRef.current ?? elementOrRef;
-    element.addEventListener(eventName, handler);
-    return () => {
-      element.removeEventListener(eventName, handler);
-    };
-  }, [elementOrRef, eventName]);
-}
 function useWindowEvent(eventName, callback) {
   const savedCallback = React.useRef(null);
   React.useEffect(() => {
@@ -49,5 +30,4 @@ function useWindowEvent(eventName, callback) {
   }, [eventName]);
 }
 
-exports.useEvent = useEvent;
 exports.useWindowEvent = useWindowEvent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.29.0-rc.0",
+  "version": "1.29.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.13.0",
     "@carbon/icons-react": "^11.19.0",
     "@carbon/layout": "^11.13.0",
-    "@carbon/styles": "^1.29.0-rc.0",
+    "@carbon/styles": "^1.29.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -133,5 +133,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "e25cb04ffef0834eac0ef6f05bc9f7978fb4b796"
+  "gitHead": "044bb55aff8c9cddef1a7e42d2bfeac59a89c546"
 }