@carbon/react 1.40.0 → 1.41.0

package/lib/components/Slider/Slider.Skeleton.js

@@ -25,15 +25,25 @@ const SliderSkeleton = _ref => {
   let {
     hideLabel,
     className,
+    twoHandles,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const containerClasses = cx__default["default"](`${prefix}--slider-container`, `${prefix}--skeleton`, {
+    [`${prefix}--slider-container--two-handles`]: twoHandles
+  });
+  const lowerThumbClasses = cx__default["default"](`${prefix}--slider__thumb`, {
+    [`${prefix}--slider__thumb--lower`]: twoHandles
+  });
+  const upperThumbClasses = cx__default["default"](`${prefix}--slider__thumb`, {
+    [`${prefix}--slider__thumb--upper`]: twoHandles
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--form-item`, className)
   }, rest), !hideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--slider-container ${prefix}--skeleton`
+    className: containerClasses
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--slider__range-label`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -43,8 +53,10 @@ const SliderSkeleton = _ref => {
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--slider__filled-track`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--slider__thumb`
-  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: lowerThumbClasses
+  }), twoHandles ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: upperThumbClasses
+  }) : undefined), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--slider__range-label`
   })));
 };
@@ -56,7 +68,11 @@ SliderSkeleton.propTypes = {
   /**
    * Specify whether the label should be hidden, or not
    */
-  hideLabel: PropTypes__default["default"].bool
+  hideLabel: PropTypes__default["default"].bool,
+  /**
+   * Turn the slider into a range slider.
+   */
+  twoHandles: PropTypes__default["default"].bool
 };
 var SliderSkeleton$1 = SliderSkeleton;
 

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

@@ -6,18 +6,29 @@
  */
 import React, { KeyboardEventHandler, PureComponent } from 'react';
 import PropTypes, { ReactNodeLike } from 'prop-types';
+/**
+ * Distinguish two handles by lower and upper positions.
+ */
+declare enum HandlePosition {
+    LOWER = "lower",
+    UPPER = "upper"
+}
 type ExcludedAttributes = 'onChange' | 'onBlur';
 export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
      * The `ariaLabel` for the `<input>`.
      */
     ariaLabelInput?: string;
+    /**
+     * The `ariaLabel` for the upper bound `<input>` and handle when there are two handles.
+     */
+    unstable_ariaLabelInputUpper?: string;
     /**
      * The child nodes.
      */
     children?: ReactNodeLike;
     /**
-     * The CSS class name for the slider.
+     * The CSS class name for the slider, set on the wrapping div.
      */
     className?: string;
     /**
@@ -77,23 +88,28 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      * The `name` attribute of the `<input>`.
      */
     name?: string;
+    /**
+     * The `name` attribute of the upper bound `<input>` when there are two handles.
+     */
+    unstable_nameUpper?: string;
     /**
      * Provide an optional function to be called when the input element
      * loses focus
      */
     onBlur?: (data: {
         value: string;
+        handlePosition: HandlePosition | undefined;
     }) => void;
     /**
      * The callback to get notified of change in value.
-     * `({ value}) => void`
-    //  * @param {{ value }}
+     * `({ value: number, valueUpper?: number }) => void`
      */
     onChange?: (data: {
         value: SliderProps['value'];
+        valueUpper: SliderProps['unstable_valueUpper'];
     }) => void;
     /**
-     * Provide an optional function to be called when a key is pressed in the number input
+     * Provide an optional function to be called when a key is pressed in the number input. When there are two handles, you can obtain the relevant handle position by using `event.target.dataset.handlePosition`.
      */
     onInputKeyUp?: KeyboardEventHandler<HTMLInputElement>;
     /**
@@ -101,6 +117,7 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      */
     onRelease?: (data: {
         value: SliderProps['value'];
+        valueUpper: SliderProps['unstable_valueUpper'];
     }) => void;
     /**
      * Whether the slider should be read-only
@@ -111,7 +128,7 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      */
     required?: boolean;
     /**
-     * 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.
+     * 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 the `step` increment will be considered invalid.
      */
     step?: number;
     /**
@@ -120,9 +137,22 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      */
     stepMultiplier?: number;
     /**
-     * The value.
+     * Supply a method to translate internal strings with your i18n tool of
+     * choice. Translation keys are available on the `translationIds` field for
+     * this component.
+     */
+    translateWithId?: (translationId: string, translationState: {
+        correctedValue?: string;
+    }) => string;
+    /**
+     * The value of the slider. When there are two handles, value is the lower
+     * bound.
      */
     value: number;
+    /**
+     * The upper bound when there are two handles.
+     */
+    unstable_valueUpper?: number;
     /**
      * Specify whether the control is currently in warning state
      */
@@ -137,7 +167,12 @@ interface CalcValueProps {
     value?: number;
     useRawValue?: boolean;
 }
