@atlaskit/datetime-picker 17.8.9 → 17.9.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.
Files changed (38) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/components/date-picker.js +1 -1
  3. package/dist/cjs/components/date-time-picker.js +502 -9
  4. package/dist/cjs/components/time-picker.js +1 -1
  5. package/dist/cjs/internal/date-time-picker-container.compiled.css +1 -1
  6. package/dist/cjs/internal/date-time-picker-container.js +1 -1
  7. package/dist/cjs/internal/get-parsed-iso.js +2 -2
  8. package/dist/es2019/components/date-picker.js +1 -1
  9. package/dist/es2019/components/date-time-picker.js +485 -6
  10. package/dist/es2019/components/time-picker.js +1 -1
  11. package/dist/es2019/internal/date-time-picker-container.compiled.css +1 -1
  12. package/dist/es2019/internal/date-time-picker-container.js +1 -1
  13. package/dist/es2019/internal/get-parsed-iso.js +2 -2
  14. package/dist/esm/components/date-picker.js +1 -1
  15. package/dist/esm/components/date-time-picker.js +502 -8
  16. package/dist/esm/components/time-picker.js +1 -1
  17. package/dist/esm/internal/date-time-picker-container.compiled.css +1 -1
  18. package/dist/esm/internal/date-time-picker-container.js +1 -1
  19. package/dist/esm/internal/get-parsed-iso.js +2 -2
  20. package/dist/types/components/date-time-picker.d.ts +14 -30
  21. package/dist/types-ts4.5/components/date-time-picker.d.ts +14 -30
  22. package/package.json +6 -12
  23. package/dist/cjs/components/date-time-picker-class.compiled.css +0 -19
  24. package/dist/cjs/components/date-time-picker-class.js +0 -408
  25. package/dist/cjs/components/date-time-picker-fc.js +0 -484
  26. package/dist/es2019/components/date-time-picker-class.compiled.css +0 -19
  27. package/dist/es2019/components/date-time-picker-class.js +0 -373
  28. package/dist/es2019/components/date-time-picker-fc.js +0 -461
  29. package/dist/esm/components/date-time-picker-class.compiled.css +0 -19
  30. package/dist/esm/components/date-time-picker-class.js +0 -405
  31. package/dist/esm/components/date-time-picker-fc.js +0 -478
  32. package/dist/types/components/date-time-picker-class.d.ts +0 -82
  33. package/dist/types/components/date-time-picker-fc.d.ts +0 -13
  34. package/dist/types-ts4.5/components/date-time-picker-class.d.ts +0 -82
  35. package/dist/types-ts4.5/components/date-time-picker-fc.d.ts +0 -13
  36. /package/dist/cjs/components/{date-time-picker-fc.compiled.css → date-time-picker.compiled.css} +0 -0
  37. /package/dist/es2019/components/{date-time-picker-fc.compiled.css → date-time-picker.compiled.css} +0 -0
  38. /package/dist/esm/components/{date-time-picker-fc.compiled.css → date-time-picker.compiled.css} +0 -0
