@atlaskit/datetime-picker 14.1.2 → 15.0.1

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/datetime-picker
2
2
 
3
+ ## 15.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#145902](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145902)
8
+ [`7d95e270ddda2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7d95e270ddda2) -
9
+ Ensure provided onChange handlers on in `*PickerProps` run alongside internal parsing logic
10
+ instead of overriding it.
11
+
12
+ ## 15.0.0
13
+
14
+ ### Major Changes
15
+
16
+ - [#145306](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145306)
17
+ [`3b17d85b64fcd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3b17d85b64fcd) -
18
+ Remove unused analyticsContext prop and add unit tests for analytics.
19
+
3
20
  ## 14.1.2
4
21
 
5
22
  ### Patch Changes
@@ -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 = "14.1.2";
39
+ var packageVersion = "15.0.1";
40
40
  var datePickerDefaultProps = {
41
41
  appearance: 'default',
42
42
  autoFocus: false,
@@ -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 = "14.1.2";
35
+ var packageVersion = "15.0.1";
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)({
@@ -131,28 +131,43 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
131
131
  (_this$props$onFocus = (_this$props2 = _this.props).onFocus) === null || _this$props$onFocus === void 0 || _this$props$onFocus.call(_this$props2, event);
132
132
  });
133
133
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDateChange", function (dateValue) {
134
+ var _this$props$datePicke;
134
135
  var parsedValues = _this.getParsedValues();
135
136
  _this.onValueChange({
136
137
  dateValue: dateValue,
137
138
  timeValue: parsedValues.timeValue,
138
139
  zoneValue: parsedValues.zoneValue
139
140
  });
141
+ if ((_this$props$datePicke = _this.props.datePickerProps) !== null && _this$props$datePicke !== void 0 && _this$props$datePicke.onChange) {
142
+ _this.props.datePickerProps.onChange(dateValue);
143
+ }
140
144
  });
141
145
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeChange", function (timeValue) {
146
+ var _this$props$timePicke;
142
147
  var parsedValues = _this.getParsedValues();
143
148
  _this.onValueChange({
144
149
  dateValue: parsedValues.dateValue,
145
150
  timeValue: timeValue,
146
151
  zoneValue: parsedValues.zoneValue
147
152
  });
153
+ if ((_this$props$timePicke = _this.props.timePickerProps) !== null && _this$props$timePicke !== void 0 && _this$props$timePicke.onChange) {
154
+ _this.props.timePickerProps.onChange(timeValue);
155
+ }
148
156
  });
149
157
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClear", function () {
158
+ var _this$props$datePicke2, _this$props$timePicke2;
150
159
  var parsedValues = _this.getParsedValues();
151
160
  _this.onValueChange({
152
161
  dateValue: '',
153
162
  timeValue: '',
154
163
  zoneValue: parsedValues.zoneValue
155
164
  });
165
+ if ((_this$props$datePicke2 = _this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onChange) {
166
+ _this.props.datePickerProps.onChange('');
167
+ }
168
+ if ((_this$props$timePicke2 = _this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onChange) {
169
+ _this.props.timePickerProps.onChange('');
170
+ }
156
171
  });
157
172
  return _this;
158
173
  }
@@ -301,7 +316,7 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
301
316
  name: datePickerProps.name,
302
317
  nextMonthLabel: datePickerProps.nextMonthLabel,
303
318
  onBlur: datePickerProps.onBlur || this.onBlur,
304
- onChange: datePickerProps.onChange || this.onDateChange,
319
+ onChange: this.onDateChange,
305
320
  onFocus: datePickerProps.onFocus || this.onFocus,
306
321
  parseInputValue: datePickerProps.parseInputValue,
307
322
  placeholder: datePickerProps.placeholder,
@@ -330,7 +345,7 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
330
345
  locale: timePickerProps.locale || locale,
331
346
  name: timePickerProps.name,
332
347
  onBlur: timePickerProps.onBlur || this.onBlur,
333
- onChange: timePickerProps.onChange || this.onTimeChange,
348
+ onChange: this.onTimeChange,
334
349
  onFocus: timePickerProps.onFocus || this.onFocus,
335
350
  parseInputValue: timePickerProps.parseInputValue,
336
351
  placeholder: timePickerProps.placeholder,
