@atlaskit/datetime-picker 17.6.5 → 17.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/components/date-picker.js +17 -12
  3. package/dist/cjs/components/date-time-picker-class.js +1 -1
  4. package/dist/cjs/components/date-time-picker-fc.js +472 -8
  5. package/dist/cjs/components/time-picker.js +1 -1
  6. package/dist/cjs/internal/convert-to24hr-time.js +66 -0
  7. package/dist/cjs/internal/format-date.js +39 -0
  8. package/dist/cjs/internal/{date-picker-migration.js → get-parsed-iso.js} +1 -45
  9. package/dist/cjs/internal/get-placeholder.js +32 -0
  10. package/dist/cjs/internal/get-safe-calendar-value.js +18 -0
  11. package/dist/cjs/internal/get-short-iso-string.js +13 -0
  12. package/dist/cjs/internal/is-date-disabled.js +29 -0
  13. package/dist/cjs/internal/is-valid.js +39 -0
  14. package/dist/cjs/internal/parse-date.js +31 -20
  15. package/dist/cjs/internal/parse-time.js +6 -102
  16. package/dist/cjs/internal/remove-spacer.js +9 -0
  17. package/dist/es2019/components/date-picker.js +8 -3
  18. package/dist/es2019/components/date-time-picker-class.js +1 -1
  19. package/dist/es2019/components/date-time-picker-fc.js +454 -5
  20. package/dist/es2019/components/time-picker.js +1 -1
  21. package/dist/es2019/internal/convert-to24hr-time.js +60 -0
  22. package/dist/es2019/internal/format-date.js +34 -0
  23. package/dist/es2019/internal/{date-picker-migration.js → get-parsed-iso.js} +2 -54
  24. package/dist/es2019/internal/get-placeholder.js +28 -0
  25. package/dist/es2019/internal/get-safe-calendar-value.js +11 -0
  26. package/dist/es2019/internal/get-short-iso-string.js +6 -0
  27. package/dist/es2019/internal/is-date-disabled.js +25 -0
  28. package/dist/es2019/internal/is-valid.js +33 -0
  29. package/dist/es2019/internal/parse-date.js +33 -18
  30. package/dist/es2019/internal/parse-time.js +3 -96
  31. package/dist/es2019/internal/remove-spacer.js +3 -0
  32. package/dist/esm/components/date-picker.js +8 -3
  33. package/dist/esm/components/date-time-picker-class.js +1 -1
  34. package/dist/esm/components/date-time-picker-fc.js +471 -7
  35. package/dist/esm/components/time-picker.js +1 -1
  36. package/dist/esm/internal/convert-to24hr-time.js +60 -0
  37. package/dist/esm/internal/format-date.js +32 -0
  38. package/dist/esm/internal/{date-picker-migration.js → get-parsed-iso.js} +2 -46
  39. package/dist/esm/internal/get-placeholder.js +26 -0
  40. package/dist/esm/internal/get-safe-calendar-value.js +11 -0
  41. package/dist/esm/internal/get-short-iso-string.js +6 -0
  42. package/dist/esm/internal/is-date-disabled.js +23 -0
  43. package/dist/esm/internal/is-valid.js +33 -0
  44. package/dist/esm/internal/parse-date.js +31 -18
  45. package/dist/esm/internal/parse-time.js +3 -96
  46. package/dist/esm/internal/remove-spacer.js +3 -0
  47. package/dist/types/components/date-time-picker-fc.d.ts +6 -2
  48. package/dist/types/internal/convert-to24hr-time.d.ts +7 -0
  49. package/dist/types/internal/{date-picker-migration.d.ts → format-date.d.ts} +0 -28
  50. package/dist/types/internal/get-parsed-iso.d.ts +20 -0
  51. package/dist/types/internal/get-placeholder.d.ts +22 -0
  52. package/dist/types/internal/get-safe-calendar-value.d.ts +1 -0
  53. package/dist/types/internal/get-short-iso-string.d.ts +1 -0
  54. package/dist/types/internal/is-date-disabled.d.ts +20 -0
  55. package/dist/types/internal/is-valid.d.ts +1 -0
  56. package/dist/types/internal/parse-date.d.ts +26 -5
  57. package/dist/types/internal/parse-time.d.ts +0 -9
  58. package/dist/types/internal/remove-spacer.d.ts +1 -0
  59. package/dist/types-ts4.5/components/date-time-picker-fc.d.ts +6 -2
  60. package/dist/types-ts4.5/internal/convert-to24hr-time.d.ts +7 -0
  61. package/dist/types-ts4.5/internal/{date-picker-migration.d.ts → format-date.d.ts} +0 -28
  62. package/dist/types-ts4.5/internal/get-parsed-iso.d.ts +20 -0
  63. package/dist/types-ts4.5/internal/get-placeholder.d.ts +22 -0
  64. package/dist/types-ts4.5/internal/get-safe-calendar-value.d.ts +1 -0
  65. package/dist/types-ts4.5/internal/get-short-iso-string.d.ts +1 -0
  66. package/dist/types-ts4.5/internal/is-date-disabled.d.ts +20 -0
  67. package/dist/types-ts4.5/internal/is-valid.d.ts +1 -0
  68. package/dist/types-ts4.5/internal/parse-date.d.ts +26 -5
  69. package/dist/types-ts4.5/internal/parse-time.d.ts +0 -9
  70. package/dist/types-ts4.5/internal/remove-spacer.d.ts +1 -0
  71. package/package.json +8 -11
  72. package/dist/cjs/components/date-time-picker-fc-new.js +0 -479
  73. package/dist/cjs/components/date-time-picker-fc-old.js +0 -370
  74. package/dist/es2019/components/date-time-picker-fc-new.js +0 -456
  75. package/dist/es2019/components/date-time-picker-fc-old.compiled.css +0 -6
  76. package/dist/es2019/components/date-time-picker-fc-old.js +0 -336
  77. package/dist/esm/components/date-time-picker-fc-new.compiled.css +0 -6
  78. package/dist/esm/components/date-time-picker-fc-new.js +0 -473
  79. package/dist/esm/components/date-time-picker-fc-old.compiled.css +0 -6
  80. package/dist/esm/components/date-time-picker-fc-old.js +0 -364
  81. package/dist/types/components/date-time-picker-fc-new.d.ts +0 -6
  82. package/dist/types/components/date-time-picker-fc-old.d.ts +0 -6
  83. package/dist/types-ts4.5/components/date-time-picker-fc-new.d.ts +0 -6
  84. package/dist/types-ts4.5/components/date-time-picker-fc-old.d.ts +0 -6
  85. /package/dist/cjs/components/{date-time-picker-fc-new.compiled.css → date-time-picker-fc.compiled.css} +0 -0
  86. /package/dist/{cjs/components/date-time-picker-fc-old.compiled.css → es2019/components/date-time-picker-fc.compiled.css} +0 -0
  87. /package/dist/{es2019/components/date-time-picker-fc-new.compiled.css → esm/components/date-time-picker-fc.compiled.css} +0 -0
