@atlaskit/datetime-picker 12.10.5 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/datetime-picker
 
+## 13.0.0
+
+### Major Changes
+
+- [#43269](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43269) [`c7ab5b9501c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c7ab5b9501c) - This fixes it so that `<TimePicker timeEditable timeFormat="hh:mm:ss">` will return seconds when the timeformat includes seconds whereas previously it would strictly return `HH:mm` and not account for the `timeFormat`. It is still not flexible and does not return time in your `timeFormat` to avoid causing unexpected breaking changes as that `HH:mm` format has been there for so long.
+
+  There's a theoretical risk that `HH:mm` formats are expected back when `HH:mm:ss` format are used and unsed improperly, but any typical parsing of datetime should handle this change perfectly fine, with zero breaking change expected.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.10.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.10.5
 
 ### Patch Changes

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

@@ -39,7 +39,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.10.5";
+var packageVersion = "13.0.0";
 function getValidDate(iso) {
   var date = (0, _dateFns.parseISO)(iso);
   return (0, _dateFns.isValid)(date) ? {

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

@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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; } /** @jsx jsx */
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.10.5";
+var packageVersion = "13.0.0";
 var isInvalidBorderStyles = (0, _react2.css)({
   borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
 });

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

@@ -37,7 +37,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.10.5";
+var packageVersion = "13.0.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -138,7 +138,9 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
           return; // do nothing, the main validation should happen in the form
         }
 
-        var formattedValue = (0, _dateFns.format)(sanitizedInput, 'HH:mm') || '';
+        var includesSeconds = !!(_timeFormat2 && /[:.]?(s|ss)/.test(_timeFormat2));
+        var formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
+        var formattedValue = (0, _dateFns.format)(sanitizedInput, formatFormat) || '';
         _this.setState({
           value: formattedValue
         });

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.assignToDate = assignToDate;
 exports.checkHour = checkHour;
-exports.checkMinute = checkMinute;
+exports.checkMinuteSecond = checkMinuteSecond;
 exports.convertTo24hrTime = convertTo24hrTime;
 exports.default = _default;
 exports.formatSemi24 = formatSemi24;
@@ -26,16 +26,31 @@ var map24 = {
   '11': '23'
 };
 function isValid(timeString) {
-  var time = timeString.trim().match(/(\d+)(?::(\d\d))?\s*(a|p)?/i);
-  var time24hr = timeString.trim().match(/(\d\d)[:.]?(\d\d)/);
+  /**
+   * 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);
+
+  /**
+   * 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]))?/);
+
+  /**
+   * Convert `2:34:56 pm` down to `23456`
+   */
   var num = timeString.replace(/[^0-9]/g, '');
+  var includesSeconds = time && time[1] !== undefined && time[2] !== undefined && time[3] !== undefined || time24hr && time24hr[1] !== undefined && time24hr[2] !== undefined && time24hr[4] !== undefined;
   if (!time && !time24hr) {
     return false;
   }
   if (time && !time[1]) {
     return false;
   }
-  if (num.length > 4) {
+  if (num.length > 6) {
+    return false;
+  }
+  if (num.length > 4 && !includesSeconds) {
     return false;
   }
   if (num.length === 2 && parseInt(num, 10) > 12) {
@@ -44,7 +59,7 @@ function isValid(timeString) {
   return true;
 }
 function removeSpacer(time) {
-  return time.replace(/[:.]/, '');
+  return time.replace(/[:.]/g, '');
 }
 function formatSemi24(time) {
   if (time.length === 1) {
@@ -53,7 +68,7 @@ function formatSemi24(time) {
   if (time.length === 2) {
     return "".concat(time, "00");
   }
-  if (time.length === 3) {
+  if (time.length === 3 || time.length === 5) {
     return "0".concat(time);
   }
   return time;
@@ -70,31 +85,34 @@ function checkHour(hour, meridiem) {
   }
   return hour;
 }
-function checkMinute(minute) {
-  if (minute > '59') {
+function checkMinuteSecond(value) {
+  if (value > '59') {
     return null;
   }
-  return minute;
+  return value;
 }
 function convertTo24hrTime(time) {
   var timeArray = time.toLowerCase().split(/(p|a)/i);
   var meridiem = timeArray[1];
   var semi24 = formatSemi24(timeArray[0].trim());
   var hour = checkHour(semi24.substring(0, 2), meridiem);
-  var minute = checkMinute(semi24.substring(2, 4));
+  var minute = checkMinuteSecond(semi24.substring(2, 4));
+  var seconds = semi24.length === 6 && checkMinuteSecond(semi24.substring(4, 6));
   if (!hour || !minute) {
     return null;
   }
   return {
     hour: parseInt(hour, 10),
-    minute: parseInt(minute, 10)
+    minute: parseInt(minute, 10),
+    seconds: parseInt(seconds || '0', 10) || 0
   };
 }
 function assignToDate(time) {
   var dateTime = new Date();
   dateTime.setHours(time.hour);
   dateTime.setMinutes(time.minute);
-  dateTime.setSeconds(0, 0);
+  // milliseconds is not supported
+  dateTime.setSeconds(time.seconds || 0, 0);
   return dateTime;
 }
 function _default(time) {

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

@@ -19,7 +19,7 @@ import FixedLayer from '../internal/fixed-layer';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.10.5";
+const packageVersion = "13.0.0";
 function getValidDate(iso) {
   const date = parseISO(iso);
   return isValid(date) ? {

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

@@ -15,7 +15,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.10.5";
+const packageVersion = "13.0.0";
 const isInvalidBorderStyles = css({
   borderColor: `var(--ds-border-danger, ${R400})`
 });

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

@@ -16,7 +16,7 @@ import parseTime from '../internal/parse-time';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.10.5";
+const packageVersion = "13.0.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -113,7 +113,9 @@ class TimePicker extends React.Component {
           return; // do nothing, the main validation should happen in the form
         }
 
-        const formattedValue = format(sanitizedInput, 'HH:mm') || '';
+        const includesSeconds = !!(timeFormat && /[:.]?(s|ss)/.test(timeFormat));
+        const formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
+        const formattedValue = format(sanitizedInput, formatFormat) || '';
         this.setState({
           value: formattedValue
         });

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

@@ -13,16 +13,31 @@ const map24 = {
   '11': '23'
 };
 export function isValid(timeString) {
-  const time = timeString.trim().match(/(\d+)(?::(\d\d))?\s*(a|p)?/i);
-  const time24hr = timeString.trim().match(/(\d\d)[:.]?(\d\d)/);
+  /**
+   * 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);
+
+  /**
+   * 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]))?/);
+
+  /**
+   * Convert `2:34:56 pm` down to `23456`
+   */
   const num = timeString.replace(/[^0-9]/g, '');
+  const includesSeconds = time && time[1] !== undefined && time[2] !== undefined && time[3] !== undefined || time24hr && time24hr[1] !== undefined && time24hr[2] !== undefined && time24hr[4] !== undefined;
   if (!time && !time24hr) {
     return false;
   }
   if (time && !time[1]) {
     return false;
   }
-  if (num.length > 4) {
+  if (num.length > 6) {
+    return false;
+  }
+  if (num.length > 4 && !includesSeconds) {
     return false;
   }
   if (num.length === 2 && parseInt(num, 10) > 12) {
@@ -31,7 +46,7 @@ export function isValid(timeString) {
   return true;
 }
 export function removeSpacer(time) {
-  return time.replace(/[:.]/, '');
+  return time.replace(/[:.]/g, '');
 }
 export function formatSemi24(time) {
   if (time.length === 1) {
@@ -40,7 +55,7 @@ export function formatSemi24(time) {
   if (time.length === 2) {
     return `${time}00`;
   }
-  if (time.length === 3) {
+  if (time.length === 3 || time.length === 5) {
     return `0${time}`;
   }
   return time;
@@ -57,31 +72,34 @@ export function checkHour(hour, meridiem) {
   }
   return hour;
 }
-export function checkMinute(minute) {
-  if (minute > '59') {
+export function checkMinuteSecond(value) {
+  if (value > '59') {
     return null;
   }
-  return minute;
+  return value;
 }
 export function convertTo24hrTime(time) {
   const timeArray = time.toLowerCase().split(/(p|a)/i);
   const meridiem = timeArray[1];
   const semi24 = formatSemi24(timeArray[0].trim());
   const hour = checkHour(semi24.substring(0, 2), meridiem);
-  const minute = checkMinute(semi24.substring(2, 4));
+  const minute = checkMinuteSecond(semi24.substring(2, 4));
+  const seconds = semi24.length === 6 && checkMinuteSecond(semi24.substring(4, 6));
   if (!hour || !minute) {
     return null;
   }
   return {
     hour: parseInt(hour, 10),
-    minute: parseInt(minute, 10)
+    minute: parseInt(minute, 10),
+    seconds: parseInt(seconds || '0', 10) || 0
   };
 }
 export function assignToDate(time) {
   const dateTime = new Date();
   dateTime.setHours(time.hour);
   dateTime.setMinutes(time.minute);
-  dateTime.setSeconds(0, 0);
+  // milliseconds is not supported
+  dateTime.setSeconds(time.seconds || 0, 0);
   return dateTime;
 }
 export default function (time) {

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

@@ -30,7 +30,7 @@ import FixedLayer from '../internal/fixed-layer';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.10.5";
+var packageVersion = "13.0.0";
 function getValidDate(iso) {
   var date = parseISO(iso);
   return isValid(date) ? {

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

@@ -25,7 +25,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.10.5";
+var packageVersion = "13.0.0";
 var isInvalidBorderStyles = css({
   borderColor: "var(--ds-border-danger, ".concat(R400, ")")
 });

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

@@ -29,7 +29,7 @@ import parseTime from '../internal/parse-time';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.10.5";
+var packageVersion = "13.0.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -130,7 +130,9 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           return; // do nothing, the main validation should happen in the form
         }
 
-        var formattedValue = format(sanitizedInput, 'HH:mm') || '';
+        var includesSeconds = !!(_timeFormat2 && /[:.]?(s|ss)/.test(_timeFormat2));
+        var formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
+        var formattedValue = format(sanitizedInput, formatFormat) || '';
         _this.setState({
           value: formattedValue
         });

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

@@ -13,16 +13,31 @@ var map24 = {
   '11': '23'
 };
 export function isValid(timeString) {
-  var time = timeString.trim().match(/(\d+)(?::(\d\d))?\s*(a|p)?/i);
-  var time24hr = timeString.trim().match(/(\d\d)[:.]?(\d\d)/);
+  /**
+   * 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);
+
+  /**
+   * 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]))?/);
+
+  /**
+   * Convert `2:34:56 pm` down to `23456`
+   */
   var num = timeString.replace(/[^0-9]/g, '');
+  var includesSeconds = time && time[1] !== undefined && time[2] !== undefined && time[3] !== undefined || time24hr && time24hr[1] !== undefined && time24hr[2] !== undefined && time24hr[4] !== undefined;
   if (!time && !time24hr) {
     return false;
   }
   if (time && !time[1]) {
     return false;
   }
-  if (num.length > 4) {
+  if (num.length > 6) {
+    return false;
+  }
+  if (num.length > 4 && !includesSeconds) {
     return false;
   }
   if (num.length === 2 && parseInt(num, 10) > 12) {
@@ -31,7 +46,7 @@ export function isValid(timeString) {
   return true;
 }
 export function removeSpacer(time) {
-  return time.replace(/[:.]/, '');
+  return time.replace(/[:.]/g, '');
 }
 export function formatSemi24(time) {
   if (time.length === 1) {
@@ -40,7 +55,7 @@ export function formatSemi24(time) {
   if (time.length === 2) {
     return "".concat(time, "00");
   }
-  if (time.length === 3) {
+  if (time.length === 3 || time.length === 5) {
     return "0".concat(time);
   }
   return time;
@@ -57,31 +72,34 @@ export function checkHour(hour, meridiem) {
   }
   return hour;
 }
-export function checkMinute(minute) {
-  if (minute > '59') {
+export function checkMinuteSecond(value) {
+  if (value > '59') {
     return null;
   }
-  return minute;
+  return value;
 }
 export function convertTo24hrTime(time) {
   var timeArray = time.toLowerCase().split(/(p|a)/i);
   var meridiem = timeArray[1];
   var semi24 = formatSemi24(timeArray[0].trim());
   var hour = checkHour(semi24.substring(0, 2), meridiem);
-  var minute = checkMinute(semi24.substring(2, 4));
+  var minute = checkMinuteSecond(semi24.substring(2, 4));
+  var seconds = semi24.length === 6 && checkMinuteSecond(semi24.substring(4, 6));
   if (!hour || !minute) {
     return null;
   }
   return {
     hour: parseInt(hour, 10),
-    minute: parseInt(minute, 10)
+    minute: parseInt(minute, 10),
+    seconds: parseInt(seconds || '0', 10) || 0
   };
 }
 export function assignToDate(time) {
   var dateTime = new Date();
   dateTime.setHours(time.hour);
   dateTime.setMinutes(time.minute);
-  dateTime.setSeconds(0, 0);
+  // milliseconds is not supported
+  dateTime.setSeconds(time.seconds || 0, 0);
   return dateTime;
 }
 export default function (time) {

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

@@ -1,14 +1,14 @@
+type TimeObject = {
+    hour: number;
+    minute: number;
+    seconds: number;
+};
 export declare function isValid(timeString: string): boolean;
 export declare function removeSpacer(time: string): string;
 export declare function formatSemi24(time: string): string;
 export declare function checkHour(hour: string, meridiem: string): string | null;
-export declare function checkMinute(minute: string): string | null;
-export declare function convertTo24hrTime(time: string): {
-    hour: number;
-    minute: number;
-} | null;
-export declare function assignToDate(time: {
-    hour: number;
-    minute: number;
-}): Date;
+export declare function checkMinuteSecond(value: string): string | null;
+export declare function convertTo24hrTime(time: string): TimeObject | null;
+export declare function assignToDate(time: TimeObject): Date;
 export default function (time: string): string | Date;
+export {};

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

@@ -1,14 +1,14 @@
+type TimeObject = {
+    hour: number;
+    minute: number;
+    seconds: number;
+};
 export declare function isValid(timeString: string): boolean;
 export declare function removeSpacer(time: string): string;
 export declare function formatSemi24(time: string): string;
 export declare function checkHour(hour: string, meridiem: string): string | null;
-export declare function checkMinute(minute: string): string | null;
-export declare function convertTo24hrTime(time: string): {
-    hour: number;
-    minute: number;
-} | null;
-export declare function assignToDate(time: {
-    hour: number;
-    minute: number;
-}): Date;
+export declare function checkMinuteSecond(value: string): string | null;
+export declare function convertTo24hrTime(time: string): TimeObject | null;
+export declare function assignToDate(time: TimeObject): Date;
 export default function (time: string): string | Date;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "12.10.5",
+  "version": "13.0.0",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,12 +35,12 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/calendar": "^14.0.0",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/icon": "^22.0.0",
     "@atlaskit/layering": "^0.2.0",
     "@atlaskit/locale": "^2.6.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
-    "@atlaskit/select": "^16.7.0",
+    "@atlaskit/select": "^17.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
@@ -54,7 +54,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/button": "^16.13.0",
+    "@atlaskit/button": "^16.16.0",
     "@atlaskit/docs": "*",
     "@atlaskit/form": "^9.0.0",
     "@atlaskit/modal-dialog": "^12.8.0",
@@ -63,7 +63,7 @@
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^5.6.0",
-    "@atlaskit/toggle": "^12.6.0",
+    "@atlaskit/toggle": "^13.0.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",