@@ -1,478 +0,0 @@
1
- /* date-time-picker-fc.tsx generated by @compiled/babel-plugin v0.39.1 */
2
- import _extends from "@babel/runtime/helpers/extends";
3
- import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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, useReducer, 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 { DateTimePickerContainer } from '../internal/date-time-picker-container';
25
- import { formatDateTimeZoneIntoIso } from '../internal/format-date-time-zone-into-iso';
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 = "17.8.8";
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
-
58
- /**
59
- * Two action types keep the reducer focused:
60
- *
61
- * - APPLY: used by user-interaction handlers. The handler computes the full
62
- * next state (including the new ISO value) and applies it atomically. This
63
- * guarantees a single re-render with no cascades regardless of React version.
64
- *
65
- * - SET_VALUE: used by the `providedValue` prop effect. The reducer owns all
66
- * parsing logic for external value changes, including the empty-string case
67
- * that the previous useState approach missed.
68
- */
69
-
70
- /**
71
- * __Date time picker__
72
- *
73
- * A date time picker allows the user to select an associated date and time.
74
- *
75
- * - [Examples](https://atlassian.design/components/datetime-picker/examples)
76
- * - [Code](https://atlassian.design/components/datetime-picker/code)
77
- * - [Usage](https://atlassian.design/components/datetime-picker/usage)
78
- */
79
- var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
80
- var ariaDescribedBy = _ref2['aria-describedby'],
81
- _ref2$appearance = _ref2.appearance,
82
- appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
83
- _ref2$autoFocus = _ref2.autoFocus,
84
- autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
85
- _ref2$clearControlLab = _ref2.clearControlLabel,
86
- clearControlLabel = _ref2$clearControlLab === void 0 ? 'clear' : _ref2$clearControlLab,
87
- _ref2$datePickerProps = _ref2.datePickerProps,
88
- datePickerPropsWithSelectProps = _ref2$datePickerProps === void 0 ? {} : _ref2$datePickerProps,
89
- _ref2$defaultValue = _ref2.defaultValue,
90
- defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
91
- _ref2$id = _ref2.id,
92
- id = _ref2$id === void 0 ? '' : _ref2$id,
93
- _ref2$innerProps = _ref2.innerProps,
94
- innerProps = _ref2$innerProps === void 0 ? {} : _ref2$innerProps,
95
- _ref2$isDisabled = _ref2.isDisabled,
96
- isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
97
- _ref2$isInvalid = _ref2.isInvalid,
98
- isInvalid = _ref2$isInvalid === void 0 ? false : _ref2$isInvalid,
99
- _ref2$isRequired = _ref2.isRequired,
100
- isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired,
101
- _ref2$name = _ref2.name,
102
- name = _ref2$name === void 0 ? '' : _ref2$name,
103
- _ref2$onBlur = _ref2.onBlur,
104
- onBlur = _ref2$onBlur === void 0 ? function (_event) {} : _ref2$onBlur,
105
- _ref2$onChange = _ref2.onChange,
106
- onChangeProp = _ref2$onChange === void 0 ? function (_value) {} : _ref2$onChange,
107
- _ref2$onFocus = _ref2.onFocus,
108
- onFocus = _ref2$onFocus === void 0 ? function (_event) {} : _ref2$onFocus,
109
- providedParseValue = _ref2.parseValue,
110
- _ref2$spacing = _ref2.spacing,
111
- spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
112
- _ref2$locale = _ref2.locale,
113
- locale = _ref2$locale === void 0 ? 'en-US' : _ref2$locale,
114
- testId = _ref2.testId,
115
- _ref2$timePickerProps = _ref2.timePickerProps,
116
- timePickerPropsWithSelectProps = _ref2$timePickerProps === void 0 ? {} : _ref2$timePickerProps,
117
- providedValue = _ref2.value;
118
- var _useState = useState(false),
119
- _useState2 = _slicedToArray(_useState, 2),
120
- isFocused = _useState2[0],
121
- setIsFocused = _useState2[1];
122
-
123
- /**
124
- * Defined inside the component so the reducer closes over `providedParseValue`
125
- * without needing to smuggle it through every action payload. React always
126
- * calls the reducer from the latest render, so stale-closure is not a concern.
127
- */
128
- var reducer = function reducer(state, action) {
129
- switch (action.type) {
130
- case 'APPLY':
131
- return action.payload;
132
- case 'SET_VALUE':
133
- {
134
- var newValue = action.payload;
135
-
136
- // Explicit empty-string handling: clear all sub-fields so the date
137
- // and time pickers visually reset when a controlled value is cleared.
138
- if (!newValue) {
139
- return {
140
- value: '',
141
- dateValue: '',
142
- timeValue: '',
143
- zoneValue: ''
144
- };
145
- }
146
- if (providedParseValue) {
147
- var _parsed = providedParseValue(newValue, state.dateValue, state.timeValue, state.zoneValue);
148
- return _parsed ? _objectSpread({
149
- value: newValue
150
- }, _parsed) : {
151
- value: newValue,
152
- dateValue: state.dateValue,
153
- timeValue: state.timeValue,
154
- zoneValue: state.zoneValue
155
- };
156
- }
157
- var parsed = parseISO(newValue);
158
- return isValid(parsed) ? {
159
- value: newValue,
160
- dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
161
- timeValue: format(parsed, convertTokens('HH:mm')),
162
- zoneValue: format(parsed, convertTokens('ZZ'))
163
- } : {
164
- value: newValue,
165
- dateValue: '',
166
- timeValue: '',
167
- zoneValue: ''
168
- };
169
- }
170
- default:
171
- return state;
172
- }
173
- };
174
- var _useReducer = useReducer(reducer, null, function () {
175
- var initialValue = providedValue || defaultValue || '';
176
- var initialDate = (datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '';
177
- var initialTime = (timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '';
178
- if (!initialValue) {
179
- return {
180
- value: '',
181
- dateValue: initialDate,
182
- timeValue: initialTime,
183
- zoneValue: ''
184
- };
185
- }
186
- if (providedParseValue) {
187
- var _parsed2 = providedParseValue(initialValue, initialDate, initialTime, '');
188
- return _parsed2 ? _objectSpread({
189
- value: initialValue
190
- }, _parsed2) : {
191
- value: initialValue,
192
- dateValue: initialDate,
193
- timeValue: initialTime,
194
- zoneValue: ''
195
- };
196
- }
197
- var parsed = parseISO(initialValue);
198
- return isValid(parsed) ? {
199
- value: initialValue,
200
- dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
201
- timeValue: format(parsed, convertTokens('HH:mm')),
202
- zoneValue: format(parsed, convertTokens('ZZ'))
203
- } : {
204
- value: initialValue,
205
- dateValue: initialDate,
206
- timeValue: initialTime,
207
- zoneValue: ''
208
- };
209
- }),
210
- _useReducer2 = _slicedToArray(_useReducer, 2),
211
- dtState = _useReducer2[0],
212
- dispatch = _useReducer2[1];
213
- useEffect(function () {
214
- if (providedValue !== undefined) {
215
- dispatch({
216
- type: 'SET_VALUE',
217
- payload: providedValue
218
- });
219
- }
220
- // eslint-disable-next-line react-hooks/exhaustive-deps
221
- }, [providedValue]);
222
- var parseValue = useCallback(function (value, providedDateValue, providedTimeValue, providedZoneValue) {
223
- if (providedParseValue) {
224
- var parsedFromFn = providedParseValue(value, providedDateValue, providedTimeValue, providedZoneValue);
225
- // This handles cases found in Jira where the parse function actually does
226
- // nothing and returns undefined. The previous `getSafeState` function
227
- // just spread the values over the state, but if it returned `undefined`,
228
- // it would just rely on the previous state values. Considering this is
229
- // what is input to this function anyway, this is a safe way to handle
230
- // this, colocate the behavior, and not rely on `getSafeState`.
231
- return parsedFromFn || {
232
- dateValue: providedDateValue,
233
- timeValue: providedTimeValue,
234
- zoneValue: providedZoneValue
235
- };
236
- }
237
- var parsed = parseISO(value);
238
- return isValid(parsed) ? {
239
- dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
240
- timeValue: format(parsed, convertTokens('HH:mm')),
241
- zoneValue: format(parsed, convertTokens('ZZ'))
242
- } : {
243
- dateValue: dtState.dateValue,
244
- timeValue: dtState.timeValue,
245
- zoneValue: dtState.zoneValue
246
- };
247
- }, [providedParseValue, dtState.dateValue, dtState.timeValue, dtState.zoneValue]);
248
- var onDateBlur = function onDateBlur(event) {
249
- setIsFocused(false);
250
- onBlur(event);
251
- if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onBlur) {
252
- datePickerPropsWithSelectProps.onBlur(event);
253
- }
254
- };
255
- var onTimeBlur = function onTimeBlur(event) {
256
- setIsFocused(false);
257
- onBlur(event);
258
- if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onBlur) {
259
- timePickerPropsWithSelectProps.onBlur(event);
260
- }
261
- };
262
- var onDateFocus = function onDateFocus(event) {
263
- setIsFocused(false);
264
- onFocus(event);
265
- if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onFocus) {
266
- datePickerPropsWithSelectProps.onFocus(event);
267
- }
268
- };
269
- var onTimeFocus = function onTimeFocus(event) {
270
- setIsFocused(false);
271
- onFocus(event);
272
- if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onFocus) {
273
- timePickerPropsWithSelectProps.onFocus(event);
274
- }
275
- };
276
- var onDateChange = function onDateChange(newDateValue) {
277
- var parsedValues = parseValue(dtState.value, newDateValue, dtState.timeValue, dtState.zoneValue);
278
- onValueChange({
279
- providedDateValue: newDateValue,
280
- providedTimeValue: parsedValues.timeValue,
281
- providedZoneValue: parsedValues.zoneValue
282
- });
283
- if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
284
- datePickerPropsWithSelectProps.onChange(newDateValue);
285
- }
286
- };
287
- var onTimeChange = function onTimeChange(newTimeValue) {
288
- var parsedValues = parseValue(dtState.value, dtState.dateValue, newTimeValue, dtState.zoneValue);
289
- onValueChange({
290
- providedDateValue: parsedValues.dateValue,
291
- providedTimeValue: newTimeValue,
292
- providedZoneValue: parsedValues.zoneValue
293
- });
294
- if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
295
- timePickerPropsWithSelectProps.onChange(newTimeValue);
296
- }
297
- };
298
- var onClear = function onClear() {
299
- var parsedValues = parseValue(dtState.value, dtState.dateValue, dtState.timeValue, dtState.zoneValue);
300
- onValueChange({
301
- providedDateValue: '',
302
- providedTimeValue: '',
303
- providedZoneValue: parsedValues.zoneValue
304
- });
305
- if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
306
- datePickerPropsWithSelectProps.onChange('');
307
- }
308
- if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
309
- timePickerPropsWithSelectProps.onChange('');
310
- }
311
- };
312
- var onChangePropWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
313
- fn: onChangeProp,
314
- action: 'selectedDate',
315
- actionSubject: 'datePicker'
316
- }, analyticsAttributes));
317
- var onValueChange = function onValueChange(_ref3) {
318
- var providedDateValue = _ref3.providedDateValue,
319
- providedTimeValue = _ref3.providedTimeValue,
320
- providedZoneValue = _ref3.providedZoneValue;
321
- if (providedDateValue && providedTimeValue) {
322
- var isoValue = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, providedZoneValue);
323
- var _parseValue = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue),
324
- parsedZone = _parseValue.zoneValue;
325
- var valueWithValidZone = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, parsedZone);
326
- dispatch({
327
- type: 'APPLY',
328
- payload: {
329
- value: valueWithValidZone,
330
- dateValue: providedDateValue,
331
- timeValue: providedTimeValue,
332
- zoneValue: parsedZone
333
- }
334
- });
335
- onChangePropWithAnalytics(valueWithValidZone);
336
- // If the date or time value was cleared when there is an existing datetime value, then clear the value.
337
- } else if (dtState.value) {
338
- dispatch({
339
- type: 'APPLY',
340
- payload: {
341
- value: '',
342
- dateValue: providedDateValue,
343
- timeValue: providedTimeValue,
344
- zoneValue: providedZoneValue
345
- }
346
- });
347
- onChangePropWithAnalytics('');
348
- } else {
349
- dispatch({
350
- type: 'APPLY',
351
- payload: {
352
- value: '',
353
- dateValue: providedDateValue,
354
- timeValue: providedTimeValue,
355
- zoneValue: providedZoneValue
356
- }
357
- });
358
- }
359
- };
360
- var datePickerSelectProps = datePickerPropsWithSelectProps.selectProps,
361
- datePickerProps = _objectWithoutProperties(datePickerPropsWithSelectProps, _excluded);
362
- var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
363
- var datePickerLabel = datePickerProps.label || 'Date';
364
- var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
365
- styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
366
- });
367
- var timePickerSelectProps = timePickerPropsWithSelectProps.selectProps,
368
- timePickerProps = _objectWithoutProperties(timePickerPropsWithSelectProps, _excluded2);
369
- var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
370
- var timePickerLabel = timePickerProps.label || 'Time';
371
- var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
372
- styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
373
- });
374
-
375
- // Render DateTimePicker's IconContainer when a value has been filled
376
- // Don't use Date or TimePicker's because they can't be customised
377
- var isClearable = Boolean(dtState.dateValue || dtState.timeValue);
378
- return /*#__PURE__*/React.createElement(DateTimePickerContainer, {
379
- appearance: appearance,
380
- isDisabled: isDisabled,
381
- isFocused: isFocused,
382
- isInvalid: isInvalid,
383
- testId: testId,
384
- innerProps: innerProps
385
- }, /*#__PURE__*/React.createElement("input", {
386
- name: name,
387
- type: "hidden",
388
- value: dtState.value,
389
- "data-testid": testId && "".concat(testId, "--input")
390
- }), /*#__PURE__*/React.createElement(Box, {
391
- xcss: compiledStyles.datePickerContainerStyles
392
- }, /*#__PURE__*/React.createElement(DatePicker, {
393
- appearance: appearance,
394
- "aria-describedby": datePickerAriaDescribedBy,
395
- autoFocus: datePickerProps.autoFocus || autoFocus,
396
- dateFormat: datePickerProps.dateFormat,
397
- defaultIsOpen: datePickerProps.defaultIsOpen,
398
- defaultValue: datePickerProps.defaultValue,
399
- disabled: datePickerProps.disabled,
400
- disabledDateFilter: datePickerProps.disabledDateFilter,
401
- formatDisplayLabel: datePickerProps.formatDisplayLabel,
402
- hideIcon: datePickerProps.hideIcon || true,
403
- icon: datePickerProps.icon,
404
- id: datePickerProps.id || id,
405
- innerProps: datePickerProps.innerProps,
406
- inputLabel: datePickerProps.inputLabel,
407
- inputLabelId: datePickerProps.inputLabelId,
408
- isDisabled: datePickerProps.isDisabled || isDisabled,
409
- isInvalid: datePickerProps.isInvalid || isInvalid,
410
- isOpen: datePickerProps.isOpen,
411
- isRequired: datePickerProps.isRequired || isRequired,
412
- label: datePickerLabel,
413
- locale: datePickerProps.locale || locale,
414
- maxDate: datePickerProps.maxDate,
415
- minDate: datePickerProps.minDate,
416
- name: datePickerProps.name,
417
- nextMonthLabel: datePickerProps.nextMonthLabel,
418
- onBlur: onDateBlur,
419
- onChange: onDateChange,
420
- onFocus: onDateFocus,
421
- openCalendarLabel: datePickerProps.openCalendarLabel,
422
- parseInputValue: datePickerProps.parseInputValue,
423
- placeholder: datePickerProps.placeholder,
424
- previousMonthLabel: datePickerProps.previousMonthLabel,
425
- selectProps: mergedDatePickerSelectProps,
426
- shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
427
- spacing: datePickerProps.spacing || spacing,
428
- testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
429
- value: dtState.dateValue,
430
- weekStartDay: datePickerProps.weekStartDay
431
- })), /*#__PURE__*/React.createElement(Box, {
432
- xcss: compiledStyles.timePickerContainerStyles
433
- }, /*#__PURE__*/React.createElement(TimePicker, {
434
- appearance: timePickerProps.appearance || appearance,
435
- "aria-describedby": timePickerAriaDescribedBy,
436
- autoFocus: timePickerProps.autoFocus,
437
- defaultIsOpen: timePickerProps.defaultIsOpen,
438
- defaultValue: timePickerProps.defaultValue,
439
- formatDisplayLabel: timePickerProps.formatDisplayLabel,
440
- hideIcon: timePickerProps.hideIcon || true,
441
- id: timePickerProps.id,
442
- innerProps: timePickerProps.innerProps,
443
- isDisabled: timePickerProps.isDisabled || isDisabled,
444
- isInvalid: timePickerProps.isInvalid || isInvalid,
445
- isOpen: timePickerProps.isOpen,
446
- isRequired: timePickerProps.isRequired || isRequired,
447
- label: timePickerLabel,
448
- locale: timePickerProps.locale || locale,
449
- name: timePickerProps.name,
450
- onBlur: onTimeBlur,
451
- onChange: onTimeChange,
452
- onFocus: onTimeFocus,
453
- parseInputValue: timePickerProps.parseInputValue,
454
- placeholder: timePickerProps.placeholder,
455
- selectProps: mergedTimePickerSelectProps,
456
- spacing: timePickerProps.spacing || spacing,
457
- testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
458
- timeFormat: timePickerProps.timeFormat,
459
- timeIsEditable: timePickerProps.timeIsEditable,
460
- times: timePickerProps.times,
461
- value: dtState.timeValue
462
- })), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(Inline, {
463
- xcss: compiledStyles.iconContainerStyles
464
- }, /*#__PURE__*/React.createElement(IconButton, {
465
- appearance: "subtle",
466
- label: clearControlLabel,
467
- icon: function icon(iconProps) {
468
- return /*#__PURE__*/React.createElement(SelectClearIcon, _extends({}, iconProps, {
469
- color: "var(--ds-text-subtlest, #6B6E76)",
470
- size: "small"
471
- }));
472
- },
473
- onClick: onClear,
474
- testId: testId && "".concat(testId, "--icon--container"),
475
- tabIndex: -1
476
- })) : null);
477
- });
478
- export default DateTimePicker;
@@ -1,82 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import { type DateTimePickerBaseProps } from '../types';
7
- interface State {
8
- dateValue: string;
9
- isFocused: boolean;
10
- timeValue: string;
11
- value: string;
12
- zoneValue: string;
13
- }
14
- declare class DateTimePickerComponent extends React.Component<DateTimePickerBaseProps, State> {
15
- static defaultProps: DateTimePickerBaseProps;
16
- state: State;
17
- getParsedValues: () => {
18
- dateValue: string;
19
- timeValue: string;
20
- zoneValue: string;
21
- };
22
- getValue: () => string;
23
- parseValue(value: string, dateValue: string, timeValue: string, zoneValue: string): {
24
- dateValue: string;
25
- timeValue: string;
26
- zoneValue: string;
27
- };
28
- onDateBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
29
- onTimeBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
30
- onDateFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
31
- onTimeFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
32
- onDateChange: (dateValue: string) => void;
33
- onTimeChange: (timeValue: string) => void;
34
- onClear: () => void;
35
- onValueChange({ dateValue, timeValue, zoneValue, }: {
36
- dateValue: string;
37
- timeValue: string;
38
- zoneValue: string;
39
- }): void;
40
- render(): JSX.Element;
41
- }
42
- export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
43
- /**
44
- * __Date time picker__
45
- *
46
- * A date time picker allows the user to select an associated date and time.
47
- *
48
- * - [Examples](https://atlassian.design/components/datetime-picker/examples)
49
- * - [Code](https://atlassian.design/components/datetime-picker/code)
50
- * - [Usage](https://atlassian.design/components/datetime-picker/usage)
51
- */
52
- declare const DateTimePicker: React.ForwardRefExoticComponent<Omit<Omit<Pick<Omit<DateTimePickerBaseProps, keyof import('@atlaskit/analytics-next').WithAnalyticsEventsProps>, never> & {
53
- appearance?: import('..').Appearance | undefined;
54
- isDisabled?: boolean | undefined;
55
- innerProps?: React.AllHTMLAttributes<HTMLElement> | undefined;
56
- defaultValue?: string | undefined;
57
- autoFocus?: boolean | undefined;
58
- id?: string | undefined;
59
- 'aria-describedby'?: string | undefined;
60
- onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
61
- onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
62
- onChange?: ((value: string) => void) | undefined;
63
- value?: string | undefined;
64
- name?: string | undefined;
65
- testId?: string | undefined;
66
- locale?: string | undefined;
67
- clearControlLabel?: string | undefined;
68
- isInvalid?: boolean | undefined;
69
- isRequired?: boolean | undefined;
70
- spacing?: import('..').Spacing | undefined;
71
- datePickerProps?: import('..').DatePickerProps | undefined;
72
- timePickerProps?: import('..').TimePickerProps | undefined;
73
- parseValue?: ((dateTimeValue: string, date: string, time: string, timezone: string) => {
74
- dateValue: string;
75
- timeValue: string;
76
- zoneValue: string;
77
- }) | undefined;
78
- } & {
79
- ref?: React.Ref<any> | undefined;
80
- createAnalyticsEvent?: import('@atlaskit/analytics-next').CreateUIAnalyticsEvent | undefined;
81
- }, 'ref'> & React.RefAttributes<any> & import('@atlaskit/analytics-next').WithContextProps, 'ref'> & React.RefAttributes<any>>;
82
- export default DateTimePicker;
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import { type DateTimePickerBaseProps } from '../types';
3
- /**
4
- * __Date time picker__
5
- *
6
- * A date time picker allows the user to select an associated date and time.
7
- *
8
- * - [Examples](https://atlassian.design/components/datetime-picker/examples)
9
- * - [Code](https://atlassian.design/components/datetime-picker/code)
10
- * - [Usage](https://atlassian.design/components/datetime-picker/usage)
11
- */
12
- declare const DateTimePicker: React.ForwardRefExoticComponent<React.PropsWithoutRef<DateTimePickerBaseProps> & React.RefAttributes<HTMLElement>>;
13
- export default DateTimePicker;
@@ -1,82 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import { type DateTimePickerBaseProps } from '../types';
7
- interface State {
8
- dateValue: string;
9
- isFocused: boolean;
10
- timeValue: string;
11
- value: string;
12
- zoneValue: string;
13
- }
14
- declare class DateTimePickerComponent extends React.Component<DateTimePickerBaseProps, State> {
15
- static defaultProps: DateTimePickerBaseProps;
16
- state: State;
17
- getParsedValues: () => {
18
- dateValue: string;
19
- timeValue: string;
20
- zoneValue: string;
21
- };
22
- getValue: () => string;
23
- parseValue(value: string, dateValue: string, timeValue: string, zoneValue: string): {
24
- dateValue: string;
25
- timeValue: string;
26
- zoneValue: string;
27
- };
28
- onDateBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
29
- onTimeBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
30
- onDateFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
31
- onTimeFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
32
- onDateChange: (dateValue: string) => void;
33
- onTimeChange: (timeValue: string) => void;
34
- onClear: () => void;
35
- onValueChange({ dateValue, timeValue, zoneValue, }: {
36
- dateValue: string;
37
- timeValue: string;
38
- zoneValue: string;
39
- }): void;
40
- render(): JSX.Element;
41
- }
42
- export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
43
- /**
44
- * __Date time picker__
45
- *
46
- * A date time picker allows the user to select an associated date and time.
47
- *
48
- * - [Examples](https://atlassian.design/components/datetime-picker/examples)
49
- * - [Code](https://atlassian.design/components/datetime-picker/code)
50
- * - [Usage](https://atlassian.design/components/datetime-picker/usage)
51
- */
52
- declare const DateTimePicker: React.ForwardRefExoticComponent<Omit<Omit<Pick<Omit<DateTimePickerBaseProps, keyof import('@atlaskit/analytics-next').WithAnalyticsEventsProps>, never> & {
53
- appearance?: import('..').Appearance | undefined;
54
- isDisabled?: boolean | undefined;
55
- innerProps?: React.AllHTMLAttributes<HTMLElement> | undefined;
56
- defaultValue?: string | undefined;
57
- autoFocus?: boolean | undefined;
58
- id?: string | undefined;
59
- 'aria-describedby'?: string | undefined;
60
- onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
61
- onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
62
- onChange?: ((value: string) => void) | undefined;
63
- value?: string | undefined;
64
- name?: string | undefined;
65
- testId?: string | undefined;
66
- locale?: string | undefined;
67
- clearControlLabel?: string | undefined;
68
- isInvalid?: boolean | undefined;
69
- isRequired?: boolean | undefined;
70
- spacing?: import('..').Spacing | undefined;
71
- datePickerProps?: import('..').DatePickerProps | undefined;
72
- timePickerProps?: import('..').TimePickerProps | undefined;
73
- parseValue?: ((dateTimeValue: string, date: string, time: string, timezone: string) => {
74
- dateValue: string;
75
- timeValue: string;
76
- zoneValue: string;
77
- }) | undefined;
78
- } & {
79
- ref?: React.Ref<any> | undefined;
80
- createAnalyticsEvent?: import('@atlaskit/analytics-next').CreateUIAnalyticsEvent | undefined;
81
- }, 'ref'> & React.RefAttributes<any> & import('@atlaskit/analytics-next').WithContextProps, 'ref'> & React.RefAttributes<any>>;
82
- export default DateTimePicker;
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import { type DateTimePickerBaseProps } from '../types';
3
- /**
4
- * __Date time picker__
5
- *
6
- * A date time picker allows the user to select an associated date and time.
7
- *
8
- * - [Examples](https://atlassian.design/components/datetime-picker/examples)
9
- * - [Code](https://atlassian.design/components/datetime-picker/code)
10
- * - [Usage](https://atlassian.design/components/datetime-picker/usage)
11
- */
12
- declare const DateTimePicker: React.ForwardRefExoticComponent<React.PropsWithoutRef<DateTimePickerBaseProps> & React.RefAttributes<HTMLElement>>;
13
- export default DateTimePicker;