@@ -1,7 +1,74 @@
1
- import { fg } from '@atlaskit/platform-feature-flags';
2
- import { componentWithCondition } from '../internal/ff-component';
3
- import DateTimePickerNew from './date-time-picker-fc-new';
4
- import DateTimePickerOld from './date-time-picker-fc-old';
1
+ /* date-time-picker-fc.tsx generated by @compiled/babel-plugin v0.39.1 */
2
+ import _extends from "@babel/runtime/helpers/extends";
3
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
6
+ var _excluded = ["selectProps"],
7
+ _excluded2 = ["selectProps"];
8
+ import "./date-time-picker-fc.compiled.css";
9
+ import { ax, ix } from "@compiled/react/runtime";
10
+ 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; }
11
+ 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; }
12
+ /// <reference types="node" />
13
+ // for typing `process`
14
+
15
+ import React, { forwardRef, useCallback, useEffect, useReducer, useState } from 'react';
16
+
17
+ // oxlint-disable-next-line @atlassian/no-restricted-imports
18
+ import { format, isValid, parseISO } from 'date-fns';
19
+ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
20
+ import { IconButton } from '@atlaskit/button/new';
21
+ import SelectClearIcon from '@atlaskit/icon/core/cross-circle';
22
+ import { Box, Inline } from '@atlaskit/primitives/compiled';
23
+ import { mergeStyles } from '@atlaskit/select';
24
+ import { formatDateTimeZoneIntoIso } from '../internal';
25
+ import { DateTimePickerContainer } from '../internal/date-time-picker-container';
26
+ import { convertTokens } from '../internal/parse-tokens';
27
+ import DatePicker from './date-picker';
28
+ import TimePicker from './time-picker';
29
+ var packageName = "@atlaskit/datetime-picker";
30
+ var packageVersion = "0.0.0-development";
31
+ var analyticsAttributes = {
32
+ componentName: 'dateTimePicker',
33
+ packageName: packageName,
34
+ packageVersion: packageVersion
35
+ };
36
+ var compiledStyles = {
37
+ datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
38
+ timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
39
+ iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
40
+ };
41
+
42
+ // react-select overrides (via @atlaskit/select).
43
+ var styles = {
44
+ control: function control(style) {
45
+ return _objectSpread(_objectSpread({}, style), {}, {
46
+ backgroundColor: 'transparent',
47
+ border: 2,
48
+ borderRadius: 0,
49
+ paddingLeft: 0,
50
+ ':hover': {
51
+ backgroundColor: 'transparent',
52
+ cursor: 'inherit'
53
+ }
54
+ });
55
+ }
56
+ };
57
+
58
+ /**
59
+ * Two action types keep the reducer focused:
60
+ *
61
+ * - APPLY: used by user-interaction handlers. The handler computes the full
62
+ * next state (including the new ISO value) and applies it atomically. This
63
+ * guarantees a single re-render with no cascades regardless of React version.
64
+ *
65
+ * - SET_VALUE: used by the `providedValue` prop effect. The reducer owns all
66
+ * parsing logic for external value changes, including the empty-string case
67
+ * that the previous useState approach missed.
68
+ */
69
+
70
+ export var datePickerDefaultAriaLabel = 'Date';
71
+ export var timePickerDefaultAriaLabel = 'Time';
5
72
 
