@atlaskit/datetime-picker 15.0.2 → 15.1.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 (15) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/components/date-picker.js +1 -1
  3. package/dist/cjs/components/date-time-picker.js +78 -49
  4. package/dist/cjs/components/time-picker.js +1 -1
  5. package/dist/es2019/components/date-picker.js +1 -1
  6. package/dist/es2019/components/date-time-picker.js +52 -24
  7. package/dist/es2019/components/time-picker.js +1 -1
  8. package/dist/esm/components/date-picker.js +1 -1
  9. package/dist/esm/components/date-time-picker.js +78 -49
  10. package/dist/esm/components/time-picker.js +1 -1
  11. package/dist/types/components/date-time-picker.d.ts +5 -3
  12. package/dist/types/types.d.ts +4 -0
  13. package/dist/types-ts4.5/components/date-time-picker.d.ts +5 -3
  14. package/dist/types-ts4.5/types.d.ts +4 -0
  15. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/datetime-picker
2
2
 
3
+ ## 15.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#146815](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146815)
8
+ [`ef585df54488c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ef585df54488c) -
9
+ [ux] add clearButtonLabel prop in datetime-picker component
10
+
11
+ ## 15.0.3
12
+
13
+ ### Patch Changes
14
+
15
+ - [#146278](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146278)
16
+ [`c3cf99e129677`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c3cf99e129677) -
17
+ Make default value from inner pickers work correctly with datetime picker values.
18
+ - [#145891](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145891)
19
+ [`b4b387856090d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b4b387856090d) -
20
+ Ensure inner picker event blur and focus handlers don't interfere or replace internal logic.
21
+
3
22
  ## 15.0.2
4
23
 
5
24
  ### Patch Changes
package/dist/cjs/components/date-picker.js CHANGED
@@ -36,7 +36,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
36
36
  * @jsx jsx
37
37
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
38
38
  var packageName = "@atlaskit/datetime-picker";
39
- var packageVersion = "15.0.2";
39
+ var packageVersion = "15.1.0";
40
40
  var datePickerDefaultProps = {
41
41
  appearance: 'default',
42
42
  autoFocus: false,
package/dist/cjs/components/date-time-picker.js CHANGED
@@ -32,7 +32,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
32
32
  * @jsx jsx
33
33
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
34
34
  var packageName = "@atlaskit/datetime-picker";
35
- var packageVersion = "15.0.2";
35
+ var packageVersion = "15.1.0";
36
36
  // Make DatePicker 50% the width of DateTimePicker
37
37
  // If rendering an icon container, shrink the TimePicker
38
38
  var datePickerContainerStyles = (0, _react2.css)({
@@ -94,6 +94,7 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
94
94
  (0, _inherits2.default)(DateTimePickerComponent, _React$Component);
95
95
  var _super = _createSuper(DateTimePickerComponent);
96
96
  function DateTimePickerComponent() {
97
+ var _this$props$datePicke, _this$props$timePicke;
97
98
  var _this;
98
99
  (0, _classCallCheck2.default)(this, DateTimePickerComponent);
99
100
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -101,9 +102,9 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
101
102
  }
102
103
  _this = _super.call.apply(_super, [this].concat(args));
103
104
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
104
- dateValue: '',
105
+ dateValue: ((_this$props$datePicke = _this.props.datePickerProps) === null || _this$props$datePicke === void 0 ? void 0 : _this$props$datePicke.defaultValue) || '',
105
106
  isFocused: false,
106
- timeValue: '',
107
+ timeValue: ((_this$props$timePicke = _this.props.timePickerProps) === null || _this$props$timePicke === void 0 ? void 0 : _this$props$timePicke.defaultValue) || '',
107
108
  value: _this.props.defaultValue || '',
108
109
  zoneValue: ''
109
110
  });
@@ -116,56 +117,82 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
116
117
  var _this$props$value;
117
118
  return (_this$props$value = _this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : _this.state.value;
118
119
  });
119
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlur", function (event) {
120
- var _this$props$onBlur, _this$props;
120
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDateBlur", function (event) {
121
+ var _this$props$onBlur, _this$props, _this$props$datePicke2;
121
122
  _this.setState({
122
123
  isFocused: false
123
124
  });
124
125
  (_this$props$onBlur = (_this$props = _this.props).onBlur) === null || _this$props$onBlur === void 0 || _this$props$onBlur.call(_this$props, event);
126
+ if ((_this$props$datePicke2 = _this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onBlur) {
127
+ _this.props.datePickerProps.onBlur(event);
128
+ }
129
+ });
130
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeBlur", function (event) {
131
+ var _this$props$onBlur2, _this$props2, _this$props$timePicke2;
132
+ _this.setState({
133
+ isFocused: false
134
+ });
135
+ (_this$props$onBlur2 = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur2 === void 0 || _this$props$onBlur2.call(_this$props2, event);
136
+ if ((_this$props$timePicke2 = _this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onBlur) {
137
+ _this.props.timePickerProps.onBlur(event);
138
+ }
125
139
  });
126
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocus", function (event) {
127
- var _this$props$onFocus, _this$props2;
140
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDateFocus", function (event) {
141
+ var _this$props$onFocus, _this$props3, _this$props$datePicke3;
128
142
  _this.setState({
129
143
  isFocused: true
130
144
  });
131
- (_this$props$onFocus = (_this$props2 = _this.props).onFocus) === null || _this$props$onFocus === void 0 || _this$props$onFocus.call(_this$props2, event);
145
+ (_this$props$onFocus = (_this$props3 = _this.props).onFocus) === null || _this$props$onFocus === void 0 || _this$props$onFocus.call(_this$props3, event);
146
+ if ((_this$props$datePicke3 = _this.props.datePickerProps) !== null && _this$props$datePicke3 !== void 0 && _this$props$datePicke3.onFocus) {
147
+ _this.props.datePickerProps.onFocus(event);
148
+ }
149
+ });
150
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeFocus", function (event) {
151
+ var _this$props$onFocus2, _this$props4, _this$props$timePicke3;
152
+ _this.setState({
153
+ isFocused: true
154
+ });
155
+ (_this$props$onFocus2 = (_this$props4 = _this.props).onFocus) === null || _this$props$onFocus2 === void 0 || _this$props$onFocus2.call(_this$props4, event);
156
+ if ((_this$props$timePicke3 = _this.props.timePickerProps) !== null && _this$props$timePicke3 !== void 0 && _this$props$timePicke3.onFocus) {
157
+ _this.props.timePickerProps.onFocus(event);
158
+ }
132
159
  });
