@atlaskit/datetime-picker 18.2.4 → 18.3.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/datetime-picker
 
+## 18.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 18.3.0
+
+### Minor Changes
+
+- [`fa627e0fd7b58`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa627e0fd7b58) -
+  This is behind a flag `platform-dst-dp-parse-date-format`.
+
+  Parse typed dates with `dateFormat` via `date-fns` when set, so displayed labels re-parse without
+  a custom `parseInputValue`. This will not affect existing instances that already have a
+  `parseInputValue` and will honor provided `dateFormat` props for all entry methods, improving user
+  experience.
+
 ## 18.2.4
 
 ### Patch Changes

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

@@ -44,7 +44,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 = "18.2.3";
+var packageVersion = "18.3.0";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",

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

@@ -33,7 +33,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 = "18.2.3";
+var packageVersion = "18.3.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -30,7 +30,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 = "18.2.3";
+var packageVersion = "18.3.0";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

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

@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.parseDate = void 0;
+var _dateFns = require("date-fns");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _defaultDateFormat = require("./default-date-format");
+var _parseTokens = require("./parse-tokens");
 /**
  * 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
@@ -22,12 +25,17 @@ var _defaultDateFormat = require("./default-date-format");
  * If component _only_ has injected variables, it is fully internal and was
  * broken out to be it's own function.
  */
