@atlaskit/datetime-picker 12.8.2 → 12.10.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.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/components/date-picker.js +6 -35
- package/dist/cjs/components/date-time-picker.js +1 -1
- package/dist/cjs/components/time-picker.js +1 -1
- package/dist/es2019/components/date-picker.js +6 -35
- package/dist/es2019/components/date-time-picker.js +1 -1
- package/dist/es2019/components/time-picker.js +1 -1
- package/dist/esm/components/date-picker.js +6 -35
- package/dist/esm/components/date-time-picker.js +1 -1
- package/dist/esm/components/time-picker.js +1 -1
- package/dist/types/components/date-picker.d.ts +5 -5
- package/dist/types/types.d.ts +0 -1
- package/dist/types-ts4.5/components/date-picker.d.ts +5 -5
- package/dist/types-ts4.5/types.d.ts +0 -1
- package/package.json +4 -6
- package/report.api.md +5 -8
- package/tmp/api-report-tmp.d.ts +5 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/datetime-picker
|
|
2
2
|
|
|
3
|
+
## 12.10.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`6c0c0407eb1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c0c0407eb1) - This cleans up the feature flag references for the keyboard accessibility changes, making them fully available for all users.
|
|
8
|
+
|
|
9
|
+
## 12.9.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`4afff68f652`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4afff68f652) - Make typing more complete and accurate for date picker.
|
|
14
|
+
|
|
3
15
|
## 12.8.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -38,7 +38,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
38
38
|
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); }; }
|
|
39
39
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
40
40
|
var packageName = "@atlaskit/datetime-picker";
|
|
41
|
-
var packageVersion = "12.
|
|
41
|
+
var packageVersion = "12.10.0";
|
|
42
42
|
function getValidDate(iso) {
|
|
43
43
|
var date = (0, _dateFns.parseISO)(iso);
|
|
44
44
|
return (0, _dateFns.isValid)(date) ? {
|
|
@@ -78,8 +78,7 @@ var Menu = function Menu(_ref) {
|
|
|
78
78
|
selected: [selectProps.calendarValue],
|
|
79
79
|
locale: selectProps.calendarLocale,
|
|
80
80
|
testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
|
|
81
|
-
weekStartDay: selectProps.calendarWeekStartDay
|
|
82
|
-
tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.accessible-datetime-picker_691ec') ? undefined : -1
|
|
81
|
+
weekStartDay: selectProps.calendarWeekStartDay
|
|
83
82
|
}))),
|
|
84
83
|
testId: selectProps.testId
|
|
85
84
|
});
|
|
@@ -246,39 +245,11 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
246
245
|
calendarValue = _this$getSafeState2.calendarValue;
|
|
247
246
|
var keyPressed = event.key.toLowerCase();
|
|
248
247
|
switch (keyPressed) {
|
|
249
|
-
case 'arrowup':
|
|
250
|
-
case 'arrowdown':
|
|
251
|
-
if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.accessible-datetime-picker_691ec')) {
|
|
252
|
-
if (_this.calendarRef) {
|
|
253
|
-
event.preventDefault();
|
|
254
|
-
var key = keyPressed === 'arrowup' ? 'up' : 'down';
|
|
255
|
-
_this.calendarRef.navigate(key);
|
|
256
|
-
}
|
|
257
|
-
_this.setState({
|
|
258
|
-
isOpen: true
|
|
259
|
-
});
|
|
260
|
-
}
|
|
261
|
-
break;
|
|
262
|
-
case 'arrowleft':
|
|
263
|
-
case 'arrowright':
|
|
264
|
-
if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.accessible-datetime-picker_691ec') && _this.calendarRef) {
|
|
265
|
-
event.preventDefault();
|
|
266
|
-
var _key = keyPressed === 'arrowleft' ? 'left' : 'right';
|
|
267
|
-
_this.calendarRef.navigate(_key);
|
|
268
|
-
}
|
|
269
|
-
break;
|
|
270
248
|
case 'escape':
|
|
271
249
|
_this.setState({
|
|
272
250
|
isOpen: false
|
|
273
251
|
});
|
|
274
252
|
break;
|
|
275
|
-
case 'tab':
|
|
276
|
-
if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.accessible-datetime-picker_691ec')) {
|
|
277
|
-
_this.setState({
|
|
278
|
-
isOpen: false
|
|
279
|
-
});
|
|
280
|
-
}
|
|
281
|
-
break;
|
|
282
253
|
case 'backspace':
|
|
283
254
|
case 'delete':
|
|
284
255
|
{
|
|
@@ -412,7 +383,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
412
383
|
isOpen: _this.props.defaultIsOpen,
|
|
413
384
|
isFocused: false,
|
|
414
385
|
clearingFromIcon: false,
|
|
415
|
-
selectInputValue: _this.props.selectProps.inputValue,
|
|
386
|
+
selectInputValue: _this.props.selectProps.inputValue || '',
|
|
416
387
|
value: _this.props.value || _this.props.defaultValue,
|
|
417
388
|
calendarValue: _this.props.value || _this.props.defaultValue || getShortISOString(new Date()),
|
|
418
389
|
l10n: (0, _locale.createLocalizationProvider)(_this.props.locale),
|
|
@@ -491,11 +462,11 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
491
462
|
previousMonthLabel: previousMonthLabel
|
|
492
463
|
};
|
|
493
464
|
return (
|
|
494
|
-
//
|
|
495
|
-
//
|
|
465
|
+
// These event handlers must be on this element because the events come
|
|
466
|
+
// from different child elements.
|
|
496
467
|
(0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
|
|
497
468
|
role: "presentation",
|
|
498
|
-
onBlur:
|
|
469
|
+
onBlur: this.onContainerBlur,
|
|
499
470
|
onClick: this.onInputClick,
|
|
500
471
|
onInput: this.onTextInput,
|
|
501
472
|
onKeyDown: this.onInputKeyDown,
|
|
@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
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 = "12.
|
|
34
|
+
var packageVersion = "12.10.0";
|
|
35
35
|
var isInvalidBorderStyles = (0, _react2.css)({
|
|
36
36
|
borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
|
|
37
37
|
});
|
|
@@ -37,7 +37,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
37
37
|
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); }; }
|
|
38
38
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
39
39
|
var packageName = "@atlaskit/datetime-picker";
|
|
40
|
-
var packageVersion = "12.
|
|
40
|
+
var packageVersion = "12.10.0";
|
|
41
41
|
var menuStyles = {
|
|
42
42
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
43
43
|
position: 'static',
|
|
@@ -18,7 +18,7 @@ import FixedLayer from '../internal/fixed-layer';
|
|
|
18
18
|
import { makeSingleValue } from '../internal/single-value';
|
|
19
19
|
import { convertTokens } from './utils';
|
|
20
20
|
const packageName = "@atlaskit/datetime-picker";
|
|
21
|
-
const packageVersion = "12.
|
|
21
|
+
const packageVersion = "12.10.0";
|
|
22
22
|
function getValidDate(iso) {
|
|
23
23
|
const date = parseISO(iso);
|
|
24
24
|
return isValid(date) ? {
|
|
@@ -58,8 +58,7 @@ const Menu = ({
|
|
|
58
58
|
selected: [selectProps.calendarValue],
|
|
59
59
|
locale: selectProps.calendarLocale,
|
|
60
60
|
testId: selectProps.testId && `${selectProps.testId}--calendar`,
|
|
61
|
-
weekStartDay: selectProps.calendarWeekStartDay
|
|
62
|
-
tabIndex: getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec') ? undefined : -1
|
|
61
|
+
weekStartDay: selectProps.calendarWeekStartDay
|
|
63
62
|
}))),
|
|
64
63
|
testId: selectProps.testId
|
|
65
64
|
});
|
|
@@ -224,39 +223,11 @@ class DatePicker extends Component {
|
|
|
224
223
|
} = this.getSafeState();
|
|
225
224
|
const keyPressed = event.key.toLowerCase();
|
|
226
225
|
switch (keyPressed) {
|
|
227
|
-
case 'arrowup':
|
|
228
|
-
case 'arrowdown':
|
|
229
|
-
if (!getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec')) {
|
|
230
|
-
if (this.calendarRef) {
|
|
231
|
-
event.preventDefault();
|
|
232
|
-
const key = keyPressed === 'arrowup' ? 'up' : 'down';
|
|
233
|
-
this.calendarRef.navigate(key);
|
|
234
|
-
}
|
|
235
|
-
this.setState({
|
|
236
|
-
isOpen: true
|
|
237
|
-
});
|
|
238
|
-
}
|
|
239
|
-
break;
|
|
240
|
-
case 'arrowleft':
|
|
241
|
-
case 'arrowright':
|
|
242
|
-
if (!getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec') && this.calendarRef) {
|
|
243
|
-
event.preventDefault();
|
|
244
|
-
const key = keyPressed === 'arrowleft' ? 'left' : 'right';
|
|
245
|
-
this.calendarRef.navigate(key);
|
|
246
|
-
}
|
|
247
|
-
break;
|
|
248
226
|
case 'escape':
|
|
249
227
|
this.setState({
|
|
250
228
|
isOpen: false
|
|
251
229
|
});
|
|
252
230
|
break;
|
|
253
|
-
case 'tab':
|
|
254
|
-
if (!getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec')) {
|
|
255
|
-
this.setState({
|
|
256
|
-
isOpen: false
|
|
257
|
-
});
|
|
258
|
-
}
|
|
259
|
-
break;
|
|
260
231
|
case 'backspace':
|
|
261
232
|
case 'delete':
|
|
262
233
|
{
|
|
@@ -401,7 +372,7 @@ class DatePicker extends Component {
|
|
|
401
372
|
isOpen: this.props.defaultIsOpen,
|
|
402
373
|
isFocused: false,
|
|
403
374
|
clearingFromIcon: false,
|
|
404
|
-
selectInputValue: this.props.selectProps.inputValue,
|
|
375
|
+
selectInputValue: this.props.selectProps.inputValue || '',
|
|
405
376
|
value: this.props.value || this.props.defaultValue,
|
|
406
377
|
calendarValue: this.props.value || this.props.defaultValue || getShortISOString(new Date()),
|
|
407
378
|
l10n: createLocalizationProvider(this.props.locale),
|
|
@@ -491,11 +462,11 @@ class DatePicker extends Component {
|
|
|
491
462
|
previousMonthLabel
|
|
492
463
|
};
|
|
493
464
|
return (
|
|
494
|
-
//
|
|
495
|
-
//
|
|
465
|
+
// These event handlers must be on this element because the events come
|
|
466
|
+
// from different child elements.
|
|
496
467
|
jsx("div", _extends({}, innerProps, {
|
|
497
468
|
role: "presentation",
|
|
498
|
-
onBlur:
|
|
469
|
+
onBlur: this.onContainerBlur,
|
|
499
470
|
onClick: this.onInputClick,
|
|
500
471
|
onInput: this.onTextInput,
|
|
501
472
|
onKeyDown: this.onInputKeyDown,
|
|
@@ -15,7 +15,7 @@ import DatePicker from './date-picker';
|
|
|
15
15
|
import TimePicker from './time-picker';
|
|
16
16
|
import { convertTokens } from './utils';
|
|
17
17
|
const packageName = "@atlaskit/datetime-picker";
|
|
18
|
-
const packageVersion = "12.
|
|
18
|
+
const packageVersion = "12.10.0";
|
|
19
19
|
const isInvalidBorderStyles = css({
|
|
20
20
|
borderColor: `var(--ds-border-danger, ${R400})`
|
|
21
21
|
});
|
|
@@ -16,7 +16,7 @@ import parseTime from '../internal/parse-time';
|
|
|
16
16
|
import { makeSingleValue } from '../internal/single-value';
|
|
17
17
|
import { convertTokens } from './utils';
|
|
18
18
|
const packageName = "@atlaskit/datetime-picker";
|
|
19
|
-
const packageVersion = "12.
|
|
19
|
+
const packageVersion = "12.10.0";
|
|
20
20
|
const menuStyles = {
|
|
21
21
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
22
22
|
position: 'static',
|
|
@@ -29,7 +29,7 @@ import FixedLayer from '../internal/fixed-layer';
|
|
|
29
29
|
import { makeSingleValue } from '../internal/single-value';
|
|
30
30
|
import { convertTokens } from './utils';
|
|
31
31
|
var packageName = "@atlaskit/datetime-picker";
|
|
32
|
-
var packageVersion = "12.
|
|
32
|
+
var packageVersion = "12.10.0";
|
|
33
33
|
function getValidDate(iso) {
|
|
34
34
|
var date = parseISO(iso);
|
|
35
35
|
return isValid(date) ? {
|
|
@@ -69,8 +69,7 @@ var Menu = function Menu(_ref) {
|
|
|
69
69
|
selected: [selectProps.calendarValue],
|
|
70
70
|
locale: selectProps.calendarLocale,
|
|
71
71
|
testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
|
|
72
|
-
weekStartDay: selectProps.calendarWeekStartDay
|
|
73
|
-
tabIndex: getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec') ? undefined : -1
|
|
72
|
+
weekStartDay: selectProps.calendarWeekStartDay
|
|
74
73
|
}))),
|
|
75
74
|
testId: selectProps.testId
|
|
76
75
|
});
|
|
@@ -237,39 +236,11 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
237
236
|
calendarValue = _this$getSafeState2.calendarValue;
|
|
238
237
|
var keyPressed = event.key.toLowerCase();
|
|
239
238
|
switch (keyPressed) {
|
|
240
|
-
case 'arrowup':
|
|
241
|
-
case 'arrowdown':
|
|
242
|
-
if (!getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec')) {
|
|
243
|
-
if (_this.calendarRef) {
|
|
244
|
-
event.preventDefault();
|
|
245
|
-
var key = keyPressed === 'arrowup' ? 'up' : 'down';
|
|
246
|
-
_this.calendarRef.navigate(key);
|
|
247
|
-
}
|
|
248
|
-
_this.setState({
|
|
249
|
-
isOpen: true
|
|
250
|
-
});
|
|
251
|
-
}
|
|
252
|
-
break;
|
|
253
|
-
case 'arrowleft':
|
|
254
|
-
case 'arrowright':
|
|
255
|
-
if (!getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec') && _this.calendarRef) {
|
|
256
|
-
event.preventDefault();
|
|
257
|
-
var _key = keyPressed === 'arrowleft' ? 'left' : 'right';
|
|
258
|
-
_this.calendarRef.navigate(_key);
|
|
259
|
-
}
|
|
260
|
-
break;
|
|
261
239
|
case 'escape':
|
|
262
240
|
_this.setState({
|
|
263
241
|
isOpen: false
|
|
264
242
|
});
|
|
265
243
|
break;
|
|
266
|
-
case 'tab':
|
|
267
|
-
if (!getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec')) {
|
|
268
|
-
_this.setState({
|
|
269
|
-
isOpen: false
|
|
270
|
-
});
|
|
271
|
-
}
|
|
272
|
-
break;
|
|
273
244
|
case 'backspace':
|
|
274
245
|
case 'delete':
|
|
275
246
|
{
|
|
@@ -403,7 +374,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
403
374
|
isOpen: _this.props.defaultIsOpen,
|
|
404
375
|
isFocused: false,
|
|
405
376
|
clearingFromIcon: false,
|
|
406
|
-
selectInputValue: _this.props.selectProps.inputValue,
|
|
377
|
+
selectInputValue: _this.props.selectProps.inputValue || '',
|
|
407
378
|
value: _this.props.value || _this.props.defaultValue,
|
|
408
379
|
calendarValue: _this.props.value || _this.props.defaultValue || getShortISOString(new Date()),
|
|
409
380
|
l10n: createLocalizationProvider(_this.props.locale),
|
|
@@ -482,11 +453,11 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
482
453
|
previousMonthLabel: previousMonthLabel
|
|
483
454
|
};
|
|
484
455
|
return (
|
|
485
|
-
//
|
|
486
|
-
//
|
|
456
|
+
// These event handlers must be on this element because the events come
|
|
457
|
+
// from different child elements.
|
|
487
458
|
jsx("div", _extends({}, innerProps, {
|
|
488
459
|
role: "presentation",
|
|
489
|
-
onBlur:
|
|
460
|
+
onBlur: this.onContainerBlur,
|
|
490
461
|
onClick: this.onInputClick,
|
|
491
462
|
onInput: this.onTextInput,
|
|
492
463
|
onKeyDown: this.onInputKeyDown,
|
|
@@ -25,7 +25,7 @@ import DatePicker from './date-picker';
|
|
|
25
25
|
import TimePicker from './time-picker';
|
|
26
26
|
import { convertTokens } from './utils';
|
|
27
27
|
var packageName = "@atlaskit/datetime-picker";
|
|
28
|
-
var packageVersion = "12.
|
|
28
|
+
var packageVersion = "12.10.0";
|
|
29
29
|
var isInvalidBorderStyles = css({
|
|
30
30
|
borderColor: "var(--ds-border-danger, ".concat(R400, ")")
|
|
31
31
|
});
|
|
@@ -29,7 +29,7 @@ import parseTime from '../internal/parse-time';
|
|
|
29
29
|
import { makeSingleValue } from '../internal/single-value';
|
|
30
30
|
import { convertTokens } from './utils';
|
|
31
31
|
var packageName = "@atlaskit/datetime-picker";
|
|
32
|
-
var packageVersion = "12.
|
|
32
|
+
var packageVersion = "12.10.0";
|
|
33
33
|
var menuStyles = {
|
|
34
34
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
35
35
|
position: 'static',
|
|
@@ -4,8 +4,8 @@ import { jsx } from '@emotion/react';
|
|
|
4
4
|
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
5
5
|
import { CalendarRef } from '@atlaskit/calendar';
|
|
6
6
|
import { LocalizationProvider } from '@atlaskit/locale';
|
|
7
|
-
import { ActionMeta, DropdownIndicatorProps, OptionType, ValueType } from '@atlaskit/select';
|
|
8
|
-
import { Appearance,
|
|
7
|
+
import { ActionMeta, DropdownIndicatorProps, InputActionMeta, OptionType, SelectProps, ValueType } from '@atlaskit/select';
|
|
8
|
+
import { Appearance, Spacing } from '../types';
|
|
9
9
|
export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
|
|
10
10
|
/**
|
|
11
11
|
* Set the appearance of the picker.
|
|
@@ -103,7 +103,7 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
|
|
|
103
103
|
* Props to apply to the select. This can be used to set options such as placeholder text.
|
|
104
104
|
* See [the `Select` documentation for further information](/components/select).
|
|
105
105
|
*/
|
|
106
|
-
selectProps?: SelectProps
|
|
106
|
+
selectProps?: SelectProps<any>;
|
|
107
107
|
/**
|
|
108
108
|
* The spacing for the select control.
|
|
109
109
|
*
|
|
@@ -219,7 +219,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
|
|
|
219
219
|
locale: string;
|
|
220
220
|
} | null;
|
|
221
221
|
getSafeState: () => {
|
|
222
|
-
inputValue
|
|
222
|
+
inputValue?: string | undefined;
|
|
223
223
|
value: string;
|
|
224
224
|
isOpen: boolean;
|
|
225
225
|
isFocused: boolean;
|
|
@@ -246,7 +246,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
|
|
|
246
246
|
onClear: () => void;
|
|
247
247
|
onSelectChange: (value: ValueType<OptionType>, action: ActionMeta) => void;
|
|
248
248
|
refCalendar: (ref: CalendarRef | null) => void;
|
|
249
|
-
handleSelectInputChange: (selectInputValue: string, actionMeta:
|
|
249
|
+
handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
|
|
250
250
|
getContainerRef: (ref: HTMLElement | null) => void;
|
|
251
251
|
/**
|
|
252
252
|
* There are two props that can change how the date is parsed.
|
package/dist/types/types.d.ts
CHANGED
|
@@ -4,8 +4,8 @@ import { jsx } from '@emotion/react';
|
|
|
4
4
|
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
5
5
|
import { CalendarRef } from '@atlaskit/calendar';
|
|
6
6
|
import { LocalizationProvider } from '@atlaskit/locale';
|
|
7
|
-
import { ActionMeta, DropdownIndicatorProps, OptionType, ValueType } from '@atlaskit/select';
|
|
8
|
-
import { Appearance,
|
|
7
|
+
import { ActionMeta, DropdownIndicatorProps, InputActionMeta, OptionType, SelectProps, ValueType } from '@atlaskit/select';
|
|
8
|
+
import { Appearance, Spacing } from '../types';
|
|
9
9
|
export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
|
|
10
10
|
/**
|
|
11
11
|
* Set the appearance of the picker.
|
|
@@ -103,7 +103,7 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
|
|
|
103
103
|
* Props to apply to the select. This can be used to set options such as placeholder text.
|
|
104
104
|
* See [the `Select` documentation for further information](/components/select).
|
|
105
105
|
*/
|
|
106
|
-
selectProps?: SelectProps
|
|
106
|
+
selectProps?: SelectProps<any>;
|
|
107
107
|
/**
|
|
108
108
|
* The spacing for the select control.
|
|
109
109
|
*
|
|
@@ -219,7 +219,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
|
|
|
219
219
|
locale: string;
|
|
220
220
|
} | null;
|
|
221
221
|
getSafeState: () => {
|
|
222
|
-
inputValue
|
|
222
|
+
inputValue?: string | undefined;
|
|
223
223
|
value: string;
|
|
224
224
|
isOpen: boolean;
|
|
225
225
|
isFocused: boolean;
|
|
@@ -246,7 +246,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
|
|
|
246
246
|
onClear: () => void;
|
|
247
247
|
onSelectChange: (value: ValueType<OptionType>, action: ActionMeta) => void;
|
|
248
248
|
refCalendar: (ref: CalendarRef | null) => void;
|
|
249
|
-
handleSelectInputChange: (selectInputValue: string, actionMeta:
|
|
249
|
+
handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
|
|
250
250
|
getContainerRef: (ref: HTMLElement | null) => void;
|
|
251
251
|
/**
|
|
252
252
|
* There are two props that can change how the date is parsed.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/datetime-picker",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.10.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/"
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@atlaskit/popper": "^5.5.0",
|
|
42
42
|
"@atlaskit/select": "^16.5.0",
|
|
43
43
|
"@atlaskit/theme": "^12.6.0",
|
|
44
|
-
"@atlaskit/tokens": "^1.
|
|
44
|
+
"@atlaskit/tokens": "^1.22.0",
|
|
45
45
|
"@babel/runtime": "^7.0.0",
|
|
46
46
|
"@emotion/react": "^11.7.1",
|
|
47
47
|
"date-fns": "^2.17.0",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@af/accessibility-testing": "*",
|
|
56
|
-
"@atlaskit/button": "^16.
|
|
56
|
+
"@atlaskit/button": "^16.10.0",
|
|
57
57
|
"@atlaskit/docs": "*",
|
|
58
58
|
"@atlaskit/form": "^8.11.0",
|
|
59
59
|
"@atlaskit/modal-dialog": "^12.6.0",
|
|
@@ -71,6 +71,7 @@
|
|
|
71
71
|
"@testing-library/react": "^12.1.5",
|
|
72
72
|
"@testing-library/user-event": "^14.4.3",
|
|
73
73
|
"@types/testing-library__jest-dom": "^5.14.5",
|
|
74
|
+
"jest-in-case": "^1.0.2",
|
|
74
75
|
"moment": "^2.29.2",
|
|
75
76
|
"react-dom": "^16.8.0",
|
|
76
77
|
"react-lorem-component": "^0.13.0",
|
|
@@ -101,9 +102,6 @@
|
|
|
101
102
|
},
|
|
102
103
|
"platform.design-system-team.date-picker-input-a11y-fix_cbbxs": {
|
|
103
104
|
"type": "boolean"
|
|
104
|
-
},
|
|
105
|
-
"platform.design-system-team.accessible-datetime-picker_691ec": {
|
|
106
|
-
"type": "boolean"
|
|
107
105
|
}
|
|
108
106
|
},
|
|
109
107
|
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
|
package/report.api.md
CHANGED
|
@@ -23,7 +23,7 @@ import { GroupType } from '@atlaskit/select';
|
|
|
23
23
|
import { OptionType } from '@atlaskit/select';
|
|
24
24
|
import { default as React_2 } from 'react';
|
|
25
25
|
import { RefAttributes } from 'react';
|
|
26
|
-
import { SelectProps
|
|
26
|
+
import { SelectProps } from '@atlaskit/select';
|
|
27
27
|
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
28
28
|
import { WithContextProps } from '@atlaskit/analytics-next';
|
|
29
29
|
|
|
@@ -192,7 +192,7 @@ export interface DatePickerProps extends WithAnalyticsEventsProps {
|
|
|
192
192
|
parseInputValue?: (date: string, dateFormat: string) => Date;
|
|
193
193
|
placeholder?: string;
|
|
194
194
|
previousMonthLabel?: string;
|
|
195
|
-
selectProps?: SelectProps
|
|
195
|
+
selectProps?: SelectProps<any>;
|
|
196
196
|
spacing?: Spacing;
|
|
197
197
|
testId?: string;
|
|
198
198
|
value?: string;
|
|
@@ -320,7 +320,7 @@ export interface DateTimePickerProps extends WithAnalyticsEventsProps {
|
|
|
320
320
|
autoFocus?: boolean;
|
|
321
321
|
dateFormat?: string;
|
|
322
322
|
datePickerProps?: DatePickerProps;
|
|
323
|
-
datePickerSelectProps?:
|
|
323
|
+
datePickerSelectProps?: SelectProps<any>;
|
|
324
324
|
defaultValue?: string;
|
|
325
325
|
id?: string;
|
|
326
326
|
innerProps?: React_2.AllHTMLAttributes<HTMLElement>;
|
|
@@ -346,7 +346,7 @@ export interface DateTimePickerProps extends WithAnalyticsEventsProps {
|
|
|
346
346
|
timeFormat?: string;
|
|
347
347
|
timeIsEditable?: boolean;
|
|
348
348
|
timePickerProps?: TimePickerProps;
|
|
349
|
-
timePickerSelectProps?:
|
|
349
|
+
timePickerSelectProps?: SelectProps<any>;
|
|
350
350
|
times?: Array<string>;
|
|
351
351
|
value?: string;
|
|
352
352
|
}
|
|
@@ -355,9 +355,6 @@ export interface DateTimePickerProps extends WithAnalyticsEventsProps {
|
|
|
355
355
|
type DateTimePickerProps_2 = typeof dateTimePickerDefaultProps &
|
|
356
356
|
DateTimePickerProps;
|
|
357
357
|
|
|
358
|
-
// @public (undocumented)
|
|
359
|
-
type SelectProps = any;
|
|
360
|
-
|
|
361
358
|
// @public (undocumented)
|
|
362
359
|
export type Spacing = 'compact' | 'default';
|
|
363
360
|
|
|
@@ -503,7 +500,7 @@ export interface TimePickerProps extends WithAnalyticsEventsProps {
|
|
|
503
500
|
// (undocumented)
|
|
504
501
|
parseInputValue?: (time: string, timeFormat: string) => Date | string;
|
|
505
502
|
placeholder?: string;
|
|
506
|
-
selectProps?:
|
|
503
|
+
selectProps?: SelectProps<any>;
|
|
507
504
|
spacing?: Spacing;
|
|
508
505
|
testId?: string;
|
|
509
506
|
timeFormat?: string;
|
package/tmp/api-report-tmp.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ import { GroupType } from '@atlaskit/select';
|
|
|
12
12
|
import { OptionType } from '@atlaskit/select';
|
|
13
13
|
import { default as React_2 } from 'react';
|
|
14
14
|
import { RefAttributes } from 'react';
|
|
15
|
-
import { SelectProps
|
|
15
|
+
import { SelectProps } from '@atlaskit/select';
|
|
16
16
|
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
17
17
|
import { WithContextProps } from '@atlaskit/analytics-next';
|
|
18
18
|
|
|
@@ -93,7 +93,7 @@ export interface DatePickerProps extends WithAnalyticsEventsProps {
|
|
|
93
93
|
parseInputValue?: (date: string, dateFormat: string) => Date;
|
|
94
94
|
placeholder?: string;
|
|
95
95
|
previousMonthLabel?: string;
|
|
96
|
-
selectProps?: SelectProps
|
|
96
|
+
selectProps?: SelectProps<any>;
|
|
97
97
|
spacing?: Spacing;
|
|
98
98
|
testId?: string;
|
|
99
99
|
value?: string;
|
|
@@ -155,7 +155,7 @@ export interface DateTimePickerProps extends WithAnalyticsEventsProps {
|
|
|
155
155
|
autoFocus?: boolean;
|
|
156
156
|
dateFormat?: string;
|
|
157
157
|
datePickerProps?: DatePickerProps;
|
|
158
|
-
datePickerSelectProps?:
|
|
158
|
+
datePickerSelectProps?: SelectProps<any>;
|
|
159
159
|
defaultValue?: string;
|
|
160
160
|
id?: string;
|
|
161
161
|
innerProps?: React_2.AllHTMLAttributes<HTMLElement>;
|
|
@@ -176,7 +176,7 @@ export interface DateTimePickerProps extends WithAnalyticsEventsProps {
|
|
|
176
176
|
timeFormat?: string;
|
|
177
177
|
timeIsEditable?: boolean;
|
|
178
178
|
timePickerProps?: TimePickerProps;
|
|
179
|
-
timePickerSelectProps?:
|
|
179
|
+
timePickerSelectProps?: SelectProps<any>;
|
|
180
180
|
times?: Array<string>;
|
|
181
181
|
value?: string;
|
|
182
182
|
}
|
|
@@ -184,9 +184,6 @@ export interface DateTimePickerProps extends WithAnalyticsEventsProps {
|
|
|
184
184
|
// @public (undocumented)
|
|
185
185
|
type DateTimePickerProps_2 = typeof dateTimePickerDefaultProps & DateTimePickerProps;
|
|
186
186
|
|
|
187
|
-
// @public (undocumented)
|
|
188
|
-
type SelectProps = any;
|
|
189
|
-
|
|
190
187
|
// @public (undocumented)
|
|
191
188
|
export type Spacing = 'compact' | 'default';
|
|
192
189
|
|
|
@@ -257,7 +254,7 @@ export interface TimePickerProps extends WithAnalyticsEventsProps {
|
|
|
257
254
|
// (undocumented)
|
|
258
255
|
parseInputValue?: (time: string, timeFormat: string) => Date | string;
|
|
259
256
|
placeholder?: string;
|
|
260
|
-
selectProps?:
|
|
257
|
+
selectProps?: SelectProps<any>;
|
|
261
258
|
spacing?: Spacing;
|
|
262
259
|
testId?: string;
|
|
263
260
|
timeFormat?: string;
|