133
160
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDateChange", function (dateValue) {
134
- var _this$props$datePicke;
161
+ var _this$props$datePicke4;
135
162
  var parsedValues = _this.getParsedValues();
136
163
  _this.onValueChange({
137
164
  dateValue: dateValue,
138
165
  timeValue: parsedValues.timeValue,
139
166
  zoneValue: parsedValues.zoneValue
140
167
  });
141
- if ((_this$props$datePicke = _this.props.datePickerProps) !== null && _this$props$datePicke !== void 0 && _this$props$datePicke.onChange) {
168
+ if ((_this$props$datePicke4 = _this.props.datePickerProps) !== null && _this$props$datePicke4 !== void 0 && _this$props$datePicke4.onChange) {
142
169
  _this.props.datePickerProps.onChange(dateValue);
143
170
  }
144
171
  });
145
172
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeChange", function (timeValue) {
146
- var _this$props$timePicke;
173
+ var _this$props$timePicke4;
147
174
  var parsedValues = _this.getParsedValues();
148
175
  _this.onValueChange({
149
176
  dateValue: parsedValues.dateValue,
150
177
  timeValue: timeValue,
151
178
  zoneValue: parsedValues.zoneValue
152
179
  });
153
- if ((_this$props$timePicke = _this.props.timePickerProps) !== null && _this$props$timePicke !== void 0 && _this$props$timePicke.onChange) {
180
+ if ((_this$props$timePicke4 = _this.props.timePickerProps) !== null && _this$props$timePicke4 !== void 0 && _this$props$timePicke4.onChange) {
154
181
  _this.props.timePickerProps.onChange(timeValue);
155
182
  }
156
183
  });
157
184
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClear", function () {
158
- var _this$props$datePicke2, _this$props$timePicke2;
185
+ var _this$props$datePicke5, _this$props$timePicke5;
159
186
  var parsedValues = _this.getParsedValues();
160
187
  _this.onValueChange({
161
188
  dateValue: '',
162
189
  timeValue: '',
163
190
  zoneValue: parsedValues.zoneValue
164
191
  });
165
- if ((_this$props$datePicke2 = _this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onChange) {
192
+ if ((_this$props$datePicke5 = _this.props.datePickerProps) !== null && _this$props$datePicke5 !== void 0 && _this$props$datePicke5.onChange) {
166
193
  _this.props.datePickerProps.onChange('');
167
194
  }
168
- if ((_this$props$timePicke2 = _this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onChange) {
195
+ if ((_this$props$timePicke5 = _this.props.timePickerProps) !== null && _this$props$timePicke5 !== void 0 && _this$props$timePicke5.onChange) {
169
196
  _this.props.timePickerProps.onChange('');
170
197
  }
171
198
  });
@@ -211,7 +238,7 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
211
238
  zoneValue: zoneValue
212
239
  });
