@carbon/react 1.29.1 → 1.30.0-rc.0

package/es/components/Slider/Slider.js

@@ -10,7 +10,6 @@ import React__default, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import throttle from 'lodash.throttle';
-import * as FeatureFlags from '@carbon/feature-flags';
 import { ArrowDown, ArrowLeft, ArrowUp, ArrowRight } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
@@ -21,100 +20,83 @@ import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 const defaultFormatLabel = (value, label) => {
   return typeof label === 'function' ? label(value) : `${value}${label}`;
 };
+
 /**
  * Minimum time between processed "drag" events.
  */
-
-
 const EVENT_THROTTLE = 16; // ms
 
 /**
  * Event types that trigger "drags".
  */
-
 const DRAG_EVENT_TYPES = new Set(['mousemove', 'touchmove']);
+
 /**
  * Event types that trigger a "drag" to stop.
  */
-
 const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
 class Slider extends PureComponent {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "state", {
       value: this.props.value,
       left: 0,
       needsOnRelease: false,
       isValid: true
     });
-
     _defineProperty(this, "thumbRef", void 0);
-
     _defineProperty(this, "filledTrackRef", void 0);
-
     _defineProperty(this, "element", null);
-
     _defineProperty(this, "inputId", '');
-
     _defineProperty(this, "track", void 0);
-
     _defineProperty(this, "onDragStart", evt => {
       // Do nothing if component is disabled
       if (this.props.disabled || this.props.readOnly) {
         return;
-      } // Register drag stop handlers
-
+      }
 
+      // Register drag stop handlers
       DRAG_STOP_EVENT_TYPES.forEach(element => {
-        var _this$element;
-
-        (_this$element = this.element) === null || _this$element === void 0 ? void 0 : _this$element.ownerDocument.addEventListener(element, this.onDragStop);
-      }); // Register drag handlers
+        this.element?.ownerDocument.addEventListener(element, this.onDragStop);
+      });
 
+      // Register drag handlers
       DRAG_EVENT_TYPES.forEach(element => {
-        var _this$element2;
+        this.element?.ownerDocument.addEventListener(element, this.onDrag);
+      });
 
-        (_this$element2 = this.element) === null || _this$element2 === void 0 ? void 0 : _this$element2.ownerDocument.addEventListener(element, this.onDrag);
-      }); // Perform first recalculation since we probably didn't click exactly in the
+      // Perform first recalculation since we probably didn't click exactly in the
       // middle of the thumb
-
       this.onDrag(evt);
     });
-
     _defineProperty(this, "onDragStop", () => {
       // Do nothing if component is disabled
       if (this.props.disabled || this.props.readOnly) {
         return;
-      } // Remove drag stop handlers
-
+      }
 
+      // Remove drag stop handlers
       DRAG_STOP_EVENT_TYPES.forEach(element => {
-        var _this$element3;
-
-        (_this$element3 = this.element) === null || _this$element3 === void 0 ? void 0 : _this$element3.ownerDocument.removeEventListener(element, this.onDragStop);
-      }); // Remove drag handlers
+        this.element?.ownerDocument.removeEventListener(element, this.onDragStop);
+      });
 
+      // Remove drag handlers
       DRAG_EVENT_TYPES.forEach(element => {
-        var _this$element4;
-
-        (_this$element4 = this.element) === null || _this$element4 === void 0 ? void 0 : _this$element4.ownerDocument.removeEventListener(element, this.onDrag);
-      }); // Set needsOnRelease flag so event fires on next update
+        this.element?.ownerDocument.removeEventListener(element, this.onDrag);
+      });
 
+      // Set needsOnRelease flag so event fires on next update
       this.setState({
         needsOnRelease: true,
         isValid: true
       });
     });
