@carbon/react 1.3.0 → 1.4.0-rc.0

package/lib/components/DatePicker/DatePicker.js

@@ -15,12 +15,12 @@ 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 DatePickerInput = require('../DatePickerInput/DatePickerInput.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 useSavedCallback = require('../../internal/useSavedCallback.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -31,12 +31,9 @@ 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"];
+var _excluded = ["allowInput", "appendTo", "children", "className", "dateFormat", "datePickerType", "disable", "enable", "inline", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
 
-index["default"].en.weekdays.shorthand.forEach(function (day, index$1) {
+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') {
@@ -116,358 +113,295 @@ var carbonFlatpickrMonthSelectPlugin = function carbonFlatpickrMonthSelectPlugin
     };
   };
 };
+/**
+ * Determine if every child in a list of children has no label specified
+ * @param {Array<ReactElement>} children
+ * @returns {boolean}
+ */
 
-var DatePicker = /*#__PURE__*/function (_Component) {
-  _rollupPluginBabelHelpers.inherits(DatePicker, _Component);
 
-  var _super = _rollupPluginBabelHelpers.createSuper(DatePicker);
+function isLabelTextEmpty(children) {
+  return children.every(function (child) {
+    return !child.props.labelText;
+  });
+}
+
+var rightArrowHTML = "<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>";
+var leftArrowHTML = "<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>";
+
+function updateClassNames(calendar, prefix) {
+  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(prefix, "--date-picker__calendar"));
+    calendarContainer.querySelector('.flatpickr-month').classList.add("".concat(prefix, "--date-picker__month"));
+    calendarContainer.querySelector('.flatpickr-weekdays').classList.add("".concat(prefix, "--date-picker__weekdays"));
+    calendarContainer.querySelector('.flatpickr-days').classList.add("".concat(prefix, "--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(prefix, "--date-picker__weekday"));
+    });
+    forEach.call(daysContainer.querySelectorAll('.flatpickr-day'), function (item) {
+      item.classList.add("".concat(prefix, "--date-picker__day"));
 
-  function DatePicker() {
-    var _this;
+      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');
+      }
+    });
+  }
+}
+
+function DatePicker(_ref) {
+  var _cx;
+
+  var allowInput = _ref.allowInput,
+      appendTo = _ref.appendTo,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$dateFormat = _ref.dateFormat,
+      dateFormat = _ref$dateFormat === void 0 ? 'm/d/Y' : _ref$dateFormat,
+      datePickerType = _ref.datePickerType,
+      disable = _ref.disable,
+      enable = _ref.enable,
+      inline = _ref.inline,
+      _ref$light = _ref.light,
+      light = _ref$light === void 0 ? false : _ref$light,
+      _ref$locale = _ref.locale,
+      locale = _ref$locale === void 0 ? 'en' : _ref$locale,
+      maxDate = _ref.maxDate,
+      minDate = _ref.minDate,
+      onChange = _ref.onChange,
+      onClose = _ref.onClose,
+      onOpen = _ref.onOpen,
+      _ref$short = _ref.short,
+      short = _ref$short === void 0 ? false : _ref$short,
+      value = _ref.value,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var startInputField = React.useRef(null);
+  var endInputField = React.useRef(null);
+  var calendarRef = React.useRef(null);
+  var savedOnChange = useSavedCallback.useSavedCallback(onChange);
+  var savedOnClose = useSavedCallback.useSavedCallback(onClose);
+  var savedOnOpen = useSavedCallback.useSavedCallback(onOpen);
+  var datePickerClasses = cx__default["default"]("".concat(prefix, "--date-picker"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--short"), short), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--simple"), datePickerType === 'simple'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--single"), datePickerType === 'single'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--range"), datePickerType === 'range'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--nolabel"), datePickerType === 'range' && isLabelTextEmpty(children)), _cx));
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), _rollupPluginBabelHelpers.defineProperty({}, className, className));
+  var childrenWithProps = React__default["default"].Children.toArray(children).map(function (child, index) {
+    if (index === 0 && child.type === React__default["default"].createElement(DatePickerInput["default"], child.props).type) {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        datePickerType: datePickerType,
+        ref: startInputField
+      });
+    }
 