213
240
  if (dateValue && timeValue) {
214
- var _this$props$onChange, _this$props3;
241
+ var _this$props$onChange, _this$props5;
215
242
  var value = (0, _internal.formatDateTimeZoneIntoIso)(dateValue, timeValue, zoneValue);
216
243
  var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
217
244
  parsedZone = _this$parseValue.zoneValue;
@@ -219,44 +246,46 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
219
246
  this.setState({
220
247
  value: valueWithValidZone
221
248
  });
222
- (_this$props$onChange = (_this$props3 = this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props3, valueWithValidZone);
249
+ (_this$props$onChange = (_this$props5 = this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props5, valueWithValidZone);
223
250
  // If the date or time value was cleared when there is an existing datetime value, then clear the value.
224
251
  } else if (this.getValue()) {
225
- var _this$props$onChange2, _this$props4;
252
+ var _this$props$onChange2, _this$props6;
226
253
  this.setState({
227
254
  value: ''
228
255
  });
229
- (_this$props$onChange2 = (_this$props4 = this.props).onChange) === null || _this$props$onChange2 === void 0 || _this$props$onChange2.call(_this$props4, '');
256
+ (_this$props$onChange2 = (_this$props6 = this.props).onChange) === null || _this$props$onChange2 === void 0 || _this$props$onChange2.call(_this$props6, '');
230
257
  }
231
258
  }
232
259
  }, {
233
260
  key: "render",
234
261
  value: function render() {
235
- var _this$props5 = this.props,
236
- ariaDescribedBy = _this$props5['aria-describedby'],
237
- _this$props5$appearan = _this$props5.appearance,
238
- appearance = _this$props5$appearan === void 0 ? 'default' : _this$props5$appearan,
239
- _this$props5$autoFocu = _this$props5.autoFocus,
240
- autoFocus = _this$props5$autoFocu === void 0 ? false : _this$props5$autoFocu,
241
- _this$props5$datePick = _this$props5.datePickerProps,
242
- datePickerProps = _this$props5$datePick === void 0 ? {} : _this$props5$datePick,
243
- _this$props5$id = _this$props5.id,
244
- id = _this$props5$id === void 0 ? '' : _this$props5$id,
245
- _this$props5$innerPro = _this$props5.innerProps,
246
- innerProps = _this$props5$innerPro === void 0 ? {} : _this$props5$innerPro,
247
- _this$props5$isDisabl = _this$props5.isDisabled,
248
- isDisabled = _this$props5$isDisabl === void 0 ? false : _this$props5$isDisabl,
249
- _this$props5$isInvali = _this$props5.isInvalid,
250
- isInvalid = _this$props5$isInvali === void 0 ? false : _this$props5$isInvali,
251
- _this$props5$locale = _this$props5.locale,
252
- locale = _this$props5$locale === void 0 ? 'en-US' : _this$props5$locale,
253
- _this$props5$name = _this$props5.name,
254
- name = _this$props5$name === void 0 ? '' : _this$props5$name,
255
- _this$props5$spacing = _this$props5.spacing,
256
- spacing = _this$props5$spacing === void 0 ? 'default' : _this$props5$spacing,
257
- testId = _this$props5.testId,
258
- _this$props5$timePick = _this$props5.timePickerProps,
259
- timePickerProps = _this$props5$timePick === void 0 ? {} : _this$props5$timePick;
262
+ var _this$props7 = this.props,
263
+ ariaDescribedBy = _this$props7['aria-describedby'],
264
+ _this$props7$appearan = _this$props7.appearance,
265
+ appearance = _this$props7$appearan === void 0 ? 'default' : _this$props7$appearan,
266
+ _this$props7$autoFocu = _this$props7.autoFocus,
267
+ autoFocus = _this$props7$autoFocu === void 0 ? false : _this$props7$autoFocu,
268
+ _this$props7$clearCon = _this$props7.clearControlLabel,
269
+ clearControlLabel = _this$props7$clearCon === void 0 ? 'clear' : _this$props7$clearCon,
270
+ _this$props7$datePick = _this$props7.datePickerProps,
271
+ datePickerProps = _this$props7$datePick === void 0 ? {} : _this$props7$datePick,
272
+ _this$props7$id = _this$props7.id,
273
+ id = _this$props7$id === void 0 ? '' : _this$props7$id,
274
+ _this$props7$innerPro = _this$props7.innerProps,
275
+ innerProps = _this$props7$innerPro === void 0 ? {} : _this$props7$innerPro,
276
+ _this$props7$isDisabl = _this$props7.isDisabled,
277
+ isDisabled = _this$props7$isDisabl === void 0 ? false : _this$props7$isDisabl,
278
+ _this$props7$isInvali = _this$props7.isInvalid,
279
+ isInvalid = _this$props7$isInvali === void 0 ? false : _this$props7$isInvali,
280
+ _this$props7$locale = _this$props7.locale,
281
+ locale = _this$props7$locale === void 0 ? 'en-US' : _this$props7$locale,
282
+ _this$props7$name = _this$props7.name,
283
+ name = _this$props7$name === void 0 ? '' : _this$props7$name,
284
+ _this$props7$spacing = _this$props7.spacing,
285
+ spacing = _this$props7$spacing === void 0 ? 'default' : _this$props7$spacing,
286
+ testId = _this$props7.testId,
287
+ _this$props7$timePick = _this$props7.timePickerProps,
288
+ timePickerProps = _this$props7$timePick === void 0 ? {} : _this$props7$timePick;
260
289
  var value = this.getValue();
261
290
  var isFocused = this.state.isFocused;
262
291
  var parsedValues = this.getParsedValues();
@@ -315,9 +344,9 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
315
344
  minDate: datePickerProps.minDate,
316
345
  name: datePickerProps.name,
317
346
  nextMonthLabel: datePickerProps.nextMonthLabel,
318
- onBlur: datePickerProps.onBlur || this.onBlur,
347
+ onBlur: this.onDateBlur,
319
348
  onChange: this.onDateChange,
320
- onFocus: datePickerProps.onFocus || this.onFocus,
349
+ onFocus: this.onDateFocus,
321
350
  parseInputValue: datePickerProps.parseInputValue,
322
351
  placeholder: datePickerProps.placeholder,
323
352
  previousMonthLabel: datePickerProps.previousMonthLabel,
@@ -344,9 +373,9 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
344
373
  label: timePickerLabel,
345
374
  locale: timePickerProps.locale || locale,
346
375
  name: timePickerProps.name,
347
- onBlur: timePickerProps.onBlur || this.onBlur,
376
+ onBlur: this.onTimeBlur,
348
377
  onChange: this.onTimeChange,
349
- onFocus: timePickerProps.onFocus || this.onFocus,
378
+ onFocus: this.onTimeFocus,
350
379
  parseInputValue: timePickerProps.parseInputValue,
351
380
  placeholder: timePickerProps.placeholder,
352
381
  selectProps: mergedTimePickerSelectProps,
@@ -365,7 +394,7 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
365
394
  }, (0, _react2.jsx)(_selectClear.default, {
366
395
  size: "small",
367
396
  primaryColor: "inherit",
368
- label: "clear"
397
+ label: clearControlLabel
369
398
  })) : null);
370
399
  }
371
400
  }]);
package/dist/cjs/components/time-picker.js CHANGED
@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
27
27
  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; }
28
28
  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; }
29
29
  var packageName = "@atlaskit/datetime-picker";