-
     _defineProperty(this, "_onDrag", evt => {
       // Do nothing if component is disabled or we have no event
       if (this.props.disabled || this.props.readOnly || !evt) {
         return;
       }
-
       let clientX;
-
       if ('clientX' in evt) {
         clientX = evt.clientX;
       } else if ('touches' in evt && 0 in evt.touches && 'clientX' in evt.touches[0]) {
@@ -123,7 +105,6 @@ class Slider extends PureComponent {
         // Do nothing if we have no valid clientX
         return;
       }
-
       const {
         value,
         left
@@ -136,20 +117,16 @@ class Slider extends PureComponent {
         isValid: true
       });
     });
-
     _defineProperty(this, "onDrag", throttle(this._onDrag, EVENT_THROTTLE, {
       leading: true,
       trailing: false
     }));
-
     _defineProperty(this, "onKeyDown", evt => {
       // Do nothing if component is disabled or we don't have a valid event
       if (this.props.disabled || this.props.readOnly || !('which' in evt)) {
         return;
       }
-
       let delta = 0;
-
       if (matches(evt.which, [ArrowDown, ArrowLeft])) {
         delta = -(this.props.step ?? Slider.defaultProps.step);
       } else if (matches(evt.which, [ArrowUp, ArrowRight])) {
@@ -157,14 +134,13 @@ class Slider extends PureComponent {
       } else {
         // Ignore keys we don't want to handle
         return;
-      } // If shift was held, account for the stepMultiplier
-
+      }
 
+      // If shift was held, account for the stepMultiplier
       if (evt.shiftKey) {
         const stepMultiplier = this.props.stepMultiplier;
         delta *= stepMultiplier ?? Slider.defaultProps.stepMultiplier;
       }
-
       Math.floor(this.state.value / (this.props.step ?? Slider.defaultProps.step)) * (this.props.step ?? Slider.defaultProps.step);
       const {
         value,
@@ -180,20 +156,19 @@ class Slider extends PureComponent {
         isValid: true
       });
     });
-
     _defineProperty(this, "onChange", evt => {
       // Do nothing if component is disabled
       if (this.props.disabled || this.props.readOnly) {
         return;
-      } // Do nothing if we have no valid event, target, or value
-
+      }
 
+      // Do nothing if we have no valid event, target, or value
       if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
         return;
       }
+      const targetValue = Number.parseFloat(evt.target.value);
 
-      const targetValue = Number.parseFloat(evt.target.value); // Avoid calling calcValue for invalid numbers, but still update the state
-
+      // Avoid calling calcValue for invalid numbers, but still update the state
       if (isNaN(targetValue)) {
         this.setState({
           value: evt.target.value
@@ -212,16 +187,13 @@ class Slider extends PureComponent {
         });
       }
     });
-
     _defineProperty(this, "onBlur", evt => {
-      var _this$props$onBlur, _this$props;
-
       // Do nothing if we have no valid event, target, or value
       if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
         return;
-      } // determine validity of input change after clicking out of input
-
+      }
 
+      // determine validity of input change after clicking out of input
       const validity = evt.target.checkValidity();
       const {
         value
@@ -229,44 +201,39 @@ class Slider extends PureComponent {
       this.setState({
         isValid: validity
       });
-      (_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, {
+      this.props.onBlur?.({
         value
       });
     });
-
     _defineProperty(this, "calcValue", _ref => {
-      var _this$element5, _this$element5$getBou;
-
       let {
         clientX,
         value,
         useRawValue = false
       } = _ref;
       const range = this.props.max - this.props.min;
-      const boundingRect = (_this$element5 = this.element) === null || _this$element5 === void 0 ? void 0 : (_this$element5$getBou = _this$element5.getBoundingClientRect) === null || _this$element5$getBou === void 0 ? void 0 : _this$element5$getBou.call(_this$element5);
+      const boundingRect = this.element?.getBoundingClientRect?.();
       const totalSteps = range / (this.props.step ?? Slider.defaultProps.step);
-      let width = boundingRect ? boundingRect.right - boundingRect.left : 0; // Enforce a minimum width of at least 1 for calculations
+      let width = boundingRect ? boundingRect.right - boundingRect.left : 0;
 
+      // Enforce a minimum width of at least 1 for calculations
       if (width <= 0) {
         width = 1;
-      } // If a clientX is specified, use it to calculate the leftPercent. If not,
-      // use the provided value or state's value to calculate it instead.
-
+      }
 
+      // If a clientX is specified, use it to calculate the leftPercent. If not,
+      // use the provided value or state's value to calculate it instead.
       let leftPercent;
-
       if (clientX != null) {
-        const leftOffset = clientX - ((boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.left) ?? 0);
+        const leftOffset = clientX - (boundingRect?.left ?? 0);
         leftPercent = leftOffset / width;
       } else {
         if (value == null) {
           value = this.state.value;
-        } // prevent NaN calculation if the range is 0
-
-
+        }
+        // prevent NaN calculation if the range is 0
         leftPercent = range === 0 ? 0 : (value - this.props.min) / range;
       }
-
       if (useRawValue) {
         // Adjusts only for min/max of thumb position
         return {
@@ -274,7 +241,6 @@ class Slider extends PureComponent {
           left: Math.min(1, Math.max(0, leftPercent)) * 100
         };
       }
-
       let steppedValue = Math.round(leftPercent * totalSteps) * (this.props.step ?? Slider.defaultProps.step);
       const steppedPercent = this.clamp(steppedValue / range, 0, 1);
       steppedValue = this.clamp(steppedValue + this.props.min, this.props.min, this.props.max);
@@ -283,15 +249,13 @@ class Slider extends PureComponent {
         left: steppedPercent * 100
       };
     });
-
     this.thumbRef = /*#__PURE__*/React__default.createRef();
     this.filledTrackRef = /*#__PURE__*/React__default.createRef();
   }