6
73
  /**
7
74
  * __Date time picker__
@@ -12,6 +79,403 @@ import DateTimePickerOld from './date-time-picker-fc-old';
12
79
  * - [Code](https://atlassian.design/components/datetime-picker/code)
13
80
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
14
81
  */
15
- export default componentWithCondition(function () {
16
- return fg('dst-a11y_fix-dtp-value-calculation');
17
- }, DateTimePickerNew, DateTimePickerOld);
82
+ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
83
+ var ariaDescribedBy = _ref2['aria-describedby'],
84
+ _ref2$appearance = _ref2.appearance,
85
+ appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
86
+ _ref2$autoFocus = _ref2.autoFocus,
87
+ autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
88
+ _ref2$clearControlLab = _ref2.clearControlLabel,
89
+ clearControlLabel = _ref2$clearControlLab === void 0 ? 'clear' : _ref2$clearControlLab,
90
+ _ref2$datePickerProps = _ref2.datePickerProps,
91
+ datePickerPropsWithSelectProps = _ref2$datePickerProps === void 0 ? {} : _ref2$datePickerProps,
92
+ _ref2$defaultValue = _ref2.defaultValue,
93
+ defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
94
+ _ref2$id = _ref2.id,
95
+ id = _ref2$id === void 0 ? '' : _ref2$id,
96
+ _ref2$innerProps = _ref2.innerProps,
97
+ innerProps = _ref2$innerProps === void 0 ? {} : _ref2$innerProps,
98
+ _ref2$isDisabled = _ref2.isDisabled,
99
+ isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
100
+ _ref2$isInvalid = _ref2.isInvalid,
101
+ isInvalid = _ref2$isInvalid === void 0 ? false : _ref2$isInvalid,
102
+ _ref2$isRequired = _ref2.isRequired,
103
+ isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired,
104
+ _ref2$name = _ref2.name,
105
+ name = _ref2$name === void 0 ? '' : _ref2$name,
106
+ _ref2$onBlur = _ref2.onBlur,
107
+ onBlur = _ref2$onBlur === void 0 ? function (_event) {} : _ref2$onBlur,
108
+ _ref2$onChange = _ref2.onChange,
109
+ onChangeProp = _ref2$onChange === void 0 ? function (_value) {} : _ref2$onChange,
110
+ _ref2$onFocus = _ref2.onFocus,
111
+ onFocus = _ref2$onFocus === void 0 ? function (_event) {} : _ref2$onFocus,
112
+ providedParseValue = _ref2.parseValue,
113
+ _ref2$spacing = _ref2.spacing,
114
+ spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
115
+ _ref2$locale = _ref2.locale,
116
+ locale = _ref2$locale === void 0 ? 'en-US' : _ref2$locale,
117
+ testId = _ref2.testId,
118
+ _ref2$timePickerProps = _ref2.timePickerProps,
119
+ timePickerPropsWithSelectProps = _ref2$timePickerProps === void 0 ? {} : _ref2$timePickerProps,
120
+ providedValue = _ref2.value;
121
+ var _useState = useState(false),
122
+ _useState2 = _slicedToArray(_useState, 2),
123
+ isFocused = _useState2[0],
124
+ setIsFocused = _useState2[1];
125
+
126
+ /**
127
+ * Defined inside the component so the reducer closes over `providedParseValue`
128
+ * without needing to smuggle it through every action payload. React always
129
+ * calls the reducer from the latest render, so stale-closure is not a concern.
130
+ */
131
+ var reducer = function reducer(state, action) {
132
+ switch (action.type) {
133
+ case 'APPLY':
134
+ return action.payload;
135
+ case 'SET_VALUE':
136
+ {
137
+ var newValue = action.payload;
138
+
139
+ // Explicit empty-string handling: clear all sub-fields so the date
140
+ // and time pickers visually reset when a controlled value is cleared.
141
+ if (!newValue) {
142
+ return {
143
+ value: '',
144
+ dateValue: '',
145
+ timeValue: '',
146
+ zoneValue: ''
147
+ };
148
+ }
149
+ if (providedParseValue) {
150
+ var _parsed = providedParseValue(newValue, state.dateValue, state.timeValue, state.zoneValue);
151
+ return _parsed ? _objectSpread({
152
+ value: newValue
153
+ }, _parsed) : {
154
+ value: newValue,
155
+ dateValue: state.dateValue,
156
+ timeValue: state.timeValue,
157
+ zoneValue: state.zoneValue
158
+ };
159
+ }
160
+ var parsed = parseISO(newValue);
161
+ return isValid(parsed) ? {
162
+ value: newValue,
163
+ dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
164
+ timeValue: format(parsed, convertTokens('HH:mm')),
165
+ zoneValue: format(parsed, convertTokens('ZZ'))
166
+ } : {
167
+ value: newValue,
168
+ dateValue: '',
169
+ timeValue: '',
170
+ zoneValue: ''
171
+ };
172
+ }
173
+ default:
174
+ return state;
175
+ }
176
+ };
177
+ var _useReducer = useReducer(reducer, null, function () {
178
+ var initialValue = providedValue || defaultValue || '';
179
+ var initialDate = (datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '';
180
+ var initialTime = (timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '';
181
+ if (!initialValue) {
182
+ return {
183
+ value: '',
184
+ dateValue: initialDate,
185
+ timeValue: initialTime,
186
+ zoneValue: ''
187
+ };
188
+ }
189
+ if (providedParseValue) {
190
+ var _parsed2 = providedParseValue(initialValue, initialDate, initialTime, '');
191
+ return _parsed2 ? _objectSpread({
192
+ value: initialValue
193
+ }, _parsed2) : {
194
+ value: initialValue,
195
+ dateValue: initialDate,
196
+ timeValue: initialTime,
197
+ zoneValue: ''
198
+ };
199
+ }
200
+ var parsed = parseISO(initialValue);
201
+ return isValid(parsed) ? {
202
+ value: initialValue,
203
+ dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
204
+ timeValue: format(parsed, convertTokens('HH:mm')),
205
+ zoneValue: format(parsed, convertTokens('ZZ'))
206
+ } : {
207
+ value: initialValue,
208
+ dateValue: initialDate,
209
+ timeValue: initialTime,
210
+ zoneValue: ''
211
+ };
212
+ }),
213
+ _useReducer2 = _slicedToArray(_useReducer, 2),
214
+ dtState = _useReducer2[0],
215
+ dispatch = _useReducer2[1];
216
+ useEffect(function () {
217
+ if (providedValue !== undefined) {
218
+ dispatch({
219
+ type: 'SET_VALUE',
220
+ payload: providedValue
221
+ });
222
+ }
223
+ // eslint-disable-next-line react-hooks/exhaustive-deps
224
+ }, [providedValue]);
225
+ var parseValue = useCallback(function (value, providedDateValue, providedTimeValue, providedZoneValue) {
226
+ if (providedParseValue) {
227
+ var parsedFromFn = providedParseValue(value, providedDateValue, providedTimeValue, providedZoneValue);
228
+ // This handles cases found in Jira where the parse function actually does
229
+ // nothing and returns undefined. The previous `getSafeState` function
230
+ // just spread the values over the state, but if it returned `undefined`,
231
+ // it would just rely on the previous state values. Considering this is
232
+ // what is input to this function anyway, this is a safe way to handle
233
+ // this, colocate the behavior, and not rely on `getSafeState`.
234
+ return parsedFromFn || {
235
+ dateValue: providedDateValue,
236
+ timeValue: providedTimeValue,
237
+ zoneValue: providedZoneValue
238
+ };
239
+ }
240
+ var parsed = parseISO(value);
241
+ return isValid(parsed) ? {
242
+ dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
243
+ timeValue: format(parsed, convertTokens('HH:mm')),
244
+ zoneValue: format(parsed, convertTokens('ZZ'))
245
+ } : {
246
+ dateValue: dtState.dateValue,
247
+ timeValue: dtState.timeValue,
248
+ zoneValue: dtState.zoneValue
249
+ };
250
+ }, [providedParseValue, dtState.dateValue, dtState.timeValue, dtState.zoneValue]);
251
+ var onDateBlur = function onDateBlur(event) {
252
+ setIsFocused(false);
253
+ onBlur(event);
254
+ if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onBlur) {
255
+ datePickerPropsWithSelectProps.onBlur(event);
256
+ }
257
+ };
258
+ var onTimeBlur = function onTimeBlur(event) {
259
+ setIsFocused(false);
260
+ onBlur(event);
261
+ if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onBlur) {
262
+ timePickerPropsWithSelectProps.onBlur(event);
263
+ }
264
+ };
265
+ var onDateFocus = function onDateFocus(event) {
266
+ setIsFocused(false);
267
+ onFocus(event);
268
+ if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onFocus) {
269
+ datePickerPropsWithSelectProps.onFocus(event);
270
+ }
271
+ };
272
+ var onTimeFocus = function onTimeFocus(event) {
273
+ setIsFocused(false);
274
+ onFocus(event);
275
+ if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onFocus) {
276
+ timePickerPropsWithSelectProps.onFocus(event);
277
+ }
278
+ };
279
+ var onDateChange = function onDateChange(newDateValue) {
280
+ var parsedValues = parseValue(dtState.value, newDateValue, dtState.timeValue, dtState.zoneValue);
281
+ onValueChange({
282
+ providedDateValue: newDateValue,
283
+ providedTimeValue: parsedValues.timeValue,
284
+ providedZoneValue: parsedValues.zoneValue
285
+ });
286
+ if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
287
+ datePickerPropsWithSelectProps.onChange(newDateValue);
288
+ }
289
+ };
290
+ var onTimeChange = function onTimeChange(newTimeValue) {
291
+ var parsedValues = parseValue(dtState.value, dtState.dateValue, newTimeValue, dtState.zoneValue);
292
+ onValueChange({
293
+ providedDateValue: parsedValues.dateValue,
294
+ providedTimeValue: newTimeValue,
295
+ providedZoneValue: parsedValues.zoneValue
296
+ });
297
+ if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
298
+ timePickerPropsWithSelectProps.onChange(newTimeValue);
299
+ }
300
+ };
301
+ var onClear = function onClear() {
302
+ var parsedValues = parseValue(dtState.value, dtState.dateValue, dtState.timeValue, dtState.zoneValue);
303
+ onValueChange({
304
+ providedDateValue: '',
305
+ providedTimeValue: '',
306
+ providedZoneValue: parsedValues.zoneValue
307
+ });
308
+ if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
309
+ datePickerPropsWithSelectProps.onChange('');
310
+ }
311
+ if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
312
+ timePickerPropsWithSelectProps.onChange('');
313
+ }
314
+ };
315
+ var onChangePropWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
316
+ fn: onChangeProp,
317
+ action: 'selectedDate',
318
+ actionSubject: 'datePicker'
319
+ }, analyticsAttributes));
320
+ var onValueChange = function onValueChange(_ref3) {
321
+ var providedDateValue = _ref3.providedDateValue,
322
+ providedTimeValue = _ref3.providedTimeValue,
323
+ providedZoneValue = _ref3.providedZoneValue;
324
+ if (providedDateValue && providedTimeValue) {
325
+ var isoValue = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, providedZoneValue);
326
+ var _parseValue = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue),
327
+ parsedZone = _parseValue.zoneValue;
328
+ var valueWithValidZone = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, parsedZone);
329
+ dispatch({
330
+ type: 'APPLY',
331
+ payload: {
332
+ value: valueWithValidZone,
333
+ dateValue: providedDateValue,
334
+ timeValue: providedTimeValue,
335
+ zoneValue: parsedZone
336
+ }
337
+ });
338
+ onChangePropWithAnalytics(valueWithValidZone);
339
+ // If the date or time value was cleared when there is an existing datetime value, then clear the value.
340
+ } else if (dtState.value) {
341
+ dispatch({
342
+ type: 'APPLY',
343
+ payload: {
344
+ value: '',
345
+ dateValue: providedDateValue,
346
+ timeValue: providedTimeValue,
347
+ zoneValue: providedZoneValue
348
+ }
349
+ });
350
+ onChangePropWithAnalytics('');
351
+ } else {
352
+ dispatch({
353
+ type: 'APPLY',
354
+ payload: {
355
+ value: '',
356
+ dateValue: providedDateValue,
357
+ timeValue: providedTimeValue,
358
+ zoneValue: providedZoneValue
359
+ }
360
+ });
361
+ }
362
+ };
363
+ var datePickerSelectProps = datePickerPropsWithSelectProps.selectProps,
364
+ datePickerProps = _objectWithoutProperties(datePickerPropsWithSelectProps, _excluded);
365
+ var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
366
+ var datePickerLabel = datePickerProps.label || 'Date';
367
+ var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
368
+ styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
369
+ });
370
+ var timePickerSelectProps = timePickerPropsWithSelectProps.selectProps,
371
+ timePickerProps = _objectWithoutProperties(timePickerPropsWithSelectProps, _excluded2);
372
+ var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
373
+ var timePickerLabel = timePickerProps.label || 'Time';
374
+ var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
375
+ styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
376
+ });
377
+
378
+ // Render DateTimePicker's IconContainer when a value has been filled
379
+ // Don't use Date or TimePicker's because they can't be customised
380
+ var isClearable = Boolean(dtState.dateValue || dtState.timeValue);
381
+ return /*#__PURE__*/React.createElement(DateTimePickerContainer, {
382
+ appearance: appearance,
383
+ isDisabled: isDisabled,
384
+ isFocused: isFocused,
385
+ isInvalid: isInvalid,
386
+ testId: testId,
387
+ innerProps: innerProps
388
+ }, /*#__PURE__*/React.createElement("input", {
389
+ name: name,
390
+ type: "hidden",
391
+ value: dtState.value,
392
+ "data-testid": testId && "".concat(testId, "--input")
393
+ }), /*#__PURE__*/React.createElement(Box, {
394
+ xcss: compiledStyles.datePickerContainerStyles
395
+ }, /*#__PURE__*/React.createElement(DatePicker, {
396
+ appearance: appearance,
397
+ "aria-describedby": datePickerAriaDescribedBy,
398
+ autoFocus: datePickerProps.autoFocus || autoFocus,
399
+ dateFormat: datePickerProps.dateFormat,
400
+ defaultIsOpen: datePickerProps.defaultIsOpen,
401
+ defaultValue: datePickerProps.defaultValue,
402
+ disabled: datePickerProps.disabled,
403
+ disabledDateFilter: datePickerProps.disabledDateFilter,
404
+ formatDisplayLabel: datePickerProps.formatDisplayLabel,
405
+ hideIcon: datePickerProps.hideIcon || true,
406
+ icon: datePickerProps.icon,
407
+ id: datePickerProps.id || id,
408
+ innerProps: datePickerProps.innerProps,
409
+ inputLabel: datePickerProps.inputLabel,
410
+ inputLabelId: datePickerProps.inputLabelId,
411
+ isDisabled: datePickerProps.isDisabled || isDisabled,
412
+ isInvalid: datePickerProps.isInvalid || isInvalid,
413
+ isOpen: datePickerProps.isOpen,
414
+ isRequired: datePickerProps.isRequired || isRequired,
415
+ label: datePickerLabel,
416
+ locale: datePickerProps.locale || locale,
417
+ maxDate: datePickerProps.maxDate,
418
+ minDate: datePickerProps.minDate,
419
+ name: datePickerProps.name,
420
+ nextMonthLabel: datePickerProps.nextMonthLabel,
421
+ onBlur: onDateBlur,
422
+ onChange: onDateChange,
423
+ onFocus: onDateFocus,
424
+ openCalendarLabel: datePickerProps.openCalendarLabel,
425
+ parseInputValue: datePickerProps.parseInputValue,
426
+ placeholder: datePickerProps.placeholder,
427
+ previousMonthLabel: datePickerProps.previousMonthLabel,
428
+ selectProps: mergedDatePickerSelectProps,
429
+ shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
430
+ spacing: datePickerProps.spacing || spacing,
431
+ testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
432
+ value: dtState.dateValue,
433
+ weekStartDay: datePickerProps.weekStartDay
434
+ })), /*#__PURE__*/React.createElement(Box, {
435
+ xcss: compiledStyles.timePickerContainerStyles
436
+ }, /*#__PURE__*/React.createElement(TimePicker, {
437
+ appearance: timePickerProps.appearance || appearance,
438
+ "aria-describedby": timePickerAriaDescribedBy,
439
+ autoFocus: timePickerProps.autoFocus,
440
+ defaultIsOpen: timePickerProps.defaultIsOpen,
441
+ defaultValue: timePickerProps.defaultValue,
442
+ formatDisplayLabel: timePickerProps.formatDisplayLabel,
443
+ hideIcon: timePickerProps.hideIcon || true,
444
+ id: timePickerProps.id,
445
+ innerProps: timePickerProps.innerProps,
446
+ isDisabled: timePickerProps.isDisabled || isDisabled,
447
+ isInvalid: timePickerProps.isInvalid || isInvalid,
448
+ isOpen: timePickerProps.isOpen,
449
+ isRequired: timePickerProps.isRequired || isRequired,
450
+ label: timePickerLabel,
451
+ locale: timePickerProps.locale || locale,
452
+ name: timePickerProps.name,
453
+ onBlur: onTimeBlur,
454
+ onChange: onTimeChange,
455
+ onFocus: onTimeFocus,
456
+ parseInputValue: timePickerProps.parseInputValue,
457
+ placeholder: timePickerProps.placeholder,
458
+ selectProps: mergedTimePickerSelectProps,
459
+ spacing: timePickerProps.spacing || spacing,
460
+ testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
461
+ timeFormat: timePickerProps.timeFormat,
462
+ timeIsEditable: timePickerProps.timeIsEditable,
463
+ times: timePickerProps.times,
464
+ value: dtState.timeValue
465
+ })), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(Inline, {
466
+ xcss: compiledStyles.iconContainerStyles
467
+ }, /*#__PURE__*/React.createElement(IconButton, {
468
+ appearance: "subtle",
469
+ label: clearControlLabel,
470
+ icon: function icon(iconProps) {
471
+ return /*#__PURE__*/React.createElement(SelectClearIcon, _extends({}, iconProps, {
472
+ color: "var(--ds-text-subtlest, #6B6E76)",
473
+ size: "small"
474
+ }));
475
+ },
476
+ onClick: onClear,
477
+ testId: testId && "".concat(testId, "--icon--container"),
478
+ tabIndex: -1
479
+ })) : null);
480
+ });
481
+ export default DateTimePicker;
@@ -19,7 +19,7 @@ import parseTime from '../internal/parse-time';
19
19
  import { convertTokens } from '../internal/parse-tokens';
