@carbon/react 0.16.2 → 1.0.0-rc.0

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

@@ -0,0 +1,89 @@
+/**
+ * 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 { match } from '../../../internal/keyboard/match.js';
+import { Enter, ArrowLeft, ArrowRight, ArrowDown } from '../../../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(event, 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(event, ArrowLeft) || match(event, 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(event, 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]
+    };
+  };
+});
+
+export { carbonFlatpickrFixEventsPlugin as default };

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

@@ -0,0 +1,51 @@
+/**
+ * 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 rangePlugin from '../../../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(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() {}
+    });
+  };
+});
+
+export { carbonFlatpickrRangePlugin as default };

package/es/components/DatePickerInput/DatePickerInput.js

@@ -0,0 +1,271 @@
+/**
+ * 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, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { Component } from 'react';
+import deprecate from '../../prop-types/deprecate.js';
+import cx from 'classnames';
+import { WarningFilled, WarningAltFilled, Calendar } from '@carbon/icons-react';
+import { PrefixContext } from '../../internal/usePrefix.js';
+
+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) {
+  _inherits(DatePickerInput, _Component);
+
+  var _super = _createSuper(DatePickerInput);
+
+  function DatePickerInput() {
+    _classCallCheck(this, DatePickerInput);
+
+    return _super.apply(this, arguments);
+  }
+
+  _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 = _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.createElement(PrefixContext.Consumer, null, function (prefix) {
+        var _classNames, _classNames2, _classNames4;
+
+        var wrapperClasses = cx("".concat(prefix, "--date-picker-input__wrapper"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--date-picker-input__wrapper--invalid"), invalid), _defineProperty(_classNames, "".concat(prefix, "--date-picker-input__wrapper--warn"), warn), _classNames));
+        var labelClasses = cx("".concat(prefix, "--label"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), disabled), _classNames2));
+        var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+        var inputClasses = cx("".concat(prefix, "--date-picker__input"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--date-picker__input--").concat(size), size), _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.createElement(WarningFilled, {
+              className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--invalid")
+            });
+          }
+
+          if (!invalid && warn) {
+            return /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+              className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--warn")
+            });
+          }
+
+          return /*#__PURE__*/React__default.createElement(Calendar, {
+            className: "".concat(prefix, "--date-picker__icon"),
+            "aria-label": iconDescription,
+            onClick: openCalendar,
+            role: "img",
+            "aria-hidden": "true"
+          }, iconDescription && (_title || (_title = /*#__PURE__*/React__default.createElement("title", null, iconDescription))));
+        }();
+
+        var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
+          htmlFor: id,
+          className: labelClasses
+        }, labelText) : null;
+        var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+          className: helperTextClasses
+        }, helperText) : null;
+        var error = null;
+
+        if (invalid) {
+          error = /*#__PURE__*/React__default.createElement("div", {
+            className: "".concat(prefix, "--form-requirement")
+          }, invalidText);
+        } else if (warn) {
+          error = /*#__PURE__*/React__default.createElement("div", {
+            className: "".concat(prefix, "--form-requirement")
+          }, warnText);
+        }
+
+        var containerClasses = cx("".concat(prefix, "--date-picker-container"), _defineProperty({}, "".concat(prefix, "--date-picker--nolabel"), !label));
+        var input = invalid ? /*#__PURE__*/React__default.createElement("input", _extends({}, other, datePickerInputProps, {
+          disabled: disabled,
+          ref: function ref(input) {
+            _this.input = input;
+          },
+          "data-invalid": true,
+          className: inputClasses
+        })) : /*#__PURE__*/React__default.createElement("input", _extends({
+          ref: function ref(input) {
+            _this.input = input;
+          }
+        }, other, datePickerInputProps, {
+          disabled: disabled,
+          className: inputClasses
+        }));
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: containerClasses
+        }, label, /*#__PURE__*/React__default.createElement("div", {
+          className: wrapperClasses
+        }, input, datePickerIcon), error, helper);
+      });
+    }
+  }]);
+
+  return DatePickerInput;
+}(Component);
+
+_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.oneOf(['simple', 'single', 'range']),
+
+  /**
+   * Specify whether or not the input should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes.node,
+
+  /**
+   * Specify if the label should be hidden
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * The description of the calendar icon.
+   */
+  iconDescription: deprecate(PropTypes.string, "\nThe prop `iconDescriptionInput` for DatePickerInput has been deprecated and is no longer used"),
+
+  /**
+   * Specify an id that uniquely identifies the `<input>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether or not the input should be invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Specify the text to be rendered when the input is invalid
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Specify an `onChange` handler that is called whenever a change in the
+   * input field has occurred
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide a function to be called when the input field is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Provide a function to be called when the input field is clicked
+   */
+  openCalendar: deprecate(PropTypes.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.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.oneOf(['sm', 'md', 'lg', 'xl']),
+
+  /**
+   * Specify the type of the `<input>`
+   */
+  type: 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(DatePickerInput, "defaultProps", {
+  pattern: '\\d{1,2}\\/\\d{1,2}\\/\\d{4}',
+  type: 'text',
+  disabled: false,
+  invalid: false,
+  onClick: function onClick() {},
+  onChange: function onChange() {}
+});
+
+export { DatePickerInput as default };

package/es/components/DatePickerInput/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 DatePickerInputNext from './next/DatePickerInput.js';
+import DatePickerInput$2 from './DatePickerInput.js';
+
+var DatePickerInput = FeatureFlags.enabled('enable-v11-release') ? DatePickerInputNext : DatePickerInput$2;
+var DatePickerInput$1 = DatePickerInput;
+
+export { DatePickerInput$1 as default };

package/es/components/DatePickerInput/next/DatePickerInput.js

@@ -0,0 +1,269 @@
+/**
+ * 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, objectSpread2 as _objectSpread2, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { WarningFilled, WarningAltFilled, Calendar } from '@carbon/icons-react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../../../internal/usePrefix.js';
+import deprecate from '../../../prop-types/deprecate.js';
+
+var _excluded = ["datePickerType", "disabled", "helperText", "hideLabel", "id", "invalid", "invalidText", "labelText", "onClick", "onChange", "pattern", "placeholder", "size", "type", "warn", "warnText"],
+    _excluded2 = ["openCalendar", "iconDescription"],
+    _excluded3 = ["datePickerType", "invalid", "warn"];
+var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
+  var _cx, _cx2, _cx4;
+
+  var datePickerType = props.datePickerType,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      helperText = props.helperText,
+      hideLabel = props.hideLabel,
+      id = props.id,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
+      invalidText = props.invalidText,
+      labelText = props.labelText,
+      _props$onClick = props.onClick,
+      _onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
+      _props$onChange = props.onChange,
+      _onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      _props$pattern = props.pattern,
+      pattern = _props$pattern === void 0 ? '\\d{1,2}\\/\\d{1,2}\\/\\d{4}' : _props$pattern,
+      placeholder = props.placeholder,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'md' : _props$size,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'text' : _props$type,
+      warn = props.warn,
+      warnText = props.warnText,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix();
+  var datePickerInputProps = {
+    id: id,
+    onChange: function onChange(event) {
+      if (!disabled) {
+        _onChange(event);
+      }
+    },
+    onClick: function onClick(event) {
+      if (!disabled) {
+        _onClick(event);
+      }
+    },
+    pattern: pattern,
+    placeholder: placeholder,
+    type: type
+  };
+  var wrapperClasses = cx("".concat(prefix, "--date-picker-input__wrapper"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--date-picker-input__wrapper--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--date-picker-input__wrapper--warn"), warn), _cx));
+  var labelClasses = cx("".concat(prefix, "--label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _cx2));
+  var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+  var inputClasses = cx("".concat(prefix, "--date-picker__input"), (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--").concat(size), size), _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _cx4));
+  var containerClasses = cx("".concat(prefix, "--date-picker-container"), _defineProperty({}, "".concat(prefix, "--date-picker--nolabel"), !labelText));
+
+  var _rest = _objectSpread2({}, rest),
+      openCalendar = _rest.openCalendar,
+      iconDescription = _rest.iconDescription,
+      other = _objectWithoutProperties(_rest, _excluded2);
+
+  var input = invalid ? /*#__PURE__*/React__default.createElement("input", _extends({}, other, datePickerInputProps, {
+    disabled: disabled,
+    ref: ref,
+    "data-invalid": true,
+    className: inputClasses
+  })) : /*#__PURE__*/React__default.createElement("input", _extends({}, other, datePickerInputProps, {
+    disabled: disabled,
+    className: inputClasses,
+    ref: ref
+  }));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: containerClasses
+  }, labelText && /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
+    className: labelClasses
+  }, labelText), /*#__PURE__*/React__default.createElement("div", {
+    className: wrapperClasses
+  }, input, /*#__PURE__*/React__default.createElement(DatePickerIcon, {
+    datePickerType: datePickerType,
+    iconDescription: iconDescription,
+    invalid: invalid,
+    openCalendar: openCalendar,
+    warn: warn
+  })), invalid && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, invalidText), warn && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, warnText), helperText && /*#__PURE__*/React__default.createElement("div", {
+    className: helperTextClasses
+  }, helperText));
+});
+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.oneOf(['simple', 'single', 'range']),
+
+  /**
+   * Specify whether or not the input should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes.node,
+
+  /**
+   * Specify if the label should be hidden
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * The description of the calendar icon.
+   */
+  iconDescription: deprecate(PropTypes.string, "\nThe prop `iconDescriptionInput` for DatePickerInput has been deprecated and is no longer used"),
+
+  /**
+   * Specify an id that uniquely identifies the `<input>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether or not the input should be invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Specify the text to be rendered when the input is invalid
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Specify an `onChange` handler that is called whenever a change in the
+   * input field has occurred
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide a function to be called when the input field is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Provide a function to be called when the input field is clicked
+   */
+  openCalendar: deprecate(PropTypes.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.string,
+
+  /**
+   * Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Specify the type of the `<input>`
+   */
+  type: 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
+};
+
+function DatePickerIcon(_ref) {
+  var datePickerType = _ref.datePickerType,
+      invalid = _ref.invalid,
+      warn = _ref.warn,
+      rest = _objectWithoutProperties(_ref, _excluded3);
+
+  var prefix = usePrefix();
+
+  if (datePickerType === 'simple' && !invalid && !warn) {
+    return null;
+  }
+
+  if (invalid) {
+    return /*#__PURE__*/React__default.createElement(WarningFilled, {
+      className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--invalid")
+    });
+  }
+
+  if (!invalid && warn) {
+    return /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+      className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--warn")
+    });
+  }
+
+  return /*#__PURE__*/React__default.createElement(Calendar, {
+    className: "".concat(prefix, "--date-picker__icon"),
+    "aria-label": rest.iconDescription,
+    onClick: rest.openCalendar,
+    role: "img",
+    "aria-hidden": "true"
+  }, rest.iconDescription && /*#__PURE__*/React__default.createElement("title", null, rest.iconDescription));
+}
+
+DatePickerIcon.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.oneOf(['simple', 'single', 'range']),
+
+  /**
+   * Specify whether or not the input should be invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool
+};
+var DatePickerInputNext = DatePickerInput;
+
+export { DatePickerInputNext as default };