@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/NumberInput/NumberInput.Skeleton.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["hideLabel", "className"];
+
+var NumberInputSkeleton = function NumberInputSkeleton(_ref) {
+  var hideLabel = _ref.hideLabel,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".concat(prefix, "--form-item"), className)
+  }, rest), !hideLabel && /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--number ").concat(prefix, "--skeleton")
+  }));
+};
+
+NumberInputSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add to the form item wrapper.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel: PropTypes.bool
+};
+var NumberInputSkeleton$1 = NumberInputSkeleton;
+
+export { NumberInputSkeleton$1 as default };

package/es/components/NumberInput/NumberInput.js

@@ -0,0 +1,515 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { defineProperty as _defineProperty, extends as _extends, inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, possibleConstructorReturn as _possibleConstructorReturn, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { Component } from 'react';
+import cx from 'classnames';
+import { Subtract, Add } from '@carbon/icons-react';
+import * as FeatureFlags from '@carbon/feature-flags';
+import mergeRefs from '../../tools/mergeRefs.js';
+import requiredIfValueExists from '../../prop-types/requiredIfValueExists.js';
+import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
+import { useControlledStateWithValue } from '../../internal/FeatureFlags.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+import deprecate from '../../prop-types/deprecate.js';
+import { FeatureFlagContext } from '../FeatureFlags/index.js';
+
+var _excluded = ["className", "disabled", "iconDescription", "id", "hideLabel", "hideSteppers", "label", "max", "min", "step", "value", "readOnly", "invalid", "invalidText", "warn", "warnText", "helperText", "ariaLabel", "light", "allowEmpty", "innerRef", "translateWithId", "isMobile", "size", "defaultValue"];
+
+var _defaultTranslations, _Subtract, _Add;
+var translationIds = {
+  'increment.number': 'increment.number',
+  'decrement.number': 'decrement.number'
+};
+var defaultTranslations = (_defaultTranslations = {}, _defineProperty(_defaultTranslations, translationIds['increment.number'], 'Increment number'), _defineProperty(_defaultTranslations, translationIds['decrement.number'], 'Decrement number'), _defaultTranslations);
+
+var capMin = function capMin(min, value) {
+  return isNaN(min) || !min && min !== 0 || isNaN(value) || !value && value !== 0 ? value : Math.max(min, value);
+};
+
+var capMax = function capMax(max, value) {
+  return isNaN(max) || !max && max !== 0 || isNaN(value) || !value && value !== 0 ? value : Math.min(max, value);
+};
+
+var NumberInput = /*#__PURE__*/function (_Component) {
+  _inherits(NumberInput, _Component);
+
+  var _super = _createSuper(NumberInput);
+
+  function NumberInput(props) {
+    var _this;
+
+    _classCallCheck(this, NumberInput);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "_inputRef", null);
+
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (evt) {
+      var _this$props = _this.props,
+          disabled = _this$props.disabled,
+          onChange = _this$props.onChange;
+
+      if (!disabled) {
+        evt.persist();
+        evt.imaginaryTarget = _this._inputRef;
+        var prevValue = _this.state.value;
+        var value = evt.target.value;
+        var direction = prevValue < value ? 'up' : 'down';
+
+        _this.setState({
+          value: value
+        }, function () {
+          if (useControlledStateWithValue) {
+            onChange(evt, {
+              value: value,
+              direction: direction
+            });
+          } else if (onChange) {
+            onChange(evt, {
+              value: value,
+              direction: direction
+            });
+          }
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleArrowClick", function (evt, direction) {
+      var value = typeof _this.state.value === 'string' ? Number(_this.state.value) : _this.state.value;
+      var _this$props2 = _this.props,
+          disabled = _this$props2.disabled,
+          min = _this$props2.min,
+          max = _this$props2.max,
+          step = _this$props2.step,
+          onChange = _this$props2.onChange,
+          onClick = _this$props2.onClick;
+      var conditional = direction === 'down' ? min !== undefined && value > min || min === undefined : max !== undefined && value < max || max === undefined;
+
+      if (!disabled && conditional) {
+        value = direction === 'down' ? value - step : value + step;
+        value = capMax(max, capMin(min, value));
+        evt.persist();
+        evt.imaginaryTarget = _this._inputRef;
+
+        _this.setState({
+          value: value
+        }, function () {
+          //TO-DO v11: update these events to return the same things --> evt, {value, direction}
+          if (useControlledStateWithValue) {
+            onClick && onClick(evt, {
+              value: value,
+              direction: direction
+            });
+            onChange && onChange(evt, {
+              value: value,
+              direction: direction
+            });
+          } else {
+            // value added as a 3rd argument rather than in same obj so it doesn't break in v10
+            onClick && onClick(evt, direction, value);
+            onChange && onChange(evt, direction, value);
+          }
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_handleInputRef", function (ref) {
+      _this._inputRef = ref;
+    });
+
+    _this.isControlled = props.value !== undefined;
+
+    if (useControlledStateWithValue && _this.isControlled) {
+      // Skips the logic of setting initial state if this component is controlled
+      _this.state = {};
+      return _possibleConstructorReturn(_this);
+    }
+
+    var _value = useControlledStateWithValue || typeof props.defaultValue !== 'undefined' ? props.defaultValue : props.value;
+
+    _value = _value === undefined ? 0 : _value;
+
+    if (props.min || props.min === 0) {
+      _value = Math.max(props.min, _value);
+    }
+
+    _this.state = {
+      value: _value
+    };
+    return _this;
+  }
+
+  _createClass(NumberInput, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props3 = this.props,
+          className = _this$props3.className,
+          disabled = _this$props3.disabled,
+          iconDescription = _this$props3.iconDescription,
+          id = _this$props3.id,
+          hideLabel = _this$props3.hideLabel,
+          hideSteppers = _this$props3.hideSteppers,
+          label = _this$props3.label,
+          max = _this$props3.max,
+          min = _this$props3.min,
+          step = _this$props3.step,
+          value = _this$props3.value,
+          readOnly = _this$props3.readOnly,
+          invalid = _this$props3.invalid,
+          invalidText = _this$props3.invalidText,
+          warn = _this$props3.warn,
+          warnText = _this$props3.warnText,
+          helperText = _this$props3.helperText,
+          ariaLabel = _this$props3.ariaLabel,
+          light = _this$props3.light,
+          allowEmpty = _this$props3.allowEmpty,
+          ref = _this$props3.innerRef,
+          t = _this$props3.translateWithId,
+          isMobile = _this$props3.isMobile,
+          size = _this$props3.size;
+          _this$props3.defaultValue;
+          var other = _objectWithoutProperties(_this$props3, _excluded);
+
+      var scope = this.context;
+      var enabled;
+
+      if (scope.enabled) {
+        enabled = scope.enabled('enable-v11-release');
+      }
+
+      return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, function (prefix) {
+        var _classNames, _classNames3, _classNames5, _normalizedProps$icon;
+
+        var numberInputClasses = cx("".concat(prefix, "--number ").concat(prefix, "--number--helpertext"), [enabled ? null : className], (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--number--readonly"), readOnly), _defineProperty(_classNames, "".concat(prefix, "--number--light"), light), _defineProperty(_classNames, "".concat(prefix, "--number--nolabel"), hideLabel), _defineProperty(_classNames, "".concat(prefix, "--number--nosteppers"), hideSteppers), _defineProperty(_classNames, "".concat(prefix, "--number--mobile"), isMobile), _defineProperty(_classNames, "".concat(prefix, "--number--").concat(size), size), _classNames));
+        var isInputInvalid; // If the user supplied `invalid` through props, we'll defer to the passed in value
+
+        if (invalid) {
+          isInputInvalid = true;
+        } else {
+          // Otherwise, if we don't allow an empty value then we check to see
+          // if the value is empty, or if it is out of range
+          if (!allowEmpty && _this2.state.value === '') {
+            isInputInvalid = true;
+          } else {
+            if (_this2.state.value !== '' && (_this2.state.value > max || _this2.state.value < min)) {
+              isInputInvalid = true;
+            }
+          }
+        }
+
+        var normalizedProps = useNormalizedInputProps({
+          id: id,
+          readOnly: readOnly,
+          disabled: disabled,
+          invalid: isInputInvalid,
+          invalidText: invalidText,
+          warn: warn,
+          warnText: warnText
+        });
+        var props = {
+          disabled: normalizedProps.disabled,
+          id: id,
+          max: max,
+          min: min,
+          step: step,
+          onChange: _this2.handleChange,
+          value: useControlledStateWithValue && _this2.isControlled ? value : _this2.state.value,
+          readOnly: readOnly,
+          'aria-label': label ? null : ariaLabel
+        };
+        var buttonProps = {
+          disabled: disabled
+        };
+        var inputWrapperProps = {};
+
+        if (normalizedProps.invalid) {
+          inputWrapperProps['data-invalid'] = true;
+        }
+
+        var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), normalizedProps.disabled));
+        var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+          className: helperTextClasses
+        }, helperText) : null;
+        var labelClasses = cx("".concat(prefix, "--label"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), normalizedProps.disabled), _defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _classNames3));
+        var labelText = label ? /*#__PURE__*/React__default.createElement("label", {
+          htmlFor: id,
+          className: labelClasses
+        }, label) : null;
+        var _ref = [t('increment.number'), t('decrement.number')],
+            incrementNumLabel = _ref[0],
+            decrementNumLabel = _ref[1];
+        var wrapperClasses = cx("".concat(prefix, "--number__input-wrapper"), _defineProperty({}, "".concat(prefix, "--number__input-wrapper--warning"), normalizedProps.warn));
+        var iconClasses = cx((_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _defineProperty(_classNames5, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _defineProperty(_classNames5, "".concat(prefix, "--number__readonly-icon"), readOnly), _classNames5));
+        var ariaDescribedBy = null;
+
+        if (normalizedProps.invalid) {
+          ariaDescribedBy = normalizedProps.invalidId;
+        }
+
+        if (normalizedProps.warn) {
+          ariaDescribedBy = normalizedProps.warnId;
+        }
+
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: enabled ? cx("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
+        }, /*#__PURE__*/React__default.createElement("div", _extends({
+          className: numberInputClasses
+        }, inputWrapperProps), function () {
+          return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, labelText, /*#__PURE__*/React__default.createElement("div", {
+            className: wrapperClasses
+          }, /*#__PURE__*/React__default.createElement("input", _extends({
+            "data-invalid": normalizedProps.invalid,
+            "aria-invalid": normalizedProps.invalid,
+            "aria-describedby": ariaDescribedBy,
+            type: "number",
+            pattern: "[0-9]*"
+          }, other, props, {
+            ref: mergeRefs(ref, _this2._handleInputRef)
+          })), normalizedProps.icon && (_normalizedProps$icon || (_normalizedProps$icon = /*#__PURE__*/React__default.createElement(normalizedProps.icon, {
+            className: iconClasses
+          }))), !hideSteppers && /*#__PURE__*/React__default.createElement("div", {
+            className: "".concat(prefix, "--number__controls")
+          }, /*#__PURE__*/React__default.createElement("button", _extends({
+            type: "button",
+            className: "".concat(prefix, "--number__control-btn down-icon")
+          }, buttonProps, {
+            onClick: function onClick(evt) {
+              return _this2.handleArrowClick(evt, 'down');
+            },
+            title: decrementNumLabel || iconDescription,
+            "aria-label": decrementNumLabel || iconDescription,
+            tabIndex: "-1"
+          }), _Subtract || (_Subtract = /*#__PURE__*/React__default.createElement(Subtract, {
+            className: "down-icon"
+          }))), /*#__PURE__*/React__default.createElement("div", {
+            className: "".concat(prefix, "--number__rule-divider")
+          }), /*#__PURE__*/React__default.createElement("button", _extends({
+            type: "button",
+            className: "".concat(prefix, "--number__control-btn up-icon")
+          }, buttonProps, {
+            onClick: function onClick(evt) {
+              return _this2.handleArrowClick(evt, 'up');
+            },
+            title: incrementNumLabel || iconDescription,
+            "aria-label": incrementNumLabel || iconDescription,
+            tabIndex: "-1"
+          }), _Add || (_Add = /*#__PURE__*/React__default.createElement(Add, {
+            className: "up-icon"
+          }))), /*#__PURE__*/React__default.createElement("div", {
+            className: "".concat(prefix, "--number__rule-divider")
+          }))), normalizedProps.validation ? null : helper);
+        }(), normalizedProps.validation));
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref2, state) {
+      var value = _ref2.value;
+      var prevValue = state.prevValue;
+
+      if (useControlledStateWithValue && value === '' && prevValue !== '') {
+        return {
+          value: '',
+          prevValue: ''
+        };
+      } // If `useControlledStateWithValue` feature flag is on, do nothing here.
+      // Otherwise, do prop -> state sync with "value capping".
+      //// Value capping removed in #8965
+      //// value: capMax(max, capMin(min, value)), (L223)
+
+
+      return useControlledStateWithValue || prevValue === value ? null : {
+        value: value,
+        prevValue: value
+      };
+    }
+    /**
+     * The DOM node reference to the `<input>`.
+     * @type {HTMLInputElement}
+     */
+
+  }]);
+
+  return NumberInput;
+}(Component);
+
+_defineProperty(NumberInput, "propTypes", {
+  /**
+   * `true` to allow empty string.
+   */
+  allowEmpty: PropTypes.bool,
+
+  /**
+   * Provide a description that would be used to best describe the use case of the NumberInput component
+   */
+  ariaLabel: PropTypes.string,
+
+  /**
+   * Specify an optional className to be applied to the wrapper node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optional starting value for uncontrolled state
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes.node,
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Specify whether you want the steppers to be hidden
+   */
+  hideSteppers: PropTypes.bool,
+
+  /**
+   * Provide a description for up/down icons that can be read by screen readers
+   */
+  iconDescription: PropTypes.string.isRequired,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * `true` to use the mobile variant.
+   */
+  isMobile: deprecate(PropTypes.bool, "The `isMobile` prop no longer needed as the default NumberInput styles are now identical to the mobile variant styles. This prop will be removed in the next major version of `carbon-components-react`"),
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes.node,
+
+  /**
+   * `true` to use the light version.
+   */
+  light: PropTypes.bool,
+
+  /**
+   * The maximum value.
+   */
+  max: PropTypes.number,
+
+  /**
+   * The minimum value.
+   */
+  min: PropTypes.number,
+
+  /**
+   * The new value is available in 'imaginaryTarget.value'
+   * i.e. to get the value: evt.imaginaryTarget.value
+   *
+   * * _With_ `useControlledStateWithValue` feature flag, the signature of the event handler will be altered to provide additional context in the second parameter: `onChange(event, { value, direction })` where:
+   *   * `event` is the (React) raw event
+   *   * `value` is the new value
+   *   * `direction` tells you the button you hit is up button or down button
+   * * _Without_ this feature flag the event handler has `onChange(event, direction)` signature.
+   */
+  onChange: !useControlledStateWithValue ? PropTypes.func : requiredIfValueExists(PropTypes.func),
+
+  /**
+   * Provide an optional function to be called when the up/down button is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify if the component should be read-only
+   */
+  readOnly: PropTypes.bool,
+
+  /**
+   * Specify the size of the Number Input. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   * TODO V11: remove `xl` (replaced with lg)
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+
+  /**
+   * Specify how much the values should increase/decrease upon clicking on up/down button
+   */
+  step: PropTypes.number,
+
+  /**
+   * Provide custom text for the component for each translation id
+   */
+  translateWithId: PropTypes.func.isRequired,
+
+  /**
+   * Specify the value of the input
+   */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+});
+
+_defineProperty(NumberInput, "defaultProps", {
+  disabled: false,
+  hideLabel: false,
+  iconDescription: FeatureFlags.enabled('enable-v11-release') ? undefined : 'choose a number',
+  step: 1,
+  invalid: false,
+  invalidText: FeatureFlags.enabled('enable-v11-release') ? undefined : 'Provide invalidText',
+  warn: false,
+  warnText: '',
+  ariaLabel: 'Numeric input field with increment and decrement buttons',
+  helperText: '',
+  light: false,
+  allowEmpty: false,
+  translateWithId: function translateWithId(id) {
+    return defaultTranslations[id];
+  }
+});
+
+_defineProperty(NumberInput, "contextType", FeatureFlagContext);
+var NumberInput$1 = (function () {
+  var forwardRef = function forwardRef(props, ref) {
+    return /*#__PURE__*/React__default.createElement(NumberInput, _extends({}, props, {
+      innerRef: ref
+    }));
+  };
+
+  forwardRef.displayName = 'NumberInput';
+  return /*#__PURE__*/React__default.forwardRef(forwardRef);
+})();
+
+export { NumberInput, NumberInput$1 as default, translationIds };

