@carbon/react 1.40.0 → 1.41.0-rc.0

package/lib/components/Select/Select.js

@@ -20,6 +20,8 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var events = require('../../tools/events.js');
+require('../Text/index.js');
+var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,16 +35,16 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     className,
     id,
     inline = false,
-    labelText,
+    labelText = 'Select',
     disabled = false,
     children,
-    // reserved for use with <Pagination> component
+    // reserved for use with Pagination component
     noLabel = false,
     // eslint-disable-next-line no-unused-vars
     hideLabel = false,
     invalid = false,
-    invalidText,
-    helperText,
+    invalidText = '',
+    helperText = '',
     light = false,
     readOnly,
     size,
@@ -88,7 +90,8 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
       return warnText;
     }
   })();
-  const error = invalid || warn ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const error = invalid || warn ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "div",
     className: `${prefix}--form-requirement`,
     id: errorId
   }, errorText) : null;
@@ -96,7 +99,8 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
   const helperId = !helperText ? undefined : `select-helper-text-${selectInstanceId}`;
-  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "div",
     id: helperId,
     className: helperTextClasses
   }, helperText) : null;
@@ -152,7 +156,8 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     className: cx__default["default"](`${prefix}--form-item`, className)
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: selectClasses
-  }, !noLabel && /*#__PURE__*/React__default["default"].createElement("label", {
+  }, !noLabel && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "label",
     htmlFor: id,
     className: labelClasses
   }, labelText), inline && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -222,7 +227,7 @@ Select.propTypes = {
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Select` 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.'),
   /**
-   * Reserved for use with <Pagination> component. Will not render a label for the
+   * Reserved for use with Pagination component. Will not render a label for the
    * select since Pagination renders one for us.
    */
   noLabel: PropTypes__default["default"].bool,
@@ -248,13 +253,5 @@ Select.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-Select.defaultProps = {
-  disabled: false,
-  labelText: 'Select',
-  inline: false,
-  invalid: false,
-  invalidText: '',
-  helperText: ''
-};
 
 exports["default"] = Select;

package/lib/components/SelectItem/SelectItem.d.ts

@@ -52,11 +52,5 @@ declare const SelectItem: {
          */
         value: PropTypes.Validator<any>;
     };
-    defaultProps: {
-        disabled: boolean;
-        hidden: boolean;
-        value: string;
-        text: string;
-    };
 };
 export default SelectItem;

package/lib/components/SelectItem/SelectItem.js

@@ -24,10 +24,10 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const SelectItem = _ref => {
   let {
     className,
-    value,
-    disabled,
-    hidden,
-    text,
+    value = '',
+    disabled = false,
+    hidden = false,
+    text = '',
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -66,11 +66,5 @@ SelectItem.propTypes = {
    */
   value: PropTypes__default["default"].any.isRequired
 };
-SelectItem.defaultProps = {
-  disabled: false,
-  hidden: false,
-  value: '',
-  text: ''
-};
 
 exports["default"] = SelectItem;

package/lib/components/SelectItemGroup/SelectItemGroup.d.ts

@@ -44,8 +44,5 @@ declare const SelectItemGroup: {
          */
         label: PropTypes.Validator<string>;
     };
-    defaultProps: {
-        disabled: boolean;
-    };
 };
 export default SelectItemGroup;

package/lib/components/SelectItemGroup/SelectItemGroup.js

@@ -25,7 +25,7 @@ const SelectItemGroup = _ref => {
   let {
     children,
     className,
-    disabled,
+    disabled = false,
     label,
     ...other
   } = _ref;
@@ -55,8 +55,5 @@ SelectItemGroup.propTypes = {
    */
   label: PropTypes__default["default"].string.isRequired
 };
-SelectItemGroup.defaultProps = {
-  disabled: false
-};
 
 exports["default"] = SelectItemGroup;

package/lib/components/SkeletonIcon/SkeletonIcon.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface SkeletonIconProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * The CSS styles.
+     */
+    style?: React.CSSProperties;
+}
+declare const SkeletonIcon: React.FC<SkeletonIconProps>;
+export default SkeletonIcon;

package/lib/components/SkeletonIcon/SkeletonIcon.js

@@ -27,9 +27,8 @@ const SkeletonIcon = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const skeletonIconClasses = cx__default["default"]({
-    [`${prefix}--icon--skeleton`]: true,
-    [className]: className
+  const skeletonIconClasses = cx__default["default"](className, {
+    [`${prefix}--icon--skeleton`]: true
   });
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: skeletonIconClasses

package/lib/components/SkeletonText/SkeletonText.d.ts

@@ -51,11 +51,5 @@ declare const SkeletonText: {
          */
         width: PropTypes.Requireable<string>;
     };
-    defaultProps: {
-        paragraph: boolean;
-        width: string;
-        heading: boolean;
-        lineCount: number;
-    };
 };
 export default SkeletonText;

package/lib/components/SkeletonText/SkeletonText.js

@@ -101,11 +101,5 @@ SkeletonText.propTypes = {
    */
   width: PropTypes__default["default"].string
 };
-SkeletonText.defaultProps = {
-  paragraph: false,
-  width: '100%',
-  heading: false,
-  lineCount: 3
-};
 
 exports["default"] = SkeletonText;

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

@@ -15,9 +15,13 @@ export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
      * Specify whether the label should be hidden, or not
      */
     hideLabel?: boolean;
+    /**
+     * Turn the slider into a range slider.
+     */
+    twoHandles?: boolean;
 }
 declare const SliderSkeleton: {
-    ({ hideLabel, className, ...rest }: SliderSkeletonProps): JSX.Element;
+    ({ hideLabel, className, twoHandles, ...rest }: SliderSkeletonProps): JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add to the form item wrapper.
@@ -27,6 +31,10 @@ declare const SliderSkeleton: {
          * Specify whether the label should be hidden, or not
          */
         hideLabel: PropTypes.Requireable<boolean>;
+        /**
+         * Turn the slider into a range slider.
+         */
+        twoHandles: PropTypes.Requireable<boolean>;
     };
 };
 export default SliderSkeleton;

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;