+
   /**
    * Sets up initial slider position and value in response to component mount.
    */
-
-
   componentDidMount() {
     if (this.element) {
       const {
@@ -306,6 +270,7 @@ class Slider extends PureComponent {
       });
     }
   }
+
   /**
    * Handles firing of `onChange` and `onRelease` callbacks to parent in
    * response to state changes.
@@ -314,47 +279,44 @@ class Slider extends PureComponent {
    * @param {*} prevState The previous Slider state, used to see if callbacks
    * should be called.
    */
-
-
   componentDidUpdate(prevProps, prevState) {
     // Fire onChange event handler if present, if there's a usable value, and
     // if the value is different from the last one
+
     if (this.thumbRef.current) {
       this.thumbRef.current.style.left = `${this.state.left}%`;
     }
-
     if (this.filledTrackRef.current) {
       this.filledTrackRef.current.style.transform = `translate(0%, -50%) scaleX(${this.state.left / 100})`;
     }
-
     if (prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
       this.props.onChange({
         value: this.state.value
       });
-    } // Fire onRelease event handler if present and if needed
-
+    }
 
+    // Fire onRelease event handler if present and if needed
     if (this.state.needsOnRelease && typeof this.props.onRelease === 'function') {
       this.props.onRelease({
         value: this.state.value
-      }); // Reset the flag
-
+      });
+      // Reset the flag
       this.setState({
         needsOnRelease: false
       });
-    } // If value from props does not change, do nothing here.
-    // Otherwise, do prop -> state sync without "value capping".
-
+    }
 
+    // If value from props does not change, do nothing here.
+    // Otherwise, do prop -> state sync without "value capping".
     if (prevProps.value === this.props.value && prevProps.max === this.props.max && prevProps.min === this.props.min) {
       return;
     }
-
     this.setState(this.calcValue({
       value: this.props.value,
       useRawValue: true
     }));
   }
+
   /**
    * Synonymous to ECMA2017+ `Math.clamp`.
    *
@@ -364,11 +326,10 @@ class Slider extends PureComponent {
    *
    * @returns `val` if `max>=val>=min`; `min` if `val<min`; `max` if `val>max`.
    */
-
-
   clamp(val, min, max) {
     return Math.max(min, Math.min(val, max));
   }
+
   /**
    * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
    * started on somewhere other than the thumb without a corresponding "move"
@@ -377,29 +338,84 @@ class Slider extends PureComponent {
    * @param {Event} evt The event.
    */
 
+  /**
+   * Unregisters "drag" and "drag stop" event handlers and calls sets the flag
+   * indicating that the `onRelease` callback should be called.
+   */
+
+  /**
+   * Handles a "drag" event by recalculating the value/thumb and setting state
+   * accordingly.
+   *
+   * @param {Event} evt The event.
+   */
+
+  /**
+   * Throttles calls to `this._onDrag` by limiting events to being processed at
+   * most once every `EVENT_THROTTLE` milliseconds.
+   */
+
+  /**
+   * Handles a `keydown` event by recalculating the value/thumb and setting
+   * state accordingly.
+   *
+   * @param {Event} evt The event.
+   */
+
+  /**
+   * Provides the two-way binding for the input field of the Slider. It also
+   * Handles a change to the input field by recalculating the value/thumb and
+   * setting state accordingly.
+   *
+   * @param {Event} evt The event.
+   */
+
+  /**
+   * Checks for validity of input value after clicking out of the input. It also
+   * Handles state change to isValid state.
+   *
+   * @param {Event} evt The event.
+   */
+
+  /**
+   * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
+   * `value`, or neither of those.
+   * - If `clientX` is specified, it will be used in
+   *   conjunction with the Slider's bounding rectangle to calculate the new
+   *   values.
+   * - If `clientX` is not specified and `value` is, it will be used to
+   *   calculate new values as though it were the current value of the Slider.
+   * - If neither `clientX` nor `value` are specified, `this.props.value` will
+   *   be used to calculate the new values as though it were the current value
+   *   of the Slider.
+   *
+   * @param {object} params
+   * @param {number} [params.clientX] Optional clientX value expected to be from
+   *   an event fired by one of the Slider's `DRAG_EVENT_TYPES` events.
+   * @param {number} [params.value] Optional value use during calculations if
+   *   clientX is not provided.
+   * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
+   */
 
   // syncs invalid state and prop
   static getDerivedStateFromProps(props, state) {
     const {
       isValid
-    } = state; // will override state in favor of invalid prop
-
+    } = state;
+    // will override state in favor of invalid prop
     if (props.invalid === true && isValid === true) {
       return {
         isValid: false
       };
     }
