@carbon/react 0.16.2 → 1.0.0-rc.0

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -0,0 +1,93 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var match = require('../../../internal/keyboard/match.js');
+var keys = require('../../../internal/keyboard/keys.js');
+
+/**
+ * @param {object} config Plugin configuration.
+ * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
+ */
+
+var carbonFlatpickrFixEventsPlugin = (function (config) {
+  return function (fp) {
+    /**
+     * Handles `keydown` event.
+     */
+    var handleKeydown = function handleKeydown(event) {
+      var inputFrom = config.inputFrom,
+          inputTo = config.inputTo;
+      var target = event.target;
+
+      if (inputFrom === target || inputTo === target) {
+        if (match.match(event, keys.Enter)) {
+          // Makes sure the hitting enter key picks up pending values of both `<input>`
+          // Workaround for: https://github.com/flatpickr/flatpickr/issues/1942
+          fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+          event.stopPropagation();
+        } else if (match.match(event, keys.ArrowLeft) || match.match(event, keys.ArrowRight)) {
+          // Prevents Flatpickr code from canceling the event if left/right arrow keys are hit on `<input>`,
+          // so user can move the keyboard cursor for editing dates
+          // Workaround for: https://github.com/flatpickr/flatpickr/issues/1943
+          event.stopPropagation();
+        } else if (match.match(event, keys.ArrowDown)) {
+          event.preventDefault();
+          fp.open();
+        }
+      }
+    };
+    /**
+     * Releases event listeners used in this Flatpickr plugin.
+     */
+
+
+    var release = function release() {
+      var inputFrom = config.inputFrom,
+          inputTo = config.inputTo;
+
+      if (inputTo) {
+        inputTo.removeEventListener('keydown', handleKeydown, true);
+      }
+
+      inputFrom.removeEventListener('keydown', handleKeydown, true);
+    };
+    /**
+     * Sets up event listeners used for this Flatpickr plugin.
+     */
+
+
+    var init = function init() {
+      release();
+      var inputFrom = config.inputFrom,
+          inputTo = config.inputTo;
+      inputFrom.addEventListener('keydown', handleKeydown, true);
+
+      if (inputTo) {
+        inputTo.addEventListener('keydown', handleKeydown, true);
+      }
+    };
+    /**
+     * Registers this Flatpickr plugin.
+     */
+
+
+    var register = function register() {
+      fp.loadedPlugins.push('carbonFlatpickrFixEventsPlugin');
+    };
+
+    return {
+      onReady: [register, init],
+      onDestroy: [release]
+    };
+  };
+});
+
+exports["default"] = carbonFlatpickrFixEventsPlugin;

package/lib/components/DatePicker/plugins/rangePlugin.js

