@atlaskit/datetime-picker 13.3.2 → 13.3.3

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 (11) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/components/date-picker.js +21 -7
  3. package/dist/cjs/components/date-time-picker.js +1 -1
  4. package/dist/cjs/components/time-picker.js +1 -1
  5. package/dist/es2019/components/date-picker.js +21 -7
  6. package/dist/es2019/components/date-time-picker.js +1 -1
  7. package/dist/es2019/components/time-picker.js +1 -1
  8. package/dist/esm/components/date-picker.js +21 -7
  9. package/dist/esm/components/date-time-picker.js +1 -1
  10. package/dist/esm/components/time-picker.js +1 -1
  11. package/package.json +8 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/datetime-picker
2
2
 
3
+ ## 13.3.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#94805](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94805) [`cf93487006a9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cf93487006a9) - [ux] Return focus to the date picker input on date selection
8
+ - Updated dependencies
9
+
3
10
  ## 13.3.2
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/components/date-picker.js CHANGED
@@ -36,7 +36,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
36
36
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
37
37
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
38
38
  var packageName = "@atlaskit/datetime-picker";
39
- var packageVersion = "13.3.2";
39
+ var packageVersion = "13.3.3";
40
40
  var datePickerDefaultProps = {
41
41
  appearance: 'default',
42
42
  autoFocus: false,
@@ -115,6 +115,20 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
115
115
  value: iso
116
116
  });
117
117
  _this.props.onChange(iso);
118
+
119
+ // Not ideal, and the alternative is to place a ref on the inner input of the Select
120
+ // but that would require a lot of extra work on the Select component just for this
121
+ // focus functionality. While that would be the 'right react' way to do it, it doesnt
122
+ // post any other benefits; performance wise, we are only searching within the
123
+ // container, making it quick.
124
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team-date-picker-input-focus-fix_awmzp')) {
125
+ var _this$containerRef;
126
+ var innerCombobox = (_this$containerRef = _this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
127
+ innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
128
+ _this.setState({
129
+ isOpen: false
130
+ });
131
+ }
118
132
  });
119
133
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputClick", function () {
120
134
  if (!_this.props.isDisabled && !_this.getSafeState().isOpen) {
@@ -124,9 +138,9 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
124
138
  }
125
139
  });
126
140
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onContainerBlur", function (event) {
127
- var _this$containerRef;
141
+ var _this$containerRef2;
128
142
  var newlyFocusedElement = event.relatedTarget;