-    _rollupPluginBabelHelpers.classCallCheck(this, DatePicker);
+    if (index === 1 && child.type === React__default["default"].createElement(DatePickerInput["default"], child.props).type) {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        datePickerType: datePickerType,
+        ref: endInputField
+      });
+    }
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if (index === 0) {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        ref: startInputField
+      });
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
+    if (index === 1) {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        ref: endInputField
+      });
+    }
+  });
+  React.useEffect(function () {
+    var _flatpickr;
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onChange", function () {
-      var _this$cal;
+    if (datePickerType !== 'single' && datePickerType !== 'range') {
+      return;
+    }
 
-      if (_this.inputField.value === '' && (_this$cal = _this.cal) !== null && _this$cal !== void 0 && _this$cal.selectedDates.length) {
-        _this.cal.clear();
+    if (startInputField.current === null) {
+      return;
+    }
 
-        _this.cal.input.focus();
-      }
-    });
+    var onHook = function onHook(_electedDates, _dateStr, instance, prefix) {
+      updateClassNames(instance, prefix);
+    }; // 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.
 
-    _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'
 
+    var enableOrDisable = enable ? 'enable' : 'disable';
+    var enableOrDisableArr;
 
-        _this.cal.calendarContainer.setAttribute('aria-label', 'calendar-container');
-      }
-    });
+    if (!enable && !disable) {
+      enableOrDisableArr = [];
+    } else if (enable) {
+      enableOrDisableArr = enable;
+    } else {
+      enableOrDisableArr = disable;
+    }
 
-    _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);
-        }
-      };
+    var localeData;
 
-      initArrowDownListener(_this.inputField);
-      initArrowDownListener(_this.toInputField);
-    });
+    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];
+    }
 
-    _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');
-          }
-        });
+    var start = startInputField.current;
+    var end = endInputField.current;
+    var calendar = new flatpickr__default["default"](start, (_flatpickr = {
+      inline: inline !== null && inline !== void 0 ? 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: endInputField.current
+    }) : function () {}, appendTo ? appendToPlugin["default"]({
+      appendTo: appendTo
+    }) : function () {}, carbonFlatpickrMonthSelectPlugin({
+      selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
+      selectorFlatpickrYearContainer: '.numInputWrapper',
+      selectorFlatpickrCurrentMonth: '.cur-month',
+      classFlatpickrCurrentMonth: 'cur-month'
+    }), fixEventsPlugin["default"]({
+      inputFrom: startInputField.current,
+      inputTo: endInputField.current
+    })]), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "clickOpens", true), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "nextArrow", rightArrowHTML), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "prevArrow", leftArrowHTML), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onChange", function onChange() {
+      if (savedOnChange) {
+        savedOnChange.apply(void 0, arguments);
       }
-    });
-
-    _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;
-      });
-    });
+    }), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onClose", savedOnClose), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onReady", onHook), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onMonthChange", onHook), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onYearChange", onHook), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onOpen", function onOpen() {
+      onHook.apply(void 0, arguments);
+      savedOnOpen.apply(void 0, arguments);
+    }), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onValueUpdate", onHook), _flatpickr));
+    calendarRef.current = calendar;
+
+    function handleArrowDown(event) {
+      if (match.match(event, keys.ArrowDown)) {
+        var calendarContainer = calendar.calendarContainer,
+            fpSelectedDateElem = calendar.selectedDateElem,
+            fptodayDateElem = calendar.todayDateElem;
+        var selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
+        var todayDateElem = calendarContainer.querySelector('.today') && fptodayDateElem;
+        (selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer).focus();
+      }
+    }
 
-    return _this;
-  }
+    function handleOnChange() {
+      if (start.value !== '') {
+        return;
+      }
 
-  _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;
-        }
+      if (!calendar.selectedDates) {
+        return;
+      }
 
-        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();
-        }
+      if (calendar.selectedDates.length === 0) {
+        return;
       }
+
+      calendar.clear();
+      calendar.input.focus();
     }