@@ -0,0 +1,55 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var rangePlugin = require('../../../node_modules/flatpickr/dist/plugins/rangePlugin.js');
+
+/**
+ * @param {object} config Plugin configuration.
+ * @returns {Plugin} An extension of Flatpickr `rangePlugin` that does the following:
+ *   * Better ensures the calendar dropdown is always aligned to the `<input>` for the starting date.
+ *     Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
+ *   * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
+ */
+
+var carbonFlatpickrRangePlugin = (function (config) {
+  var factory = rangePlugin["default"](Object.assign({
+    position: 'left'
+  }, config));
+  return function (fp) {
+    var origSetDate = fp.setDate;
+
+    var init = function init() {
+      fp.setDate = function setDate(dates, triggerChange, format) {
+        origSetDate.call(this, dates, triggerChange, format); // If `triggerChange` is `true`, `onValueUpdate` Flatpickr event is fired
+        // where Flatpickr's range plugin takes care of fixing the first `<input>`
+
+        if (!triggerChange) {
+          var inputFrom = fp._input;
+          var inputTo = config.input;
+          [inputFrom, inputTo].forEach(function (input, i) {
+            if (input) {
+              input.value = !dates[i] ? '' : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
+            }
+          });
+        }
+      };
+    };
+
+    var origRangePlugin = factory(fp);
+    var origOnReady = origRangePlugin.onReady;
+    return Object.assign(origRangePlugin, {
+      onReady: [init, origOnReady],
+      onPreCalendarPosition: function onPreCalendarPosition() {}
+    });
+  };
+});
+
+exports["default"] = carbonFlatpickrRangePlugin;

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -0,0 +1,281 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var deprecate = require('../../prop-types/deprecate.js');
+var cx = require('classnames');
+var iconsReact = require('@carbon/icons-react');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["id", "labelText", "disabled", "invalid", "invalidText", "helperText", "hideLabel", "onChange", "onClick", "placeholder", "type", "datePickerType", "pattern", "iconDescription", "openCalendar", "size", "warn", "warnText"];
+
+var DatePickerInput = /*#__PURE__*/function (_Component) {
+  _rollupPluginBabelHelpers.inherits(DatePickerInput, _Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(DatePickerInput);
+
+  function DatePickerInput() {
+    _rollupPluginBabelHelpers.classCallCheck(this, DatePickerInput);
+
+    return _super.apply(this, arguments);
+  }
+
+  _rollupPluginBabelHelpers.createClass(DatePickerInput, [{
+    key: "render",
+    value: function render() {
+      var _this = this,
+          _title;
+
+      var _this$props = this.props,
+          id = _this$props.id,
+          labelText = _this$props.labelText,
+          disabled = _this$props.disabled,
+          invalid = _this$props.invalid,
+          invalidText = _this$props.invalidText,
+          helperText = _this$props.helperText,
+          hideLabel = _this$props.hideLabel,
+          _onChange = _this$props.onChange,
+          _onClick = _this$props.onClick,
+          placeholder = _this$props.placeholder,
+          type = _this$props.type,
+          datePickerType = _this$props.datePickerType,
+          pattern = _this$props.pattern,
+          iconDescription = _this$props.iconDescription,
+          openCalendar = _this$props.openCalendar,
+          size = _this$props.size,
+          warn = _this$props.warn,
+          warnText = _this$props.warnText,
+          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
+
+      var datePickerInputProps = {
+        id: id,
+        onChange: function onChange(evt) {
+          if (!disabled) {
+            _onChange(evt);
+          }
+        },
+        onClick: function onClick(evt) {
+          if (!disabled) {
+            _onClick(evt);
+          }
+        },
+        placeholder: placeholder,
+        type: type,
+        pattern: pattern
+      };
+      return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, function (prefix) {
+        var _classNames, _classNames2, _classNames4;
+
+        var wrapperClasses = cx__default["default"]("".concat(prefix, "--date-picker-input__wrapper"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--date-picker-input__wrapper--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--date-picker-input__wrapper--warn"), warn), _classNames));
+        var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), disabled), _classNames2));
+        var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+        var inputClasses = cx__default["default"]("".concat(prefix, "--date-picker__input"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--date-picker__input--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _classNames4));
+
+        var datePickerIcon = function () {
+          if (datePickerType === 'simple' && !invalid && !warn) {
+            return;
+          }
+
+          if (invalid) {
+            return /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+              className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--invalid")
+            });
+          }
+
+          if (!invalid && warn) {
+            return /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+              className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--warn")
+            });
+          }
+
+          return /*#__PURE__*/React__default["default"].createElement(iconsReact.Calendar, {
+            className: "".concat(prefix, "--date-picker__icon"),
+            "aria-label": iconDescription,
+            onClick: openCalendar,
+            role: "img",
+            "aria-hidden": "true"
+          }, iconDescription && (_title || (_title = /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription))));
+        }();
+
+        var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
+          htmlFor: id,
+          className: labelClasses
+        }, labelText) : null;
+        var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+          className: helperTextClasses
+        }, helperText) : null;
+        var error = null;
+
+        if (invalid) {
+          error = /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "".concat(prefix, "--form-requirement")
+          }, invalidText);
+        } else if (warn) {
+          error = /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "".concat(prefix, "--form-requirement")
+          }, warnText);
+        }
+
+        var containerClasses = cx__default["default"]("".concat(prefix, "--date-picker-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--date-picker--nolabel"), !label));
+        var input = invalid ? /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, datePickerInputProps, {
+          disabled: disabled,
+          ref: function ref(input) {
+            _this.input = input;
+          },
+          "data-invalid": true,
+          className: inputClasses
+        })) : /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
+          ref: function ref(input) {
+            _this.input = input;
+          }
+        }, other, datePickerInputProps, {
+          disabled: disabled,
+          className: inputClasses
+        }));
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: containerClasses
+        }, label, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: wrapperClasses
+        }, input, datePickerIcon), error, helper);
+      });
+    }
+  }]);
+
+  return DatePickerInput;
+}(React.Component);
+
+_rollupPluginBabelHelpers.defineProperty(DatePickerInput, "propTypes", {
+  /**
+   * The type of the date picker:
+   *
+   * * `simple` - Without calendar dropdown.
+   * * `single` - With calendar dropdown and single date.
+   * * `range` - With calendar dropdown and a date range.
+   */
+  datePickerType: PropTypes__default["default"].oneOf(['simple', 'single', 'range']),
+
+  /**
+   * Specify whether or not the input should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes__default["default"].node,
+
+  /**
+   * Specify if the label should be hidden
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * The description of the calendar icon.
+   */
+  iconDescription: deprecate["default"](PropTypes__default["default"].string, "\nThe prop `iconDescriptionInput` for DatePickerInput has been deprecated and is no longer used"),
+
+  /**
+   * Specify an id that uniquely identifies the `<input>`
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify whether or not the input should be invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the text to be rendered when the input is invalid
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Specify an `onChange` handler that is called whenever a change in the
+   * input field has occurred
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Provide a function to be called when the input field is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide a function to be called when the input field is clicked
+   */
+  openCalendar: deprecate["default"](PropTypes__default["default"].func, "\nThe prop `openCalendar` for DatePickerInput has been deprecated and is no longer used"),
+
+  /**
+   * Provide a regular expression that the input value must match
+   */
+  pattern: function pattern(props, propName, componentName) {
+    if (props[propName] === undefined) {
+      return;
+    }
+
+    try {
+      new RegExp(props[propName]);
+    } catch (e) {
+      return new Error("Invalid value of prop '".concat(propName, "' supplied to '").concat(componentName, "', it should be a valid regular expression"));
+    }
+  },
+
+  /**
+   * Specify the placeholder text
+   */
+  placeholder: PropTypes__default["default"].string,
+
+  /**
+   * Specify the size of the Date Picker Input. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   * TODO V11: remove `xl` (replaced with lg)
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl']),
+
+  /**
+   * Specify the type of the `<input>`
+   */
+  type: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes__default["default"].node
+});
+
+_rollupPluginBabelHelpers.defineProperty(DatePickerInput, "defaultProps", {
+  pattern: '\\d{1,2}\\/\\d{1,2}\\/\\d{4}',
+  type: 'text',
+  disabled: false,
+  invalid: false,
+  onClick: function onClick() {},
+  onChange: function onChange() {}
+});
+
+exports["default"] = DatePickerInput;

package/lib/components/DatePickerInput/index.js

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FeatureFlags = require('@carbon/feature-flags');
+var DatePickerInput$2 = require('./next/DatePickerInput.js');
+var DatePickerInput$3 = require('./DatePickerInput.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var DatePickerInput = FeatureFlags__namespace.enabled('enable-v11-release') ? DatePickerInput$2["default"] : DatePickerInput$3["default"];
+var DatePickerInput$1 = DatePickerInput;
+
+exports["default"] = DatePickerInput$1;