@carbon/react 0.17.0 → 1.0.1

package/lib/components/DatePicker/DatePicker.js

@@ -0,0 +1,633 @@
+/**
+ * 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 cx = require('classnames');
+var flatpickr = require('flatpickr');
+var index = require('../../node_modules/flatpickr/dist/l10n/index.js');
+var index$2 = require('../DatePickerInput/index.js');
+var appendToPlugin = require('./plugins/appendToPlugin.js');
+var fixEventsPlugin = require('./plugins/fixEventsPlugin.js');
+var rangePlugin = require('./plugins/rangePlugin.js');
+var index$1 = require('../FeatureFlags/index.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.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 flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(flatpickr);
+
+var _excluded = ["allowInput", "appendTo", "datePickerType", "dateFormat", "locale", "minDate", "maxDate", "value", "onClose", "disable", "enable"],
+    _excluded2 = ["dateFormat", "minDate", "maxDate", "value", "disable", "enable"],
+    _excluded3 = ["dateFormat", "minDate", "maxDate", "value", "disable", "enable"],
+    _excluded4 = ["allowInput", "appendTo", "children", "className", "short", "light", "datePickerType", "minDate", "maxDate", "dateFormat", "onChange", "locale", "value", "onOpen"];
+
+index["default"].en.weekdays.shorthand.forEach(function (day, index$1) {
+  var currentDay = index["default"].en.weekdays.shorthand;
+
+  if (currentDay[index$1] === 'Thu' || currentDay[index$1] === 'Th') {
+    currentDay[index$1] = 'Th';
+  } else {
+    currentDay[index$1] = currentDay[index$1].charAt(0);
+  }
+});
+var forEach = Array.prototype.forEach;
+/**
+ * @param {number} monthNumber The month number.
+ * @param {boolean} shorthand `true` to use shorthand month.
+ * @param {Locale} locale The Flatpickr locale data.
+ * @returns {string} The month string.
+ */
+
+var monthToStr = function monthToStr(monthNumber, shorthand, locale) {
+  return locale.months[shorthand ? 'shorthand' : 'longhand'][monthNumber];
+};
+/**
+ * @param {object} config Plugin configuration.
+ * @param {boolean} [config.shorthand] `true` to use shorthand month.
+ * @param {string} config.selectorFlatpickrMonthYearContainer The CSS selector for the container of month/year selection UI.
+ * @param {string} config.selectorFlatpickrYearContainer The CSS selector for the container of year selection UI.
+ * @param {string} config.selectorFlatpickrCurrentMonth The CSS selector for the text-based month selection UI.
+ * @param {string} config.classFlatpickrCurrentMonth The CSS class for the text-based month selection UI.
+ * @returns {Plugin} A Flatpickr plugin to use text instead of `<select>` for month picker.
+ */
+
+
+var carbonFlatpickrMonthSelectPlugin = function carbonFlatpickrMonthSelectPlugin(config) {
+  return function (fp) {
+    var setupElements = function setupElements() {
+      var _fp$monthElements;
+
+      if (!fp.monthElements) {
+        return;
+      }
+
+      fp.monthElements.forEach(function (elem) {
+        if (!elem.parentNode) {
+          return;
+        }
+
+        elem.parentNode.removeChild(elem);
+      });
+
+      (_fp$monthElements = fp.monthElements).splice.apply(_fp$monthElements, [0, fp.monthElements.length].concat(_rollupPluginBabelHelpers.toConsumableArray(fp.monthElements.map(function () {
+        // eslint-disable-next-line no-underscore-dangle
+        var monthElement = fp._createElement('span', config.classFlatpickrCurrentMonth);
+
+        monthElement.textContent = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
+        fp.yearElements[0].closest(config.selectorFlatpickrMonthYearContainer).insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
+        return monthElement;
+      }))));
+    };
+
+    var updateCurrentMonth = function updateCurrentMonth() {
+      var monthStr = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
+      fp.yearElements.forEach(function (elem) {
+        var currentMonthContainer = elem.closest(config.selectorFlatpickrMonthYearContainer);
+        Array.prototype.forEach.call(currentMonthContainer.querySelectorAll('.cur-month'), function (monthElement) {
+          monthElement.textContent = monthStr;
+        });
+      });
+    };
+
+    var register = function register() {
+      fp.loadedPlugins.push('carbonFlatpickrMonthSelectPlugin');
+    };
+
+    return {
+      onMonthChange: updateCurrentMonth,
+      onValueUpdate: updateCurrentMonth,
+      onOpen: updateCurrentMonth,
+      onReady: [setupElements, updateCurrentMonth, register]
+    };
+  };
+};
+
+var DatePicker = /*#__PURE__*/function (_Component) {
+  _rollupPluginBabelHelpers.inherits(DatePicker, _Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(DatePicker);
+
+  function DatePicker() {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, DatePicker);
+
+    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));
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onChange", function () {
+      var _this$cal;
+
+      if (_this.inputField.value === '' && (_this$cal = _this.cal) !== null && _this$cal !== void 0 && _this$cal.selectedDates.length) {
+        _this.cal.clear();
+
+        _this.cal.input.focus();
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "addRoleAttributeToDialog", function () {
+      if (_this.inputField) {
+        _this.cal.calendarContainer.setAttribute('role', 'region'); // IBM EAAC requires an aria-label on a role='region'
+
+
+        _this.cal.calendarContainer.setAttribute('aria-label', 'calendar-container');
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "addKeyboardEvents", function (cal) {
+      var initArrowDownListener = function initArrowDownListener(element) {
+        if (element) {
+          element.addEventListener('keydown', function (e) {
+            if (match.match(e, keys.ArrowDown)) {
+              var calendarContainer = cal.calendarContainer,
+                  fpSelectedDateElem = cal.selectedDateElem,
+                  fptodayDateElem = cal.todayDateElem;
+              var selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
+              var todayDateElem = calendarContainer.querySelector('.today') && fptodayDateElem;
+              (selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer).focus();
+            }
+          });
+          element.addEventListener('change', _this.onChange);
+        }
+      };
+
+      initArrowDownListener(_this.inputField);
+      initArrowDownListener(_this.toInputField);
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "updateClassNames", function (calendar) {
+      var calendarContainer = calendar.calendarContainer;
+      var daysContainer = calendar.days;
+
+      if (calendarContainer && daysContainer) {
+        // calendarContainer and daysContainer are undefined if flatpickr detects a mobile device
+        calendarContainer.classList.add("".concat(_this.context, "--date-picker__calendar"));
+        calendarContainer.querySelector('.flatpickr-month').classList.add("".concat(_this.context, "--date-picker__month"));
+        calendarContainer.querySelector('.flatpickr-weekdays').classList.add("".concat(_this.context, "--date-picker__weekdays"));
+        calendarContainer.querySelector('.flatpickr-days').classList.add("".concat(_this.context, "--date-picker__days"));
+        forEach.call(calendarContainer.querySelectorAll('.flatpickr-weekday'), function (item) {
+          var currentItem = item;
+          currentItem.innerHTML = currentItem.innerHTML.replace(/\s+/g, '');
+          currentItem.classList.add("".concat(_this.context, "--date-picker__weekday"));
+        });
+        forEach.call(daysContainer.querySelectorAll('.flatpickr-day'), function (item) {
+          item.classList.add("".concat(_this.context, "--date-picker__day"));
+
+          if (item.classList.contains('today') && calendar.selectedDates.length > 0) {
+            item.classList.add('no-border');
+          } else if (item.classList.contains('today') && calendar.selectedDates.length === 0) {
+            item.classList.remove('no-border');
+          }
+        });
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "assignInputFieldRef", function (node) {
+      _this.inputField = !node ? null : // Child is a regular DOM node, seen in tests
+      node.nodeType === Node.ELEMENT_NODE ? node.querySelector(".".concat(_this.context, "--date-picker__input")) : // Child is a React component
+      node.input && node.input.nodeType === Node.ELEMENT_NODE ? node.input : null;
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "assignToInputFieldRef", function (node) {
+      _this.toInputField = !node ? null : // Child is a regular DOM node, seen in tests
+      node.nodeType === Node.ELEMENT_NODE ? node.querySelector(".".concat(_this.context, "--date-picker__input")) : // Child is a React component
+      node.input && node.input.nodeType === Node.ELEMENT_NODE ? node.input : null;
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "isLabelTextEmpty", function (children) {
+      return children.every(function (child) {
+        return !child.props.labelText;
+      });
+    });
+
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(DatePicker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          allowInput = _this$props.allowInput,
+          appendTo = _this$props.appendTo,
+          datePickerType = _this$props.datePickerType,
+          dateFormat = _this$props.dateFormat,
+          locale = _this$props.locale,
+          minDate = _this$props.minDate,
+          maxDate = _this$props.maxDate,
+          value = _this$props.value,
+          onClose = _this$props.onClose,
+          disable = _this$props.disable,
+          enable = _this$props.enable,
+          rest = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
+
+      if (datePickerType === 'single' || datePickerType === 'range') {
+        var onHook = function onHook(electedDates, dateStr, instance) {
+          _this2.updateClassNames(instance);
+        }; // Logic to determine if `enable` or `disable` will be passed down. If neither
+        // is provided, we return the default empty disabled array, allowing all dates.
+
+
+        var enableOrDisable = enable ? 'enable' : 'disable';
+        var enableOrDisableArr;
+
+        if (!enable && !disable) {
+          enableOrDisableArr = [];
+        } else if (enable) {
+          enableOrDisableArr = enable;
+        } else {
+          enableOrDisableArr = disable;
+        }
+
+        var localeData;
+
+        if (_rollupPluginBabelHelpers["typeof"](locale) === 'object') {
+          var location = locale.locale ? locale.locale : 'en';
+          localeData = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, index["default"][location]), locale);
+        } else {
+          localeData = index["default"][locale];
+        } // inputField ref might not be set in enzyme tests
+
+
+        if (this.inputField) {
+          var _rest$inline, _flatpickr;
+
+          this.cal = new flatpickr__default["default"](this.inputField, (_flatpickr = {
+            inline: (_rest$inline = rest.inline) !== null && _rest$inline !== void 0 ? _rest$inline : false,
+            disableMobile: true,
+            defaultDate: value,
+            mode: datePickerType,
+            allowInput: allowInput !== null && allowInput !== void 0 ? allowInput : true,
+            dateFormat: dateFormat,
+            locale: localeData
+          }, _rollupPluginBabelHelpers.defineProperty(_flatpickr, enableOrDisable, enableOrDisableArr), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "minDate", minDate), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "maxDate", maxDate), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "plugins", [datePickerType === 'range' ? new rangePlugin["default"]({
+            input: this.toInputField
+          }) : function () {}, appendTo ? appendToPlugin["default"]({
+            appendTo: appendTo
+          }) : function () {}, carbonFlatpickrMonthSelectPlugin({
+            selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
+            selectorFlatpickrYearContainer: '.numInputWrapper',
+            selectorFlatpickrCurrentMonth: '.cur-month',
+            classFlatpickrCurrentMonth: 'cur-month'
+          }), fixEventsPlugin["default"]({
+            inputFrom: this.inputField,
+            inputTo: this.toInputField
+          })]), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "clickOpens", true), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "nextArrow", this.rightArrowHTML()), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "prevArrow", this.leftArrowHTML()), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onChange", function onChange() {
+            var onChange = _this2.props.onChange;
+
+            if (onChange) {
+              onChange.apply(void 0, arguments);
+            }
+          }), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onClose", onClose), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onReady", onHook), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onMonthChange", onHook), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onYearChange", onHook), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onOpen", function onOpen() {
+            var onOpen = _this2.props.onOpen;
+            onHook.apply(void 0, arguments);
+
+            if (onOpen) {
+              onOpen.apply(void 0, arguments);
+            }
+          }), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onValueUpdate", onHook), _flatpickr));
+          this.addKeyboardEvents(this.cal);
+          this.addRoleAttributeToDialog();
+        }
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(_ref) {
+      var prevDateFormat = _ref.dateFormat,
+          prevMinDate = _ref.minDate,
+          prevMaxDate = _ref.maxDate,
+          prevValue = _ref.value,
+          prevDisable = _ref.disable,
+          prevEnable = _ref.enable,
+          prevRest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded2);
+
+      var _this$props2 = this.props,
+          dateFormat = _this$props2.dateFormat,
+          minDate = _this$props2.minDate,
+          maxDate = _this$props2.maxDate,
+          value = _this$props2.value,
+          disable = _this$props2.disable,
+          enable = _this$props2.enable,
+          rest = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props2, _excluded3);
+
+      if (this.cal) {
+        if (prevDateFormat !== dateFormat) {
+          this.cal.set({
+            dateFormat: dateFormat
+          });
+        }
+
+        if (prevMinDate !== minDate) {
+          this.cal.set('minDate', minDate);
+        }
+
+        if (prevMaxDate !== maxDate) {
+          this.cal.set('maxDate', maxDate);
+        }
+
+        if (disable !== prevDisable) {
+          this.cal.set('disable', disable);
+        }
+
+        if (enable !== prevEnable) {
+          this.cal.set('enable', enable);
+        }
+
+        if (rest.inline && rest.inline !== (prevRest === null || prevRest === void 0 ? void 0 : prevRest.inline)) {
+          this.cal.set('inline', rest.inline);
+        }
+      } // Coordinate when the given `value` prop changes. When this happens, we
+      // should update the calendar to the new value.
+
+
+      if (prevValue !== value) {
+        if (this.cal) {
+          this.cal.setDate(this.props.value);
+          this.updateClassNames(this.cal);
+        } else if (this.inputField) {
+          this.inputField.value = this.props.value;
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.cal) {
+        this.cal.destroy();
+      }
+
+      if (this.inputField) {
+        this.inputField.removeEventListener('change', this.onChange);
+      }
+
+      if (this.toInputField) {
+        this.toInputField.removeEventListener('change', this.onChange);
+      }
+    }
+  }, {
+    key: "rightArrowHTML",
+    value: function rightArrowHTML() {
+      return "\n      <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n        <polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n        <rect width=\"16\" height=\"16\" style=\"fill:none\" />\n      </svg>";
+    }
+  }, {
+    key: "leftArrowHTML",
+    value: function leftArrowHTML() {
+      return "\n      <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n        <polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n        <rect width=\"16\" height=\"16\" style=\"fill:none\" />\n      </svg>";
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      return /*#__PURE__*/React__default["default"].createElement(index$1.FeatureFlagContext.Consumer, null, function (scope) {
+        var _classNames;
+
+        var _this3$props = _this3.props;
+            _this3$props.allowInput;
+            _this3$props.appendTo;
+            var children = _this3$props.children,
+            className = _this3$props.className,
+            short = _this3$props.short,
+            light = _this3$props.light,
+            datePickerType = _this3$props.datePickerType;
+            _this3$props.minDate;
+            _this3$props.maxDate;
+            _this3$props.dateFormat;
+            _this3$props.onChange;
+            _this3$props.locale;
+            _this3$props.value;
+            _this3$props.onOpen;
+            var other = _rollupPluginBabelHelpers.objectWithoutProperties(_this3$props, _excluded4);
+
+        var enabled;
+
+        if (scope.enabled) {
+          enabled = scope.enabled('enable-v11-release');
+        }
+
+        var datePickerClasses = cx__default["default"]("".concat(_this3.context, "--date-picker"), [enabled ? null : className], (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(_this3.context, "--date-picker--short"), short), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(_this3.context, "--date-picker--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(_this3.context, "--date-picker--simple"), datePickerType === 'simple'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(_this3.context, "--date-picker--single"), datePickerType === 'single'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(_this3.context, "--date-picker--range"), datePickerType === 'range'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(_this3.context, "--date-picker--nolabel"), datePickerType === 'range' && _this3.isLabelTextEmpty(children)), _classNames));
+        var wrapperClasses = cx__default["default"]("".concat(_this3.context, "--form-item"), [enabled ? className : null]);
+        var childArray = React__default["default"].Children.toArray(children);
+        var childrenWithProps = childArray.map(function (child, index) {
+          if (index === 0 && child.type === React__default["default"].createElement(index$2["default"], child.props).type) {
+            return /*#__PURE__*/React__default["default"].cloneElement(child, {
+              datePickerType: datePickerType,
+              ref: _this3.assignInputFieldRef
+            });
+          }
+
+          if (index === 1 && child.type === React__default["default"].createElement(index$2["default"], child.props).type) {
+            return /*#__PURE__*/React__default["default"].cloneElement(child, {
+              datePickerType: datePickerType,
+              ref: _this3.assignToInputFieldRef
+            });
+          }
+
+          if (index === 0) {
+            return /*#__PURE__*/React__default["default"].cloneElement(child, {
+              ref: _this3.assignInputFieldRef
+            });
+          }
+
+          if (index === 1) {
+            return /*#__PURE__*/React__default["default"].cloneElement(child, {
+              ref: _this3.assignToInputFieldRef
+            });
+          }
+        });
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: wrapperClasses
+        }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+          className: datePickerClasses
+        }, other), childrenWithProps));
+      });
+    }
+  }]);
+
+  return DatePicker;
+}(React.Component);
+
+_rollupPluginBabelHelpers.defineProperty(DatePicker, "propTypes", {
+  /**
+   * flatpickr prop passthrough. Allows the user to enter a date directly
+   * into the input field
+   */
+  allowInput: PropTypes__default["default"].bool,
+
+  /**
+   * The DOM element the Flatpicker should be inserted into. `<body>` by default.
+   */
+  appendTo: PropTypes__default["default"].object,
+
+  /**
+   * The child nodes.
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * The CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * The date format.
+   */
+  dateFormat: PropTypes__default["default"].string,
+
+  /**
+   * 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']),
+
+  /**
+   * The flatpickr `disable` option that allows a user to disable certain dates.
+   */
+  disable: PropTypes__default["default"].array,
+
+  /**
+   * The flatpickr `enable` option that allows a user to enable certain dates.
+   */
+  enable: PropTypes__default["default"].array,
+
+  /**
+   * `true` to use the light version.
+   */
+  light: PropTypes__default["default"].bool,
+
+  /**
+   *  The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
+   */
+  locale: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].oneOf(['ar', // Arabic
+  'at', // Austria
+  'az', // Azerbaijan
+  'be', // Belarusian
+  'bg', // Bulgarian
+  'bn', // Bangla
+  'bs', // Bosnia
+  'cat', // Catalan
+  'cs', // Czech
+  'cy', // Welsh
+  'da', // Danish
+  'de', // German
+  'en', // English
+  'eo', // Esperanto
+  'es', // Spanish
+  'et', // Estonian
+  'fa', // Persian
+  'fi', // Finnish
+  'fo', // Faroese
+  'fr', // French
+  'ga', // Gaelic
+  'gr', // Greek
+  'he', // Hebrew
+  'hi', // Hindi
+  'hr', // Croatian
+  'hu', // Hungarian
+  'id', // Indonesian
+  'is', // Icelandic
+  'it', // Italian
+  'ja', // Japanese
+  'ka', // Georgian
+  'km', // Khmer
+  'ko', // Korean
+  'kz', // Kazakh
+  'lt', // Lithuanian
+  'lv', // Latvian
+  'mk', // Macedonian
+  'mn', // Mongolian
+  'ms', // Malaysian
+  'my', // Burmese
+  'nl', // Dutch
+  'no', // Norwegian
+  'pa', // Punjabi
+  'pl', // Polish
+  'pt', // Portuguese
+  'ro', // Romanian
+  'ru', // Russian
+  'si', // Sinhala
+  'sk', // Slovak
+  'sl', // Slovenian
+  'sq', // Albanian
+  'sr', // Serbian
+  'sv', // Swedish
+  'th', // Thai
+  'tr', // Turkish
+  'uk', // Ukrainian
+  'uz', // Uzbek
+  'uz_latn', // Uzbek Latin
+  'vn', // Vietnamese
+  'zh_tw', // Mandarin Traditional
+  'zh' // Mandarin
+  ])]),
+
+  /**
+   * The maximum date that a user can pick to.
+   */
+  maxDate: PropTypes__default["default"].string,
+
+  /**
+   * The minimum date that a user can start picking from.
+   */
+  minDate: PropTypes__default["default"].string,
+
+  /**
+   * The `change` event handler.
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * The `close` event handler.
+   */
+  onClose: PropTypes__default["default"].func,
+
+  /**
+   * The `open` event handler.
+   */
+  onOpen: PropTypes__default["default"].func,
+
+  /**
+   * `true` to use the short version.
+   */
+  short: PropTypes__default["default"].bool,
+
+  /**
+   * The value of the date value provided to flatpickr, could
+   * be a date, a date number, a date string, an array of dates.
+   */
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].object])), PropTypes__default["default"].object, PropTypes__default["default"].number])
+});
+
+_rollupPluginBabelHelpers.defineProperty(DatePicker, "defaultProps", {
+  short: false,
+  light: false,
+  dateFormat: 'm/d/Y',
+  locale: 'en'
+});
+
+_rollupPluginBabelHelpers.defineProperty(DatePicker, "contextType", usePrefix.PrefixContext);
+
+exports["default"] = DatePicker;

package/lib/components/DatePicker/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 DatePicker$2 = require('./next/DatePicker.js');
+var DatePicker$3 = require('./DatePicker.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 DatePicker = FeatureFlags__namespace.enabled('enable-v11-release') ? DatePicker$2["default"] : DatePicker$3["default"];
+var DatePicker$1 = DatePicker;
+
+exports["default"] = DatePicker$1;