@atlaskit/datetime-picker 14.0.3 → 14.0.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/datetime-picker
 
+## 14.0.4
+
+### Patch Changes
+
+- [#137180](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137180)
+  [`a12a34f29c819`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a12a34f29c819) -
+  Refactor internal functions.
+- Updated dependencies
+
 ## 14.0.3
 
 ### Patch Changes

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.DatePickerWithoutAnalytics = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -23,9 +22,9 @@ var _calendar = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"))
 var _locale = require("@atlaskit/locale");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _internal = require("../internal");
+var _datePickerMigration = require("../internal/date-picker-migration");
 var _menu = require("../internal/menu");
 var _parseDate = require("../internal/parse-date");
-var _parseTokens = require("../internal/parse-tokens");
 var _singleValue = require("../internal/single-value");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -37,7 +36,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "14.0.3";
+var packageVersion = "14.0.4";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -86,29 +85,12 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       var _this$props$isOpen;
       return (_this$props$isOpen = _this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : _this.state.isOpen;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isDateDisabled", function (date) {
-      return _this.props.disabled.indexOf(date) > -1;
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarChange", function (_ref) {
       var iso = _ref.iso;
-      var _iso$split = iso.split('-'),
-        _iso$split2 = (0, _slicedToArray2.default)(_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 = (0, _dateFns.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((0, _internal.padToTwo)(parsedMonth), "-").concat((0, _internal.padToTwo)(lastDayInMonth));
-      } else {
-        newIso = "".concat(year, "-").concat((0, _internal.padToTwo)(parsedMonth), "-").concat((0, _internal.padToTwo)(parsedDate));
-      }
       _this.setState({
-        calendarValue: newIso
+        calendarValue: (0, _datePickerMigration.getParsedISO)({
+          iso: iso
+        })
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarSelect", function (_ref2) {
@@ -193,7 +175,11 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTextInput", function (event) {
       var inputValue = event.target.value;
       if (inputValue) {
-        var parsed = _this.parseDate(inputValue);
+        var parsed = (0, _datePickerMigration.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 && (0, _dateFns.isValid)(parsed)) {
           // We format the parsed date to YYYY-MM-DD here because
@@ -255,7 +241,9 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
           // for more details.
           event.preventDefault();
-          if (!_this.isDateDisabled(calendarValue)) {
+          if (!(0, _datePickerMigration.isDateDisabled)(calendarValue, {
+            disabled: _this.props.disabled
+          })) {
             // Get a safe `calendarValue` in case the value exceeds the maximum
             // allowed by ISO 8601
             var safeCalendarValue = (0, _parseDate.getSafeCalendarValue)(calendarValue);
@@ -322,48 +310,6 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         _this.forceUpdate();
       }
     });
-    /**
-     * There are two props that can change how the date is parsed.
-     * The priority of props used is:
-     *   1. `parseInputValue`
-     *   2. `locale`
-     */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "parseDate", function (date) {
-      var _this$props = _this.props,
-        parseInputValue = _this$props.parseInputValue,
-        dateFormat = _this$props.dateFormat;
-      if (parseInputValue) {
-        return parseInputValue(date, dateFormat || _internal.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`
-     */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 || _internal.defaultDateFormat);
-      }
-      var date = (0, _dateFns.parseISO)(value);
-      return dateFormat ? (0, _dateFns.format)(date, (0, _parseTokens.convertTokens)(dateFormat)) : l10n.formatDate(date);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPlaceholder", function () {
-      var placeholder = _this.props.placeholder;
-      if (placeholder) {
-        return placeholder;
-      }
-      var l10n = _this.state.l10n;
-      return l10n.formatDate(_internal.placeholderDatetime);
-    });
     _this.state = {
       isOpen: _this.props.defaultIsOpen,
       isFocused: false,
@@ -380,29 +326,29 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
   (0, _createClass2.default)(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;
@@ -455,7 +401,11 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         }
       });
       var initialValue = value ? {
-        label: this.formatDate(value),
+        label: (0, _datePickerMigration.formatDate)(value, {
+          formatDisplayLabel: this.props.formatDisplayLabel,
+          dateFormat: this.props.dateFormat,
+          l10n: this.state.l10n
+        }),
         value: value
       } : null;
       return (
@@ -491,7 +441,10 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           onChange: this.onSelectChange,
           onFocus: this.onSelectFocus,
           onInputChange: this.handleSelectInputChange,
-          placeholder: this.getPlaceholder(),
+          placeholder: (0, _datePickerMigration.getPlaceholder)({
+            placeholder: this.props.placeholder,
+            l10n: this.state.l10n
+          }),
           styles: mergedStyles,
           value: initialValue
         }, selectProps, {

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

@@ -35,7 +35,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "14.0.3";
+var packageVersion = "14.0.4";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({

package/dist/cjs/components/time-picker.js

@@ -29,7 +29,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line no-restricted-imports
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "14.0.3";
+var packageVersion = "14.0.4";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/cjs/internal/date-picker-migration.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseDate = exports.isDateDisabled = exports.getPlaceholder = exports.getParsedISO = exports.formatDate = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _dateFns = require("date-fns");
+var _parseTokens = require("./parse-tokens");
+var _index = require("./index");
+/**
+ * Everything in this file is to smooth out the migration of the new date picker
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
+ * complete, all of these functions will ilkely be merged back into the date
+ * picker. Please do not pre-optimize and put these back into the date picker
+ * unless you are working on the DTP Refresh and you have a good reason to do
+ * so, thank you!
+ *
+ * All variables within the `di` objects are dependency injections. They should
+ * be read from within the component at the end of the day. But because we are
+ * extracting them, we have to inject them in every place manually. When we
+ * re-introduce them to the components, we can likely remove the `di` variables
+ * and instead use internal variables.
+ *
+ * If component _only_ has injected variables, it is fully internal and was
+ * broken out to be it's own function.
+ */
+
+var isDateDisabled = exports.isDateDisabled = function isDateDisabled(date, di) {
+  var disabled = di.disabled;
+  return disabled.indexOf(date) > -1;
+};
+var getParsedISO = exports.getParsedISO = function getParsedISO(di) {
+  var iso = di.iso;
+  var _iso$split = iso.split('-'),
+    _iso$split2 = (0, _slicedToArray2.default)(_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 = (0, _dateFns.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((0, _index.padToTwo)(parsedMonth), "-").concat((0, _index.padToTwo)(lastDayInMonth));
+  } else {
+    newIso = "".concat(year, "-").concat((0, _index.padToTwo)(parsedMonth), "-").concat((0, _index.padToTwo)(parsedDate));
+  }
+  return newIso;
+};
+
+/**
+ * There are two props that can change how the date is parsed.
+ * The priority of props used is:
+ *   1. `parseInputValue`
+ *   2. `locale`
+ */
+var parseDate = exports.parseDate = function parseDate(date, di) {
+  var parseInputValue = di.parseInputValue,
+    dateFormat = di.dateFormat,
+    l10n = di.l10n;
+  if (parseInputValue) {
+    return parseInputValue(date, dateFormat || _index.defaultDateFormat);
+  }
+  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`
+ */
+var formatDate = exports.formatDate = function formatDate(value, di) {
+  var formatDisplayLabel = di.formatDisplayLabel,
+    dateFormat = di.dateFormat,
+    l10n = di.l10n;
+  if (formatDisplayLabel) {
+    return formatDisplayLabel(value, dateFormat || _index.defaultDateFormat);
+  }
+  var date = (0, _dateFns.parseISO)(value);
+  return dateFormat ? (0, _dateFns.format)(date, (0, _parseTokens.convertTokens)(dateFormat)) : l10n.formatDate(date);
+};
+var getPlaceholder = exports.getPlaceholder = function getPlaceholder(di) {
+  var placeholder = di.placeholder,
+    l10n = di.l10n;
+  return placeholder || l10n.formatDate(_index.placeholderDatetime);
+};

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

@@ -8,18 +8,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';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "14.0.3";
+const packageVersion = "14.0.4";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -62,26 +62,13 @@ class DatePickerComponent extends 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(this, "isDateDisabled", date => {
-      return this.props.disabled.indexOf(date) > -1;
-    });
     _defineProperty(this, "onCalendarChange", ({
       iso
     }) => {
-      const [year, month, date] = iso.split('-');
-      let newIso = iso;
-      const parsedDate = parseInt(date, 10);
-      const parsedMonth = parseInt(month, 10);
-      const parsedYear = parseInt(year, 10);
-      const 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 = `${year}-${padToTwo(parsedMonth)}-${padToTwo(lastDayInMonth)}`;
-      } else {
-        newIso = `${year}-${padToTwo(parsedMonth)}-${padToTwo(parsedDate)}`;
-      }
       this.setState({
-        calendarValue: newIso
+        calendarValue: getParsedISO({
+          iso
+        })
       });
     });
     _defineProperty(this, "onCalendarSelect", ({
@@ -169,7 +156,11 @@ class DatePickerComponent extends Component {
     _defineProperty(this, "onTextInput", event => {
       const inputValue = event.target.value;
       if (inputValue) {
-        const parsed = this.parseDate(inputValue);
+        const 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
@@ -233,7 +224,9 @@ class DatePickerComponent extends 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
             const safeCalendarValue = getSafeCalendarValue(calendarValue);
@@ -303,58 +296,6 @@ class DatePickerComponent extends 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(this, "parseDate", date => {
-      const {
-        parseInputValue,
-        dateFormat
-      } = this.props;
-      if (parseInputValue) {
-        return parseInputValue(date, dateFormat || defaultDateFormat);
-      }
-      const {
-        l10n
-      } = this.state;
-      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(this, "formatDate", value => {
-      const {
-        formatDisplayLabel,
-        dateFormat
-      } = this.props;
-      const {
-        l10n
-      } = this.state;
-      if (formatDisplayLabel) {
-        return formatDisplayLabel(value, dateFormat || defaultDateFormat);
-      }
-      const date = parseISO(value);
-      return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
-    });
-    _defineProperty(this, "getPlaceholder", () => {
-      const {
-        placeholder
-      } = this.props;
-      if (placeholder) {
-        return placeholder;
-      }
-      const {
-        l10n
-      } = this.state;
-      return l10n.formatDate(placeholderDatetime);
-    });
     this.state = {
       isOpen: this.props.defaultIsOpen,
       isFocused: false,
@@ -457,7 +398,11 @@ class DatePickerComponent extends Component {
       })
     });
     const initialValue = value ? {
-      label: this.formatDate(value),
+      label: formatDate(value, {
+        formatDisplayLabel: this.props.formatDisplayLabel,
+        dateFormat: this.props.dateFormat,
+        l10n: this.state.l10n
+      }),
       value
     } : null;
     return (
@@ -493,7 +438,10 @@ class DatePickerComponent extends 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/es2019/components/date-time-picker.js

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

package/dist/es2019/components/time-picker.js

@@ -15,7 +15,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "14.0.3";
+const packageVersion = "14.0.4";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/internal/date-picker-migration.js

@@ -0,0 +1,90 @@
+/**
+ * Everything in this file is to smooth out the migration of the new date picker
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
+ * complete, all of these functions will ilkely be merged back into the date
+ * picker. Please do not pre-optimize and put these back into the date picker
+ * unless you are working on the DTP Refresh and you have a good reason to do
+ * so, thank you!
+ *
+ * All variables within the `di` objects are dependency injections. They should
+ * be read from within the component at the end of the day. But because we are
+ * extracting them, we have to inject them in every place manually. When we
+ * re-introduce them to the components, we can likely remove the `di` variables
+ * and instead use internal variables.
+ *
+ * If component _only_ has injected variables, it is fully internal and was
+ * broken out to be it's own function.
+ */
+
+import { format, lastDayOfMonth, parseISO } from 'date-fns';
+import { convertTokens } from './parse-tokens';
+import { defaultDateFormat, padToTwo, placeholderDatetime } from './index';
+export const isDateDisabled = (date, di) => {
+  const {
+    disabled
+  } = di;
+  return disabled.indexOf(date) > -1;
+};
+export const getParsedISO = di => {
+  const {
+    iso
+  } = di;
+  const [year, month, date] = iso.split('-');
+  let newIso = iso;
+  const parsedDate = parseInt(date, 10);
+  const parsedMonth = parseInt(month, 10);
+  const parsedYear = parseInt(year, 10);
+  const 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 = `${year}-${padToTwo(parsedMonth)}-${padToTwo(lastDayInMonth)}`;
+  } else {
+    newIso = `${year}-${padToTwo(parsedMonth)}-${padToTwo(parsedDate)}`;
+  }
+  return newIso;
+};
+
+/**
+ * There are two props that can change how the date is parsed.
+ * The priority of props used is:
+ *   1. `parseInputValue`
+ *   2. `locale`
+ */
+export const parseDate = (date, di) => {
+  const {
+    parseInputValue,
+    dateFormat,
+    l10n
+  } = di;
+  if (parseInputValue) {
+    return parseInputValue(date, dateFormat || defaultDateFormat);
+  }
+  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`
+ */
+export const formatDate = (value, di) => {
+  const {
+    formatDisplayLabel,
+    dateFormat,
+    l10n
+  } = di;
+  if (formatDisplayLabel) {
+    return formatDisplayLabel(value, dateFormat || defaultDateFormat);
+  }
+  const date = parseISO(value);
+  return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
+};
+export const getPlaceholder = di => {
+  const {
+    placeholder,
+    l10n
+  } = di;
+  return placeholder || l10n.formatDate(placeholderDatetime);
+};

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.3";
+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.3";
+var packageVersion = "14.0.4";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({

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

@@ -21,7 +21,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "14.0.3";
+var packageVersion = "14.0.4";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/esm/internal/date-picker-migration.js

@@ -0,0 +1,85 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Everything in this file is to smooth out the migration of the new date picker
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
+ * complete, all of these functions will ilkely be merged back into the date
+ * picker. Please do not pre-optimize and put these back into the date picker
+ * unless you are working on the DTP Refresh and you have a good reason to do
+ * so, thank you!
+ *
+ * All variables within the `di` objects are dependency injections. They should
+ * be read from within the component at the end of the day. But because we are
+ * extracting them, we have to inject them in every place manually. When we
+ * re-introduce them to the components, we can likely remove the `di` variables
+ * and instead use internal variables.
+ *
+ * If component _only_ has injected variables, it is fully internal and was
+ * broken out to be it's own function.
+ */
+
+import { format, lastDayOfMonth, parseISO } from 'date-fns';
+import { convertTokens } from './parse-tokens';
+import { defaultDateFormat, padToTwo, placeholderDatetime } from './index';
+export var isDateDisabled = function isDateDisabled(date, di) {
+  var disabled = di.disabled;
+  return disabled.indexOf(date) > -1;
+};
+export var getParsedISO = function getParsedISO(di) {
+  var iso = di.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));
+  }
+  return newIso;
+};
+
+/**
+ * There are two props that can change how the date is parsed.
+ * The priority of props used is:
+ *   1. `parseInputValue`
+ *   2. `locale`
+ */
+export var parseDate = function parseDate(date, di) {
+  var parseInputValue = di.parseInputValue,
+    dateFormat = di.dateFormat,
+    l10n = di.l10n;
+  if (parseInputValue) {
+    return parseInputValue(date, dateFormat || defaultDateFormat);
+  }
+  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`
+ */
+export var formatDate = function formatDate(value, di) {
+  var formatDisplayLabel = di.formatDisplayLabel,
+    dateFormat = di.dateFormat,
+    l10n = di.l10n;
+  if (formatDisplayLabel) {
+    return formatDisplayLabel(value, dateFormat || defaultDateFormat);
+  }
+  var date = parseISO(value);
+  return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
+};
+export var getPlaceholder = function getPlaceholder(di) {
+  var placeholder = di.placeholder,
+    l10n = di.l10n;
+  return placeholder || l10n.formatDate(placeholderDatetime);
+};

package/dist/types/components/date-picker.d.ts

@@ -77,7 +77,6 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     } | null;
     getValue: () => string;
     getIsOpen: () => boolean;
-    isDateDisabled: (date: string) => boolean;
     onCalendarChange: ({ iso }: {
         iso: string;
     }) => void;
@@ -95,22 +94,6 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     onSelectChange: (_value: unknown, action: ActionMeta) => void;
     handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
     getContainerRef: (ref: HTMLElement | null) => void;
-    /**
-     * There are two props that can change how the date is parsed.
-     * The priority of props used is:
-     *   1. `parseInputValue`
-     *   2. `locale`
-     */
-    parseDate: (date: string) => 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`
-     */
-    formatDate: (value: string) => string;
-    getPlaceholder: () => string;
     render(): jsx.JSX.Element;
 }
 export { DatePickerComponent as DatePickerWithoutAnalytics };
@@ -123,7 +106,7 @@ export { DatePickerComponent as DatePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
  */
-declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "hideIcon">> & Partial<Pick<{
+declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "disabled" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "hideIcon">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -144,5 +127,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

package/dist/types/components/time-picker.d.ts

@@ -9,5 +9,5 @@ import { type TimePickerBaseProps } from '../types';
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
 export default TimePicker;

package/dist/types/internal/date-picker-migration.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Everything in this file is to smooth out the migration of the new date picker
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
+ * complete, all of these functions will ilkely be merged back into the date
+ * picker. Please do not pre-optimize and put these back into the date picker
+ * unless you are working on the DTP Refresh and you have a good reason to do
+ * so, thank you!
+ *
+ * All variables within the `di` objects are dependency injections. They should
+ * be read from within the component at the end of the day. But because we are
+ * extracting them, we have to inject them in every place manually. When we
+ * re-introduce them to the components, we can likely remove the `di` variables
+ * and instead use internal variables.
+ *
+ * If component _only_ has injected variables, it is fully internal and was
+ * broken out to be it's own function.
+ */
+import { type LocalizationProvider } from '@atlaskit/locale';
+export declare const isDateDisabled: (date: string, di: {
+    disabled: string[];
+}) => boolean;
+export declare const getParsedISO: (di: {
+    iso: string;
+}) => string;
+/**
+ * There are two props that can change how the date is parsed.
+ * The priority of props used is:
+ *   1. `parseInputValue`
+ *   2. `locale`
+ */
+export declare const parseDate: (date: string, di: {
+    parseInputValue: ((date: string, dateFormat: string) => Date) | undefined;
+    dateFormat: string | undefined;
+    l10n: LocalizationProvider;
+}) => 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`
+ */
+export declare const formatDate: (value: string, di: {
+    formatDisplayLabel: ((value: string, dateFormat: string) => string) | undefined;
+    dateFormat: string | undefined;
+    l10n: LocalizationProvider;
+}) => string;
+export declare const getPlaceholder: (di: {
+    placeholder: string | undefined;
+    l10n: LocalizationProvider;
+}) => string;

package/dist/types-ts4.5/components/date-picker.d.ts

@@ -77,7 +77,6 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     } | null;
     getValue: () => string;
     getIsOpen: () => boolean;
-    isDateDisabled: (date: string) => boolean;
     onCalendarChange: ({ iso }: {
         iso: string;
     }) => void;
@@ -95,22 +94,6 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     onSelectChange: (_value: unknown, action: ActionMeta) => void;
     handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
     getContainerRef: (ref: HTMLElement | null) => void;
-    /**
-     * There are two props that can change how the date is parsed.
-     * The priority of props used is:
-     *   1. `parseInputValue`
-     *   2. `locale`
-     */
-    parseDate: (date: string) => 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`
-     */
-    formatDate: (value: string) => string;
-    getPlaceholder: () => string;
     render(): jsx.JSX.Element;
 }
 export { DatePickerComponent as DatePickerWithoutAnalytics };
@@ -123,7 +106,7 @@ export { DatePickerComponent as DatePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
  */
-declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "hideIcon">> & Partial<Pick<{
+declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "disabled" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "hideIcon">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -144,5 +127,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

package/dist/types-ts4.5/components/time-picker.d.ts

@@ -9,5 +9,5 @@ import { type TimePickerBaseProps } from '../types';
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
 export default TimePicker;

package/dist/types-ts4.5/internal/date-picker-migration.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Everything in this file is to smooth out the migration of the new date picker
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
+ * complete, all of these functions will ilkely be merged back into the date
+ * picker. Please do not pre-optimize and put these back into the date picker
+ * unless you are working on the DTP Refresh and you have a good reason to do
+ * so, thank you!
+ *
+ * All variables within the `di` objects are dependency injections. They should
+ * be read from within the component at the end of the day. But because we are
+ * extracting them, we have to inject them in every place manually. When we
+ * re-introduce them to the components, we can likely remove the `di` variables
+ * and instead use internal variables.
+ *
+ * If component _only_ has injected variables, it is fully internal and was
+ * broken out to be it's own function.
+ */
+import { type LocalizationProvider } from '@atlaskit/locale';
+export declare const isDateDisabled: (date: string, di: {
+    disabled: string[];
+}) => boolean;
+export declare const getParsedISO: (di: {
+    iso: string;
+}) => string;
+/**
+ * There are two props that can change how the date is parsed.
+ * The priority of props used is:
+ *   1. `parseInputValue`
+ *   2. `locale`
+ */
+export declare const parseDate: (date: string, di: {
+    parseInputValue: ((date: string, dateFormat: string) => Date) | undefined;
+    dateFormat: string | undefined;
+    l10n: LocalizationProvider;
+}) => 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`
+ */
+export declare const formatDate: (value: string, di: {
+    formatDisplayLabel: ((value: string, dateFormat: string) => string) | undefined;
+    dateFormat: string | undefined;
+    l10n: LocalizationProvider;
+}) => string;
+export declare const getPlaceholder: (di: {
+    placeholder: string | undefined;
+    l10n: LocalizationProvider;
+}) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "14.0.3",
+	"version": "14.0.4",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,10 +38,10 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/calendar": "^15.0.0",
 		"@atlaskit/ds-lib": "^2.5.0",
-		"@atlaskit/icon": "^22.15.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/locale": "^2.8.0",
-		"@atlaskit/popper": "^6.2.0",
+		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/select": "^17.15.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^1.59.0",
@@ -61,12 +61,12 @@
 		"@atlaskit/docs": "*",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/modal-dialog": "^12.15.0",
-		"@atlaskit/popup": "^1.24.0",
+		"@atlaskit/popup": "^1.25.0",
 		"@atlaskit/range": "^7.4.0",
 		"@atlaskit/section-message": "^6.6.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.5.0",
-		"@atlaskit/toggle": "^13.3.0",
+		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/react": "^12.1.5",