@@ -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 = "14.1.2";
30
+ var packageVersion = "15.0.1";
31
31
  var menuStyles = {
32
32
  /* Need to remove default absolute positioning as that causes issues with position fixed */
33
33
  position: 'static',
@@ -53,7 +53,6 @@ var analyticsAttributes = {
53
53
  */
54
54
  var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
55
55
  var ariaDescribedBy = _ref['aria-describedby'],
56
- analyticsContext = _ref.analyticsContext,
57
56
  _ref$appearance = _ref.appearance,
58
57
  appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
59
58
  _ref$autoFocus = _ref.autoFocus,
@@ -137,8 +136,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
137
136
  forceUpdate = _useReducer2[1];
138
137
  var providedOnChangeWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
139
138
  fn: providedOnChange,
140
- action: 'selectedTime',
141
- analyticsData: analyticsContext
139
+ action: 'selectedTime'
142
140
  }, analyticsAttributes));
143
141
  (0, _react.useEffect)(function () {
144
142
  if (providedValue) {
@@ -150,7 +148,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
150
148
  setIsOpen(providedIsOpen);
151
149
  }
152
150
  }, [providedIsOpen]);
153
- var onChange = function onChange(newValue, action) {
151
+ var onChange = (0, _react.useCallback)(function (newValue, action) {
154
152
  var rawValue = newValue ? newValue.value || newValue : '';
155
153
  var finalValue = rawValue.toString();
156
154
  setValue(finalValue);
@@ -158,7 +156,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
158
156
  setClearingFromIcon(true);
159
157
  }
160
158
  providedOnChangeWithAnalytics(finalValue);
161
- };
159
+ }, [providedOnChangeWithAnalytics]);
162
160
 
163
161
  /**
164
162
  * Only allow custom times if timeIsEditable prop is true
@@ -175,9 +173,9 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
175
173
  var formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
176
174
  var formattedValue = (0, _dateFns.format)(sanitizedInput, formatFormat) || '';
177
175
  setValue(formattedValue);
178
- providedOnChange(formattedValue);
176
+ providedOnChangeWithAnalytics(formattedValue);
179
177
  } else {
180
- providedOnChange(inputValue);
178
+ providedOnChangeWithAnalytics(inputValue);
181
179
  }
182
180
  };
183
181
  var onMenuOpen = function onMenuOpen() {
@@ -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 = "14.1.2";
22
+ const packageVersion = "15.0.1";
23
23
  const datePickerDefaultProps = {
24
24
  appearance: 'default',
25
25
  autoFocus: false,
@@ -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 = "14.1.2";
21
+ const packageVersion = "15.0.1";
22
22
  // Make DatePicker 50% the width of DateTimePicker
23
23
  // If rendering an icon container, shrink the TimePicker
24
24
  const datePickerContainerStyles = css({
@@ -107,28 +107,43 @@ class DateTimePickerComponent extends React.Component {
107
107
  (_this$props$onFocus = (_this$props2 = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props2, event);
108
108
  });
109
109
  _defineProperty(this, "onDateChange", dateValue => {
110
+ var _this$props$datePicke;
110
111
  const parsedValues = this.getParsedValues();
111
112
  this.onValueChange({
112
113
  dateValue,
113
114
  timeValue: parsedValues.timeValue,
114
115
  zoneValue: parsedValues.zoneValue
115
116
  });
117
+ if ((_this$props$datePicke = this.props.datePickerProps) !== null && _this$props$datePicke !== void 0 && _this$props$datePicke.onChange) {
118
+ this.props.datePickerProps.onChange(dateValue);
119
+ }
116
120
  });
117
121
  _defineProperty(this, "onTimeChange", timeValue => {
122
+ var _this$props$timePicke;
118
123
  const parsedValues = this.getParsedValues();
119
124
  this.onValueChange({
120
125
  dateValue: parsedValues.dateValue,
121
126
  timeValue,
122
127
  zoneValue: parsedValues.zoneValue
123
128
  });
129
+ if ((_this$props$timePicke = this.props.timePickerProps) !== null && _this$props$timePicke !== void 0 && _this$props$timePicke.onChange) {
130
+ this.props.timePickerProps.onChange(timeValue);
131
+ }
124
132
  });
125
133
  _defineProperty(this, "onClear", () => {
134
+ var _this$props$datePicke2, _this$props$timePicke2;
126
135
  const parsedValues = this.getParsedValues();
127
136
  this.onValueChange({
128
137
  dateValue: '',
129
138
  timeValue: '',
130
139
  zoneValue: parsedValues.zoneValue
131
140
  });
141
+ if ((_this$props$datePicke2 = this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onChange) {
142
+ this.props.datePickerProps.onChange('');
143
+ }
144
+ if ((_this$props$timePicke2 = this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onChange) {
145
+ this.props.timePickerProps.onChange('');
146
+ }
132
147
  });
133
148
  }
134
149
  parseValue(value, dateValue, timeValue, zoneValue) {
@@ -266,7 +281,7 @@ class DateTimePickerComponent extends React.Component {
266
281
  name: datePickerProps.name,
267
282
  nextMonthLabel: datePickerProps.nextMonthLabel,
268
283
  onBlur: datePickerProps.onBlur || this.onBlur,
269
- onChange: datePickerProps.onChange || this.onDateChange,
284
+ onChange: this.onDateChange,
270
285
  onFocus: datePickerProps.onFocus || this.onFocus,
271
286
  parseInputValue: datePickerProps.parseInputValue,
272
287
  placeholder: datePickerProps.placeholder,
@@ -295,7 +310,7 @@ class DateTimePickerComponent extends React.Component {
295
310
  locale: timePickerProps.locale || locale,
296
311
  name: timePickerProps.name,
297
312
  onBlur: timePickerProps.onBlur || this.onBlur,
298
- onChange: timePickerProps.onChange || this.onTimeChange,
313
+ onChange: this.onTimeChange,
299
314
  onFocus: timePickerProps.onFocus || this.onFocus,
300
315
  parseInputValue: timePickerProps.parseInputValue,
301
316
  placeholder: timePickerProps.placeholder,
@@ -1,5 +1,5 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import React, { forwardRef, useEffect, useReducer, useState } from 'react';
2
+ import React, { forwardRef, useCallback, useEffect, useReducer, useState } from 'react';
3
3
  import { format, isValid } from 'date-fns';
4
4
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
5
5
  import __noop from '@atlaskit/ds-lib/noop';
@@ -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 = "14.1.2";
14
+ const packageVersion = "15.0.1";
15
15
  const menuStyles = {
16
16
  /* Need to remove default absolute positioning as that causes issues with position fixed */