-
     if (props.invalid === false && isValid === false) {
       return {
         isValid: true
       };
-    } //if invalid prop is not provided, state will remain the same
-
-
+    }
+    //if invalid prop is not provided, state will remain the same
     return null;
   }
-
   render() {
     const {
       ariaLabelInput,
@@ -431,13 +447,6 @@ class Slider extends PureComponent {
       value,
       isValid
     } = this.state;
-    const scope = this.context;
-    let enabled;
-
-    if (scope.enabled) {
-      enabled = scope.enabled('enable-v11-release');
-    }
-
     return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => {
       const labelId = `${id}-label`;
       const labelClasses = cx(`${prefix}--label`, {
@@ -447,7 +456,7 @@ class Slider extends PureComponent {
         [`${prefix}--slider--disabled`]: disabled
       }, {
         [`${prefix}--slider--readonly`]: readOnly
-      }, [enabled ? null : className]);
+      });
       const inputClasses = cx(`${prefix}--text-input`, `${prefix}--slider-text-input`, {
         [`${prefix}--text-input--light`]: light,
         [`${prefix}--text-input--invalid`]: !readOnly && isValid === false,
@@ -455,7 +464,7 @@ class Slider extends PureComponent {
         [`${prefix}--slider-text-input--warn`]: !readOnly && warn
       });
       return /*#__PURE__*/React__default.createElement("div", {
-        className: enabled ? cx(`${prefix}--form-item`, className) : `${prefix}--form-item`
+        className: cx(`${prefix}--form-item`, className)
       }, /*#__PURE__*/React__default.createElement("label", {
         htmlFor: id,
         className: labelClasses,
@@ -525,153 +534,123 @@ class Slider extends PureComponent {
       }, warnText));
     });
   }
-
 }
-
 _defineProperty(Slider, "propTypes", {
   /**
    * The `ariaLabel` for the `<input>`.
    */
   ariaLabelInput: PropTypes.string,
-
   /**
    * The child nodes.
    */
   children: PropTypes.node,
-
   /**
    * The CSS class name for the slider.
    */
   className: PropTypes.string,
-
   /**
    * `true` to disable this slider.
    */
   disabled: PropTypes.bool,
-
   /**
    * The callback to format the label associated with the minimum/maximum value.
    */
   formatLabel: PropTypes.func,
-
   /**
    * `true` to hide the number input box.
    */
   hideTextInput: PropTypes.bool,
-
   /**
    * The ID of the `<input>`.
    */
   id: PropTypes.string,
-
   /**
    * The `type` attribute of the `<input>`.
    */
   inputType: PropTypes.string,
-
   /**
    * `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.
    */
   labelText: PropTypes.node,
-
   /**
    * `true` to use the light version.
    */
   light: deprecate(PropTypes.bool, 'The `light` prop for `Slider` 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.'),
-
   /**
    * The maximum value.
    */
   max: PropTypes.number.isRequired,
-
   /**
    * The label associated with the maximum value.
    */
   maxLabel: PropTypes.string,
-
   /**
    * The minimum value.
    */
   min: PropTypes.number.isRequired,
-
   /**
    * The label associated with the minimum value.
    */
   minLabel: PropTypes.string,
-
   /**
    * The `name` attribute of the `<input>`.
    */
   name: PropTypes.string,
-
   /**
    * Provide an optional function to be called when the input element
    * loses focus
    */
   onBlur: PropTypes.func,
-
   /**
    * The callback to get notified of change in value.
    */
   onChange: PropTypes.func,
-
   /**
    * Provide an optional function to be called when a key is pressed in the number input
    */
   onInputKeyUp: PropTypes.func,
-
   /**
    * The callback to get notified of value on handle release.
    */
   onRelease: PropTypes.func,
-
   /**
    * Whether the slider should be read-only
    */
   readOnly: PropTypes.bool,
-
   /**
    * `true` to specify if the control is required.
    */
   required: PropTypes.bool,
-
   /**
    * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside of the `step` increment will be considered invalid.
    */
   step: PropTypes.number,
-
   /**
    * A value determining how much the value should increase/decrease by Shift+arrow keys,
    * which will be `(max - min) / stepMultiplier`.
    */
   stepMultiplier: PropTypes.number,
-
   /**
    * The value.
    */
   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", {
   hideTextInput: false,
   step: 1,
@@ -680,10 +659,8 @@ _defineProperty(Slider, "defaultProps", {
   minLabel: '',
   maxLabel: '',
   inputType: 'number',
-  ariaLabelInput: FeatureFlags.enabled('enable-v11-release') ? undefined : 'Slider number input',
   readOnly: false
 });
-
 _defineProperty(Slider, "contextType", FeatureFlagContext);
 
 export { Slider as default };