-  }, {
-    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 (start) {
+      start.addEventListener('keydown', handleArrowDown);
+      start.addEventListener('change', handleOnChange); // Flatpickr's calendar dialog is not rendered in a landmark causing an
+      // error with IBM Equal Access Accessibility Checker so we add an aria
+      // role to the container div.
 
-        if (prevMaxDate !== maxDate) {
-          this.cal.set('maxDate', maxDate);
-        }
+      calendar.calendarContainer.setAttribute('role', 'region'); // IBM EAAC requires an aria-label on a role='region'
 
-        if (disable !== prevDisable) {
-          this.cal.set('disable', disable);
-        }
-
-        if (enable !== prevEnable) {
-          this.cal.set('enable', enable);
-        }
+      calendar.calendarContainer.setAttribute('aria-label', 'calendar-container');
+    }
 
-        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 (end) {
+      end.addEventListener('keydown', handleArrowDown);
+      end.addEventListener('change', handleOnChange);
+    } //component did unmount equivalent
 
 
-      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();
+    return function () {
+      // Note: if the `startInputField` ref is undefined then calendar will be
+      // of type: Array and `destroy` will not be defined
+      if (calendar && calendar.destroy) {
+        calendar.destroy();
       }
 
-      if (this.inputField) {
-        this.inputField.removeEventListener('change', this.onChange);
+      if (start) {
+        start.removeEventListener('keydown', handleArrowDown);
+        start.removeEventListener('change', handleOnChange);
       }
 
-      if (this.toInputField) {
-        this.toInputField.removeEventListener('change', this.onChange);
+      if (end) {
+        end.removeEventListener('keydown', handleArrowDown);
+        end.removeEventListener('change', handleOnChange);
       }
+    };
+  }, [savedOnChange, savedOnClose, savedOnOpen]); //eslint-disable-line react-hooks/exhaustive-deps
+
+  React.useEffect(function () {
+    if (calendarRef.current) {
+      calendarRef.current.set({
+        dateFormat: dateFormat
+      });
     }
-  }, {
-    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>";
+  }, [dateFormat]);
+  React.useEffect(function () {
+    if (calendarRef.current && minDate) {
+      calendarRef.current.set('minDate', minDate);
     }
-  }, {
-    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>";
+  }, [minDate]);
+  React.useEffect(function () {
+    if (calendarRef.current && maxDate) {
+      calendarRef.current.set('maxDate', maxDate);
     }
-  }, {
-    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));
+  }, [maxDate]);
+  React.useEffect(function () {
+    if (calendarRef.current && disable) {
+      calendarRef.current.set('disbale', disable);
+    }
+  }, [disable]);
+  React.useEffect(function () {
+    if (calendarRef.current && enable) {
+      calendarRef.current.set('enable', enable);
+    }
+  }, [enable]);
+  React.useEffect(function () {
+    if (calendarRef.current && inline) {
+      calendarRef.current.set('inline', inline);
+    }
+  }, [inline]);
+  React.useEffect(function () {
+    if (calendarRef.current) {
+      calendarRef.current.set({
+        value: value
       });
+      updateClassNames(calendarRef.current, prefix); //for simple date picker w/o calendar; initial mount may not have value
+    } else if (!calendarRef.current && value) {
+      startInputField.current.value = value;
     }
-  }]);
-
-  return DatePicker;
-}(React.Component);
-
-_rollupPluginBabelHelpers.defineProperty(DatePicker, "propTypes", {
+  }, [value, prefix]);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: wrapperClasses
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: datePickerClasses
+  }, childrenWithProps));
+}
+
+DatePicker.propTypes = {
   /**
    * flatpickr prop passthrough. Allows the user to enter a date directly
    * into the input field
@@ -513,6 +447,11 @@ _rollupPluginBabelHelpers.defineProperty(DatePicker, "propTypes", {
    */
   enable: PropTypes__default["default"].array,
 
+  /**
+   * The flatpickr `inline` option.
+   */
+  inline: PropTypes__default["default"].bool,
+
   /**
    * `true` to use the light version.
    */
@@ -619,15 +558,6 @@ _rollupPluginBabelHelpers.defineProperty(DatePicker, "propTypes", {
    * 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;