@carbon/react 0.17.0-rc.0 → 1.0.0

package/es/components/TileGroup/TileGroup.js

@@ -0,0 +1,164 @@
+/**
+ * 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 { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, objectWithoutProperties as _objectWithoutProperties, extends as _extends, createClass as _createClass } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import RadioTile from '../RadioTile/RadioTile.js';
+import { warning } from '../../internal/warning.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+
+var _excluded = ["value"];
+
+var TileGroup = /*#__PURE__*/function (_React$Component) {
+  _inherits(TileGroup, _React$Component);
+
+  var _super = _createSuper(TileGroup);
+
+  function TileGroup() {
+    var _this;
+
+    _classCallCheck(this, TileGroup);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      selected: _this.props.valueSelected || _this.props.defaultSelected || null,
+      prevValueSelected: _this.props.valueSelected
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getRadioTiles", function () {
+      var childrenArray = React__default.Children.toArray(_this.props.children);
+      var children = childrenArray.map(function (tileRadio) {
+        var _tileRadio$props = tileRadio.props,
+            value = _tileRadio$props.value,
+            other = _objectWithoutProperties(_tileRadio$props, _excluded);
+        /* istanbul ignore if */
+
+
+        if (typeof tileRadio.props.checked !== 'undefined') {
+          process.env.NODE_ENV !== "production" ? warning(false, "Instead of using the checked property on the RadioTile, set\n            the defaultSelected property or valueSelected property on the TileGroup.") : void 0;
+        }
+
+        return /*#__PURE__*/React__default.createElement(RadioTile, _extends({}, other, {
+          name: _this.props.name,
+          key: value,
+          value: value,
+          onChange: _this.handleChange,
+          checked: value === _this.state.selected
+        }));
+      });
+      return children;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (newSelection, value, evt) {
+      if (newSelection !== _this.state.selected) {
+        _this.setState({
+          selected: newSelection
+        });
+
+        _this.props.onChange(newSelection, _this.props.name, evt);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderLegend", function (legend) {
+      if (legend) {
+        return /*#__PURE__*/React__default.createElement("legend", {
+          className: "".concat(_this.prefix, "--label")
+        }, legend);
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(TileGroup, [{
+    key: "render",
+    value: function render() {
+      var prefix = this.context;
+      var _this$props = this.props,
+          disabled = _this$props.disabled,
+          _this$props$className = _this$props.className,
+          className = _this$props$className === void 0 ? "".concat(prefix, "--tile-group") : _this$props$className,
+          legend = _this$props.legend;
+      return /*#__PURE__*/React__default.createElement("fieldset", {
+        className: className,
+        disabled: disabled
+      }, this.renderLegend(legend), /*#__PURE__*/React__default.createElement("div", null, this.getRadioTiles()));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref, state) {
+      var valueSelected = _ref.valueSelected,
+          defaultSelected = _ref.defaultSelected;
+      var prevValueSelected = state.prevValueSelected;
+      return prevValueSelected === valueSelected ? null : {
+        selected: valueSelected || defaultSelected || null,
+        prevValueSelected: valueSelected
+      };
+    }
+  }]);
+
+  return TileGroup;
+}(React__default.Component);
+
+_defineProperty(TileGroup, "contextType", PrefixContext);
+
+_defineProperty(TileGroup, "propTypes", {
+  /**
+   * Provide a collection of <RadioTile> components to render in the group
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the the value of <RadioTile> to be selected by default
+   */
+  defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the group is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide an optional legend for this group
+   */
+  legend: PropTypes.string,
+
+  /**
+   * Specify the name of the underlying `<input>` nodes
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional `onChange` hook that is called whenever the value of
+   * the group changes
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Specify the value that is currently selected in the group
+   */
+  valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+});
+
+_defineProperty(TileGroup, "defaultProps", {
+  onChange:
+  /* istanbul ignore next */
+  function onChange() {}
+});
+
+export { TileGroup as default };

package/es/components/TileGroup/index.js

@@ -0,0 +1,13 @@
+/**
+ * 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 { createClassWrapper } from '../../internal/createClassWrapper.js';
+import TileGroup from './TileGroup.js';
+
+var index = createClassWrapper(TileGroup);
+
+export { index as default };

package/es/components/TimePicker/TimePicker.js

@@ -0,0 +1,256 @@
+/**
+ * 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 { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { Component } from 'react';
+import cx from 'classnames';
+import { FeatureFlagContext } from '../FeatureFlags/index.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+
+var _excluded = ["children", "className", "id", "labelText", "type", "pattern", "onChange", "onClick", "onBlur", "placeholder", "maxLength", "invalidText", "invalid", "hideLabel", "light", "size"];
+
+var TimePicker = /*#__PURE__*/function (_Component) {
+  _inherits(TimePicker, _Component);
+
+  var _super = _createSuper(TimePicker);
+
+  function TimePicker() {
+    var _this;
+
+    _classCallCheck(this, TimePicker);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {});
+
+    return _this;
+  }
+
+  _createClass(TimePicker, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          className = _this$props.className,
+          id = _this$props.id,
+          labelText = _this$props.labelText,
+          type = _this$props.type,
+          pattern = _this$props.pattern,
+          _onChange = _this$props.onChange,
+          _onClick = _this$props.onClick,
+          _onBlur = _this$props.onBlur,
+          placeholder = _this$props.placeholder,
+          maxLength = _this$props.maxLength,
+          invalidText = _this$props.invalidText,
+          invalid = _this$props.invalid,
+          hideLabel = _this$props.hideLabel,
+          light = _this$props.light,
+          size = _this$props.size,
+          other = _objectWithoutProperties(_this$props, _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 _classNames2, _classNames3;
+
+        var timePickerInputProps = {
+          className: cx("".concat(prefix, "--time-picker__input-field"), "".concat(prefix, "--text-input"), [enabled ? null : className], _defineProperty({}, "".concat(prefix, "--text-input--light"), light)),
+          onChange: function onChange(evt) {
+            if (!other.disabled) {
+              _this2.setState({
+                value: evt.target.value
+              });
+
+              _onChange(evt);
+            }
+          },
+          onClick: function onClick(evt) {
+            if (!other.disabled) {
+              _this2.setState({
+                value: evt.target.value
+              });
+
+              _onClick(evt);
+            }
+          },
+          onBlur: function onBlur(evt) {
+            if (!other.disabled) {
+              _this2.setState({
+                value: evt.target.value
+              });
+
+              _onBlur(evt);
+            }
+          },
+          pattern: pattern,
+          placeholder: placeholder,
+          maxLength: maxLength,
+          id: id,
+          type: type,
+          value: _this2.state.value
+        };
+        var timePickerClasses = cx((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--time-picker"), true), _defineProperty(_classNames2, "".concat(prefix, "--time-picker--light"), light), _defineProperty(_classNames2, "".concat(prefix, "--time-picker--invalid"), invalid), _defineProperty(_classNames2, "".concat(prefix, "--time-picker--").concat(size), size), _defineProperty(_classNames2, className, className), _classNames2));
+        var labelClasses = cx("".concat(prefix, "--label"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), other.disabled), _classNames3));
+        var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
+          htmlFor: id,
+          className: labelClasses
+        }, labelText) : null;
+        var error = invalid ? /*#__PURE__*/React__default.createElement("div", {
+          className: "".concat(prefix, "--form-requirement")
+        }, invalidText) : null;
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: enabled ? cx("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
+        }, label, /*#__PURE__*/React__default.createElement("div", {
+          className: timePickerClasses
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "".concat(prefix, "--time-picker__input")
+        }, /*#__PURE__*/React__default.createElement("input", _extends({}, other, timePickerInputProps, {
+          "data-invalid": invalid ? invalid : undefined
+        }))), children), error);
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref, state) {
+      var value = _ref.value;
+      var prevValue = state.prevValue;
+      return prevValue === value ? null : {
+        value: value,
+        prevValue: value
+      };
+    }
+  }]);
+
+  return TimePicker;
+}(Component);
+
+_defineProperty(TimePicker, "propTypes", {
+  /**
+   * Pass in the children that will be rendered next to the form control
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.node,
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
+   */
+  light: PropTypes.bool,
+
+  /**
+   * Specify the maximum length of the time string in `<input>`
+   */
+  maxLength: PropTypes.number,
+
+  /**
+   * Optionally provide an `onBlur` handler that is called whenever the
+   * `<input>` loses focus
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the regular expression working as the pattern of the time string in `<input>`
+   */
+  pattern: PropTypes.string,
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Specify the size of the Time Picker.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+
+  /**
+   * Specify the type of the `<input>`
+   */
+  type: PropTypes.string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes.string
+});
+
+_defineProperty(TimePicker, "defaultProps", {
+  type: 'text',
+  pattern: '(1[012]|[1-9]):[0-5][0-9](\\s)?',
+  placeholder: 'hh:mm',
+  maxLength: 5,
+  invalidText: 'Invalid time format.',
+  invalid: false,
+  disabled: false,
+  onChange: function onChange() {},
+  onClick: function onClick() {},
+  onBlur: function onBlur() {},
+  light: false
+});
+
+_defineProperty(TimePicker, "contextType", FeatureFlagContext);
+
+export { TimePicker as default };

