@atlaskit/datetime-picker 17.5.7 → 17.6.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 +14 -0
- package/dist/cjs/components/date-picker.js +1 -1
- package/dist/cjs/components/date-time-picker-class.js +1 -1
- package/dist/cjs/components/date-time-picker-fc-new.js +479 -0
- package/dist/cjs/components/date-time-picker-fc-old.js +370 -0
- package/dist/cjs/components/date-time-picker-fc.js +8 -363
- package/dist/cjs/components/time-picker.js +1 -1
- package/dist/es2019/components/date-picker.js +1 -1
- package/dist/es2019/components/date-time-picker-class.js +1 -1
- package/dist/es2019/components/date-time-picker-fc-new.js +456 -0
- package/dist/es2019/components/date-time-picker-fc-old.compiled.css +6 -0
- package/dist/es2019/components/date-time-picker-fc-old.js +336 -0
- package/dist/es2019/components/date-time-picker-fc.js +5 -334
- package/dist/es2019/components/time-picker.js +1 -1
- package/dist/esm/components/date-picker.js +1 -1
- package/dist/esm/components/date-time-picker-class.js +1 -1
- package/dist/esm/components/date-time-picker-fc-new.compiled.css +6 -0
- package/dist/esm/components/date-time-picker-fc-new.js +473 -0
- package/dist/esm/components/date-time-picker-fc-old.compiled.css +6 -0
- package/dist/esm/components/date-time-picker-fc-old.js +364 -0
- package/dist/esm/components/date-time-picker-fc.js +7 -362
- package/dist/esm/components/time-picker.js +1 -1
- package/dist/types/components/date-time-picker-fc-new.d.ts +6 -0
- package/dist/types/components/date-time-picker-fc-old.d.ts +6 -0
- package/dist/types/components/date-time-picker-fc.d.ts +2 -6
- package/dist/types-ts4.5/components/date-time-picker-fc-new.d.ts +6 -0
- package/dist/types-ts4.5/components/date-time-picker-fc-old.d.ts +6 -0
- package/dist/types-ts4.5/components/date-time-picker-fc.d.ts +2 -6
- package/package.json +8 -5
- /package/dist/cjs/components/{date-time-picker-fc.compiled.css → date-time-picker-fc-new.compiled.css} +0 -0
- /package/dist/{es2019/components/date-time-picker-fc.compiled.css → cjs/components/date-time-picker-fc-old.compiled.css} +0 -0
- /package/dist/{esm/components/date-time-picker-fc.compiled.css → es2019/components/date-time-picker-fc-new.compiled.css} +0 -0
|
@@ -1,61 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
6
|
-
var _excluded = ["selectProps"],
|
|
7
|
-
_excluded2 = ["selectProps"];
|
|
8
|
-
import "./date-time-picker-fc.compiled.css";
|
|
9
|
-
import { ax, ix } from "@compiled/react/runtime";
|
|
10
|
-
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; }
|
|
11
|
-
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; }
|
|
12
|
-
/// <reference types="node" />
|
|
13
|
-
// for typing `process`
|
|
14
|
-
|
|
15
|
-
import React, { forwardRef, useCallback, useEffect, useState } from 'react';
|
|
16
|
-
|
|
17
|
-
// oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
18
|
-
import { format, isValid, parseISO } from 'date-fns';
|
|
19
|
-
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
20
|
-
import { IconButton } from '@atlaskit/button/new';
|
|
21
|
-
import SelectClearIcon from '@atlaskit/icon/core/cross-circle';
|
|
22
|
-
import { Box, Inline } from '@atlaskit/primitives/compiled';
|
|
23
|
-
import { mergeStyles } from '@atlaskit/select';
|
|
24
|
-
import { formatDateTimeZoneIntoIso } from '../internal';
|
|
25
|
-
import { DateTimePickerContainer } from '../internal/date-time-picker-container';
|
|
26
|
-
import { convertTokens } from '../internal/parse-tokens';
|
|
27
|
-
import DatePicker from './date-picker';
|
|
28
|
-
import TimePicker from './time-picker';
|
|
29
|
-
var packageName = "@atlaskit/datetime-picker";
|
|
30
|
-
var packageVersion = "0.0.0-development";
|
|
31
|
-
var analyticsAttributes = {
|
|
32
|
-
componentName: 'dateTimePicker',
|
|
33
|
-
packageName: packageName,
|
|
34
|
-
packageVersion: packageVersion
|
|
35
|
-
};
|
|
36
|
-
var compiledStyles = {
|
|
37
|
-
datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
|
|
38
|
-
timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
|
|
39
|
-
iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
// react-select overrides (via @atlaskit/select).
|
|
43
|
-
var styles = {
|
|
44
|
-
control: function control(style) {
|
|
45
|
-
return _objectSpread(_objectSpread({}, style), {}, {
|
|
46
|
-
backgroundColor: 'transparent',
|
|
47
|
-
border: 2,
|
|
48
|
-
borderRadius: 0,
|
|
49
|
-
paddingLeft: 0,
|
|
50
|
-
':hover': {
|
|
51
|
-
backgroundColor: 'transparent',
|
|
52
|
-
cursor: 'inherit'
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
export var datePickerDefaultAriaLabel = 'Date';
|
|
58
|
-
export var timePickerDefaultAriaLabel = 'Time';
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
|
+
import { componentWithCondition } from '../internal/ff-component';
|
|
3
|
+
import DateTimePickerNew from './date-time-picker-fc-new';
|
|
4
|
+
import DateTimePickerOld from './date-time-picker-fc-old';
|
|
59
5
|
|
|
60
6
|
/**
|
|
61
7
|
* __Date time picker__
|
|
@@ -66,307 +12,6 @@ export var timePickerDefaultAriaLabel = 'Time';
|
|
|
66
12
|
* - [Code](https://atlassian.design/components/datetime-picker/code)
|
|
67
13
|
* - [Usage](https://atlassian.design/components/datetime-picker/usage)
|
|
68
14
|
*/
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
|
|
73
|
-
_ref2$autoFocus = _ref2.autoFocus,
|
|
74
|
-
autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
|
|
75
|
-
_ref2$clearControlLab = _ref2.clearControlLabel,
|
|
76
|
-
clearControlLabel = _ref2$clearControlLab === void 0 ? 'clear' : _ref2$clearControlLab,
|
|
77
|
-
_ref2$datePickerProps = _ref2.datePickerProps,
|
|
78
|
-
datePickerPropsWithSelectProps = _ref2$datePickerProps === void 0 ? {} : _ref2$datePickerProps,
|
|
79
|
-
_ref2$defaultValue = _ref2.defaultValue,
|
|
80
|
-
defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
|
|
81
|
-
_ref2$id = _ref2.id,
|
|
82
|
-
id = _ref2$id === void 0 ? '' : _ref2$id,
|
|
83
|
-
_ref2$innerProps = _ref2.innerProps,
|
|
84
|
-
innerProps = _ref2$innerProps === void 0 ? {} : _ref2$innerProps,
|
|
85
|
-
_ref2$isDisabled = _ref2.isDisabled,
|
|
86
|
-
isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
|
|
87
|
-
_ref2$isInvalid = _ref2.isInvalid,
|
|
88
|
-
isInvalid = _ref2$isInvalid === void 0 ? false : _ref2$isInvalid,
|
|
89
|
-
_ref2$isRequired = _ref2.isRequired,
|
|
90
|
-
isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired,
|
|
91
|
-
_ref2$name = _ref2.name,
|
|
92
|
-
name = _ref2$name === void 0 ? '' : _ref2$name,
|
|
93
|
-
_ref2$onBlur = _ref2.onBlur,
|
|
94
|
-
onBlur = _ref2$onBlur === void 0 ? function (_event) {} : _ref2$onBlur,
|
|
95
|
-
_ref2$onChange = _ref2.onChange,
|
|
96
|
-
onChangeProp = _ref2$onChange === void 0 ? function (_value) {} : _ref2$onChange,
|
|
97
|
-
_ref2$onFocus = _ref2.onFocus,
|
|
98
|
-
onFocus = _ref2$onFocus === void 0 ? function (_event) {} : _ref2$onFocus,
|
|
99
|
-
providedParseValue = _ref2.parseValue,
|
|
100
|
-
_ref2$spacing = _ref2.spacing,
|
|
101
|
-
spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
|
|
102
|
-
_ref2$locale = _ref2.locale,
|
|
103
|
-
locale = _ref2$locale === void 0 ? 'en-US' : _ref2$locale,
|
|
104
|
-
testId = _ref2.testId,
|
|
105
|
-
_ref2$timePickerProps = _ref2.timePickerProps,
|
|
106
|
-
timePickerPropsWithSelectProps = _ref2$timePickerProps === void 0 ? {} : _ref2$timePickerProps,
|
|
107
|
-
providedValue = _ref2.value;
|
|
108
|
-
var _useState = useState((datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || ''),
|
|
109
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
110
|
-
dateValue = _useState2[0],
|
|
111
|
-
setDateValue = _useState2[1];
|
|
112
|
-
var _useState3 = useState(false),
|
|
113
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
114
|
-
isFocused = _useState4[0],
|
|
115
|
-
setIsFocused = _useState4[1];
|
|
116
|
-
var _useState5 = useState((timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || ''),
|
|
117
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
118
|
-
timeValue = _useState6[0],
|
|
119
|
-
setTimeValue = _useState6[1];
|
|
120
|
-
var _useState7 = useState(defaultValue || ''),
|
|
121
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
122
|
-
value = _useState8[0],
|
|
123
|
-
setValue = _useState8[1];
|
|
124
|
-
var _useState9 = useState(''),
|
|
125
|
-
_useState0 = _slicedToArray(_useState9, 2),
|
|
126
|
-
zoneValue = _useState0[0],
|
|
127
|
-
setZoneValue = _useState0[1];
|
|
128
|
-
useEffect(function () {
|
|
129
|
-
if (providedValue !== undefined) {
|
|
130
|
-
setValue(providedValue);
|
|
131
|
-
}
|
|
132
|
-
}, [providedValue]);
|
|
133
|
-
var parseValue = useCallback(function (value, providedDateValue, providedTimeValue, providedZoneValue) {
|
|
134
|
-
if (providedParseValue) {
|
|
135
|
-
var parsedFromFn = providedParseValue(value, providedDateValue, providedTimeValue, providedZoneValue);
|
|
136
|
-
// This handles cases found in Jira where the parse function actually does
|
|
137
|
-
// nothing and returns undefined. The previous `getSafeState` function
|
|
138
|
-
// just spread the values over the state, but if it returned `undefined`,
|
|
139
|
-
// it would just rely on the previous state values. Considering this is
|
|
140
|
-
// what is input to this function anyway, this is a safe way to handle
|
|
141
|
-
// this, colocate the behavior, and not rely on `getSafeState`.
|
|
142
|
-
return parsedFromFn || {
|
|
143
|
-
dateValue: providedDateValue,
|
|
144
|
-
timeValue: providedTimeValue,
|
|
145
|
-
zoneValue: providedZoneValue
|
|
146
|
-
};
|
|
147
|
-
}
|
|
148
|
-
var parsed = parseISO(value);
|
|
149
|
-
return isValid(parsed) ? {
|
|
150
|
-
dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
|
|
151
|
-
timeValue: format(parsed, convertTokens('HH:mm')),
|
|
152
|
-
zoneValue: format(parsed, convertTokens('ZZ'))
|
|
153
|
-
} : {
|
|
154
|
-
dateValue: dateValue,
|
|
155
|
-
timeValue: timeValue,
|
|
156
|
-
zoneValue: zoneValue
|
|
157
|
-
};
|
|
158
|
-
}, [providedParseValue, dateValue, timeValue, zoneValue]);
|
|
159
|
-
useEffect(function () {
|
|
160
|
-
var parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
|
|
161
|
-
setDateValue(parsedValues.dateValue);
|
|
162
|
-
setTimeValue(parsedValues.timeValue);
|
|
163
|
-
setZoneValue(parsedValues.zoneValue);
|
|
164
|
-
}, [value, dateValue, timeValue, zoneValue, parseValue]);
|
|
165
|
-
var onDateBlur = function onDateBlur(event) {
|
|
166
|
-
setIsFocused(false);
|
|
167
|
-
onBlur(event);
|
|
168
|
-
if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onBlur) {
|
|
169
|
-
datePickerPropsWithSelectProps.onBlur(event);
|
|
170
|
-
}
|
|
171
|
-
};
|
|
172
|
-
var onTimeBlur = function onTimeBlur(event) {
|
|
173
|
-
setIsFocused(false);
|
|
174
|
-
onBlur(event);
|
|
175
|
-
if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onBlur) {
|
|
176
|
-
timePickerPropsWithSelectProps.onBlur(event);
|
|
177
|
-
}
|
|
178
|
-
};
|
|
179
|
-
var onDateFocus = function onDateFocus(event) {
|
|
180
|
-
setIsFocused(false);
|
|
181
|
-
onFocus(event);
|
|
182
|
-
if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onFocus) {
|
|
183
|
-
datePickerPropsWithSelectProps.onFocus(event);
|
|
184
|
-
}
|
|
185
|
-
};
|
|
186
|
-
var onTimeFocus = function onTimeFocus(event) {
|
|
187
|
-
setIsFocused(false);
|
|
188
|
-
onFocus(event);
|
|
189
|
-
if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onFocus) {
|
|
190
|
-
timePickerPropsWithSelectProps.onFocus(event);
|
|
191
|
-
}
|
|
192
|
-
};
|
|
193
|
-
var onDateChange = function onDateChange(dateValue) {
|
|
194
|
-
var parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
|
|
195
|
-
onValueChange({
|
|
196
|
-
providedDateValue: dateValue,
|
|
197
|
-
providedTimeValue: parsedValues.timeValue,
|
|
198
|
-
providedZoneValue: parsedValues.zoneValue
|
|
199
|
-
});
|
|
200
|
-
if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
|
|
201
|
-
datePickerPropsWithSelectProps.onChange(dateValue);
|
|
202
|
-
}
|
|
203
|
-
};
|
|
204
|
-
var onTimeChange = function onTimeChange(timeValue) {
|
|
205
|
-
var parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
|
|
206
|
-
onValueChange({
|
|
207
|
-
providedDateValue: parsedValues.dateValue,
|
|
208
|
-
providedTimeValue: timeValue,
|
|
209
|
-
providedZoneValue: parsedValues.zoneValue
|
|
210
|
-
});
|
|
211
|
-
if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
|
|
212
|
-
timePickerPropsWithSelectProps.onChange(timeValue);
|
|
213
|
-
}
|
|
214
|
-
};
|
|
215
|
-
var onClear = function onClear() {
|
|
216
|
-
var parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
|
|
217
|
-
onValueChange({
|
|
218
|
-
providedDateValue: '',
|
|
219
|
-
providedTimeValue: '',
|
|
220
|
-
providedZoneValue: parsedValues.zoneValue
|
|
221
|
-
});
|
|
222
|
-
if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
|
|
223
|
-
datePickerPropsWithSelectProps.onChange('');
|
|
224
|
-
}
|
|
225
|
-
if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
|
|
226
|
-
timePickerPropsWithSelectProps.onChange('');
|
|
227
|
-
}
|
|
228
|
-
};
|
|
229
|
-
var onChangePropWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
|
|
230
|
-
fn: onChangeProp,
|
|
231
|
-
action: 'selectedDate',
|
|
232
|
-
actionSubject: 'datePicker'
|
|
233
|
-
}, analyticsAttributes));
|
|
234
|
-
var onValueChange = function onValueChange(_ref3) {
|
|
235
|
-
var providedDateValue = _ref3.providedDateValue,
|
|
236
|
-
providedTimeValue = _ref3.providedTimeValue,
|
|
237
|
-
providedZoneValue = _ref3.providedZoneValue;
|
|
238
|
-
setDateValue(providedDateValue);
|
|
239
|
-
setTimeValue(providedTimeValue);
|
|
240
|
-
setZoneValue(providedZoneValue);
|
|
241
|
-
if (providedDateValue && providedTimeValue) {
|
|
242
|
-
var _value2 = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, providedZoneValue);
|
|
243
|
-
var _parseValue = parseValue(_value2, providedDateValue, providedTimeValue, providedZoneValue),
|
|
244
|
-
parsedZone = _parseValue.zoneValue;
|
|
245
|
-
var valueWithValidZone = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, parsedZone);
|
|
246
|
-
setValue(valueWithValidZone);
|
|
247
|
-
onChangePropWithAnalytics(valueWithValidZone);
|
|
248
|
-
// If the date or time value was cleared when there is an existing datetime value, then clear the value.
|
|
249
|
-
} else if (value) {
|
|
250
|
-
setValue('');
|
|
251
|
-
onChangePropWithAnalytics('');
|
|
252
|
-
}
|
|
253
|
-
};
|
|
254
|
-
var datePickerSelectProps = datePickerPropsWithSelectProps.selectProps,
|
|
255
|
-
datePickerProps = _objectWithoutProperties(datePickerPropsWithSelectProps, _excluded);
|
|
256
|
-
var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
|
|
257
|
-
var datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
|
|
258
|
-
var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
|
|
259
|
-
styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
|
|
260
|
-
});
|
|
261
|
-
var timePickerSelectProps = timePickerPropsWithSelectProps.selectProps,
|
|
262
|
-
timePickerProps = _objectWithoutProperties(timePickerPropsWithSelectProps, _excluded2);
|
|
263
|
-
var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
|
|
264
|
-
var timePickerLabel = timePickerProps.label || timePickerDefaultAriaLabel;
|
|
265
|
-
var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
|
|
266
|
-
styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
|
|
267
|
-
});
|
|
268
|
-
|
|
269
|
-
// Render DateTimePicker's IconContainer when a value has been filled
|
|
270
|
-
// Don't use Date or TimePicker's because they can't be customised
|
|
271
|
-
var isClearable = Boolean(dateValue || timeValue);
|
|
272
|
-
return /*#__PURE__*/React.createElement(DateTimePickerContainer, {
|
|
273
|
-
appearance: appearance,
|
|
274
|
-
isDisabled: isDisabled,
|
|
275
|
-
isFocused: isFocused,
|
|
276
|
-
isInvalid: isInvalid,
|
|
277
|
-
testId: testId,
|
|
278
|
-
innerProps: innerProps
|
|
279
|
-
}, /*#__PURE__*/React.createElement("input", {
|
|
280
|
-
name: name,
|
|
281
|
-
type: "hidden",
|
|
282
|
-
value: value,
|
|
283
|
-
"data-testid": testId && "".concat(testId, "--input")
|
|
284
|
-
}), /*#__PURE__*/React.createElement(Box, {
|
|
285
|
-
xcss: compiledStyles.datePickerContainerStyles
|
|
286
|
-
}, /*#__PURE__*/React.createElement(DatePicker, {
|
|
287
|
-
appearance: appearance,
|
|
288
|
-
"aria-describedby": datePickerAriaDescribedBy,
|
|
289
|
-
autoFocus: datePickerProps.autoFocus || autoFocus,
|
|
290
|
-
dateFormat: datePickerProps.dateFormat,
|
|
291
|
-
defaultIsOpen: datePickerProps.defaultIsOpen,
|
|
292
|
-
defaultValue: datePickerProps.defaultValue,
|
|
293
|
-
disabled: datePickerProps.disabled,
|
|
294
|
-
disabledDateFilter: datePickerProps.disabledDateFilter,
|
|
295
|
-
formatDisplayLabel: datePickerProps.formatDisplayLabel,
|
|
296
|
-
hideIcon: datePickerProps.hideIcon || true,
|
|
297
|
-
icon: datePickerProps.icon,
|
|
298
|
-
id: datePickerProps.id || id,
|
|
299
|
-
innerProps: datePickerProps.innerProps,
|
|
300
|
-
inputLabel: datePickerProps.inputLabel,
|
|
301
|
-
inputLabelId: datePickerProps.inputLabelId,
|
|
302
|
-
isDisabled: datePickerProps.isDisabled || isDisabled,
|
|
303
|
-
isInvalid: datePickerProps.isInvalid || isInvalid,
|
|
304
|
-
isOpen: datePickerProps.isOpen,
|
|
305
|
-
isRequired: datePickerProps.isRequired || isRequired,
|
|
306
|
-
label: datePickerLabel,
|
|
307
|
-
locale: datePickerProps.locale || locale,
|
|
308
|
-
maxDate: datePickerProps.maxDate,
|
|
309
|
-
minDate: datePickerProps.minDate,
|
|
310
|
-
name: datePickerProps.name,
|
|
311
|
-
nextMonthLabel: datePickerProps.nextMonthLabel,
|
|
312
|
-
onBlur: onDateBlur,
|
|
313
|
-
onChange: onDateChange,
|
|
314
|
-
onFocus: onDateFocus,
|
|
315
|
-
openCalendarLabel: datePickerProps.openCalendarLabel,
|
|
316
|
-
parseInputValue: datePickerProps.parseInputValue,
|
|
317
|
-
placeholder: datePickerProps.placeholder,
|
|
318
|
-
previousMonthLabel: datePickerProps.previousMonthLabel,
|
|
319
|
-
selectProps: mergedDatePickerSelectProps,
|
|
320
|
-
shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
|
|
321
|
-
spacing: datePickerProps.spacing || spacing,
|
|
322
|
-
testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
|
|
323
|
-
value: dateValue,
|
|
324
|
-
weekStartDay: datePickerProps.weekStartDay
|
|
325
|
-
})), /*#__PURE__*/React.createElement(Box, {
|
|
326
|
-
xcss: compiledStyles.timePickerContainerStyles
|
|
327
|
-
}, /*#__PURE__*/React.createElement(TimePicker, {
|
|
328
|
-
appearance: timePickerProps.appearance || appearance,
|
|
329
|
-
"aria-describedby": timePickerAriaDescribedBy,
|
|
330
|
-
autoFocus: timePickerProps.autoFocus,
|
|
331
|
-
defaultIsOpen: timePickerProps.defaultIsOpen,
|
|
332
|
-
defaultValue: timePickerProps.defaultValue,
|
|
333
|
-
formatDisplayLabel: timePickerProps.formatDisplayLabel,
|
|
334
|
-
hideIcon: timePickerProps.hideIcon || true,
|
|
335
|
-
id: timePickerProps.id,
|
|
336
|
-
innerProps: timePickerProps.innerProps,
|
|
337
|
-
isDisabled: timePickerProps.isDisabled || isDisabled,
|
|
338
|
-
isInvalid: timePickerProps.isInvalid || isInvalid,
|
|
339
|
-
isOpen: timePickerProps.isOpen,
|
|
340
|
-
isRequired: timePickerProps.isRequired || isRequired,
|
|
341
|
-
label: timePickerLabel,
|
|
342
|
-
locale: timePickerProps.locale || locale,
|
|
343
|
-
name: timePickerProps.name,
|
|
344
|
-
onBlur: onTimeBlur,
|
|
345
|
-
onChange: onTimeChange,
|
|
346
|
-
onFocus: onTimeFocus,
|
|
347
|
-
parseInputValue: timePickerProps.parseInputValue,
|
|
348
|
-
placeholder: timePickerProps.placeholder,
|
|
349
|
-
selectProps: mergedTimePickerSelectProps,
|
|
350
|
-
spacing: timePickerProps.spacing || spacing,
|
|
351
|
-
testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
|
|
352
|
-
timeFormat: timePickerProps.timeFormat,
|
|
353
|
-
timeIsEditable: timePickerProps.timeIsEditable,
|
|
354
|
-
times: timePickerProps.times,
|
|
355
|
-
value: timeValue
|
|
356
|
-
})), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(Inline, {
|
|
357
|
-
xcss: compiledStyles.iconContainerStyles
|
|
358
|
-
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
359
|
-
appearance: "subtle",
|
|
360
|
-
label: clearControlLabel,
|
|
361
|
-
icon: function icon(iconProps) {
|
|
362
|
-
return /*#__PURE__*/React.createElement(SelectClearIcon, _extends({}, iconProps, {
|
|
363
|
-
color: "var(--ds-text-subtlest, #6B6E76)",
|
|
364
|
-
size: "small"
|
|
365
|
-
}));
|
|
366
|
-
},
|
|
367
|
-
onClick: onClear,
|
|
368
|
-
testId: testId && "".concat(testId, "--icon--container"),
|
|
369
|
-
tabIndex: -1
|
|
370
|
-
})) : null);
|
|
371
|
-
});
|
|
372
|
-
export default DateTimePicker;
|
|
15
|
+
export default componentWithCondition(function () {
|
|
16
|
+
return fg('dst-a11y_fix-dtp-value-calculation');
|
|
17
|
+
}, DateTimePickerNew, DateTimePickerOld);
|
|
@@ -19,7 +19,7 @@ import parseTime from '../internal/parse-time';
|
|
|
19
19
|
import { convertTokens } from '../internal/parse-tokens';
|
|
20
20
|
import { makeSingleValue } from '../internal/single-value';
|
|
21
21
|
var packageName = "@atlaskit/datetime-picker";
|
|
22
|
-
var packageVersion = "
|
|
22
|
+
var packageVersion = "17.6.0";
|
|
23
23
|
var menuStyles = {
|
|
24
24
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
25
25
|
position: 'static',
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type DateTimePickerBaseProps } from '../types';
|
|
3
|
+
export declare const datePickerDefaultAriaLabel = "Date";
|
|
4
|
+
export declare const timePickerDefaultAriaLabel = "Time";
|
|
5
|
+
declare const DateTimePickerNew: React.ForwardRefExoticComponent<React.PropsWithoutRef<DateTimePickerBaseProps> & React.RefAttributes<HTMLElement>>;
|
|
6
|
+
export default DateTimePickerNew;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type DateTimePickerBaseProps } from '../types';
|
|
3
|
+
export declare const datePickerDefaultAriaLabel = "Date";
|
|
4
|
+
export declare const timePickerDefaultAriaLabel = "Time";
|
|
5
|
+
declare const DateTimePickerOld: React.ForwardRefExoticComponent<React.PropsWithoutRef<DateTimePickerBaseProps> & React.RefAttributes<HTMLElement>>;
|
|
6
|
+
export default DateTimePickerOld;
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type DateTimePickerBaseProps } from '../types';
|
|
3
|
-
export declare const datePickerDefaultAriaLabel = "Date";
|
|
4
|
-
export declare const timePickerDefaultAriaLabel = "Time";
|
|
5
1
|
/**
|
|
6
2
|
* __Date time picker__
|
|
7
3
|
*
|
|
@@ -11,5 +7,5 @@ export declare const timePickerDefaultAriaLabel = "Time";
|
|
|
11
7
|
* - [Code](https://atlassian.design/components/datetime-picker/code)
|
|
12
8
|
* - [Usage](https://atlassian.design/components/datetime-picker/usage)
|
|
13
9
|
*/
|
|
14
|
-
declare const
|
|
15
|
-
export default
|
|
10
|
+
declare const _default: import("react").FC<Omit<Omit<import("..").DateTimePickerProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
|
|
11
|
+
export default _default;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type DateTimePickerBaseProps } from '../types';
|
|
3
|
+
export declare const datePickerDefaultAriaLabel = "Date";
|
|
4
|
+
export declare const timePickerDefaultAriaLabel = "Time";
|
|
5
|
+
declare const DateTimePickerNew: React.ForwardRefExoticComponent<React.PropsWithoutRef<DateTimePickerBaseProps> & React.RefAttributes<HTMLElement>>;
|
|
6
|
+
export default DateTimePickerNew;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type DateTimePickerBaseProps } from '../types';
|
|
3
|
+
export declare const datePickerDefaultAriaLabel = "Date";
|
|
4
|
+
export declare const timePickerDefaultAriaLabel = "Time";
|
|
5
|
+
declare const DateTimePickerOld: React.ForwardRefExoticComponent<React.PropsWithoutRef<DateTimePickerBaseProps> & React.RefAttributes<HTMLElement>>;
|
|
6
|
+
export default DateTimePickerOld;
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type DateTimePickerBaseProps } from '../types';
|
|
3
|
-
export declare const datePickerDefaultAriaLabel = "Date";
|
|
4
|
-
export declare const timePickerDefaultAriaLabel = "Time";
|
|
5
1
|
/**
|
|
6
2
|
* __Date time picker__
|
|
7
3
|
*
|
|
@@ -11,5 +7,5 @@ export declare const timePickerDefaultAriaLabel = "Time";
|
|
|
11
7
|
* - [Code](https://atlassian.design/components/datetime-picker/code)
|
|
12
8
|
* - [Usage](https://atlassian.design/components/datetime-picker/usage)
|
|
13
9
|
*/
|
|
14
|
-
declare const
|
|
15
|
-
export default
|
|
10
|
+
declare const _default: import("react").FC<Omit<Omit<import("..").DateTimePickerProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
|
|
11
|
+
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/datetime-picker",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.6.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/"
|
|
@@ -37,13 +37,13 @@
|
|
|
37
37
|
"@atlaskit/calendar": "^17.2.0",
|
|
38
38
|
"@atlaskit/css": "^0.19.0",
|
|
39
39
|
"@atlaskit/ds-lib": "^6.0.0",
|
|
40
|
-
"@atlaskit/icon": "^
|
|
40
|
+
"@atlaskit/icon": "^34.0.0",
|
|
41
41
|
"@atlaskit/layering": "^3.6.0",
|
|
42
42
|
"@atlaskit/locale": "^3.0.0",
|
|
43
43
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
44
44
|
"@atlaskit/popper": "^7.1.0",
|
|
45
45
|
"@atlaskit/primitives": "^18.1.0",
|
|
46
|
-
"@atlaskit/select": "^21.
|
|
46
|
+
"@atlaskit/select": "^21.10.0",
|
|
47
47
|
"@atlaskit/tokens": "^11.4.0",
|
|
48
48
|
"@babel/runtime": "^7.0.0",
|
|
49
49
|
"@compiled/react": "^0.20.0",
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"@atlaskit/form": "^15.5.0",
|
|
63
63
|
"@atlaskit/heading": "^5.3.0",
|
|
64
64
|
"@atlaskit/link": "^3.3.0",
|
|
65
|
-
"@atlaskit/modal-dialog": "^14.
|
|
66
|
-
"@atlaskit/popup": "^4.
|
|
65
|
+
"@atlaskit/modal-dialog": "^14.14.0",
|
|
66
|
+
"@atlaskit/popup": "^4.16.0",
|
|
67
67
|
"@atlaskit/range": "^10.0.0",
|
|
68
68
|
"@atlaskit/section-message": "^8.12.0",
|
|
69
69
|
"@atlaskit/textfield": "^8.2.0",
|
|
@@ -107,6 +107,9 @@
|
|
|
107
107
|
"dst-date-picker-use-functional-component": {
|
|
108
108
|
"type": "boolean"
|
|
109
109
|
},
|
|
110
|
+
"dst-a11y_fix-dtp-value-calculation": {
|
|
111
|
+
"type": "boolean"
|
|
112
|
+
},
|
|
110
113
|
"dst-date-time-picker-use-functional-component": {
|
|
111
114
|
"type": "boolean"
|
|
112
115
|
},
|
|
File without changes
|
|
File without changes
|