@atlaskit/datetime-picker 13.7.3 → 13.7.4
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 +9 -0
- package/dist/cjs/components/date-picker.js +25 -6
- package/dist/cjs/components/date-time-picker.js +3 -2
- package/dist/cjs/components/time-picker.js +1 -1
- package/dist/cjs/internal/date-time-picker-container.js +1 -1
- package/dist/cjs/internal/fixed-layer-menu.js +1 -1
- package/dist/cjs/internal/menu.js +3 -2
- package/dist/es2019/components/date-picker.js +24 -6
- package/dist/es2019/components/date-time-picker.js +2 -2
- package/dist/es2019/components/time-picker.js +1 -1
- package/dist/es2019/internal/date-time-picker-container.js +1 -1
- package/dist/es2019/internal/fixed-layer-menu.js +1 -1
- package/dist/es2019/internal/menu.js +4 -3
- package/dist/esm/components/date-picker.js +24 -6
- package/dist/esm/components/date-time-picker.js +2 -2
- package/dist/esm/components/time-picker.js +1 -1
- package/dist/esm/internal/date-time-picker-container.js +1 -1
- package/dist/esm/internal/fixed-layer-menu.js +1 -1
- package/dist/esm/internal/menu.js +4 -3
- package/dist/types/components/date-picker.d.ts +4 -1
- package/dist/types/components/date-time-picker.d.ts +1 -1
- package/dist/types/internal/date-time-picker-container.d.ts +1 -1
- package/dist/types/internal/fixed-layer-menu.d.ts +1 -1
- package/dist/types/internal/menu.d.ts +1 -1
- package/dist/types-ts4.5/components/date-picker.d.ts +4 -1
- package/dist/types-ts4.5/components/date-time-picker.d.ts +1 -1
- package/dist/types-ts4.5/internal/date-time-picker-container.d.ts +1 -1
- package/dist/types-ts4.5/internal/fixed-layer-menu.d.ts +1 -1
- package/dist/types-ts4.5/internal/menu.d.ts +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/datetime-picker
|
|
2
2
|
|
|
3
|
+
## 13.7.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`974d1508085ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/974d1508085ce) -
|
|
8
|
+
Accessibility changes. Add ability to change focus to the current date using ArrowUp and ArrowDown
|
|
9
|
+
keys while the focus is on the `input`.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 13.7.3
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -36,9 +36,10 @@ 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; })(); } /**
|
|
38
38
|
* @jsxRuntime classic
|
|
39
|
-
|
|
39
|
+
* @jsx jsx
|
|
40
|
+
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
40
41
|
var packageName = "@atlaskit/datetime-picker";
|
|
41
|
-
var packageVersion = "13.7.
|
|
42
|
+
var packageVersion = "13.7.4";
|
|
42
43
|
var datePickerDefaultProps = {
|
|
43
44
|
appearance: 'default',
|
|
44
45
|
autoFocus: false,
|
|
@@ -142,11 +143,17 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
|
|
|
142
143
|
var newlyFocusedElement = event.relatedTarget;
|
|
143
144
|
if (!((_this$containerRef2 = _this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
|
|
144
145
|
_this.setState({
|
|
145
|
-
isOpen: false
|
|
146
|
+
isOpen: false,
|
|
147
|
+
shouldSetFocusOnCurrentDay: false
|
|
146
148
|
});
|
|
147
149
|
_this.props.onBlur(event);
|
|
148
150
|
}
|
|
149
151
|
});
|
|
152
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onContainerFocus", function () {
|
|
153
|
+
_this.setState({
|
|
154
|
+
shouldSetFocusOnCurrentDay: false
|
|
155
|
+
});
|
|
156
|
+
});
|
|
150
157
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectBlur", function (event) {
|
|
151
158
|
var _this$containerRef3;
|
|
152
159
|
var newlyFocusedElement = event.relatedTarget;
|
|
@@ -223,7 +230,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
|
|
|
223
230
|
var innerCombobox = (_this$containerRef4 = _this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
|
|
224
231
|
innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
|
|
225
232
|
_this.setState({
|
|
226
|
-
isOpen: false
|
|
233
|
+
isOpen: false,
|
|
234
|
+
shouldSetFocusOnCurrentDay: false
|
|
227
235
|
});
|
|
228
236
|
break;
|
|
229
237
|
case 'backspace':
|
|
@@ -263,6 +271,14 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
|
|
|
263
271
|
}
|
|
264
272
|
}
|
|
265
273
|
break;
|
|
274
|
+
case 'arrowdown':
|
|
275
|
+
case 'arrowup':
|
|
276
|
+
if (_this.state.isOpen && !_this.state.shouldSetFocusOnCurrentDay) {
|
|
277
|
+
_this.setState({
|
|
278
|
+
shouldSetFocusOnCurrentDay: true
|
|
279
|
+
});
|
|
280
|
+
}
|
|
281
|
+
break;
|
|
266
282
|
default:
|
|
267
283
|
break;
|
|
268
284
|
}
|
|
@@ -361,7 +377,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
|
|
|
361
377
|
value: _this.props.value || _this.props.defaultValue,
|
|
362
378
|
calendarValue: _this.props.value || _this.props.defaultValue || (0, _parseDate.getShortISOString)(new Date()),
|
|
363
379
|
l10n: (0, _locale.createLocalizationProvider)(_this.props.locale),
|
|
364
|
-
locale: _this.props.locale
|
|
380
|
+
locale: _this.props.locale,
|
|
381
|
+
shouldSetFocusOnCurrentDay: false
|
|
365
382
|
};
|
|
366
383
|
return _this;
|
|
367
384
|
}
|
|
@@ -435,7 +452,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
|
|
|
435
452
|
calendarLocale: locale,
|
|
436
453
|
calendarWeekStartDay: weekStartDay,
|
|
437
454
|
nextMonthLabel: nextMonthLabel,
|
|
438
|
-
previousMonthLabel: previousMonthLabel
|
|
455
|
+
previousMonthLabel: previousMonthLabel,
|
|
456
|
+
shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
|
|
439
457
|
};
|
|
440
458
|
return (
|
|
441
459
|
// These event handlers must be on this element because the events come
|
|
@@ -443,6 +461,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
|
|
|
443
461
|
(0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
|
|
444
462
|
role: "presentation",
|
|
445
463
|
onBlur: this.onContainerBlur,
|
|
464
|
+
onFocus: this.onContainerFocus,
|
|
446
465
|
onClick: this.onInputClick,
|
|
447
466
|
onInput: this.onTextInput,
|
|
448
467
|
onKeyDown: this.onInputKeyDown,
|
|
@@ -31,9 +31,10 @@ 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; } /**
|
|
33
33
|
* @jsxRuntime classic
|
|
34
|
-
|
|
34
|
+
* @jsx jsx
|
|
35
|
+
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
35
36
|
var packageName = "@atlaskit/datetime-picker";
|
|
36
|
-
var packageVersion = "13.7.
|
|
37
|
+
var packageVersion = "13.7.4";
|
|
37
38
|
// Make DatePicker 50% the width of DateTimePicker
|
|
38
39
|
// If rendering an icon container, shrink the TimePicker
|
|
39
40
|
var datePickerContainerStyles = (0, _react2.css)({
|
|
@@ -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.7.
|
|
39
|
+
var packageVersion = "13.7.4";
|
|
40
40
|
var menuStyles = {
|
|
41
41
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
42
42
|
position: 'static',
|
|
@@ -10,8 +10,8 @@ var _react = require("@emotion/react");
|
|
|
10
10
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
11
|
/**
|
|
12
12
|
* @jsxRuntime classic
|
|
13
|
+
* @jsx jsx
|
|
13
14
|
*/
|
|
14
|
-
/** @jsx jsx */
|
|
15
15
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
16
16
|
|
|
17
17
|
var isInvalidBorderStyles = (0, _react.css)({
|
|
@@ -13,8 +13,8 @@ var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
|
|
|
13
13
|
var _excluded = ["selectProps"];
|
|
14
14
|
/**
|
|
15
15
|
* @jsxRuntime classic
|
|
16
|
+
* @jsx jsx
|
|
16
17
|
*/
|
|
17
|
-
/** @jsx jsx */
|
|
18
18
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
19
19
|
/**
|
|
20
20
|
* This is the fixed layer menu used in the time picker.
|
|
@@ -16,8 +16,8 @@ var _constants = require("@atlaskit/theme/constants");
|
|
|
16
16
|
var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
|
|
17
17
|
/**
|
|
18
18
|
* @jsxRuntime classic
|
|
19
|
+
* @jsx jsx
|
|
19
20
|
*/
|
|
20
|
-
/** @jsx jsx */
|
|
21
21
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
22
22
|
|
|
23
23
|
function getValidDate(iso) {
|
|
@@ -43,7 +43,7 @@ var Menu = exports.Menu = function Menu(_ref) {
|
|
|
43
43
|
var selectProps = _ref.selectProps,
|
|
44
44
|
innerProps = _ref.innerProps;
|
|
45
45
|
return (0, _react.jsx)(_layering.UNSAFE_LAYERING, {
|
|
46
|
-
isDisabled: (0, _platformFeatureFlags.
|
|
46
|
+
isDisabled: (0, _platformFeatureFlags.fg)('platform.design-system-team.layering_qmiw3') ? false : true
|
|
47
47
|
}, (0, _react.jsx)(_fixedLayer.default, {
|
|
48
48
|
inputValue: selectProps.inputValue,
|
|
49
49
|
containerRef: selectProps.calendarContainerRef,
|
|
@@ -60,6 +60,7 @@ var Menu = exports.Menu = function Menu(_ref) {
|
|
|
60
60
|
previousMonthLabel: selectProps.previousMonthLabel,
|
|
61
61
|
calendarRef: selectProps.calendarRef,
|
|
62
62
|
selected: [selectProps.calendarValue],
|
|
63
|
+
shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
|
|
63
64
|
locale: selectProps.calendarLocale,
|
|
64
65
|
testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
|
|
65
66
|
weekStartDay: selectProps.calendarWeekStartDay
|
|
@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
/**
|
|
4
4
|
* @jsxRuntime classic
|
|
5
|
+
* @jsx jsx
|
|
5
6
|
*/
|
|
6
|
-
/** @jsx jsx */
|
|
7
7
|
import { Component } from 'react';
|
|
8
8
|
|
|
9
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
@@ -21,7 +21,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
|
|
|
21
21
|
import { convertTokens } from '../internal/parse-tokens';
|
|
22
22
|
import { makeSingleValue } from '../internal/single-value';
|
|
23
23
|
const packageName = "@atlaskit/datetime-picker";
|
|
24
|
-
const packageVersion = "13.7.
|
|
24
|
+
const packageVersion = "13.7.4";
|
|
25
25
|
const datePickerDefaultProps = {
|
|
26
26
|
appearance: 'default',
|
|
27
27
|
autoFocus: false,
|
|
@@ -121,11 +121,17 @@ class DatePickerComponent extends Component {
|
|
|
121
121
|
const newlyFocusedElement = event.relatedTarget;
|
|
122
122
|
if (!((_this$containerRef2 = this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
|
|
123
123
|
this.setState({
|
|
124
|
-
isOpen: false
|
|
124
|
+
isOpen: false,
|
|
125
|
+
shouldSetFocusOnCurrentDay: false
|
|
125
126
|
});
|
|
126
127
|
this.props.onBlur(event);
|
|
127
128
|
}
|
|
128
129
|
});
|
|
130
|
+
_defineProperty(this, "onContainerFocus", () => {
|
|
131
|
+
this.setState({
|
|
132
|
+
shouldSetFocusOnCurrentDay: false
|
|
133
|
+
});
|
|
134
|
+
});
|
|
129
135
|
_defineProperty(this, "onSelectBlur", event => {
|
|
130
136
|
var _this$containerRef3;
|
|
131
137
|
const newlyFocusedElement = event.relatedTarget;
|
|
@@ -204,7 +210,8 @@ class DatePickerComponent extends Component {
|
|
|
204
210
|
const innerCombobox = (_this$containerRef4 = this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
|
|
205
211
|
innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
|
|
206
212
|
this.setState({
|
|
207
|
-
isOpen: false
|
|
213
|
+
isOpen: false,
|
|
214
|
+
shouldSetFocusOnCurrentDay: false
|
|
208
215
|
});
|
|
209
216
|
break;
|
|
210
217
|
case 'backspace':
|
|
@@ -244,6 +251,14 @@ class DatePickerComponent extends Component {
|
|
|
244
251
|
}
|
|
245
252
|
}
|
|
246
253
|
break;
|
|
254
|
+
case 'arrowdown':
|
|
255
|
+
case 'arrowup':
|
|
256
|
+
if (this.state.isOpen && !this.state.shouldSetFocusOnCurrentDay) {
|
|
257
|
+
this.setState({
|
|
258
|
+
shouldSetFocusOnCurrentDay: true
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
break;
|
|
247
262
|
default:
|
|
248
263
|
break;
|
|
249
264
|
}
|
|
@@ -352,7 +367,8 @@ class DatePickerComponent extends Component {
|
|
|
352
367
|
value: this.props.value || this.props.defaultValue,
|
|
353
368
|
calendarValue: this.props.value || this.props.defaultValue || getShortISOString(new Date()),
|
|
354
369
|
l10n: createLocalizationProvider(this.props.locale),
|
|
355
|
-
locale: this.props.locale
|
|
370
|
+
locale: this.props.locale,
|
|
371
|
+
shouldSetFocusOnCurrentDay: false
|
|
356
372
|
};
|
|
357
373
|
}
|
|
358
374
|
static getDerivedStateFromProps(nextProps, prevState) {
|
|
@@ -437,7 +453,8 @@ class DatePickerComponent extends Component {
|
|
|
437
453
|
calendarLocale: locale,
|
|
438
454
|
calendarWeekStartDay: weekStartDay,
|
|
439
455
|
nextMonthLabel,
|
|
440
|
-
previousMonthLabel
|
|
456
|
+
previousMonthLabel,
|
|
457
|
+
shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
|
|
441
458
|
};
|
|
442
459
|
return (
|
|
443
460
|
// These event handlers must be on this element because the events come
|
|
@@ -445,6 +462,7 @@ class DatePickerComponent extends Component {
|
|
|
445
462
|
jsx("div", _extends({}, innerProps, {
|
|
446
463
|
role: "presentation",
|
|
447
464
|
onBlur: this.onContainerBlur,
|
|
465
|
+
onFocus: this.onContainerFocus,
|
|
448
466
|
onClick: this.onInputClick,
|
|
449
467
|
onInput: this.onTextInput,
|
|
450
468
|
onKeyDown: this.onInputKeyDown,
|
|
@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
/**
|
|
4
4
|
* @jsxRuntime classic
|
|
5
|
+
* @jsx jsx
|
|
5
6
|
*/
|
|
6
|
-
/** @jsx jsx */
|
|
7
7
|
import React from 'react';
|
|
8
8
|
|
|
9
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
@@ -20,7 +20,7 @@ import { convertTokens } from '../internal/parse-tokens';
|
|
|
20
20
|
import DatePicker from './date-picker';
|
|
21
21
|
import TimePicker from './time-picker';
|
|
22
22
|
const packageName = "@atlaskit/datetime-picker";
|
|
23
|
-
const packageVersion = "13.7.
|
|
23
|
+
const packageVersion = "13.7.4";
|
|
24
24
|
// Make DatePicker 50% the width of DateTimePicker
|
|
25
25
|
// If rendering an icon container, shrink the TimePicker
|
|
26
26
|
const datePickerContainerStyles = css({
|
|
@@ -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.7.
|
|
19
|
+
const packageVersion = "13.7.4";
|
|
20
20
|
const menuStyles = {
|
|
21
21
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
22
22
|
position: 'static',
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
/**
|
|
3
3
|
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
4
5
|
*/
|
|
5
|
-
/** @jsx jsx */
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
7
|
import { css, jsx } from '@emotion/react';
|
|
8
8
|
import { B100, N0, N100, N20, N30, R400 } from '@atlaskit/theme/colors';
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
/**
|
|
3
3
|
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
4
5
|
*/
|
|
5
|
-
/** @jsx jsx */
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
7
|
import { jsx } from '@emotion/react';
|
|
8
8
|
import { components } from '@atlaskit/select';
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
/**
|
|
3
3
|
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
4
5
|
*/
|
|
5
|
-
/** @jsx jsx */
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
7
|
import { css, jsx } from '@emotion/react';
|
|
8
8
|
import { isValid, parseISO } from 'date-fns';
|
|
9
9
|
import Calendar from '@atlaskit/calendar';
|
|
10
10
|
import { UNSAFE_LAYERING } from '@atlaskit/layering';
|
|
11
|
-
import {
|
|
11
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
12
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
13
13
|
import { layers } from '@atlaskit/theme/constants';
|
|
14
14
|
import FixedLayer from '../internal/fixed-layer';
|
|
@@ -35,7 +35,7 @@ export const Menu = ({
|
|
|
35
35
|
selectProps,
|
|
36
36
|
innerProps
|
|
37
37
|
}) => jsx(UNSAFE_LAYERING, {
|
|
38
|
-
isDisabled:
|
|
38
|
+
isDisabled: fg('platform.design-system-team.layering_qmiw3') ? false : true
|
|
39
39
|
}, jsx(FixedLayer, {
|
|
40
40
|
inputValue: selectProps.inputValue,
|
|
41
41
|
containerRef: selectProps.calendarContainerRef,
|
|
@@ -52,6 +52,7 @@ export const Menu = ({
|
|
|
52
52
|
previousMonthLabel: selectProps.previousMonthLabel,
|
|
53
53
|
calendarRef: selectProps.calendarRef,
|
|
54
54
|
selected: [selectProps.calendarValue],
|
|
55
|
+
shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
|
|
55
56
|
locale: selectProps.calendarLocale,
|
|
56
57
|
testId: selectProps.testId && `${selectProps.testId}--calendar`,
|
|
57
58
|
weekStartDay: selectProps.calendarWeekStartDay
|
|
@@ -13,8 +13,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
|
|
|
13
13
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
14
14
|
/**
|
|
15
15
|
* @jsxRuntime classic
|
|
16
|
+
* @jsx jsx
|
|
16
17
|
*/
|
|
17
|
-
/** @jsx jsx */
|
|
18
18
|
import { Component } from 'react';
|
|
19
19
|
|
|
20
20
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
@@ -32,7 +32,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
|
|
|
32
32
|
import { convertTokens } from '../internal/parse-tokens';
|
|
33
33
|
import { makeSingleValue } from '../internal/single-value';
|
|
34
34
|
var packageName = "@atlaskit/datetime-picker";
|
|
35
|
-
var packageVersion = "13.7.
|
|
35
|
+
var packageVersion = "13.7.4";
|
|
36
36
|
var datePickerDefaultProps = {
|
|
37
37
|
appearance: 'default',
|
|
38
38
|
autoFocus: false,
|
|
@@ -136,11 +136,17 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
|
|
|
136
136
|
var newlyFocusedElement = event.relatedTarget;
|
|
137
137
|
if (!((_this$containerRef2 = _this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
|
|
138
138
|
_this.setState({
|
|
139
|
-
isOpen: false
|
|
139
|
+
isOpen: false,
|
|
140
|
+
shouldSetFocusOnCurrentDay: false
|
|
140
141
|
});
|
|
141
142
|
_this.props.onBlur(event);
|
|
142
143
|
}
|
|
143
144
|
});
|
|
145
|
+
_defineProperty(_assertThisInitialized(_this), "onContainerFocus", function () {
|
|
146
|
+
_this.setState({
|
|
147
|
+
shouldSetFocusOnCurrentDay: false
|
|
148
|
+
});
|
|
149
|
+
});
|
|
144
150
|
_defineProperty(_assertThisInitialized(_this), "onSelectBlur", function (event) {
|
|
145
151
|
var _this$containerRef3;
|
|
146
152
|
var newlyFocusedElement = event.relatedTarget;
|
|
@@ -217,7 +223,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
|
|
|
217
223
|
var innerCombobox = (_this$containerRef4 = _this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
|
|
218
224
|
innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
|
|
219
225
|
_this.setState({
|
|
220
|
-
isOpen: false
|
|
226
|
+
isOpen: false,
|
|
227
|
+
shouldSetFocusOnCurrentDay: false
|
|
221
228
|
});
|
|
222
229
|
break;
|
|
223
230
|
case 'backspace':
|
|
@@ -257,6 +264,14 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
|
|
|
257
264
|
}
|
|
258
265
|
}
|
|
259
266
|
break;
|
|
267
|
+
case 'arrowdown':
|
|
268
|
+
case 'arrowup':
|
|
269
|
+
if (_this.state.isOpen && !_this.state.shouldSetFocusOnCurrentDay) {
|
|
270
|
+
_this.setState({
|
|
271
|
+
shouldSetFocusOnCurrentDay: true
|
|
272
|
+
});
|
|
273
|
+
}
|
|
274
|
+
break;
|
|
260
275
|
default:
|
|
261
276
|
break;
|
|
262
277
|
}
|
|
@@ -355,7 +370,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
|
|
|
355
370
|
value: _this.props.value || _this.props.defaultValue,
|
|
356
371
|
calendarValue: _this.props.value || _this.props.defaultValue || getShortISOString(new Date()),
|
|
357
372
|
l10n: createLocalizationProvider(_this.props.locale),
|
|
358
|
-
locale: _this.props.locale
|
|
373
|
+
locale: _this.props.locale,
|
|
374
|
+
shouldSetFocusOnCurrentDay: false
|
|
359
375
|
};
|
|
360
376
|
return _this;
|
|
361
377
|
}
|
|
@@ -429,7 +445,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
|
|
|
429
445
|
calendarLocale: locale,
|
|
430
446
|
calendarWeekStartDay: weekStartDay,
|
|
431
447
|
nextMonthLabel: nextMonthLabel,
|
|
432
|
-
previousMonthLabel: previousMonthLabel
|
|
448
|
+
previousMonthLabel: previousMonthLabel,
|
|
449
|
+
shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
|
|
433
450
|
};
|
|
434
451
|
return (
|
|
435
452
|
// These event handlers must be on this element because the events come
|
|
@@ -437,6 +454,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
|
|
|
437
454
|
jsx("div", _extends({}, innerProps, {
|
|
438
455
|
role: "presentation",
|
|
439
456
|
onBlur: this.onContainerBlur,
|
|
457
|
+
onFocus: this.onContainerFocus,
|
|
440
458
|
onClick: this.onInputClick,
|
|
441
459
|
onInput: this.onTextInput,
|
|
442
460
|
onKeyDown: this.onInputKeyDown,
|
|
@@ -12,8 +12,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
12
12
|
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; }
|
|
13
13
|
/**
|
|
14
14
|
* @jsxRuntime classic
|
|
15
|
+
* @jsx jsx
|
|
15
16
|
*/
|
|
16
|
-
/** @jsx jsx */
|
|
17
17
|
import React from 'react';
|
|
18
18
|
|
|
19
19
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
@@ -30,7 +30,7 @@ import { convertTokens } from '../internal/parse-tokens';
|
|
|
30
30
|
import DatePicker from './date-picker';
|
|
31
31
|
import TimePicker from './time-picker';
|
|
32
32
|
var packageName = "@atlaskit/datetime-picker";
|
|
33
|
-
var packageVersion = "13.7.
|
|
33
|
+
var packageVersion = "13.7.4";
|
|
34
34
|
// Make DatePicker 50% the width of DateTimePicker
|
|
35
35
|
// If rendering an icon container, shrink the TimePicker
|
|
36
36
|
var datePickerContainerStyles = css({
|
|
@@ -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.7.
|
|
31
|
+
var packageVersion = "13.7.4";
|
|
32
32
|
var menuStyles = {
|
|
33
33
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
34
34
|
position: 'static',
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
/**
|
|
3
3
|
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
4
5
|
*/
|
|
5
|
-
/** @jsx jsx */
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
7
|
import { css, jsx } from '@emotion/react';
|
|
8
8
|
import { B100, N0, N100, N20, N30, R400 } from '@atlaskit/theme/colors';
|
|
@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
3
3
|
var _excluded = ["selectProps"];
|
|
4
4
|
/**
|
|
5
5
|
* @jsxRuntime classic
|
|
6
|
+
* @jsx jsx
|
|
6
7
|
*/
|
|
7
|
-
/** @jsx jsx */
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
9
|
import { jsx } from '@emotion/react';
|
|
10
10
|
import { components } from '@atlaskit/select';
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
/**
|
|
3
3
|
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
4
5
|
*/
|
|
5
|
-
/** @jsx jsx */
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
7
|
import { css, jsx } from '@emotion/react';
|
|
8
8
|
import { isValid, parseISO } from 'date-fns';
|
|
9
9
|
import Calendar from '@atlaskit/calendar';
|
|
10
10
|
import { UNSAFE_LAYERING } from '@atlaskit/layering';
|
|
11
|
-
import {
|
|
11
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
12
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
13
13
|
import { layers } from '@atlaskit/theme/constants';
|
|
14
14
|
import FixedLayer from '../internal/fixed-layer';
|
|
@@ -35,7 +35,7 @@ export var Menu = function Menu(_ref) {
|
|
|
35
35
|
var selectProps = _ref.selectProps,
|
|
36
36
|
innerProps = _ref.innerProps;
|
|
37
37
|
return jsx(UNSAFE_LAYERING, {
|
|
38
|
-
isDisabled:
|
|
38
|
+
isDisabled: fg('platform.design-system-team.layering_qmiw3') ? false : true
|
|
39
39
|
}, jsx(FixedLayer, {
|
|
40
40
|
inputValue: selectProps.inputValue,
|
|
41
41
|
containerRef: selectProps.calendarContainerRef,
|
|
@@ -52,6 +52,7 @@ export var Menu = function Menu(_ref) {
|
|
|
52
52
|
previousMonthLabel: selectProps.previousMonthLabel,
|
|
53
53
|
calendarRef: selectProps.calendarRef,
|
|
54
54
|
selected: [selectProps.calendarValue],
|
|
55
|
+
shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
|
|
55
56
|
locale: selectProps.calendarLocale,
|
|
56
57
|
testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
|
|
57
58
|
weekStartDay: selectProps.calendarWeekStartDay
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
3
4
|
*/
|
|
4
|
-
/** @jsx jsx */
|
|
5
5
|
import { Component } from 'react';
|
|
6
6
|
import { jsx } from '@emotion/react';
|
|
7
7
|
import { type CalendarRef } from '@atlaskit/calendar';
|
|
@@ -23,6 +23,7 @@ interface State {
|
|
|
23
23
|
selectInputValue: string;
|
|
24
24
|
l10n: LocalizationProvider;
|
|
25
25
|
locale: string;
|
|
26
|
+
shouldSetFocusOnCurrentDay: boolean;
|
|
26
27
|
}
|
|
27
28
|
declare const datePickerDefaultProps: {
|
|
28
29
|
appearance: Appearance;
|
|
@@ -86,6 +87,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
|
|
|
86
87
|
selectInputValue: string;
|
|
87
88
|
l10n: LocalizationProvider;
|
|
88
89
|
locale: string;
|
|
90
|
+
shouldSetFocusOnCurrentDay: boolean;
|
|
89
91
|
};
|
|
90
92
|
isDateDisabled: (date: string) => boolean;
|
|
91
93
|
onCalendarChange: ({ iso }: {
|
|
@@ -96,6 +98,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
|
|
|
96
98
|
}) => void;
|
|
97
99
|
onInputClick: () => void;
|
|
98
100
|
onContainerBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
101
|
+
onContainerFocus: () => void;
|
|
99
102
|
onSelectBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
100
103
|
onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
101
104
|
onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
3
4
|
*/
|
|
4
|
-
/** @jsx jsx */
|
|
5
5
|
import { Component } from 'react';
|
|
6
6
|
import { jsx } from '@emotion/react';
|
|
7
7
|
import { type CalendarRef } from '@atlaskit/calendar';
|
|
@@ -23,6 +23,7 @@ interface State {
|
|
|
23
23
|
selectInputValue: string;
|
|
24
24
|
l10n: LocalizationProvider;
|
|
25
25
|
locale: string;
|
|
26
|
+
shouldSetFocusOnCurrentDay: boolean;
|
|
26
27
|
}
|
|
27
28
|
declare const datePickerDefaultProps: {
|
|
28
29
|
appearance: Appearance;
|
|
@@ -86,6 +87,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
|
|
|
86
87
|
selectInputValue: string;
|
|
87
88
|
l10n: LocalizationProvider;
|
|
88
89
|
locale: string;
|
|
90
|
+
shouldSetFocusOnCurrentDay: boolean;
|
|
89
91
|
};
|
|
90
92
|
isDateDisabled: (date: string) => boolean;
|
|
91
93
|
onCalendarChange: ({ iso }: {
|
|
@@ -96,6 +98,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
|
|
|
96
98
|
}) => void;
|
|
97
99
|
onInputClick: () => void;
|
|
98
100
|
onContainerBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
101
|
+
onContainerFocus: () => void;
|
|
99
102
|
onSelectBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
100
103
|
onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
101
104
|
onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/datetime-picker",
|
|
3
|
-
"version": "13.7.
|
|
3
|
+
"version": "13.7.4",
|
|
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/"
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@atlaskit/analytics-next": "^9.3.0",
|
|
43
|
-
"@atlaskit/calendar": "^14.
|
|
43
|
+
"@atlaskit/calendar": "^14.4.0",
|
|
44
44
|
"@atlaskit/ds-lib": "^2.3.0",
|
|
45
|
-
"@atlaskit/icon": "^22.
|
|
45
|
+
"@atlaskit/icon": "^22.7.0",
|
|
46
46
|
"@atlaskit/layering": "^0.3.0",
|
|
47
47
|
"@atlaskit/locale": "^2.7.0",
|
|
48
48
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@af/accessibility-testing": "*",
|
|
64
64
|
"@af/integration-testing": "*",
|
|
65
65
|
"@af/visual-regression": "*",
|
|
66
|
-
"@atlaskit/button": "^19.
|
|
66
|
+
"@atlaskit/button": "^19.1.0",
|
|
67
67
|
"@atlaskit/docs": "*",
|
|
68
68
|
"@atlaskit/form": "^10.4.0",
|
|
69
69
|
"@atlaskit/modal-dialog": "^12.14.0",
|