17
17
  position: 'static',
@@ -37,7 +37,6 @@ const analyticsAttributes = {
37
37
  */
38
38
  const TimePicker = /*#__PURE__*/forwardRef(({
39
39
  'aria-describedby': ariaDescribedBy,
40
- analyticsContext,
41
40
  appearance = 'default',
42
41
  autoFocus = false,
43
42
  defaultIsOpen = false,
@@ -82,7 +81,6 @@ const TimePicker = /*#__PURE__*/forwardRef(({
82
81
  const providedOnChangeWithAnalytics = usePlatformLeafEventHandler({
83
82
  fn: providedOnChange,
84
83
  action: 'selectedTime',
85
- analyticsData: analyticsContext,
86
84
  ...analyticsAttributes
87
85
  });
88
86
  useEffect(() => {
@@ -95,7 +93,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
95
93
  setIsOpen(providedIsOpen);
96
94
  }
97
95
  }, [providedIsOpen]);
98
- const onChange = (newValue, action) => {
96
+ const onChange = useCallback((newValue, action) => {
99
97
  const rawValue = newValue ? newValue.value || newValue : '';
100
98
  const finalValue = rawValue.toString();
101
99
  setValue(finalValue);
@@ -103,7 +101,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
103
101
  setClearingFromIcon(true);
104
102
  }
105
103
  providedOnChangeWithAnalytics(finalValue);
106
- };
104
+ }, [providedOnChangeWithAnalytics]);
107
105
 
108
106
  /**
109
107
  * Only allow custom times if timeIsEditable prop is true
@@ -120,9 +118,9 @@ const TimePicker = /*#__PURE__*/forwardRef(({
120
118
  const formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
121
119
  const formattedValue = format(sanitizedInput, formatFormat) || '';
122
120
  setValue(formattedValue);
123
- providedOnChange(formattedValue);
121
+ providedOnChangeWithAnalytics(formattedValue);
124
122
  } else {
125
- providedOnChange(inputValue);
123
+ providedOnChangeWithAnalytics(inputValue);
126
124
  }
127
125
  };
128
126
  const onMenuOpen = () => {
@@ -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 = "14.1.2";
32
+ var packageVersion = "15.0.1";
33
33
  var datePickerDefaultProps = {
34
34
  appearance: 'default',
35
35
  autoFocus: false,
@@ -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 = "14.1.2";
31
+ var packageVersion = "15.0.1";
32
32
  // Make DatePicker 50% the width of DateTimePicker
33
33
  // If rendering an icon container, shrink the TimePicker
34
34
  var datePickerContainerStyles = css({
@@ -127,28 +127,43 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
127
127
  (_this$props$onFocus = (_this$props2 = _this.props).onFocus) === null || _this$props$onFocus === void 0 || _this$props$onFocus.call(_this$props2, event);
128
128
  });
129
129
  _defineProperty(_assertThisInitialized(_this), "onDateChange", function (dateValue) {
130
+ var _this$props$datePicke;
130
131
  var parsedValues = _this.getParsedValues();
131
132
  _this.onValueChange({
132
133
  dateValue: dateValue,
133
134
  timeValue: parsedValues.timeValue,
134
135
  zoneValue: parsedValues.zoneValue
135
136
  });
137
+ if ((_this$props$datePicke = _this.props.datePickerProps) !== null && _this$props$datePicke !== void 0 && _this$props$datePicke.onChange) {
138
+ _this.props.datePickerProps.onChange(dateValue);
139
+ }
136
140
  });
137
141
  _defineProperty(_assertThisInitialized(_this), "onTimeChange", function (timeValue) {
142
+ var _this$props$timePicke;
138
143
  var parsedValues = _this.getParsedValues();
139
144
  _this.onValueChange({
140
145
  dateValue: parsedValues.dateValue,
141
146
  timeValue: timeValue,
142
147
  zoneValue: parsedValues.zoneValue
143
148
  });
149
+ if ((_this$props$timePicke = _this.props.timePickerProps) !== null && _this$props$timePicke !== void 0 && _this$props$timePicke.onChange) {
150
+ _this.props.timePickerProps.onChange(timeValue);
151
+ }
144
152
  });
145
153
  _defineProperty(_assertThisInitialized(_this), "onClear", function () {
154
+ var _this$props$datePicke2, _this$props$timePicke2;
146
155
  var parsedValues = _this.getParsedValues();
147
156
  _this.onValueChange({
148
157
  dateValue: '',
149
158
  timeValue: '',
150
159
  zoneValue: parsedValues.zoneValue
151
160
  });
161
+ if ((_this$props$datePicke2 = _this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onChange) {
162
+ _this.props.datePickerProps.onChange('');
163
+ }
164
+ if ((_this$props$timePicke2 = _this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onChange) {
165
+ _this.props.timePickerProps.onChange('');
166
+ }
152
167
  });
153
168
  return _this;
154
169
  }
@@ -297,7 +312,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
297
312
  name: datePickerProps.name,
298
313
  nextMonthLabel: datePickerProps.nextMonthLabel,
299
314
  onBlur: datePickerProps.onBlur || this.onBlur,
300
- onChange: datePickerProps.onChange || this.onDateChange,
315
+ onChange: this.onDateChange,
301
316
  onFocus: datePickerProps.onFocus || this.onFocus,
302
317
  parseInputValue: datePickerProps.parseInputValue,
303
318
  placeholder: datePickerProps.placeholder,
@@ -326,7 +341,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
326
341
  locale: timePickerProps.locale || locale,
327
342
  name: timePickerProps.name,
328
343
  onBlur: timePickerProps.onBlur || this.onBlur,
329
- onChange: timePickerProps.onChange || this.onTimeChange,
344
+ onChange: this.onTimeChange,
330
345
  onFocus: timePickerProps.onFocus || this.onFocus,
331
346
  parseInputValue: timePickerProps.parseInputValue,
332
347
  placeholder: timePickerProps.placeholder,
@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
5
  var _excluded = ["styles"];
6
6
  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; }
7
7
  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; }
8
- import React, { forwardRef, useEffect, useReducer, useState } from 'react';
8
+ import React, { forwardRef, useCallback, useEffect, useReducer, useState } from 'react';
9
9
  import { format, isValid } from 'date-fns';
10
10
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
11
11
  import __noop from '@atlaskit/ds-lib/noop';
@@ -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 = "14.1.2";
20
+ var packageVersion = "15.0.1";
21
21
  var menuStyles = {
22
22
  /* Need to remove default absolute positioning as that causes issues with position fixed */
23
23
  position: 'static',
@@ -43,7 +43,6 @@ var analyticsAttributes = {
43
43
  */
44
44
  var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
45
45
  var ariaDescribedBy = _ref['aria-describedby'],
46
- analyticsContext = _ref.analyticsContext,
47
46
  _ref$appearance = _ref.appearance,
48
47
  appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
49
48
  _ref$autoFocus = _ref.autoFocus,
@@ -127,8 +126,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
127
126
  forceUpdate = _useReducer2[1];
128
127
  var providedOnChangeWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
129
128
  fn: providedOnChange,
130
- action: 'selectedTime',
131
- analyticsData: analyticsContext
129
+ action: 'selectedTime'
132
130
  }, analyticsAttributes));
133
131
  useEffect(function () {
134
132
  if (providedValue) {
@@ -140,7 +138,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
140
138
  setIsOpen(providedIsOpen);
141
139
  }
142
140
  }, [providedIsOpen]);
143
- var onChange = function onChange(newValue, action) {
141
+ var onChange = useCallback(function (newValue, action) {
144
142
  var rawValue = newValue ? newValue.value || newValue : '';
145
143
  var finalValue = rawValue.toString();
146
144
  setValue(finalValue);
@@ -148,7 +146,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
148
146
  setClearingFromIcon(true);
149
147
  }
150
148
  providedOnChangeWithAnalytics(finalValue);
151
- };
149
+ }, [providedOnChangeWithAnalytics]);
152
150
 
153
151
  /**
154
152
  * Only allow custom times if timeIsEditable prop is true
@@ -165,9 +163,9 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
165
163
  var formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
166
164
  var formattedValue = format(sanitizedInput, formatFormat) || '';
167
165
  setValue(formattedValue);
168
- providedOnChange(formattedValue);
166
+ providedOnChangeWithAnalytics(formattedValue);
169
167
  } else {
170
- providedOnChange(inputValue);
168
+ providedOnChangeWithAnalytics(inputValue);
171
169
  }
172
170
  };
173
171
  var onMenuOpen = function onMenuOpen() {
@@ -9,5 +9,5 @@ import { type TimePickerBaseProps } from '../types';
9
9
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
10
10
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
11
11
  */
12
- declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
12
+ declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
13
13
  export default TimePicker;
@@ -206,10 +206,6 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
206
206
  weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
207
207
  }
208
208
  export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
209
- /**
210
- * Additional information to be included in the `context` of analytics events
211
- */
212
- analyticsContext?: Record<string, any>;
213
209
  /**
214
210
  * Set the appearance of the picker.
215
211
  * `subtle` will remove the borders, background, and icon.
@@ -9,5 +9,5 @@ import { type TimePickerBaseProps } from '../types';
9
9
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
10
10
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
11
11
  */
12
- declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
12
+ declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
13
13
  export default TimePicker;
@@ -206,10 +206,6 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
206
206
  weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
207
207
  }
208
208
  export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
209
- /**
210
- * Additional information to be included in the `context` of analytics events
211
- */
212
- analyticsContext?: Record<string, any>;
213
209
  /**
214
210
  * Set the appearance of the picker.
215
211
  * `subtle` will remove the borders, background, and icon.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/datetime-picker",
3
- "version": "14.1.2",
3
+ "version": "15.0.1",
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/"
@@ -56,11 +56,11 @@
56
56
  "@af/accessibility-testing": "*",
57
57
  "@af/integration-testing": "*",
58
58
  "@af/visual-regression": "*",
59
- "@atlaskit/button": "^20.1.0",
59
+ "@atlaskit/button": "^20.2.0",
60
60
  "@atlaskit/codemod-utils": "4.2.4",
61
61
  "@atlaskit/docs": "*",
62
62
  "@atlaskit/form": "^10.5.0",
63
- "@atlaskit/modal-dialog": "^12.16.0",
63
+ "@atlaskit/modal-dialog": "^12.17.0",
64
64
  "@atlaskit/popup": "^1.27.0",
65
65
  "@atlaskit/range": "^7.4.0",
66
66
  "@atlaskit/section-message": "^6.6.0",