@atlaskit/datetime-picker 19.3.2 → 19.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/datetime-picker
 
+## 19.4.0
+
+### Minor Changes
+
+- [`cf5cda7218d8e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf5cda7218d8e) -
+  Behind the `platform-dst-locale-aware-time-parsing` feature gate, parse localized editable time
+  input while retaining ISO output and legacy English forms.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 19.3.2
 
 ### Patch Changes

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

@@ -47,7 +47,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.3.1";
+var packageVersion = "19.3.2";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",

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 =
 // for typing `process`
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.3.1";
+var packageVersion = "19.3.2";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -19,6 +19,7 @@ var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatform
 var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _clock = _interopRequireDefault(require("@atlaskit/icon/core/clock"));
+var _getTimeFormat = require("@atlaskit/locale/get-time-format");
 var _localizationProvider = require("@atlaskit/locale/localization-provider");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _styles = require("@atlaskit/react-select/styles");
@@ -37,7 +38,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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; } // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.3.1";
+var packageVersion = "19.3.2";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -105,10 +106,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     providedOnChange = _ref2$onChange === void 0 ? _noop.default : _ref2$onChange,
     _ref2$onFocus = _ref2.onFocus,
     providedOnFocus = _ref2$onFocus === void 0 ? _noop.default : _ref2$onFocus,
-    _ref2$parseInputValue = _ref2.parseInputValue,
-    parseInputValue = _ref2$parseInputValue === void 0 ? function (time, _timeFormat) {
-      return (0, _parseTime.default)(time);
-    } : _ref2$parseInputValue,
+    parseInputValue = _ref2.parseInputValue,
     placeholder = _ref2.placeholder,
     _ref2$selectProps = _ref2.selectProps,
     selectProps = _ref2$selectProps === void 0 ? {} : _ref2$selectProps,
@@ -153,6 +151,10 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
     value = _useState10[0],
     setValue = _useState10[1];
+  var l10n = (0, _localizationProvider.createLocalizationProvider)(locale);
+  var localeTimeFormat = (0, _react.useMemo)(function () {
+    return (0, _fg.fg)('platform-dst-locale-aware-time-parsing') ? (0, _getTimeFormat.getTimeFormat)(locale) : undefined;
+  }, [locale]);
 
   // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
   var _useReducer = (0, _react.useReducer)(function (x) {
@@ -199,7 +201,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     if (timeIsEditable) {
       var sanitizedInput;
       try {
-        sanitizedInput = parseInputValue(inputValue, timeFormat || defaultTimeFormat);
+        sanitizedInput = parseInputValue ? parseInputValue(inputValue, timeFormat || defaultTimeFormat) : (0, _parseTime.default)(inputValue, localeTimeFormat);
       } catch (_unused) {
         return; // do nothing, the main validation should happen in the form
       }
@@ -272,7 +274,6 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
   };
   var ICON_PADDING = 2;
   var GRID_SIZE = 8;
-  var l10n = (0, _localizationProvider.createLocalizationProvider)(locale);
   var _selectProps$styles = selectProps.styles,
     selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
     otherSelectProps = (0, _objectWithoutProperties2.default)(selectProps, _excluded);

package/dist/cjs/internal/is-valid.js

@@ -8,12 +8,12 @@ function isValid(timeString) {
   /**
    * Regex match for `12:34`, `12:34:56`, `1:23:56 p`, `1:23:56PM`, and a bit more…
    */
-  var time = timeString.trim().match(/([012]?[\d])(?::([0-5][\d]))?(?::([0-5][\d]))?\s*([ap]m?)?/i);
+  var time = timeString.trim().match(/^([012]?[\d])(?:[:.]?([0-5][\d]))?(?:[:.]?([0-5][\d]))?\s*([ap](?:\s*\.?\s*m\.?)?)?$/i);
 
   /**
    * Regex match for `1234`, `12:34`, `12.34`, `123456`, `12:34:56`, `12.34.56`
    */
-  var time24hr = timeString.trim().match(/([012][\d])[:.]?([0-5][\d])([:.]?([0-5][\d]))?/);
+  var time24hr = timeString.trim().match(/^([012][\d])[:.]?([0-5][\d])([:.]?([0-5][\d]))?$/);
 
   /**
    * Convert `2:34:56 pm` down to `23456`

package/dist/cjs/internal/parse-time.js

@@ -1,12 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = parseTime;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _convertTo24hrTime = require("./convert-to24hr-time");
 var _isValid = require("./is-valid");
 var _removeSpacer = require("./remove-spacer");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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; }
 function assignToDate(time) {
   var dateTime = new Date();
   dateTime.setHours(time.hour);
@@ -15,8 +20,26 @@ function assignToDate(time) {
   dateTime.setSeconds(time.seconds || 0, 0);
   return dateTime;
 }
-function parseTime(time) {
+function parseLegacyTime(time) {
+  var allowCompactTime = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var trimmedTime = time.toString().trim();
+  var compactTime = allowCompactTime ? trimmedTime.match(/^\d{5}$/) : null;
+  if (compactTime) {
+    var normalizedTime = "0".concat(compactTime[0]);
+    var hour = Number(normalizedTime.slice(0, 2));
+    var minute = Number(normalizedTime.slice(2, 4));
+    var seconds = Number(normalizedTime.slice(4, 6));
+    if (minute <= 59 && seconds <= 59) {
+      return assignToDate({
+        hour: hour,
+        minute: minute,
+        seconds: seconds
+      });
+    }
+  }
+  if (/^\d{5}$/.test(trimmedTime)) {
+    throw RangeError('invalid time format');
+  }
   if (!(0, _isValid.isValid)(trimmedTime)) {
     throw RangeError('invalid time format');
   }
@@ -25,5 +48,160 @@ function parseTime(time) {
   if (!time2) {
     throw RangeError('invalid time format');
   }
-  return assignToDate(time2);
+  return assignToDate(_objectSpread(_objectSpread({}, time2), {}, {
+    hour: time2.hour === 24 ? 0 : time2.hour
+  }));
+}
+var escapeRegExp = function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};
+var normalizeDigits = function normalizeDigits(time, timeFormat) {
+  return Array.from(time, function (character) {
+    return timeFormat.digits[character] || character;
+  }).join('');
+};
+var isValidHourForCycle = function isValidHourForCycle(hour, hourCycle) {
+  return hourCycle === 'h11' ? hour <= 11 : hourCycle === 'h12' ? hour >= 1 && hour <= 12 : hour <= 24;
+};
+function parseExactLocalizedTime(time, timeFormat) {
+  if (!timeFormat.timeParts) {
+    return undefined;
+  }
+  var dayPeriods = Object.entries(timeFormat.dayPeriods).filter(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      value = _ref2[1];
+    return value;
+  });
+  var groupTypes = [];
+  var patternParts = timeFormat.timeParts.map(function (part) {
+    if (part.type === 'hour' || part.type === 'minute' || part.type === 'second') {
+      groupTypes.push(part.type);
+      return part.type === 'hour' ? '(\\d{1,2})' : '(\\d{2})';
+    }
+    if (part.type === 'dayPeriod') {
+      if (dayPeriods.length === 0) {
+        return null;
+      }
+      groupTypes.push('dayPeriod');
+      return "(".concat(dayPeriods.map(function (_ref3) {
+        var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+          value = _ref4[1];
+        return escapeRegExp(value);
+      }).join('|'), ")");
+    }
+    if (part.type === 'literal') {
+      return escapeRegExp(part.value);
+    }
+    return null;
+  });
+  if (patternParts.some(function (part) {
+    return part === null;
+  })) {
+    return undefined;
+  }
+  var match = time.match(new RegExp("^".concat(patternParts.join(''), "$"), 'u'));
+  if (!match) {
+    return undefined;
+  }
+  var values = Object.fromEntries(groupTypes.map(function (type, index) {
+    return [type, match[index + 1]];
+  }));
+  if (!values.hour || !values.minute) {
+    return undefined;
+  }
+  var hour = Number(values.hour);
+  var minute = Number(values.minute);
+  var seconds = Number(values.second || '0');
+  if (minute > 59 || seconds > 59) {
+    return null;
+  }
+  if (values.dayPeriod) {
+    var _dayPeriods$find;
+    var period = (_dayPeriods$find = dayPeriods.find(function (_ref5) {
+      var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+        value = _ref6[1];
+      return value === values.dayPeriod;
+    })) === null || _dayPeriods$find === void 0 ? void 0 : _dayPeriods$find[0];
+    if (!period || !isValidHourForCycle(hour, timeFormat.hourCycle)) {
+      return null;
+    }
+    return assignToDate({
+      hour: period === 'pm' ? hour % 12 + 12 : hour % 12,
+      minute: minute,
+      seconds: seconds
+    });
+  }
+  if (hour > 24) {
+    return null;
+  }
+  return assignToDate({
+    hour: hour === 24 ? 0 : hour,
+    minute: minute,
+    seconds: seconds
+  });
+}
+function parseLocalizedTime(normalizedTime, timeFormat) {
+  var dayPeriods = Object.entries(timeFormat.dayPeriods).filter(function (_ref7) {
+    var _ref8 = (0, _slicedToArray2.default)(_ref7, 2),
+      value = _ref8[1];
+    return value;
+  });
+  var markers = dayPeriods.filter(function (_ref9) {
+    var _ref0 = (0, _slicedToArray2.default)(_ref9, 2),
+      value = _ref0[1];
+    return new RegExp(escapeRegExp(value), 'u').test(normalizedTime);
+  });
+  if (markers.length === 0) {
+    return undefined;
+  }
+  if (markers.length !== 1) {
+    return null;
+  }
+  var _markers = (0, _slicedToArray2.default)(markers, 1),
+    _markers$ = (0, _slicedToArray2.default)(_markers[0], 2),
+    period = _markers$[0],
+    marker = _markers$[1];
+  var numericTime = normalizedTime.replace(new RegExp(escapeRegExp(marker), 'u'), '').trim();
+  var match = numericTime.match(/^(\d{1,2})(?:[:.](\d{2}))?(?:[:.](\d{2}))?$/);
+  if (!match) {
+    return null;
+  }
+  var _match = (0, _slicedToArray2.default)(match, 4),
+    hourValue = _match[1],
+    _match$ = _match[2],
+    minuteValue = _match$ === void 0 ? '0' : _match$,
+    _match$2 = _match[3],
+    secondValue = _match$2 === void 0 ? '0' : _match$2;
+  var hour = Number(hourValue);
+  var minute = Number(minuteValue);
+  var seconds = Number(secondValue);
+  if (!isValidHourForCycle(hour, timeFormat.hourCycle) || minute > 59 || seconds > 59) {
+    return null;
+  }
+  return assignToDate({
+    hour: period === 'pm' ? hour % 12 + 12 : hour % 12,
+    minute: minute,
+    seconds: seconds
+  });
+}
+function parseTime(time, timeFormat) {
+  if (timeFormat) {
+    var normalizedTime = normalizeDigits(time, timeFormat);
+    var exactLocalizedTime = parseExactLocalizedTime(normalizedTime, timeFormat);
+    if (exactLocalizedTime instanceof Date) {
+      return exactLocalizedTime;
+    }
+    if (exactLocalizedTime === null) {
+      throw RangeError('invalid time format');
+    }
+    var localizedTime = parseLocalizedTime(normalizedTime, timeFormat);
+    if (localizedTime instanceof Date) {
+      return localizedTime;
+    }
+    if (localizedTime === null) {
+      throw RangeError('invalid time format');
+    }
+    return parseLegacyTime(normalizedTime, true);
+  }
+  return parseLegacyTime(time);
 }

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

@@ -32,7 +32,7 @@ import { parseDate } from '../internal/parse-date';
 import { PickerButtonContainer } from '../internal/picker-button-container';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "19.3.1";
+const packageVersion = "19.3.2";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",

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

@@ -22,7 +22,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "19.3.1";
+const packageVersion = "19.3.2";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

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

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./time-picker.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useEffect, useId, useReducer, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useId, useMemo, useReducer, useState } from 'react';
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { format, isValid } from 'date-fns';
@@ -10,6 +10,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
 import IconButton from '@atlaskit/button/icon/button';
 import __noop from '@atlaskit/ds-lib/noop';
 import ClockIcon from '@atlaskit/icon/core/clock';
+import { getTimeFormat } from '@atlaskit/locale/get-time-format';
 import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { mergeStyles } from '@atlaskit/react-select/styles';
@@ -24,7 +25,7 @@ import { PickerButtonContainer } from '../internal/picker-button-container';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "19.3.1";
+const packageVersion = "19.3.2";
 const defaultTimeFormat = 'h:mma';
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -74,7 +75,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   onBlur: providedOnBlur = __noop,
   onChange: providedOnChange = __noop,
   onFocus: providedOnFocus = __noop,
-  parseInputValue = (time, _timeFormat) => parseTime(time),
+  parseInputValue,
   placeholder,
   selectProps = {},
   shouldShowTimeButton = false,
@@ -97,6 +98,8 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   const [isOpen, setIsOpen] = useState(defaultIsOpen);
   const [shouldFocusTimeInput, setShouldFocusTimeInput] = useState(false);
   const [value, setValue] = useState(defaultValue);
+  const l10n = createLocalizationProvider(locale);
+  const localeTimeFormat = useMemo(() => fg('platform-dst-locale-aware-time-parsing') ? getTimeFormat(locale) : undefined, [locale]);
 
   // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
   const [, forceUpdate] = useReducer(x => x + 1, 0);
@@ -140,7 +143,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     if (timeIsEditable) {
       let sanitizedInput;
       try {
-        sanitizedInput = parseInputValue(inputValue, timeFormat || defaultTimeFormat);
+        sanitizedInput = parseInputValue ? parseInputValue(inputValue, timeFormat || defaultTimeFormat) : parseTime(inputValue, localeTimeFormat);
       } catch {
         return; // do nothing, the main validation should happen in the form
       }
@@ -215,7 +218,6 @@ const TimePicker = /*#__PURE__*/forwardRef(({
   };
   const ICON_PADDING = 2;
   const GRID_SIZE = 8;
-  const l10n = createLocalizationProvider(locale);
   const {
     styles: selectStyles = {},
     ...otherSelectProps

package/dist/es2019/internal/is-valid.js

@@ -2,12 +2,12 @@ export function isValid(timeString) {
   /**
    * Regex match for `12:34`, `12:34:56`, `1:23:56 p`, `1:23:56PM`, and a bit more…
    */
-  const time = timeString.trim().match(/([012]?[\d])(?::([0-5][\d]))?(?::([0-5][\d]))?\s*([ap]m?)?/i);
+  const time = timeString.trim().match(/^([012]?[\d])(?:[:.]?([0-5][\d]))?(?:[:.]?([0-5][\d]))?\s*([ap](?:\s*\.?\s*m\.?)?)?$/i);
 
   /**
    * Regex match for `1234`, `12:34`, `12.34`, `123456`, `12:34:56`, `12.34.56`
    */
-  const time24hr = timeString.trim().match(/([012][\d])[:.]?([0-5][\d])([:.]?([0-5][\d]))?/);
+  const time24hr = timeString.trim().match(/^([012][\d])[:.]?([0-5][\d])([:.]?([0-5][\d]))?$/);
 
   /**
    * Convert `2:34:56 pm` down to `23456`

package/dist/es2019/internal/parse-time.js

@@ -9,8 +9,25 @@ function assignToDate(time) {
   dateTime.setSeconds(time.seconds || 0, 0);
   return dateTime;
 }
-export default function parseTime(time) {
+function parseLegacyTime(time, allowCompactTime = false) {
   const trimmedTime = time.toString().trim();
+  const compactTime = allowCompactTime ? trimmedTime.match(/^\d{5}$/) : null;
+  if (compactTime) {
+    const normalizedTime = `0${compactTime[0]}`;
+    const hour = Number(normalizedTime.slice(0, 2));
+    const minute = Number(normalizedTime.slice(2, 4));
+    const seconds = Number(normalizedTime.slice(4, 6));
+    if (minute <= 59 && seconds <= 59) {
+      return assignToDate({
+        hour,
+        minute,
+        seconds
+      });
+    }
+  }
+  if (/^\d{5}$/.test(trimmedTime)) {
+    throw RangeError('invalid time format');
+  }
   if (!isValid(trimmedTime)) {
     throw RangeError('invalid time format');
   }
@@ -19,5 +36,121 @@ export default function parseTime(time) {
   if (!time2) {
     throw RangeError('invalid time format');
   }
-  return assignToDate(time2);
+  return assignToDate({
+    ...time2,
+    hour: time2.hour === 24 ? 0 : time2.hour
+  });
+}
+const escapeRegExp = value => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const normalizeDigits = (time, timeFormat) => Array.from(time, character => timeFormat.digits[character] || character).join('');
+const isValidHourForCycle = (hour, hourCycle) => hourCycle === 'h11' ? hour <= 11 : hourCycle === 'h12' ? hour >= 1 && hour <= 12 : hour <= 24;
+function parseExactLocalizedTime(time, timeFormat) {
+  if (!timeFormat.timeParts) {
+    return undefined;
+  }
+  const dayPeriods = Object.entries(timeFormat.dayPeriods).filter(([, value]) => value);
+  const groupTypes = [];
+  const patternParts = timeFormat.timeParts.map(part => {
+    if (part.type === 'hour' || part.type === 'minute' || part.type === 'second') {
+      groupTypes.push(part.type);
+      return part.type === 'hour' ? '(\\d{1,2})' : '(\\d{2})';
+    }
+    if (part.type === 'dayPeriod') {
+      if (dayPeriods.length === 0) {
+        return null;
+      }
+      groupTypes.push('dayPeriod');
+      return `(${dayPeriods.map(([, value]) => escapeRegExp(value)).join('|')})`;
+    }
+    if (part.type === 'literal') {
+      return escapeRegExp(part.value);
+    }
+    return null;
+  });
+  if (patternParts.some(part => part === null)) {
+    return undefined;
+  }
+  const match = time.match(new RegExp(`^${patternParts.join('')}$`, 'u'));
+  if (!match) {
+    return undefined;
+  }
+  const values = Object.fromEntries(groupTypes.map((type, index) => [type, match[index + 1]]));
+  if (!values.hour || !values.minute) {
+    return undefined;
+  }
+  const hour = Number(values.hour);
+  const minute = Number(values.minute);
+  const seconds = Number(values.second || '0');
+  if (minute > 59 || seconds > 59) {
+    return null;
+  }
+  if (values.dayPeriod) {
+    var _dayPeriods$find;
+    const period = (_dayPeriods$find = dayPeriods.find(([, value]) => value === values.dayPeriod)) === null || _dayPeriods$find === void 0 ? void 0 : _dayPeriods$find[0];
+    if (!period || !isValidHourForCycle(hour, timeFormat.hourCycle)) {
+      return null;
+    }
+    return assignToDate({
+      hour: period === 'pm' ? hour % 12 + 12 : hour % 12,
+      minute,
+      seconds
+    });
+  }
+  if (hour > 24) {
+    return null;
+  }
+  return assignToDate({
+    hour: hour === 24 ? 0 : hour,
+    minute,
+    seconds
+  });
+}
+function parseLocalizedTime(normalizedTime, timeFormat) {
+  const dayPeriods = Object.entries(timeFormat.dayPeriods).filter(([, value]) => value);
+  const markers = dayPeriods.filter(([, value]) => new RegExp(escapeRegExp(value), 'u').test(normalizedTime));
+  if (markers.length === 0) {
+    return undefined;
+  }
+  if (markers.length !== 1) {
+    return null;
+  }
+  const [[period, marker]] = markers;
+  const numericTime = normalizedTime.replace(new RegExp(escapeRegExp(marker), 'u'), '').trim();
+  const match = numericTime.match(/^(\d{1,2})(?:[:.](\d{2}))?(?:[:.](\d{2}))?$/);
+  if (!match) {
+    return null;
+  }
+  const [, hourValue, minuteValue = '0', secondValue = '0'] = match;
+  const hour = Number(hourValue);
+  const minute = Number(minuteValue);
+  const seconds = Number(secondValue);
+  if (!isValidHourForCycle(hour, timeFormat.hourCycle) || minute > 59 || seconds > 59) {
+    return null;
+  }
+  return assignToDate({
+    hour: period === 'pm' ? hour % 12 + 12 : hour % 12,
+    minute,
+    seconds
+  });
+}
+export default function parseTime(time, timeFormat) {
+  if (timeFormat) {
+    const normalizedTime = normalizeDigits(time, timeFormat);
+    const exactLocalizedTime = parseExactLocalizedTime(normalizedTime, timeFormat);
+    if (exactLocalizedTime instanceof Date) {
+      return exactLocalizedTime;
+    }
+    if (exactLocalizedTime === null) {
+      throw RangeError('invalid time format');
+    }
+    const localizedTime = parseLocalizedTime(normalizedTime, timeFormat);
+    if (localizedTime instanceof Date) {
+      return localizedTime;
+    }
+    if (localizedTime === null) {
+      throw RangeError('invalid time format');
+    }
+    return parseLegacyTime(normalizedTime, true);
+  }
+  return parseLegacyTime(time);
 }

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

@@ -40,7 +40,7 @@ import { parseDate } from '../internal/parse-date';
 import { PickerButtonContainer } from '../internal/picker-button-container';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.3.1";
+var packageVersion = "19.3.2";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",

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

@@ -29,7 +29,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.3.1";
+var packageVersion = "19.3.2";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -8,7 +8,7 @@ import "./time-picker.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { _defineProperty(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; }
-import React, { forwardRef, useCallback, useEffect, useId, useReducer, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useId, useMemo, useReducer, useState } from 'react';
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { format, isValid } from 'date-fns';
@@ -16,6 +16,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
 import IconButton from '@atlaskit/button/icon/button';
 import __noop from '@atlaskit/ds-lib/noop';
 import ClockIcon from '@atlaskit/icon/core/clock';
+import { getTimeFormat } from '@atlaskit/locale/get-time-format';
 import { createLocalizationProvider } from '@atlaskit/locale/localization-provider';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { mergeStyles } from '@atlaskit/react-select/styles';
@@ -30,7 +31,7 @@ import { PickerButtonContainer } from '../internal/picker-button-container';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "19.3.1";
+var packageVersion = "19.3.2";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -98,10 +99,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     providedOnChange = _ref2$onChange === void 0 ? __noop : _ref2$onChange,
     _ref2$onFocus = _ref2.onFocus,
     providedOnFocus = _ref2$onFocus === void 0 ? __noop : _ref2$onFocus,
-    _ref2$parseInputValue = _ref2.parseInputValue,
-    parseInputValue = _ref2$parseInputValue === void 0 ? function (time, _timeFormat) {
-      return parseTime(time);
-    } : _ref2$parseInputValue,
+    parseInputValue = _ref2.parseInputValue,
     placeholder = _ref2.placeholder,
     _ref2$selectProps = _ref2.selectProps,
     selectProps = _ref2$selectProps === void 0 ? {} : _ref2$selectProps,
@@ -146,6 +144,10 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     value = _useState10[0],
     setValue = _useState10[1];
+  var l10n = createLocalizationProvider(locale);
+  var localeTimeFormat = useMemo(function () {
+    return fg('platform-dst-locale-aware-time-parsing') ? getTimeFormat(locale) : undefined;
+  }, [locale]);
 
   // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
   var _useReducer = useReducer(function (x) {
@@ -192,7 +194,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     if (timeIsEditable) {
       var sanitizedInput;
       try {
-        sanitizedInput = parseInputValue(inputValue, timeFormat || defaultTimeFormat);
+        sanitizedInput = parseInputValue ? parseInputValue(inputValue, timeFormat || defaultTimeFormat) : parseTime(inputValue, localeTimeFormat);
       } catch (_unused) {
         return; // do nothing, the main validation should happen in the form
       }
@@ -265,7 +267,6 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
   };
   var ICON_PADDING = 2;
   var GRID_SIZE = 8;
-  var l10n = createLocalizationProvider(locale);
   var _selectProps$styles = selectProps.styles,
     selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
     otherSelectProps = _objectWithoutProperties(selectProps, _excluded);

package/dist/esm/internal/is-valid.js

@@ -2,12 +2,12 @@ export function isValid(timeString) {
   /**
    * Regex match for `12:34`, `12:34:56`, `1:23:56 p`, `1:23:56PM`, and a bit more…
    */
-  var time = timeString.trim().match(/([012]?[\d])(?::([0-5][\d]))?(?::([0-5][\d]))?\s*([ap]m?)?/i);
+  var time = timeString.trim().match(/^([012]?[\d])(?:[:.]?([0-5][\d]))?(?:[:.]?([0-5][\d]))?\s*([ap](?:\s*\.?\s*m\.?)?)?$/i);
 
   /**
    * Regex match for `1234`, `12:34`, `12.34`, `123456`, `12:34:56`, `12.34.56`
    */
-  var time24hr = timeString.trim().match(/([012][\d])[:.]?([0-5][\d])([:.]?([0-5][\d]))?/);
+  var time24hr = timeString.trim().match(/^([012][\d])[:.]?([0-5][\d])([:.]?([0-5][\d]))?$/);
 
   /**
    * Convert `2:34:56 pm` down to `23456`

package/dist/esm/internal/parse-time.js

@@ -1,3 +1,7 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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) { _defineProperty(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; }
 import { convertTo24hrTime } from './convert-to24hr-time';
 import { isValid } from './is-valid';
 import { removeSpacer } from './remove-spacer';
@@ -9,8 +13,26 @@ function assignToDate(time) {
   dateTime.setSeconds(time.seconds || 0, 0);
   return dateTime;
 }
-export default function parseTime(time) {
+function parseLegacyTime(time) {
+  var allowCompactTime = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var trimmedTime = time.toString().trim();
+  var compactTime = allowCompactTime ? trimmedTime.match(/^\d{5}$/) : null;
+  if (compactTime) {
+    var normalizedTime = "0".concat(compactTime[0]);
+    var hour = Number(normalizedTime.slice(0, 2));
+    var minute = Number(normalizedTime.slice(2, 4));
+    var seconds = Number(normalizedTime.slice(4, 6));
+    if (minute <= 59 && seconds <= 59) {
+      return assignToDate({
+        hour: hour,
+        minute: minute,
+        seconds: seconds
+      });
+    }
+  }
+  if (/^\d{5}$/.test(trimmedTime)) {
+    throw RangeError('invalid time format');
+  }
   if (!isValid(trimmedTime)) {
     throw RangeError('invalid time format');
   }
@@ -19,5 +41,160 @@ export default function parseTime(time) {
   if (!time2) {
     throw RangeError('invalid time format');
   }
-  return assignToDate(time2);
+  return assignToDate(_objectSpread(_objectSpread({}, time2), {}, {
+    hour: time2.hour === 24 ? 0 : time2.hour
+  }));
+}
+var escapeRegExp = function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};
+var normalizeDigits = function normalizeDigits(time, timeFormat) {
+  return Array.from(time, function (character) {
+    return timeFormat.digits[character] || character;
+  }).join('');
+};
+var isValidHourForCycle = function isValidHourForCycle(hour, hourCycle) {
+  return hourCycle === 'h11' ? hour <= 11 : hourCycle === 'h12' ? hour >= 1 && hour <= 12 : hour <= 24;
+};
+function parseExactLocalizedTime(time, timeFormat) {
+  if (!timeFormat.timeParts) {
+    return undefined;
+  }
+  var dayPeriods = Object.entries(timeFormat.dayPeriods).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      value = _ref2[1];
+    return value;
+  });
+  var groupTypes = [];
+  var patternParts = timeFormat.timeParts.map(function (part) {
+    if (part.type === 'hour' || part.type === 'minute' || part.type === 'second') {
+      groupTypes.push(part.type);
+      return part.type === 'hour' ? '(\\d{1,2})' : '(\\d{2})';
+    }
+    if (part.type === 'dayPeriod') {
+      if (dayPeriods.length === 0) {
+        return null;
+      }
+      groupTypes.push('dayPeriod');
+      return "(".concat(dayPeriods.map(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          value = _ref4[1];
+        return escapeRegExp(value);
+      }).join('|'), ")");
+    }
+    if (part.type === 'literal') {
+      return escapeRegExp(part.value);
+    }
+    return null;
+  });
+  if (patternParts.some(function (part) {
+    return part === null;
+  })) {
+    return undefined;
+  }
+  var match = time.match(new RegExp("^".concat(patternParts.join(''), "$"), 'u'));
+  if (!match) {
+    return undefined;
+  }
+  var values = Object.fromEntries(groupTypes.map(function (type, index) {
+    return [type, match[index + 1]];
+  }));
+  if (!values.hour || !values.minute) {
+    return undefined;
+  }
+  var hour = Number(values.hour);
+  var minute = Number(values.minute);
+  var seconds = Number(values.second || '0');
+  if (minute > 59 || seconds > 59) {
+    return null;
+  }
+  if (values.dayPeriod) {
+    var _dayPeriods$find;
+    var period = (_dayPeriods$find = dayPeriods.find(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        value = _ref6[1];
+      return value === values.dayPeriod;
+    })) === null || _dayPeriods$find === void 0 ? void 0 : _dayPeriods$find[0];
+    if (!period || !isValidHourForCycle(hour, timeFormat.hourCycle)) {
+      return null;
+    }
+    return assignToDate({
+      hour: period === 'pm' ? hour % 12 + 12 : hour % 12,
+      minute: minute,
+      seconds: seconds
+    });
+  }
+  if (hour > 24) {
+    return null;
+  }
+  return assignToDate({
+    hour: hour === 24 ? 0 : hour,
+    minute: minute,
+    seconds: seconds
+  });
+}
+function parseLocalizedTime(normalizedTime, timeFormat) {
+  var dayPeriods = Object.entries(timeFormat.dayPeriods).filter(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+      value = _ref8[1];
+    return value;
+  });
+  var markers = dayPeriods.filter(function (_ref9) {
+    var _ref0 = _slicedToArray(_ref9, 2),
+      value = _ref0[1];
+    return new RegExp(escapeRegExp(value), 'u').test(normalizedTime);
+  });
+  if (markers.length === 0) {
+    return undefined;
+  }
+  if (markers.length !== 1) {
+    return null;
+  }
+  var _markers = _slicedToArray(markers, 1),
+    _markers$ = _slicedToArray(_markers[0], 2),
+    period = _markers$[0],
+    marker = _markers$[1];
+  var numericTime = normalizedTime.replace(new RegExp(escapeRegExp(marker), 'u'), '').trim();
+  var match = numericTime.match(/^(\d{1,2})(?:[:.](\d{2}))?(?:[:.](\d{2}))?$/);
+  if (!match) {
+    return null;
+  }
+  var _match = _slicedToArray(match, 4),
+    hourValue = _match[1],
+    _match$ = _match[2],
+    minuteValue = _match$ === void 0 ? '0' : _match$,
+    _match$2 = _match[3],
+    secondValue = _match$2 === void 0 ? '0' : _match$2;
+  var hour = Number(hourValue);
+  var minute = Number(minuteValue);
+  var seconds = Number(secondValue);
+  if (!isValidHourForCycle(hour, timeFormat.hourCycle) || minute > 59 || seconds > 59) {
+    return null;
+  }
+  return assignToDate({
+    hour: period === 'pm' ? hour % 12 + 12 : hour % 12,
+    minute: minute,
+    seconds: seconds
+  });
+}
+export default function parseTime(time, timeFormat) {
+  if (timeFormat) {
+    var normalizedTime = normalizeDigits(time, timeFormat);
+    var exactLocalizedTime = parseExactLocalizedTime(normalizedTime, timeFormat);
+    if (exactLocalizedTime instanceof Date) {
+      return exactLocalizedTime;
+    }
+    if (exactLocalizedTime === null) {
+      throw RangeError('invalid time format');
+    }
+    var localizedTime = parseLocalizedTime(normalizedTime, timeFormat);
+    if (localizedTime instanceof Date) {
+      return localizedTime;
+    }
+    if (localizedTime === null) {
+      throw RangeError('invalid time format');
+    }
+    return parseLegacyTime(normalizedTime, true);
+  }
+  return parseLegacyTime(time);
 }

package/dist/types/internal/parse-time.d.ts

@@ -1 +1,2 @@
-export default function parseTime(time: string): string | Date;
+import type { TimeFormat } from '@atlaskit/locale/get-time-format';
+export default function parseTime(time: string, timeFormat?: TimeFormat): string | Date;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "19.3.2",
+	"version": "19.4.0",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,21 +35,21 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^12.6.0",
-		"@atlaskit/button": "^25.4.0",
+		"@atlaskit/button": "^25.6.0",
 		"@atlaskit/calendar": "^19.5.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/icon": "^38.0.0",
-		"@atlaskit/layering": "^6.0.0",
-		"@atlaskit/locale": "^5.4.0",
+		"@atlaskit/layering": "^6.1.0",
+		"@atlaskit/locale": "^5.5.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/popper": "^9.4.0",
-		"@atlaskit/primitives": "^22.5.0",
+		"@atlaskit/primitives": "^22.6.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-select": "^4.12.0",
 		"@atlaskit/select": "^23.1.0",
-		"@atlaskit/tokens": "^20.4.0",
-		"@atlaskit/top-layer": "^6.2.0",
+		"@atlaskit/tokens": "^20.7.0",
+		"@atlaskit/top-layer": "^6.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"date-fns": "^2.17.0"
@@ -67,8 +67,9 @@
 		"@atlaskit/form": "^18.2.0",
 		"@atlaskit/heading": "^8.0.0",
 		"@atlaskit/link": "^5.1.0",
-		"@atlaskit/modal-dialog": "^17.0.0",
-		"@atlaskit/popup": "^9.0.0",
+		"@atlaskit/menu": "^11.0.0",
+		"@atlaskit/modal-dialog": "^17.1.0",
+		"@atlaskit/popup": "^10.0.0",
 		"@atlaskit/range": "^12.2.0",
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/textfield": "^10.2.0",
@@ -94,6 +95,9 @@
 		"platform-dst-motion-uplift-input": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform-dst-locale-aware-time-parsing": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/datetime-picker/"