+// oxlint-disable-next-line @atlassian/no-restricted-imports
 
 /**
- * There are two props that can change how the date is parsed.
+ * There are props that can change how the date is parsed.
  * The priority of props used is:
  *   1. `parseInputValue`
- *   2. `locale`
+ *   2. `dateFormat` (when `platform-dst-dp-parse-date-format` is on)
+ *   3. `locale`
+ *
+ * `dateFormat` only wins when the input actually parses against it, otherwise
+ * `locale` parsing is used.
  */
 var parseDate = exports.parseDate = function parseDate(date, di) {
   var parseInputValue = di.parseInputValue,
@@ -36,5 +44,14 @@ var parseDate = exports.parseDate = function parseDate(date, di) {
   if (parseInputValue) {
     return parseInputValue(date, dateFormat || _defaultDateFormat.defaultDateFormat);
   }
+  if (dateFormat && (0, _fg.fg)('platform-dst-dp-parse-date-format')) {
+    // new Date(0) to make reference date deterministic
+    var parsed = (0, _dateFns.parse)(date, (0, _parseTokens.convertTokens)(dateFormat), new Date(0));
+    // `dateFormat` is a display format, so typed input does not always match
+    // it. Locale parsing stays as the fallback so those entries still work.
+    if ((0, _dateFns.isValid)(parsed)) {
+      return parsed;
+    }
+  }
   return l10n.parseDate(date);
 };

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

@@ -31,7 +31,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.2.3";
+const packageVersion = "18.3.0";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",

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

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

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

@@ -17,7 +17,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.2.3";
+const packageVersion = "18.3.0";
 const defaultTimeFormat = 'h:mma';
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

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

@@ -15,14 +15,21 @@
  * If component _only_ has injected variables, it is fully internal and was
  * broken out to be it's own function.
  */
-
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { isValid, parse } from 'date-fns';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { defaultDateFormat } from './default-date-format';
+import { convertTokens } from './parse-tokens';
 
 /**
- * There are two props that can change how the date is parsed.
+ * There are props that can change how the date is parsed.
  * The priority of props used is:
  *   1. `parseInputValue`
- *   2. `locale`
+ *   2. `dateFormat` (when `platform-dst-dp-parse-date-format` is on)
+ *   3. `locale`
+ *
+ * `dateFormat` only wins when the input actually parses against it, otherwise
+ * `locale` parsing is used.
  */
 export const parseDate = (date, di) => {
   const {
@@ -33,5 +40,14 @@ export const parseDate = (date, di) => {
   if (parseInputValue) {
     return parseInputValue(date, dateFormat || defaultDateFormat);
   }
+  if (dateFormat && fg('platform-dst-dp-parse-date-format')) {
+    // new Date(0) to make reference date deterministic
+    const parsed = parse(date, convertTokens(dateFormat), new Date(0));
+    // `dateFormat` is a display format, so typed input does not always match
+    // it. Locale parsing stays as the fallback so those entries still work.
+    if (isValid(parsed)) {
+      return parsed;
+    }
+  }
   return l10n.parseDate(date);
 };

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

@@ -37,7 +37,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.2.3";
+var packageVersion = "18.3.0";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",

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

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

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

@@ -23,7 +23,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.2.3";
+var packageVersion = "18.3.0";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

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

@@ -15,14 +15,21 @@
  * If component _only_ has injected variables, it is fully internal and was
  * broken out to be it's own function.
  */
-
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { isValid, parse } from 'date-fns';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { defaultDateFormat } from './default-date-format';
+import { convertTokens } from './parse-tokens';
 
 /**
- * There are two props that can change how the date is parsed.
+ * There are props that can change how the date is parsed.
  * The priority of props used is:
  *   1. `parseInputValue`
- *   2. `locale`
+ *   2. `dateFormat` (when `platform-dst-dp-parse-date-format` is on)
+ *   3. `locale`
+ *
+ * `dateFormat` only wins when the input actually parses against it, otherwise
+ * `locale` parsing is used.
  */
 export var parseDate = function parseDate(date, di) {
   var parseInputValue = di.parseInputValue,
@@ -31,5 +38,14 @@ export var parseDate = function parseDate(date, di) {
   if (parseInputValue) {
     return parseInputValue(date, dateFormat || defaultDateFormat);
   }
+  if (dateFormat && fg('platform-dst-dp-parse-date-format')) {
+    // new Date(0) to make reference date deterministic
+    var parsed = parse(date, convertTokens(dateFormat), new Date(0));
+    // `dateFormat` is a display format, so typed input does not always match
+    // it. Locale parsing stays as the fallback so those entries still work.
+    if (isValid(parsed)) {
+      return parsed;
+    }
+  }
   return l10n.parseDate(date);
 };

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

@@ -1,26 +1,13 @@
-/**
- * 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';
 /**
- * There are two props that can change how the date is parsed.
+ * There are props that can change how the date is parsed.
  * The priority of props used is:
  *   1. `parseInputValue`
- *   2. `locale`
+ *   2. `dateFormat` (when `platform-dst-dp-parse-date-format` is on)
+ *   3. `locale`
+ *
+ * `dateFormat` only wins when the input actually parses against it, otherwise
+ * `locale` parsing is used.
  */
 export declare const parseDate: (date: string, di: {
     parseInputValue: ((date: string, dateFormat: string) => Date) | undefined;

package/dist/types/types.d.ts

@@ -184,16 +184,18 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
     openCalendarLabel?: string;
     /**
      * A function for parsing input characters and transforming them into a Date object.
-     * By default parses the date string based off the locale. Note that this does
-     * not affect how the resulting value is displayed in the input. Use the
-     * `dateFormat` or `formatDisplayLabel` prop to handle how the value is
-     * displayed.
+     * Overrides the default parser. By default, when `dateFormat` is set the input is
+     * parsed with that format via date-fns; otherwise the date string is parsed based
+     * off the locale. Note that this does not affect how the resulting value is
+     * displayed in the input. Use the `dateFormat` or `formatDisplayLabel` prop to
+     * handle how the value is displayed.
      */
     parseInputValue?: (date: string, dateFormat: string) => Date;
     /**
      * A function for formatting the date displayed in the input. By default composes together [`date-fns`'s parse method](https://date-fns.org/v1.29.0/docs/parse) and [`date-fns`'s format method](https://date-fns.org/v1.29.0/docs/format) to return a correctly formatted date string.
      *
-     * Note that this does not affect how the input is parsed. This must be done using the `parseInputValue` prop.
+     * Note that this does not affect how the input is parsed. Use `dateFormat` for
+     * default parsing of the display format, or `parseInputValue` for a custom parser.
      */
     formatDisplayLabel?: (value: string, dateFormat: string) => string;
     /**
@@ -233,9 +235,10 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
     hideIcon?: boolean;
     /**
      * Format the date with a string that is accepted by [date-fns's format
-     * function](https://date-fns.org/v1.29.0/docs/format). **This does not affect
-     * how the input is parsed.** This must be done using the `parseInputValue`
-     * prop.
+     * function](https://date-fns.org/v1.29.0/docs/format). When set, the default
+     * parser also uses this format (via date-fns) so displayed labels re-parse.
+     * Without `dateFormat`, parsing falls back to the locale. A custom
+     * `parseInputValue` overrides this default.
      *
      * Note that though we are using `date-fns` version 2, we use [the tokens from
      * `date-fns` version 1](https://date-fns.org/v1.30.1/docs/format) under the

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "18.2.4",
+	"version": "18.3.1",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,14 +40,14 @@
 		"@atlaskit/layering": "^5.0.0",
 		"@atlaskit/locale": "^5.0.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/popper": "^9.0.0",
+		"@atlaskit/popper": "^9.1.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/select": "^22.6.0",
-		"@atlaskit/tokens": "^16.4.0",
-		"@atlaskit/top-layer": "^3.1.0",
+		"@atlaskit/tokens": "^16.7.0",
+		"@atlaskit/top-layer": "^4.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^1.0.0",
+		"@compiled/react": "^1.0.2",
 		"date-fns": "^2.17.0"
 	},
 	"peerDependencies": {
@@ -57,10 +57,10 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/code": "^18.2.0",
+		"@atlaskit/code": "^19.0.0",
 		"@atlaskit/codemod-utils": "^5.0.0",
-		"@atlaskit/docs": "^12.1.0",
-		"@atlaskit/form": "^16.1.0",
+		"@atlaskit/docs": "^12.2.0",
+		"@atlaskit/form": "^17.0.0",
 		"@atlaskit/heading": "^7.0.0",
 		"@atlaskit/link": "^5.0.0",
 		"@atlaskit/modal-dialog": "^16.3.0",
@@ -69,6 +69,7 @@
 		"@atlaskit/section-message": "^10.0.0",
 		"@atlaskit/textfield": "^10.0.0",
 		"@atlaskit/toggle": "^17.1.0",
+		"@atlassian/feature-flags-test-utils": "^1.2.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
@@ -81,35 +82,15 @@
 		"react-dom": "^18.2.0",
 		"react-lorem-component": "^0.13.0"
 	},
-	"techstack": {
-		"@atlassian/frontend": {
-			"import-structure": "atlassian-conventions"
-		},
-		"@repo/internal": {
-			"dom-events": "use-bind-event-listener",
-			"design-system": "v1",
-			"styling": [
-				"compiled",
-				"static"
-			],
-			"ui-components": [
-				"primitives",
-				"lite-mode"
-			],
-			"analytics": "analytics-next",
-			"design-tokens": [
-				"color",
-				"spacing"
-			],
-			"deprecation": "no-deprecated-imports"
-		}
-	},
 	"platform-feature-flags": {
 		"platform-dst-top-layer": {
 			"type": "boolean"
 		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
+		},
+		"platform-dst-dp-parse-date-format": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/datetime-picker/"