package/es/components/TimePicker/index.js

@@ -0,0 +1,15 @@
+/**
+ * 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 * as FeatureFlags from '@carbon/feature-flags';
+import TimePickerNext from './next/TimePicker.js';
+import TimePicker$2 from './TimePicker.js';
+
+var TimePicker = FeatureFlags.enabled('enable-v11-release') ? TimePickerNext : TimePicker$2;
+var TimePicker$1 = TimePicker;
+
+export { TimePicker$1 as default };

package/es/components/TimePicker/next/TimePicker.js

@@ -0,0 +1,218 @@
+/**
+ * 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, slicedToArray as _slicedToArray, 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';
+import deprecate from '../../../prop-types/deprecate.js';
+
+var _excluded = ["children", "className", "disabled", "hideLabel", "id", "invalidText", "invalid", "labelText", "light", "maxLength", "onChange", "onClick", "onBlur", "pattern", "placeholder", "size", "type", "value"];
+var TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_ref, ref) {
+  var _cx2, _cx3;
+
+  var children = _ref.children,
+      className = _ref.className,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      hideLabel = _ref.hideLabel,
+      id = _ref.id,
+      _ref$invalidText = _ref.invalidText,
+      invalidText = _ref$invalidText === void 0 ? 'Invalid time format.' : _ref$invalidText,
+      _ref$invalid = _ref.invalid,
+      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+      labelText = _ref.labelText,
+      _ref$light = _ref.light,
+      light = _ref$light === void 0 ? false : _ref$light,
+      _ref$maxLength = _ref.maxLength,
+      maxLength = _ref$maxLength === void 0 ? 5 : _ref$maxLength,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+      _ref$onBlur = _ref.onBlur,
+      onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+      _ref$pattern = _ref.pattern,
+      pattern = _ref$pattern === void 0 ? '(1[012]|[1-9]):[0-5][0-9](\\s)?' : _ref$pattern,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? 'hh:mm' : _ref$placeholder,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      value = _ref.value,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  var _React$useState = React__default.useState(value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isValue = _React$useState2[0],
+      setValue = _React$useState2[1];
+
+  var _React$useState3 = React__default.useState(value),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      prevValue = _React$useState4[0],
+      setPrevValue = _React$useState4[1];
+
+  if (value !== prevValue) {
+    setValue(value);
+    setPrevValue(value);
+  }
+
+  function handleOnClick(evt) {
+    if (!disabled) {
+      setValue(isValue);
+      onClick(evt);
+    }
+  }
+
+  function handleOnChange(evt) {
+    if (!disabled) {
+      setValue(isValue);
+      onChange(evt);
+    }
+  }
+
+  function handleOnBlur(evt) {
+    if (!disabled) {
+      setValue(isValue);
+      onBlur(evt);
+    }
+  }
+
+  var timePickerInputClasses = cx("".concat(prefix, "--time-picker__input-field"), "".concat(prefix, "--text-input"), [className], _defineProperty({}, "".concat(prefix, "--text-input--light"), light));
+  var timePickerClasses = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--time-picker"), true), _defineProperty(_cx2, "".concat(prefix, "--time-picker--light"), light), _defineProperty(_cx2, "".concat(prefix, "--time-picker--invalid"), invalid), _defineProperty(_cx2, "".concat(prefix, "--time-picker--").concat(size), size), _defineProperty(_cx2, className, className), _cx2));
+  var labelClasses = cx("".concat(prefix, "--label"), (_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_cx3, "".concat(prefix, "--label--disabled"), disabled), _cx3));
+  var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
+    className: labelClasses
+  }, labelText) : null;
+  var error = invalid ? /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, invalidText) : null;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: cx("".concat(prefix, "--form-item"), className)
+  }, label, /*#__PURE__*/React__default.createElement("div", {
+    className: timePickerClasses
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--time-picker__input")
+  }, /*#__PURE__*/React__default.createElement("input", _extends({
+    className: timePickerInputClasses,
+    "data-invalid": invalid ? invalid : undefined,
+    disabled: disabled,
+    id: id,
+    maxLength: maxLength,
+    onClick: handleOnClick,
+    onChange: handleOnChange,
+    onBlur: handleOnBlur,
+    placeholder: placeholder,
+    pattern: pattern,
+    ref: ref,
+    type: type,
+    value: value
+  }, rest))), children), error);
+});
+TimePicker.propTypes = {
+  /**
+   * Pass in the children that will be rendered next to the form control
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.node,
+
+  /**
+   * The `light` prop for `TimePicker` has been deprecated. It will be removed in v12. Use the `Layer` component instead.
+   */
+  light: deprecate(PropTypes.bool, 'The `light` prop for `TimePicker` is no longer needed and has been deprecated. It will be removed in the next major release. Use the `Layer` component instead.'),
+
+  /**
+   * Specify the maximum length of the time string in `<input>`
+   */
+  maxLength: PropTypes.number,
+
+  /**
+   * Optionally provide an `onBlur` handler that is called whenever the
+   * `<input>` loses focus
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the regular expression working as the pattern of the time string in `<input>`
+   */
+  pattern: PropTypes.string,
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Specify the size of the Time Picker.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Specify the type of the `<input>`
+   */
+  type: PropTypes.string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes.string
+};
+var TimePickerNext = TimePicker;
+
+export { TimePickerNext as default };