@atlaskit/datetime-picker 14.0.2 → 14.0.4

package/dist/esm/components/date-picker.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -19,18 +18,18 @@ import { Component } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { format, isValid, lastDayOfMonth, parseISO } from 'date-fns';
+import { isValid, parseISO } from 'date-fns';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { mergeStyles } from '@atlaskit/select';
-import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
+import { EmptyComponent } from '../internal';
+import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
 import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
-import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "14.0.2";
+var packageVersion = "14.0.4";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -79,29 +78,12 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       var _this$props$isOpen;
       return (_this$props$isOpen = _this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : _this.state.isOpen;
     });
-    _defineProperty(_assertThisInitialized(_this), "isDateDisabled", function (date) {
-      return _this.props.disabled.indexOf(date) > -1;
-    });
     _defineProperty(_assertThisInitialized(_this), "onCalendarChange", function (_ref) {
       var iso = _ref.iso;
-      var _iso$split = iso.split('-'),
-        _iso$split2 = _slicedToArray(_iso$split, 3),
-        year = _iso$split2[0],
-        month = _iso$split2[1],
-        date = _iso$split2[2];
-      var newIso = iso;
-      var parsedDate = parseInt(date, 10);
-      var parsedMonth = parseInt(month, 10);
-      var parsedYear = parseInt(year, 10);
-      var lastDayInMonth = lastDayOfMonth(new Date(parsedYear, parsedMonth - 1) // This needs to be -1, because the Date constructor expects an index of the given month
-      ).getDate();
-      if (lastDayInMonth < parsedDate) {
-        newIso = "".concat(year, "-").concat(padToTwo(parsedMonth), "-").concat(padToTwo(lastDayInMonth));
-      } else {
-        newIso = "".concat(year, "-").concat(padToTwo(parsedMonth), "-").concat(padToTwo(parsedDate));
-      }
       _this.setState({
-        calendarValue: newIso
+        calendarValue: getParsedISO({
+          iso: iso
+        })
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onCalendarSelect", function (_ref2) {
@@ -186,7 +168,11 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "onTextInput", function (event) {
       var inputValue = event.target.value;
       if (inputValue) {
-        var parsed = _this.parseDate(inputValue);
+        var parsed = parseDate(inputValue, {
+          parseInputValue: _this.props.parseInputValue,
+          dateFormat: _this.props.dateFormat,
+          l10n: _this.state.l10n
+        });
         // Only try to set the date if we have month & day
         if (parsed && isValid(parsed)) {
           // We format the parsed date to YYYY-MM-DD here because
@@ -248,7 +234,9 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
           // for more details.
           event.preventDefault();
-          if (!_this.isDateDisabled(calendarValue)) {
+          if (!isDateDisabled(calendarValue, {
+            disabled: _this.props.disabled
+          })) {
             // Get a safe `calendarValue` in case the value exceeds the maximum
             // allowed by ISO 8601
             var safeCalendarValue = getSafeCalendarValue(calendarValue);
@@ -315,48 +303,6 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         _this.forceUpdate();
       }
     });
-    /**
-     * There are two props that can change how the date is parsed.
-     * The priority of props used is:
-     *   1. `parseInputValue`
-     *   2. `locale`
-     */
-    _defineProperty(_assertThisInitialized(_this), "parseDate", function (date) {
-      var _this$props = _this.props,
-        parseInputValue = _this$props.parseInputValue,
-        dateFormat = _this$props.dateFormat;
-      if (parseInputValue) {
-        return parseInputValue(date, dateFormat || defaultDateFormat);
-      }
-      var l10n = _this.state.l10n;
-      return l10n.parseDate(date);
-    });
-    /**
-     * There are multiple props that can change how the date is formatted.
-     * The priority of props used is:
-     *   1. `formatDisplayLabel`
-     *   2. `dateFormat`
-     *   3. `locale`
-     */
-    _defineProperty(_assertThisInitialized(_this), "formatDate", function (value) {
-      var _this$props2 = _this.props,
-        formatDisplayLabel = _this$props2.formatDisplayLabel,
-        dateFormat = _this$props2.dateFormat;
-      var l10n = _this.state.l10n;
-      if (formatDisplayLabel) {
-        return formatDisplayLabel(value, dateFormat || defaultDateFormat);
-      }
-      var date = parseISO(value);
-      return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
-    });
-    _defineProperty(_assertThisInitialized(_this), "getPlaceholder", function () {
-      var placeholder = _this.props.placeholder;
-      if (placeholder) {
-        return placeholder;
-      }
-      var l10n = _this.state.l10n;
-      return l10n.formatDate(placeholderDatetime);
-    });
     _this.state = {
       isOpen: _this.props.defaultIsOpen,
       isFocused: false,
@@ -373,29 +319,29 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
   _createClass(DatePickerComponent, [{
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-        appearance = _this$props3.appearance,
-        ariaDescribedBy = _this$props3['aria-describedby'],
-        autoFocus = _this$props3.autoFocus,
-        disabled = _this$props3.disabled,
-        hideIcon = _this$props3.hideIcon,
-        icon = _this$props3.icon,
-        id = _this$props3.id,
-        innerProps = _this$props3.innerProps,
-        isDisabled = _this$props3.isDisabled,
-        disabledDateFilter = _this$props3.disabledDateFilter,
-        maxDate = _this$props3.maxDate,
-        minDate = _this$props3.minDate,
-        isInvalid = _this$props3.isInvalid,
-        label = _this$props3.label,
-        name = _this$props3.name,
-        nextMonthLabel = _this$props3.nextMonthLabel,
-        previousMonthLabel = _this$props3.previousMonthLabel,
-        selectProps = _this$props3.selectProps,
-        spacing = _this$props3.spacing,
-        locale = _this$props3.locale,
-        testId = _this$props3.testId,
-        weekStartDay = _this$props3.weekStartDay;
+      var _this$props = this.props,
+        appearance = _this$props.appearance,
+        ariaDescribedBy = _this$props['aria-describedby'],
+        autoFocus = _this$props.autoFocus,
+        disabled = _this$props.disabled,
+        hideIcon = _this$props.hideIcon,
+        icon = _this$props.icon,
+        id = _this$props.id,
+        innerProps = _this$props.innerProps,
+        isDisabled = _this$props.isDisabled,
+        disabledDateFilter = _this$props.disabledDateFilter,
+        maxDate = _this$props.maxDate,
+        minDate = _this$props.minDate,
+        isInvalid = _this$props.isInvalid,
+        label = _this$props.label,
+        name = _this$props.name,
+        nextMonthLabel = _this$props.nextMonthLabel,
+        previousMonthLabel = _this$props.previousMonthLabel,
+        selectProps = _this$props.selectProps,
+        spacing = _this$props.spacing,
+        locale = _this$props.locale,
+        testId = _this$props.testId,
+        weekStartDay = _this$props.weekStartDay;
       var _this$state = this.state,
         calendarValue = _this$state.calendarValue,
         selectInputValue = _this$state.selectInputValue;
@@ -448,7 +394,11 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         }
       });
       var initialValue = value ? {
-        label: this.formatDate(value),
+        label: formatDate(value, {
+          formatDisplayLabel: this.props.formatDisplayLabel,
+          dateFormat: this.props.dateFormat,
+          l10n: this.state.l10n
+        }),
         value: value
       } : null;
       return (
@@ -484,7 +434,10 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           onChange: this.onSelectChange,
           onFocus: this.onSelectFocus,
           onInputChange: this.handleSelectInputChange,
-          placeholder: this.getPlaceholder(),
+          placeholder: getPlaceholder({
+            placeholder: this.props.placeholder,
+            l10n: this.state.l10n
+          }),
           styles: mergedStyles,
           value: initialValue
         }, selectProps, {

package/dist/esm/components/date-time-picker.js

@@ -31,7 +31,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "14.0.2";
+var packageVersion = "14.0.4";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({