129
- if (!((_this$containerRef = _this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.contains(newlyFocusedElement))) {
143
+ if (!((_this$containerRef2 = _this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
130
144
  _this.setState({
131
145
  isOpen: false
132
146
  });
@@ -136,14 +150,14 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
136
150
  }
137
151
  });
138
152
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectBlur", function (event) {
139
- var _this$containerRef2;
153
+ var _this$containerRef3;
140
154
  var newlyFocusedElement = event.relatedTarget;
141
155
  if (_this.getSafeState().clearingFromIcon) {
142
156
  // Don't close menu if blurring after the user has clicked clear
143
157
  _this.setState({
144
158
  clearingFromIcon: false
145
159
  });
146
- } else if (!((_this$containerRef2 = _this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
160
+ } else if (!((_this$containerRef3 = _this.containerRef) !== null && _this$containerRef3 !== void 0 && _this$containerRef3.contains(newlyFocusedElement))) {
147
161
  // Don't close menu if focus is staying within the date picker's
148
162
  // container. Makes keyboard accessibility of calendar possible
149
163
  _this.setState({
@@ -191,7 +205,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
191
205
  });
192
206
  });
193
207
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputKeyDown", function (event) {
194
- var _this$containerRef3;
208
+ var _this$containerRef4;
195
209
  var _this$getSafeState2 = _this.getSafeState(),
196
210
  value = _this$getSafeState2.value,
197
211
  calendarValue = _this$getSafeState2.calendarValue;
@@ -204,7 +218,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
204
218
  // this would be more "React-y", it doesn't seem to pose any other
205
219
  // benefits. Performance-wise, we are only searching within the
206
220
  // container, so it's quick.
207
- var innerCombobox = (_this$containerRef3 = _this.containerRef) === null || _this$containerRef3 === void 0 ? void 0 : _this$containerRef3.querySelector('[role="combobox"]');
221
+ var innerCombobox = (_this$containerRef4 = _this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
208
222
  innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
209
223
  _this.setState({
210
224
  isOpen: false
package/dist/cjs/components/date-time-picker.js CHANGED
@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
31
31
  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; }
32
32
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
33
33
  var packageName = "@atlaskit/datetime-picker";
34
- var packageVersion = "13.3.2";
34
+ var packageVersion = "13.3.3";
35
35
  // Make DatePicker 50% the width of DateTimePicker
36
36
  // If rendering an icon container, shrink the TimePicker
37
37
  var datePickerContainerStyles = (0, _react2.css)({
package/dist/cjs/components/time-picker.js CHANGED
@@ -36,7 +36,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
36
36
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line no-restricted-imports
37
37
  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
38
38
  var packageName = "@atlaskit/datetime-picker";
39
- var packageVersion = "13.3.2";
39
+ var packageVersion = "13.3.3";
40
40
  var menuStyles = {
41
41
  /* Need to remove default absolute positioning as that causes issues with position fixed */
42
42
  position: 'static',
package/dist/es2019/components/date-picker.js CHANGED
@@ -16,7 +16,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
16
16
  import { convertTokens } from '../internal/parse-tokens';
17
17
  import { makeSingleValue } from '../internal/single-value';
18
18
  const packageName = "@atlaskit/datetime-picker";
19
- const packageVersion = "13.3.2";
19
+ const packageVersion = "13.3.3";
20
20
  const datePickerDefaultProps = {
21
21
  appearance: 'default',
22
22
  autoFocus: false,
@@ -91,6 +91,20 @@ class DatePicker extends Component {
91
91
  value: iso
92
92
  });
93
93
  this.props.onChange(iso);
94
+
95
+ // Not ideal, and the alternative is to place a ref on the inner input of the Select
96
+ // but that would require a lot of extra work on the Select component just for this
97
+ // focus functionality. While that would be the 'right react' way to do it, it doesnt
98
+ // post any other benefits; performance wise, we are only searching within the
99
+ // container, making it quick.
100
+ if (getBooleanFF('platform.design-system-team-date-picker-input-focus-fix_awmzp')) {
101
+ var _this$containerRef;
102
+ const innerCombobox = (_this$containerRef = this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
103
+ innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
104
+ this.setState({
105
+ isOpen: false
106
+ });
107
+ }
94
108
  });
95
109
  _defineProperty(this, "onInputClick", () => {
96
110
  if (!this.props.isDisabled && !this.getSafeState().isOpen) {
@@ -100,9 +114,9 @@ class DatePicker extends Component {
100
114
  }
101
115
  });
102
116
  _defineProperty(this, "onContainerBlur", event => {
103
- var _this$containerRef;
117
+ var _this$containerRef2;
104
118
  const newlyFocusedElement = event.relatedTarget;
105
- if (!((_this$containerRef = this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.contains(newlyFocusedElement))) {
119
+ if (!((_this$containerRef2 = this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
106
120
  this.setState({
107
121
  isOpen: false
108
122
  });
@@ -112,14 +126,14 @@ class DatePicker extends Component {
112
126
  }
113
127
  });
114
128
  _defineProperty(this, "onSelectBlur", event => {
115
- var _this$containerRef2;
129
+ var _this$containerRef3;
116
130
  const newlyFocusedElement = event.relatedTarget;
117
131
  if (this.getSafeState().clearingFromIcon) {
118
132
  // Don't close menu if blurring after the user has clicked clear
119
133
  this.setState({
120
134
  clearingFromIcon: false
121
135
  });
122
- } else if (!((_this$containerRef2 = this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
136
+ } else if (!((_this$containerRef3 = this.containerRef) !== null && _this$containerRef3 !== void 0 && _this$containerRef3.contains(newlyFocusedElement))) {
123
137
  // Don't close menu if focus is staying within the date picker's
124
138
  // container. Makes keyboard accessibility of calendar possible
125
139
  this.setState({
@@ -168,7 +182,7 @@ class DatePicker extends Component {
168
182
  });
169
183
  });
170
184
  _defineProperty(this, "onInputKeyDown", event => {
171
- var _this$containerRef3;
185
+ var _this$containerRef4;
172
186
  const {
173
187
  value,
174
188
  calendarValue
@@ -182,7 +196,7 @@ class DatePicker extends Component {
182
196
  // this would be more "React-y", it doesn't seem to pose any other
183
197
  // benefits. Performance-wise, we are only searching within the
184
198
  // container, so it's quick.
185
- const innerCombobox = (_this$containerRef3 = this.containerRef) === null || _this$containerRef3 === void 0 ? void 0 : _this$containerRef3.querySelector('[role="combobox"]');
199
+ const innerCombobox = (_this$containerRef4 = this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
186
200
  innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
187
201
  this.setState({
188
202
  isOpen: false
package/dist/es2019/components/date-time-picker.js CHANGED
@@ -15,7 +15,7 @@ import { convertTokens } from '../internal/parse-tokens';
15
15
  import DatePicker from './date-picker';
16
16
  import TimePicker from './time-picker';
17
17
  const packageName = "@atlaskit/datetime-picker";
18
- const packageVersion = "13.3.2";
18
+ const packageVersion = "13.3.3";
19
19
  // Make DatePicker 50% the width of DateTimePicker
20
20
  // If rendering an icon container, shrink the TimePicker
21
21
  const datePickerContainerStyles = css({
package/dist/es2019/components/time-picker.js CHANGED
@@ -16,7 +16,7 @@ import parseTime from '../internal/parse-time';
16
16
  import { convertTokens } from '../internal/parse-tokens';
17
17
  import { makeSingleValue } from '../internal/single-value';
18
18
  const packageName = "@atlaskit/datetime-picker";
19
- const packageVersion = "13.3.2";
19
+ const packageVersion = "13.3.3";
20
20
  const menuStyles = {
21
21
  /* Need to remove default absolute positioning as that causes issues with position fixed */
22
22
  position: 'static',
package/dist/esm/components/date-picker.js CHANGED
@@ -27,7 +27,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
27
27
  import { convertTokens } from '../internal/parse-tokens';
28
28
  import { makeSingleValue } from '../internal/single-value';
29
29
  var packageName = "@atlaskit/datetime-picker";
30
- var packageVersion = "13.3.2";
30
+ var packageVersion = "13.3.3";
31
31
  var datePickerDefaultProps = {
32
32
  appearance: 'default',
33
33
  autoFocus: false,
@@ -106,6 +106,20 @@ var DatePicker = /*#__PURE__*/function (_Component) {
106
106
  value: iso
107
107
  });
108
108
  _this.props.onChange(iso);
109
+
110
+ // Not ideal, and the alternative is to place a ref on the inner input of the Select
111
+ // but that would require a lot of extra work on the Select component just for this
112
+ // focus functionality. While that would be the 'right react' way to do it, it doesnt
113
+ // post any other benefits; performance wise, we are only searching within the
114
+ // container, making it quick.
115
+ if (getBooleanFF('platform.design-system-team-date-picker-input-focus-fix_awmzp')) {
116
+ var _this$containerRef;
117
+ var innerCombobox = (_this$containerRef = _this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
118
+ innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
119
+ _this.setState({
120
+ isOpen: false
121
+ });
122
+ }
109
123
  });
110
124
  _defineProperty(_assertThisInitialized(_this), "onInputClick", function () {
111
125
  if (!_this.props.isDisabled && !_this.getSafeState().isOpen) {
@@ -115,9 +129,9 @@ var DatePicker = /*#__PURE__*/function (_Component) {
115
129
  }
116
130
  });
117
131
  _defineProperty(_assertThisInitialized(_this), "onContainerBlur", function (event) {
118
- var _this$containerRef;
132
+ var _this$containerRef2;
119
133
  var newlyFocusedElement = event.relatedTarget;
120
- if (!((_this$containerRef = _this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.contains(newlyFocusedElement))) {
134
+ if (!((_this$containerRef2 = _this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
121
135
  _this.setState({
122
136
  isOpen: false
123
137
  });
@@ -127,14 +141,14 @@ var DatePicker = /*#__PURE__*/function (_Component) {
127
141
  }
128
142
  });
129
143
  _defineProperty(_assertThisInitialized(_this), "onSelectBlur", function (event) {
130
- var _this$containerRef2;
144
+ var _this$containerRef3;
131
145
  var newlyFocusedElement = event.relatedTarget;
132
146
  if (_this.getSafeState().clearingFromIcon) {
133
147
  // Don't close menu if blurring after the user has clicked clear
134
148
  _this.setState({
135
149
  clearingFromIcon: false
136
150
  });
137
- } else if (!((_this$containerRef2 = _this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
151
+ } else if (!((_this$containerRef3 = _this.containerRef) !== null && _this$containerRef3 !== void 0 && _this$containerRef3.contains(newlyFocusedElement))) {
138
152
  // Don't close menu if focus is staying within the date picker's
139
153
  // container. Makes keyboard accessibility of calendar possible
140
154
  _this.setState({
@@ -182,7 +196,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
182
196
  });
183
197
  });
184
198
  _defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (event) {
185
- var _this$containerRef3;
199
+ var _this$containerRef4;
186
200
  var _this$getSafeState2 = _this.getSafeState(),
187
201
  value = _this$getSafeState2.value,
188
202
  calendarValue = _this$getSafeState2.calendarValue;
@@ -195,7 +209,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
195
209
  // this would be more "React-y", it doesn't seem to pose any other
196
210
  // benefits. Performance-wise, we are only searching within the
197
211
  // container, so it's quick.
198
- var innerCombobox = (_this$containerRef3 = _this.containerRef) === null || _this$containerRef3 === void 0 ? void 0 : _this$containerRef3.querySelector('[role="combobox"]');
212
+ var innerCombobox = (_this$containerRef4 = _this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
199
213
  innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
200
214
  _this.setState({
201
215
  isOpen: false
package/dist/esm/components/date-time-picker.js CHANGED
@@ -25,7 +25,7 @@ import { convertTokens } from '../internal/parse-tokens';
25
25
  import DatePicker from './date-picker';
26
26
  import TimePicker from './time-picker';
27
27
  var packageName = "@atlaskit/datetime-picker";
28
- var packageVersion = "13.3.2";
28
+ var packageVersion = "13.3.3";
29
29
  // Make DatePicker 50% the width of DateTimePicker
30
30
  // If rendering an icon container, shrink the TimePicker
31
31
  var datePickerContainerStyles = css({
package/dist/esm/components/time-picker.js CHANGED
@@ -28,7 +28,7 @@ import parseTime from '../internal/parse-time';
28
28
  import { convertTokens } from '../internal/parse-tokens';
29
29
  import { makeSingleValue } from '../internal/single-value';
30
30
  var packageName = "@atlaskit/datetime-picker";
31
- var packageVersion = "13.3.2";
31
+ var packageVersion = "13.3.3";
32
32
  var menuStyles = {
33
33
  /* Need to remove default absolute positioning as that causes issues with position fixed */
34
34
  position: 'static',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/datetime-picker",
3
- "version": "13.3.2",
3
+ "version": "13.3.3",
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
  }
39
39
  },
40
40
  "dependencies": {
41
- "@atlaskit/analytics-next": "^9.2.0",
41
+ "@atlaskit/analytics-next": "^9.3.0",
42
42
  "@atlaskit/calendar": "^14.2.0",
43
43
  "@atlaskit/ds-lib": "^2.3.0",
44
44
  "@atlaskit/icon": "^22.1.0",
@@ -48,7 +48,7 @@
48
48
  "@atlaskit/popper": "^5.5.0",
49
49
  "@atlaskit/select": "^17.6.0",
50
50
  "@atlaskit/theme": "^12.7.0",
51
- "@atlaskit/tokens": "^1.43.0",
51
+ "@atlaskit/tokens": "^1.44.0",
52
52
  "@babel/runtime": "^7.0.0",
53
53
  "@emotion/react": "^11.7.1",
54
54
  "date-fns": "^2.17.0",
@@ -62,9 +62,9 @@
62
62
  "@af/accessibility-testing": "*",
63
63
  "@af/integration-testing": "*",
64
64
  "@af/visual-regression": "*",
65
- "@atlaskit/button": "^17.12.0",
65
+ "@atlaskit/button": "^17.14.0",
66
66
  "@atlaskit/docs": "*",
67
- "@atlaskit/form": "^9.2.0",
67
+ "@atlaskit/form": "^9.3.0",
68
68
  "@atlaskit/modal-dialog": "^12.11.0",
69
69
  "@atlaskit/popup": "^1.14.0",
70
70
  "@atlaskit/range": "^7.1.0",
@@ -118,6 +118,9 @@
118
118
  },
119
119
  "platform.design-system-team.move-onblur-event-to-input-container_3z82c": {
120
120
  "type": "boolean"
121
+ },
122
+ "platform.design-system-team-date-picker-input-focus-fix_awmzp": {
123
+ "type": "boolean"
121
124
  }
122
125
  },
123
126
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",