20
20
  import { makeSingleValue } from '../internal/single-value';
21
21
  var packageName = "@atlaskit/datetime-picker";
22
- var packageVersion = "17.6.5";
22
+ var packageVersion = "0.0.0-development";
23
23
  var menuStyles = {
24
24
  /* Need to remove default absolute positioning as that causes issues with position fixed */
25
25
  position: 'static',
@@ -0,0 +1,60 @@
1
+ var map24 = {
2
+ '12': '12',
3
+ '01': '13',
4
+ '02': '14',
5
+ '03': '15',
6
+ '04': '16',
7
+ '05': '17',
8
+ '06': '18',
9
+ '07': '19',
10
+ '08': '20',
11
+ '09': '21',
12
+ '10': '22',
13
+ '11': '23'
14
+ };
15
+ function formatSemi24(time) {
16
+ if (time.length === 1) {
17
+ return "0".concat(time, "00");
18
+ }
19
+ if (time.length === 2) {
20
+ return "".concat(time, "00");
21
+ }
22
+ if (time.length === 3 || time.length === 5) {
23
+ return "0".concat(time);
24
+ }
25
+ return time;
26
+ }
27
+ function checkHour(hour, meridiem) {
28
+ if (hour > '24') {
29
+ return null;
30
+ }
31
+ if (hour === '12' && meridiem === 'a') {
32
+ return '00';
33
+ }
34
+ if (hour < '12' && meridiem === 'p') {
35
+ return map24[hour];
36
+ }
37
+ return hour;
38
+ }
39
+ function checkMinuteSecond(value) {
40
+ if (value > '59') {
41
+ return null;
42
+ }
43
+ return value;
44
+ }
45
+ export function convertTo24hrTime(time) {
46
+ var timeArray = time.toLowerCase().split(/(p|a)/i);
47
+ var meridiem = timeArray[1];
48
+ var semi24 = formatSemi24(timeArray[0].trim());
49
+ var hour = checkHour(semi24.substring(0, 2), meridiem);
50
+ var minute = checkMinuteSecond(semi24.substring(2, 4));
51
+ var seconds = semi24.length === 6 && checkMinuteSecond(semi24.substring(4, 6));
52
+ if (!hour || !minute) {
53
+ return null;
54
+ }
55
+ return {
56
+ hour: parseInt(hour, 10),
57
+ minute: parseInt(minute, 10),
58
+ seconds: parseInt(seconds || '0', 10) || 0
59
+ };
60
+ }
@@ -0,0 +1,32 @@
1
+ /**
2
+ * Everything in this file is to smooth out the migration of the new date picker
3
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
4
+ * complete, all of these functions will ilkely be merged back into the date
5
+ * picker. Please do not pre-optimize and put these back into the date picker
6
+ * unless you are working on the DTP Refresh and you have a good reason to do
7
+ * so, thank you!
8
+ *
9
+ * All variables within the `di` objects are dependency injections. They should
10
+ * be read from within the component at the end of the day. But because we are
11
+ * extracting them, we have to inject them in every place manually. When we
12
+ * re-introduce them to the components, we can likely remove the `di` variables
13
+ * and instead use internal variables.
14
+ *
15
+ * If component _only_ has injected variables, it is fully internal and was
16
+ * broken out to be it's own function.
17
+ */
18
+
19
+ // oxlint-disable-next-line @atlassian/no-restricted-imports
20
+ import { format, parseISO } from 'date-fns';
21
+ import { convertTokens } from './parse-tokens';
22
+ import { defaultDateFormat } from './index';
23
+ export var formatDate = function formatDate(value, di) {
24
+ var formatDisplayLabel = di.formatDisplayLabel,
25
+ dateFormat = di.dateFormat,
26
+ l10n = di.l10n;
27
+ if (formatDisplayLabel) {
28
+ return formatDisplayLabel(value, dateFormat || defaultDateFormat);
29
+ }
30
+ var date = parseISO(value);
31
+ return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
32
+ };
@@ -18,13 +18,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
18
18
  */
19
19
 
20
20
  // oxlint-disable-next-line @atlassian/no-restricted-imports
21
- import { format, lastDayOfMonth, parseISO } from 'date-fns';
22
- import { convertTokens } from './parse-tokens';
23
- import { defaultDateFormat, padToTwo, placeholderDatetime } from './index';
24
- export var isDateDisabled = function isDateDisabled(date, di) {
25
- var disabled = di.disabled;
26
- return disabled.indexOf(date) > -1;
27
- };
21
+ import { lastDayOfMonth } from 'date-fns';
22
+ import { padToTwo } from './index';
28
23
  export var getParsedISO = function getParsedISO(di) {
29
24
  var iso = di.iso;
30
25
  var _iso$split = iso.split('-'),
@@ -44,43 +39,4 @@ export var getParsedISO = function getParsedISO(di) {
44
39
  newIso = "".concat(parsedYear, "-").concat(padToTwo(parsedMonth), "-").concat(padToTwo(parsedDate));
45
40
  }
46
41
  return newIso;
47
- };
48
-
49
- /**
50
- * There are two props that can change how the date is parsed.
51
- * The priority of props used is:
52
- * 1. `parseInputValue`
53
- * 2. `locale`
54
- */
55
- export var parseDate = function parseDate(date, di) {
56
- var parseInputValue = di.parseInputValue,
57
- dateFormat = di.dateFormat,
58
- l10n = di.l10n;
59
- if (parseInputValue) {
60
- return parseInputValue(date, dateFormat || defaultDateFormat);
61
- }
62
- return l10n.parseDate(date);
63
- };
64
-
65
- /**
66
- * There are multiple props that can change how the date is formatted.
67
- * The priority of props used is:
68
- * 1. `formatDisplayLabel`
69
- * 2. `dateFormat`
70
- * 3. `locale`
71
- */
72
- export var formatDate = function formatDate(value, di) {
73
- var formatDisplayLabel = di.formatDisplayLabel,
74
- dateFormat = di.dateFormat,
75
- l10n = di.l10n;
76
- if (formatDisplayLabel) {
77
- return formatDisplayLabel(value, dateFormat || defaultDateFormat);
78
- }
79
- var date = parseISO(value);
80
- return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
81
- };
82
- export var getPlaceholder = function getPlaceholder(di) {
83
- var placeholder = di.placeholder,
84
- l10n = di.l10n;
85
- return placeholder || l10n.formatDate(placeholderDatetime);
86
42
  };
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Everything in this file is to smooth out the migration of the new date picker
3
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
4
+ * complete, all of these functions will ilkely be merged back into the date
5
+ * picker. Please do not pre-optimize and put these back into the date picker
6
+ * unless you are working on the DTP Refresh and you have a good reason to do
7
+ * so, thank you!
8
+ *
9
+ * All variables within the `di` objects are dependency injections. They should
10
+ * be read from within the component at the end of the day. But because we are
11
+ * extracting them, we have to inject them in every place manually. When we
12
+ * re-introduce them to the components, we can likely remove the `di` variables
13
+ * and instead use internal variables.
14
+ *
15
+ * If component _only_ has injected variables, it is fully internal and was
16
+ * broken out to be it's own function.
17
+ */
18
+
19
+ // oxlint-disable-next-line @atlassian/no-restricted-imports
20
+
21
+ import { placeholderDatetime } from './index';
22
+ export var getPlaceholder = function getPlaceholder(di) {
23
+ var placeholder = di.placeholder,
24
+ l10n = di.l10n;
25
+ return placeholder || l10n.formatDate(placeholderDatetime);
26
+ };