package/es/components/OrderedList/OrderedList.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["children", "className", "nested", "native", "isExpressive"];
+
+var OrderedList = function OrderedList(_ref) {
+  var _classnames;
+
+  var children = _ref.children,
+      className = _ref.className,
+      nested = _ref.nested,
+      native = _ref.native,
+      isExpressive = _ref.isExpressive,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx((_classnames = {}, _defineProperty(_classnames, "".concat(prefix, "--list--ordered"), !native), _defineProperty(_classnames, "".concat(prefix, "--list--ordered--native"), native), _defineProperty(_classnames, "".concat(prefix, "--list--nested"), nested), _defineProperty(_classnames, "".concat(prefix, "--list--expressive"), isExpressive), _classnames), className);
+  return /*#__PURE__*/React__default.createElement("ol", _extends({
+    className: classNames
+  }, other), children);
+};
+
+OrderedList.propTypes = {
+  /**
+   * Provide list items to be rendered in the ordered list
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide an optional className to be applied to the containing <ol> node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether this ordered list expressive or not
+   */
+  isExpressive: PropTypes.bool,
+
+  /**
+   * Specify whether this ordered list should use native list styles instead of custom counter
+   */
+  native: PropTypes.bool,
+
+  /**
+   * Specify whether this ordered list is nested inside of another nested list
+   */
+  nested: PropTypes.bool
+};
+OrderedList.defaultProps = {
+  nested: false,
+  native: false,
+  isExpressive: false
+};
+var OrderedList$1 = OrderedList;
+
+export { OrderedList$1 as default };