-export default class Slider extends PureComponent<SliderProps> {
+interface CalcLeftPercentProps {
+    clientX?: number;
+    value?: number;
+    range?: number;
+}
+declare class Slider extends PureComponent<SliderProps> {
     static propTypes: {
         /**
          * The `ariaLabel` for the `<input>`.
@@ -233,7 +268,7 @@ export default class Slider extends PureComponent<SliderProps> {
          */
         required: PropTypes.Requireable<boolean>;
         /**
-         * 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.
+         * 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 the `step` increment will be considered invalid.
          */
         step: PropTypes.Requireable<number>;
         /**
@@ -242,7 +277,26 @@ export default class Slider extends PureComponent<SliderProps> {
          */
         stepMultiplier: PropTypes.Requireable<number>;
         /**
-         * The value.
+         * Supply a method to translate internal strings with your i18n tool of
+         * choice. Translation keys are available on the `translationIds` field for
+         * this component.
+         */
+        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The `ariaLabel` for the upper bound `<input>` when there are two handles.
+         */
+        unstable_ariaLabelInputUpper: PropTypes.Requireable<string>;
+        /**
+         * The `name` attribute of the upper bound `<input>` when there are two handles.
+         */
+        unstable_nameUpper: PropTypes.Requireable<string>;
+        /**
+         * The upper bound when there are two handles.
+         */
+        unstable_valueUpper: PropTypes.Requireable<number>;
+        /**
+         * The value of the slider. When there are two handles, value is the lower
+         * bound.
          */
         value: PropTypes.Validator<number>;
         /**
@@ -250,29 +304,26 @@ export default class Slider extends PureComponent<SliderProps> {
          */
         warn: PropTypes.Requireable<boolean>;
         /**
-         * Provide the text that is displayed when the Slider is in an warn state
+         * Provide the text that is displayed when the Slider is in a warn state
          */
         warnText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    static defaultProps: {
-        hideTextInput: boolean;
-        step: number;
-        stepMultiplier: number;
-        disabled: boolean;
-        minLabel: string;
-        maxLabel: string;
-        inputType: string;
-        readOnly: boolean;
-    };
     static contextType: React.Context<any>;
     state: {
         value: number;
+        valueUpper: number | undefined;
         left: number;
+        leftUpper: number;
         needsOnRelease: boolean;
         isValid: boolean;
+        isValidUpper: boolean;
+        activeHandle: null;
+        correctedValue: null;
+        correctedPosition: null;
         isRtl: boolean;
     };
     thumbRef: React.RefObject<HTMLDivElement>;
+    thumbRefUpper: React.RefObject<HTMLDivElement>;
     filledTrackRef: React.RefObject<HTMLDivElement>;
     element: HTMLDivElement | null;
     inputId: string;
@@ -325,8 +376,11 @@ export default class Slider extends PureComponent<SliderProps> {
      * accordingly.
      *
      * @param {Event} evt The event.
+     * @param activeHandle
+     *   The first drag event call, we may have an explicit activeHandle value,
+     *   which is to be used before state is used.
      */
-    _onDrag: (evt: any) => void;
+    _onDrag: (evt: any, activeHandle?: HandlePosition | null) => void;
     /**
      * Throttles calls to `this._onDrag` by limiting events to being processed at
      * most once every `EVENT_THROTTLE` milliseconds.
@@ -354,6 +408,13 @@ export default class Slider extends PureComponent<SliderProps> {
      * @param {Event} evt The event.
      */
     onBlur: (evt: React.FocusEvent<HTMLInputElement>) => void;
+    onInputKeyDown: (evt: any) => void;
+    processNewInputValue: (input: HTMLInputElement) => void;
+    calcLeftPercent: ({ clientX, value, range }: CalcLeftPercentProps) => number;
+    calcSteppedValuePercent: ({ leftPercent, range }: {
+        leftPercent: any;
+        range: any;
+    }) => number[];
     /**
      * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
      * `value`, or neither of those.
@@ -377,9 +438,60 @@ export default class Slider extends PureComponent<SliderProps> {
         value: number | undefined;
         left: number;
     };
-    static getDerivedStateFromProps(props: any, state: any): {
-        isValid: boolean;
-    } | null;
+    calcDistanceToHandle: (handle: HandlePosition, clientX: any) => number;
+    /**
+     * Given the current value, delta and step, calculate the new value.
+     *
+     * @param {number} currentValue
+     *   Current value user is moving from.
+     * @param {number} delta
+     *   Movement from the current value. Can be positive or negative.
+     * @param {number} step
+     *   A value determining how much the value should increase/decrease by moving
+     *   the thumb by mouse.
+     */
+    calcValueForDelta: (currentValue: any, delta: any, step?: number) => any;
+    /**
+     * Sets state relevant to the given handle position.
+     *
+     * Guards against setting either lower or upper values beyond its counterpart.
+     */
+    setValueLeftForHandle: (handle: HandlePosition, { value: newValue, left: newLeft }: {
+        value: any;
+        left: any;
+    }) => void;
+    setValueForHandle: (handle: HandlePosition, value: any) => void;
+    isValidValueForPosition: ({ handle, value: newValue, min, max }: {
+        handle: any;
+        value: any;
+        min: any;
+        max: any;
+    }) => boolean;
+    isValidValue: ({ value, min, max }: {
+        value: any;
+        min: any;
+        max: any;
+    }) => boolean;
+    getAdjustedValueForPosition: ({ handle, value: newValue, min, max }: {
+        handle: any;
+        value: any;
+        min: any;
+        max: any;
+    }) => any;
+    getAdjustedValue: ({ value, min, max }: {
+        value: any;
+        min: any;
+        max: any;
+    }) => any;
+    /**
+     * Get the bounding rect for the requested handles' DOM element.
+     *
+     * If the bounding rect is not available, a new, empty DOMRect is returned.
+     */
+    getHandleBoundingRect: (handle: HandlePosition) => DOMRect;
+    getClientXFromEvent(event: MouseEvent | TouchEvent): any;
+    hasTwoHandles(): boolean;
+    static getDerivedStateFromProps(props: any, state: any): {} | null;
     render(): JSX.Element;
 }
-export {};
+export default Slider;