30
- var packageVersion = "15.0.2";
30
+ var packageVersion = "15.1.0";
31
31
  var menuStyles = {
32
32
  /* Need to remove default absolute positioning as that causes issues with position fixed */
33
33
  position: 'static',
package/dist/es2019/components/date-picker.js CHANGED
@@ -19,7 +19,7 @@ import { Menu } from '../internal/menu';
19
19
  import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
20
20
  import { makeSingleValue } from '../internal/single-value';
21
21
  const packageName = "@atlaskit/datetime-picker";
22
- const packageVersion = "15.0.2";
22
+ const packageVersion = "15.1.0";
23
23
  const datePickerDefaultProps = {
24
24
  appearance: 'default',
25
25
  autoFocus: false,
package/dist/es2019/components/date-time-picker.js CHANGED
@@ -18,7 +18,7 @@ import { convertTokens } from '../internal/parse-tokens';
18
18
  import DatePicker from './date-picker';
19
19
  import TimePicker from './time-picker';
20
20
  const packageName = "@atlaskit/datetime-picker";
21
- const packageVersion = "15.0.2";
21
+ const packageVersion = "15.1.0";
22
22
  // Make DatePicker 50% the width of DateTimePicker
23
23
  // If rendering an icon container, shrink the TimePicker
24
24
  const datePickerContainerStyles = css({
@@ -77,11 +77,12 @@ export const datePickerDefaultAriaLabel = 'Date';
77
77
  export const timePickerDefaultAriaLabel = 'Time';
78
78
  class DateTimePickerComponent extends React.Component {
79
79
  constructor(...args) {
80
+ var _this$props$datePicke, _this$props$timePicke;
80
81
  super(...args);
81
82
  _defineProperty(this, "state", {
82
- dateValue: '',
83
+ dateValue: ((_this$props$datePicke = this.props.datePickerProps) === null || _this$props$datePicke === void 0 ? void 0 : _this$props$datePicke.defaultValue) || '',
83
84
  isFocused: false,
84
- timeValue: '',
85
+ timeValue: ((_this$props$timePicke = this.props.timePickerProps) === null || _this$props$timePicke === void 0 ? void 0 : _this$props$timePicke.defaultValue) || '',
85
86
  value: this.props.defaultValue || '',
86
87
  zoneValue: ''
87
88
  });
@@ -92,56 +93,82 @@ class DateTimePickerComponent extends React.Component {
92
93
  var _this$props$value;
93
94
  return (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.state.value;
94
95
  });
95
- _defineProperty(this, "onBlur", event => {
96
- var _this$props$onBlur, _this$props;
96
+ _defineProperty(this, "onDateBlur", event => {
97
+ var _this$props$onBlur, _this$props, _this$props$datePicke2;
97
98
  this.setState({
98
99
  isFocused: false
99
100
  });
100
101
  (_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, event);
102
+ if ((_this$props$datePicke2 = this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onBlur) {
103
+ this.props.datePickerProps.onBlur(event);
104
+ }
105
+ });
106
+ _defineProperty(this, "onTimeBlur", event => {
107
+ var _this$props$onBlur2, _this$props2, _this$props$timePicke2;
108
+ this.setState({
109
+ isFocused: false
110
+ });
111
+ (_this$props$onBlur2 = (_this$props2 = this.props).onBlur) === null || _this$props$onBlur2 === void 0 ? void 0 : _this$props$onBlur2.call(_this$props2, event);
112
+ if ((_this$props$timePicke2 = this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onBlur) {
113
+ this.props.timePickerProps.onBlur(event);
114
+ }
101
115
  });
102
- _defineProperty(this, "onFocus", event => {
103
- var _this$props$onFocus, _this$props2;
116
+ _defineProperty(this, "onDateFocus", event => {
117
+ var _this$props$onFocus, _this$props3, _this$props$datePicke3;
104
118
  this.setState({
105
119
  isFocused: true
106
120
  });
107
- (_this$props$onFocus = (_this$props2 = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props2, event);
121
+ (_this$props$onFocus = (_this$props3 = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props3, event);
122
+ if ((_this$props$datePicke3 = this.props.datePickerProps) !== null && _this$props$datePicke3 !== void 0 && _this$props$datePicke3.onFocus) {
123
+ this.props.datePickerProps.onFocus(event);
124
+ }
125
+ });
126
+ _defineProperty(this, "onTimeFocus", event => {
127
+ var _this$props$onFocus2, _this$props4, _this$props$timePicke3;
128
+ this.setState({
129
+ isFocused: true
130
+ });
131
+ (_this$props$onFocus2 = (_this$props4 = this.props).onFocus) === null || _this$props$onFocus2 === void 0 ? void 0 : _this$props$onFocus2.call(_this$props4, event);
132
+ if ((_this$props$timePicke3 = this.props.timePickerProps) !== null && _this$props$timePicke3 !== void 0 && _this$props$timePicke3.onFocus) {
133
+ this.props.timePickerProps.onFocus(event);
134
+ }
108
135
  });
109
136
  _defineProperty(this, "onDateChange", dateValue => {
110
- var _this$props$datePicke;
137
+ var _this$props$datePicke4;
111
138
  const parsedValues = this.getParsedValues();
112
139
  this.onValueChange({
113
140
  dateValue,
114
141
  timeValue: parsedValues.timeValue,
115
142
  zoneValue: parsedValues.zoneValue
116
143
  });
117
- if ((_this$props$datePicke = this.props.datePickerProps) !== null && _this$props$datePicke !== void 0 && _this$props$datePicke.onChange) {
144
+ if ((_this$props$datePicke4 = this.props.datePickerProps) !== null && _this$props$datePicke4 !== void 0 && _this$props$datePicke4.onChange) {
118
145
  this.props.datePickerProps.onChange(dateValue);
119
146
  }
120
147
  });
121
148
  _defineProperty(this, "onTimeChange", timeValue => {
122
- var _this$props$timePicke;
149
+ var _this$props$timePicke4;
123
150
  const parsedValues = this.getParsedValues();
124
151
  this.onValueChange({
125
152
  dateValue: parsedValues.dateValue,
126
153
  timeValue,
127
154
  zoneValue: parsedValues.zoneValue
128
155
  });
129
- if ((_this$props$timePicke = this.props.timePickerProps) !== null && _this$props$timePicke !== void 0 && _this$props$timePicke.onChange) {
156
+ if ((_this$props$timePicke4 = this.props.timePickerProps) !== null && _this$props$timePicke4 !== void 0 && _this$props$timePicke4.onChange) {
130
157
  this.props.timePickerProps.onChange(timeValue);
131
158
  }
132
159
  });
133
160
  _defineProperty(this, "onClear", () => {
134
- var _this$props$datePicke2, _this$props$timePicke2;
161
+ var _this$props$datePicke5, _this$props$timePicke5;
135
162
  const parsedValues = this.getParsedValues();
136
163
  this.onValueChange({
137
164
  dateValue: '',
138
165
  timeValue: '',
139
166
  zoneValue: parsedValues.zoneValue
140
167
  });
141
- if ((_this$props$datePicke2 = this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onChange) {
168
+ if ((_this$props$datePicke5 = this.props.datePickerProps) !== null && _this$props$datePicke5 !== void 0 && _this$props$datePicke5.onChange) {
142
169
  this.props.datePickerProps.onChange('');
143
170
  }
144
- if ((_this$props$timePicke2 = this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onChange) {
171
+ if ((_this$props$timePicke5 = this.props.timePickerProps) !== null && _this$props$timePicke5 !== void 0 && _this$props$timePicke5.onChange) {
145
172
  this.props.timePickerProps.onChange('');
146
173
  }
147
174
  });
@@ -183,7 +210,7 @@ class DateTimePickerComponent extends React.Component {
183
210
  zoneValue
184
211
  });
185
212
  if (dateValue && timeValue) {
186
- var _this$props$onChange, _this$props3;
213
+ var _this$props$onChange, _this$props5;
187
214
  const value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
188
215
  const {
189
216
  zoneValue: parsedZone
@@ -192,14 +219,14 @@ class DateTimePickerComponent extends React.Component {
192
219
  this.setState({
193
220
  value: valueWithValidZone
194
221
  });
195
- (_this$props$onChange = (_this$props3 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, valueWithValidZone);
222
+ (_this$props$onChange = (_this$props5 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props5, valueWithValidZone);
196
223
  // If the date or time value was cleared when there is an existing datetime value, then clear the value.
197
224
  } else if (this.getValue()) {
198
- var _this$props$onChange2, _this$props4;
225
+ var _this$props$onChange2, _this$props6;
199
226
  this.setState({
200
227
  value: ''
201
228
  });
202
- (_this$props$onChange2 = (_this$props4 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props4, '');
229
+ (_this$props$onChange2 = (_this$props6 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props6, '');
203
230
  }
204
231
  }
205
232
  render() {
@@ -207,6 +234,7 @@ class DateTimePickerComponent extends React.Component {
207
234
  'aria-describedby': ariaDescribedBy,
208
235
  appearance = 'default',
209
236
  autoFocus = false,
237
+ clearControlLabel = 'clear',
210
238
  datePickerProps = {},
211
239
  id = '',
212
240
  innerProps = {},
@@ -280,9 +308,9 @@ class DateTimePickerComponent extends React.Component {
280
308
  minDate: datePickerProps.minDate,
281
309
  name: datePickerProps.name,
282
310
  nextMonthLabel: datePickerProps.nextMonthLabel,
283
- onBlur: datePickerProps.onBlur || this.onBlur,
311
+ onBlur: this.onDateBlur,
284
312
  onChange: this.onDateChange,
285
- onFocus: datePickerProps.onFocus || this.onFocus,
313
+ onFocus: this.onDateFocus,
286
314
  parseInputValue: datePickerProps.parseInputValue,
287
315
  placeholder: datePickerProps.placeholder,
288
316
  previousMonthLabel: datePickerProps.previousMonthLabel,
@@ -309,9 +337,9 @@ class DateTimePickerComponent extends React.Component {
309
337
  label: timePickerLabel,
310
338
  locale: timePickerProps.locale || locale,
311
339
  name: timePickerProps.name,
312
- onBlur: timePickerProps.onBlur || this.onBlur,
340
+ onBlur: this.onTimeBlur,
313
341
  onChange: this.onTimeChange,
314
- onFocus: timePickerProps.onFocus || this.onFocus,
342
+ onFocus: this.onTimeFocus,
315
343
  parseInputValue: timePickerProps.parseInputValue,
316
344
  placeholder: timePickerProps.placeholder,
317
345
  selectProps: mergedTimePickerSelectProps,
@@ -330,7 +358,7 @@ class DateTimePickerComponent extends React.Component {
330
358
  }, jsx(SelectClearIcon, {
331
359
  size: "small",
332
360
  primaryColor: "inherit",
333
- label: "clear"
361
+ label: clearControlLabel
334
362
  })) : null);
335
363
  }
336
364
  }
package/dist/es2019/components/time-picker.js CHANGED
@@ -11,7 +11,7 @@ import parseTime from '../internal/parse-time';
11
11
  import { convertTokens } from '../internal/parse-tokens';
12
12
  import { makeSingleValue } from '../internal/single-value';
13
13
  const packageName = "@atlaskit/datetime-picker";
14
- const packageVersion = "15.0.2";
14
+ const packageVersion = "15.1.0";
15
15
  const menuStyles = {
16
16
  /* Need to remove default absolute positioning as that causes issues with position fixed */
17
17
  position: 'static',
package/dist/esm/components/date-picker.js CHANGED
@@ -29,7 +29,7 @@ import { Menu } from '../internal/menu';
29
29
  import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
30
30
  import { makeSingleValue } from '../internal/single-value';
31
31
  var packageName = "@atlaskit/datetime-picker";
32
- var packageVersion = "15.0.2";
32
+ var packageVersion = "15.1.0";
33
33
  var datePickerDefaultProps = {
34
34
  appearance: 'default',
35
35
  autoFocus: false,
package/dist/esm/components/date-time-picker.js CHANGED
@@ -28,7 +28,7 @@ import { convertTokens } from '../internal/parse-tokens';
28
28
  import DatePicker from './date-picker';
29
29
  import TimePicker from './time-picker';
30
30
  var packageName = "@atlaskit/datetime-picker";
31
- var packageVersion = "15.0.2";
31
+ var packageVersion = "15.1.0";
32
32
  // Make DatePicker 50% the width of DateTimePicker
33
33
  // If rendering an icon container, shrink the TimePicker
34
34
  var datePickerContainerStyles = css({
@@ -90,6 +90,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
90
90
  _inherits(DateTimePickerComponent, _React$Component);
91
91
  var _super = _createSuper(DateTimePickerComponent);
92
92
  function DateTimePickerComponent() {
93
+ var _this$props$datePicke, _this$props$timePicke;
93
94
  var _this;
94
95
  _classCallCheck(this, DateTimePickerComponent);
95
96
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -97,9 +98,9 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
97
98
  }
98
99
  _this = _super.call.apply(_super, [this].concat(args));
99
100
  _defineProperty(_assertThisInitialized(_this), "state", {
100
- dateValue: '',
101
+ dateValue: ((_this$props$datePicke = _this.props.datePickerProps) === null || _this$props$datePicke === void 0 ? void 0 : _this$props$datePicke.defaultValue) || '',
101
102
  isFocused: false,
102
- timeValue: '',
103
+ timeValue: ((_this$props$timePicke = _this.props.timePickerProps) === null || _this$props$timePicke === void 0 ? void 0 : _this$props$timePicke.defaultValue) || '',
103
104
  value: _this.props.defaultValue || '',
104
105
  zoneValue: ''
105
106
  });
@@ -112,56 +113,82 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
112
113
  var _this$props$value;
113
114
  return (_this$props$value = _this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : _this.state.value;
114
115
  });
115
- _defineProperty(_assertThisInitialized(_this), "onBlur", function (event) {
116
- var _this$props$onBlur, _this$props;
116
+ _defineProperty(_assertThisInitialized(_this), "onDateBlur", function (event) {
117
+ var _this$props$onBlur, _this$props, _this$props$datePicke2;
117
118
  _this.setState({
118
119
  isFocused: false
119
120
  });
120
121
  (_this$props$onBlur = (_this$props = _this.props).onBlur) === null || _this$props$onBlur === void 0 || _this$props$onBlur.call(_this$props, event);
122
+ if ((_this$props$datePicke2 = _this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onBlur) {
123
+ _this.props.datePickerProps.onBlur(event);
124
+ }
125
+ });
126
+ _defineProperty(_assertThisInitialized(_this), "onTimeBlur", function (event) {
127
+ var _this$props$onBlur2, _this$props2, _this$props$timePicke2;
128
+ _this.setState({
129
+ isFocused: false
130
+ });
131
+ (_this$props$onBlur2 = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur2 === void 0 || _this$props$onBlur2.call(_this$props2, event);
132
+ if ((_this$props$timePicke2 = _this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onBlur) {
133
+ _this.props.timePickerProps.onBlur(event);
134
+ }
121
135
  });
122
- _defineProperty(_assertThisInitialized(_this), "onFocus", function (event) {
123
- var _this$props$onFocus, _this$props2;
136
+ _defineProperty(_assertThisInitialized(_this), "onDateFocus", function (event) {
137
+ var _this$props$onFocus, _this$props3, _this$props$datePicke3;
124
138
  _this.setState({
125
139
  isFocused: true
126
140
  });
127
- (_this$props$onFocus = (_this$props2 = _this.props).onFocus) === null || _this$props$onFocus === void 0 || _this$props$onFocus.call(_this$props2, event);
141
+ (_this$props$onFocus = (_this$props3 = _this.props).onFocus) === null || _this$props$onFocus === void 0 || _this$props$onFocus.call(_this$props3, event);
142
+ if ((_this$props$datePicke3 = _this.props.datePickerProps) !== null && _this$props$datePicke3 !== void 0 && _this$props$datePicke3.onFocus) {
143
+ _this.props.datePickerProps.onFocus(event);
144
+ }
145
+ });
146
+ _defineProperty(_assertThisInitialized(_this), "onTimeFocus", function (event) {
147
+ var _this$props$onFocus2, _this$props4, _this$props$timePicke3;
148
+ _this.setState({
149
+ isFocused: true
150
+ });
151
+ (_this$props$onFocus2 = (_this$props4 = _this.props).onFocus) === null || _this$props$onFocus2 === void 0 || _this$props$onFocus2.call(_this$props4, event);
152
+ if ((_this$props$timePicke3 = _this.props.timePickerProps) !== null && _this$props$timePicke3 !== void 0 && _this$props$timePicke3.onFocus) {
153
+ _this.props.timePickerProps.onFocus(event);
154
+ }
128
155
  });
129
156
  _defineProperty(_assertThisInitialized(_this), "onDateChange", function (dateValue) {
130
- var _this$props$datePicke;
157
+ var _this$props$datePicke4;
131
158
  var parsedValues = _this.getParsedValues();
132
159
  _this.onValueChange({
133
160
  dateValue: dateValue,
134
161
  timeValue: parsedValues.timeValue,
135
162
  zoneValue: parsedValues.zoneValue
136
163
  });
137
- if ((_this$props$datePicke = _this.props.datePickerProps) !== null && _this$props$datePicke !== void 0 && _this$props$datePicke.onChange) {
164
+ if ((_this$props$datePicke4 = _this.props.datePickerProps) !== null && _this$props$datePicke4 !== void 0 && _this$props$datePicke4.onChange) {
138
165
  _this.props.datePickerProps.onChange(dateValue);
139
166
  }
140
167
  });
141
168
  _defineProperty(_assertThisInitialized(_this), "onTimeChange", function (timeValue) {
142
- var _this$props$timePicke;
169
+ var _this$props$timePicke4;
143
170
  var parsedValues = _this.getParsedValues();
144
171
  _this.onValueChange({
145
172
  dateValue: parsedValues.dateValue,
146
173
  timeValue: timeValue,
147
174
  zoneValue: parsedValues.zoneValue
148
175
  });
149
- if ((_this$props$timePicke = _this.props.timePickerProps) !== null && _this$props$timePicke !== void 0 && _this$props$timePicke.onChange) {
176
+ if ((_this$props$timePicke4 = _this.props.timePickerProps) !== null && _this$props$timePicke4 !== void 0 && _this$props$timePicke4.onChange) {
150
177
  _this.props.timePickerProps.onChange(timeValue);
151
178
  }
152
179
  });
153
180
  _defineProperty(_assertThisInitialized(_this), "onClear", function () {
154
- var _this$props$datePicke2, _this$props$timePicke2;
181
+ var _this$props$datePicke5, _this$props$timePicke5;
155
182
  var parsedValues = _this.getParsedValues();
156
183
  _this.onValueChange({
157
184
  dateValue: '',
158
185
  timeValue: '',
159
186
  zoneValue: parsedValues.zoneValue
160
187
  });
161
- if ((_this$props$datePicke2 = _this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onChange) {
188
+ if ((_this$props$datePicke5 = _this.props.datePickerProps) !== null && _this$props$datePicke5 !== void 0 && _this$props$datePicke5.onChange) {
162
189
  _this.props.datePickerProps.onChange('');
163
190
  }
164
- if ((_this$props$timePicke2 = _this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onChange) {
191
+ if ((_this$props$timePicke5 = _this.props.timePickerProps) !== null && _this$props$timePicke5 !== void 0 && _this$props$timePicke5.onChange) {
165
192
  _this.props.timePickerProps.onChange('');
166
193
  }
167
194
  });
@@ -207,7 +234,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
207
234
  zoneValue: zoneValue
208
235
  });
209
236
  if (dateValue && timeValue) {
210
- var _this$props$onChange, _this$props3;
237
+ var _this$props$onChange, _this$props5;
211
238
  var value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
212
239
  var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
213
240
  parsedZone = _this$parseValue.zoneValue;
@@ -215,44 +242,46 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
215
242
  this.setState({
216
243
  value: valueWithValidZone
217
244
  });
218
- (_this$props$onChange = (_this$props3 = this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props3, valueWithValidZone);
245
+ (_this$props$onChange = (_this$props5 = this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props5, valueWithValidZone);
219
246
  // If the date or time value was cleared when there is an existing datetime value, then clear the value.
220
247
  } else if (this.getValue()) {
221
- var _this$props$onChange2, _this$props4;
248
+ var _this$props$onChange2, _this$props6;
222
249
  this.setState({
223
250
  value: ''
224
251
  });
225
- (_this$props$onChange2 = (_this$props4 = this.props).onChange) === null || _this$props$onChange2 === void 0 || _this$props$onChange2.call(_this$props4, '');
252
+ (_this$props$onChange2 = (_this$props6 = this.props).onChange) === null || _this$props$onChange2 === void 0 || _this$props$onChange2.call(_this$props6, '');
226
253
  }
227
254
  }
228
255
  }, {
229
256
  key: "render",
230
257
  value: function render() {
231
- var _this$props5 = this.props,
232
- ariaDescribedBy = _this$props5['aria-describedby'],
233
- _this$props5$appearan = _this$props5.appearance,
234
- appearance = _this$props5$appearan === void 0 ? 'default' : _this$props5$appearan,
235
- _this$props5$autoFocu = _this$props5.autoFocus,
236
- autoFocus = _this$props5$autoFocu === void 0 ? false : _this$props5$autoFocu,
237
- _this$props5$datePick = _this$props5.datePickerProps,
238
- datePickerProps = _this$props5$datePick === void 0 ? {} : _this$props5$datePick,
239
- _this$props5$id = _this$props5.id,
240
- id = _this$props5$id === void 0 ? '' : _this$props5$id,
241
- _this$props5$innerPro = _this$props5.innerProps,
242
- innerProps = _this$props5$innerPro === void 0 ? {} : _this$props5$innerPro,
243
- _this$props5$isDisabl = _this$props5.isDisabled,
244
- isDisabled = _this$props5$isDisabl === void 0 ? false : _this$props5$isDisabl,
245
- _this$props5$isInvali = _this$props5.isInvalid,
246
- isInvalid = _this$props5$isInvali === void 0 ? false : _this$props5$isInvali,
247
- _this$props5$locale = _this$props5.locale,
248
- locale = _this$props5$locale === void 0 ? 'en-US' : _this$props5$locale,
249
- _this$props5$name = _this$props5.name,
250
- name = _this$props5$name === void 0 ? '' : _this$props5$name,
251
- _this$props5$spacing = _this$props5.spacing,
252
- spacing = _this$props5$spacing === void 0 ? 'default' : _this$props5$spacing,
253
- testId = _this$props5.testId,
254
- _this$props5$timePick = _this$props5.timePickerProps,
255
- timePickerProps = _this$props5$timePick === void 0 ? {} : _this$props5$timePick;
258
+ var _this$props7 = this.props,
259
+ ariaDescribedBy = _this$props7['aria-describedby'],
260
+ _this$props7$appearan = _this$props7.appearance,
261
+ appearance = _this$props7$appearan === void 0 ? 'default' : _this$props7$appearan,
262
+ _this$props7$autoFocu = _this$props7.autoFocus,
263
+ autoFocus = _this$props7$autoFocu === void 0 ? false : _this$props7$autoFocu,
264
+ _this$props7$clearCon = _this$props7.clearControlLabel,
265
+ clearControlLabel = _this$props7$clearCon === void 0 ? 'clear' : _this$props7$clearCon,
266
+ _this$props7$datePick = _this$props7.datePickerProps,
267
+ datePickerProps = _this$props7$datePick === void 0 ? {} : _this$props7$datePick,
268
+ _this$props7$id = _this$props7.id,
269
+ id = _this$props7$id === void 0 ? '' : _this$props7$id,
270
+ _this$props7$innerPro = _this$props7.innerProps,
271
+ innerProps = _this$props7$innerPro === void 0 ? {} : _this$props7$innerPro,
272
+ _this$props7$isDisabl = _this$props7.isDisabled,
273
+ isDisabled = _this$props7$isDisabl === void 0 ? false : _this$props7$isDisabl,
274
+ _this$props7$isInvali = _this$props7.isInvalid,
275
+ isInvalid = _this$props7$isInvali === void 0 ? false : _this$props7$isInvali,
276
+ _this$props7$locale = _this$props7.locale,
277
+ locale = _this$props7$locale === void 0 ? 'en-US' : _this$props7$locale,
278
+ _this$props7$name = _this$props7.name,
279
+ name = _this$props7$name === void 0 ? '' : _this$props7$name,
280
+ _this$props7$spacing = _this$props7.spacing,
281
+ spacing = _this$props7$spacing === void 0 ? 'default' : _this$props7$spacing,
282
+ testId = _this$props7.testId,
283
+ _this$props7$timePick = _this$props7.timePickerProps,
284
+ timePickerProps = _this$props7$timePick === void 0 ? {} : _this$props7$timePick;
256
285
  var value = this.getValue();
257
286
  var isFocused = this.state.isFocused;
258
287
  var parsedValues = this.getParsedValues();
@@ -311,9 +340,9 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
311
340
  minDate: datePickerProps.minDate,
312
341
  name: datePickerProps.name,
313
342
  nextMonthLabel: datePickerProps.nextMonthLabel,
314
- onBlur: datePickerProps.onBlur || this.onBlur,
343
+ onBlur: this.onDateBlur,
315
344
  onChange: this.onDateChange,
316
- onFocus: datePickerProps.onFocus || this.onFocus,
345
+ onFocus: this.onDateFocus,
317
346
  parseInputValue: datePickerProps.parseInputValue,
318
347
  placeholder: datePickerProps.placeholder,
319
348
  previousMonthLabel: datePickerProps.previousMonthLabel,
@@ -340,9 +369,9 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
340
369
  label: timePickerLabel,
341
370
  locale: timePickerProps.locale || locale,
342
371
  name: timePickerProps.name,
343
- onBlur: timePickerProps.onBlur || this.onBlur,
372
+ onBlur: this.onTimeBlur,
344
373
  onChange: this.onTimeChange,
345
- onFocus: timePickerProps.onFocus || this.onFocus,
374
+ onFocus: this.onTimeFocus,
346
375
  parseInputValue: timePickerProps.parseInputValue,
347
376
  placeholder: timePickerProps.placeholder,
348
377
  selectProps: mergedTimePickerSelectProps,
@@ -361,7 +390,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
361
390
  }, jsx(SelectClearIcon, {
362
391
  size: "small",
363
392
  primaryColor: "inherit",
364
- label: "clear"
393
+ label: clearControlLabel
365
394
  })) : null);
366
395
  }
367
396
  }]);
package/dist/esm/components/time-picker.js CHANGED
@@ -17,7 +17,7 @@ import parseTime from '../internal/parse-time';
17
17
  import { convertTokens } from '../internal/parse-tokens';
18
18
  import { makeSingleValue } from '../internal/single-value';
19
19
  var packageName = "@atlaskit/datetime-picker";
20
- var packageVersion = "15.0.2";
20
+ var packageVersion = "15.1.0";
21
21
  var menuStyles = {
22
22
  /* Need to remove default absolute positioning as that causes issues with position fixed */
23
23
  position: 'static',
package/dist/types/components/date-time-picker.d.ts CHANGED
@@ -28,8 +28,10 @@ declare class DateTimePickerComponent extends React.Component<DateTimePickerBase
28
28
  timeValue: string;
29
29
  zoneValue: string;
30
30
  };
31
- onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
32
- onFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
31
+ onDateBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
32
+ onTimeBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
33
+ onDateFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
34
+ onTimeFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
33
35
  onDateChange: (dateValue: string) => void;
34
36
  onTimeChange: (timeValue: string) => void;
35
37
  onClear: () => void;
@@ -50,5 +52,5 @@ export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
50
52
  * - [Code](https://atlassian.design/components/datetime-picker/code)
51
53
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
52
54
  */
53
- declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
55
+ declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
54
56
  export default DateTimePicker;
package/dist/types/types.d.ts CHANGED
@@ -346,6 +346,10 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
346
346
  * Set the picker to autofocus on mount.
347
347
  */
348
348
  autoFocus?: boolean;
349
+ /**
350
+ * Set the `aria-label` for the clear icon button.
351
+ */
352
+ clearControlLabel?: string;
349
353
  /**
350
354
  * The default for `value`.
351
355
  */
package/dist/types-ts4.5/components/date-time-picker.d.ts CHANGED
@@ -28,8 +28,10 @@ declare class DateTimePickerComponent extends React.Component<DateTimePickerBase
28
28
  timeValue: string;
29
29
  zoneValue: string;
30
30
  };
31
- onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
32
- onFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
31
+ onDateBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
32
+ onTimeBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
33
+ onDateFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
34
+ onTimeFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
33
35
  onDateChange: (dateValue: string) => void;
34
36
  onTimeChange: (timeValue: string) => void;
35
37
  onClear: () => void;
@@ -50,5 +52,5 @@ export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
50
52
  * - [Code](https://atlassian.design/components/datetime-picker/code)
51
53
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
52
54
  */
53
- declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
55
+ declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
54
56
  export default DateTimePicker;
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -346,6 +346,10 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
346
346
  * Set the picker to autofocus on mount.
347
347
  */
348
348
  autoFocus?: boolean;
349
+ /**
350
+ * Set the `aria-label` for the clear icon button.
351
+ */
352
+ clearControlLabel?: string;
349
353
  /**
350
354
  * The default for `value`.
351
355
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/datetime-picker",
3
- "version": "15.0.2",
3
+ "version": "15.1.0",
4
4
  "description": "A date time picker allows the user to select an associated date and time.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
38
38
  "@atlaskit/analytics-next": "^10.1.0",
39
39
  "@atlaskit/calendar": "^15.0.0",
40
40
  "@atlaskit/ds-lib": "^2.6.0",
41
- "@atlaskit/icon": "^22.18.0",
41
+ "@atlaskit/icon": "^22.19.0",
42
42
  "@atlaskit/layering": "^0.4.0",
43
43
  "@atlaskit/locale": "^2.8.0",
44
44
  "@atlaskit/popper": "^6.3.0",