@atlaskit/datetime-picker 13.11.1 → 13.11.2
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 +8 -0
- package/dist/cjs/components/date-picker.js +30 -15
- package/dist/cjs/components/date-time-picker.js +69 -29
- package/dist/cjs/components/time-picker.js +2 -4
- package/dist/cjs/internal/fixed-layer-menu.js +50 -4
- package/dist/cjs/internal/menu.js +24 -9
- package/dist/cjs/internal/single-value.js +37 -4
- package/dist/es2019/components/date-picker.js +30 -15
- package/dist/es2019/components/date-time-picker.js +69 -29
- package/dist/es2019/components/time-picker.js +2 -4
- package/dist/es2019/internal/fixed-layer-menu.js +48 -2
- package/dist/es2019/internal/menu.js +53 -32
- package/dist/es2019/internal/single-value.js +36 -3
- package/dist/esm/components/date-picker.js +30 -15
- package/dist/esm/components/date-time-picker.js +69 -29
- package/dist/esm/components/time-picker.js +2 -4
- package/dist/esm/internal/fixed-layer-menu.js +50 -4
- package/dist/esm/internal/menu.js +25 -9
- package/dist/esm/internal/single-value.js +37 -4
- package/dist/types/internal/fixed-layer-menu.d.ts +1 -1
- package/dist/types/internal/single-value.d.ts +1 -1
- package/dist/types-ts4.5/internal/fixed-layer-menu.d.ts +1 -1
- package/dist/types-ts4.5/internal/single-value.d.ts +1 -1
- package/package.json +3 -3
|
@@ -12,13 +12,59 @@ import FixedLayer from '../internal/fixed-layer';
|
|
|
12
12
|
* This is the fixed layer menu used in the time picker.
|
|
13
13
|
*/
|
|
14
14
|
export const FixedLayerMenu = ({
|
|
15
|
+
className,
|
|
16
|
+
clearValue,
|
|
17
|
+
cx,
|
|
18
|
+
getStyles,
|
|
19
|
+
getValue,
|
|
20
|
+
hasValue,
|
|
21
|
+
innerProps,
|
|
22
|
+
innerRef,
|
|
23
|
+
isLoading,
|
|
24
|
+
isMulti,
|
|
25
|
+
isRtl,
|
|
26
|
+
maxMenuHeight,
|
|
27
|
+
menuPlacement,
|
|
28
|
+
menuPosition,
|
|
29
|
+
menuShouldScrollIntoView,
|
|
30
|
+
minMenuHeight,
|
|
31
|
+
options,
|
|
32
|
+
placement,
|
|
33
|
+
selectOption,
|
|
15
34
|
selectProps,
|
|
35
|
+
setValue,
|
|
36
|
+
theme,
|
|
37
|
+
children,
|
|
16
38
|
...rest
|
|
17
39
|
}) => jsx(FixedLayer, {
|
|
18
40
|
inputValue: selectProps.inputValue,
|
|
19
41
|
containerRef: selectProps.fixedLayerRef,
|
|
20
42
|
content: jsx(components.Menu, _extends({}, rest, {
|
|
21
|
-
|
|
22
|
-
|
|
43
|
+
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
|
|
44
|
+
className: className,
|
|
45
|
+
clearValue: clearValue,
|
|
46
|
+
cx: cx,
|
|
47
|
+
getStyles: getStyles,
|
|
48
|
+
getValue: getValue,
|
|
49
|
+
hasValue: hasValue,
|
|
50
|
+
innerProps: innerProps,
|
|
51
|
+
innerRef: innerRef,
|
|
52
|
+
isLoading: isLoading,
|
|
53
|
+
isMulti: isMulti,
|
|
54
|
+
isRtl: isRtl,
|
|
55
|
+
maxMenuHeight: maxMenuHeight,
|
|
56
|
+
menuPlacement: menuPlacement,
|
|
57
|
+
menuPosition: menuPosition,
|
|
58
|
+
menuShouldScrollIntoView: false || menuShouldScrollIntoView,
|
|
59
|
+
minMenuHeight: minMenuHeight,
|
|
60
|
+
options: options,
|
|
61
|
+
placement: placement,
|
|
62
|
+
selectOption: selectOption,
|
|
63
|
+
selectProps: selectProps,
|
|
64
|
+
setValue: setValue
|
|
65
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
|
|
66
|
+
,
|
|
67
|
+
theme: theme
|
|
68
|
+
}), children),
|
|
23
69
|
testId: selectProps.testId
|
|
24
70
|
});
|
|
@@ -11,13 +11,20 @@ import { UNSAFE_LAYERING } from '@atlaskit/layering';
|
|
|
11
11
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
12
12
|
import { layers } from '@atlaskit/theme/constants';
|
|
13
13
|
import FixedLayer from '../internal/fixed-layer';
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* @param isos A series of ISO dates.
|
|
17
|
+
* @returns The last valid date within the array of ISO strings.
|
|
18
|
+
*/
|
|
19
|
+
function getValidDate(isos) {
|
|
20
|
+
return isos.reduce((acc, iso) => {
|
|
21
|
+
const date = parseISO(iso);
|
|
22
|
+
return isValid(date) ? {
|
|
23
|
+
day: date.getDate(),
|
|
24
|
+
month: date.getMonth() + 1,
|
|
25
|
+
year: date.getFullYear()
|
|
26
|
+
} : acc;
|
|
27
|
+
}, {});
|
|
21
28
|
}
|
|
22
29
|
const menuStyles = css({
|
|
23
30
|
zIndex: layers.dialog(),
|
|
@@ -33,28 +40,42 @@ const menuStyles = css({
|
|
|
33
40
|
export const Menu = ({
|
|
34
41
|
selectProps,
|
|
35
42
|
innerProps
|
|
36
|
-
}) =>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
43
|
+
}) => {
|
|
44
|
+
const {
|
|
45
|
+
calendarValue,
|
|
46
|
+
calendarView
|
|
47
|
+
} = selectProps;
|
|
48
|
+
const {
|
|
49
|
+
day,
|
|
50
|
+
month,
|
|
51
|
+
year
|
|
52
|
+
} = getValidDate([calendarValue, calendarView]);
|
|
53
|
+
return jsx(UNSAFE_LAYERING, {
|
|
54
|
+
isDisabled: false
|
|
55
|
+
}, jsx(FixedLayer, {
|
|
56
|
+
inputValue: selectProps.inputValue,
|
|
57
|
+
containerRef: selectProps.calendarContainerRef,
|
|
58
|
+
content: jsx("div", _extends({
|
|
59
|
+
css: menuStyles
|
|
60
|
+
}, innerProps), jsx(Calendar, {
|
|
61
|
+
day: day,
|
|
62
|
+
month: month,
|
|
63
|
+
year: year,
|
|
64
|
+
disabled: selectProps.calendarDisabled,
|
|
65
|
+
disabledDateFilter: selectProps.calendarDisabledDateFilter,
|
|
66
|
+
minDate: selectProps.calendarMinDate,
|
|
67
|
+
maxDate: selectProps.calendarMaxDate,
|
|
68
|
+
nextMonthLabel: selectProps.nextMonthLabel,
|
|
69
|
+
onChange: selectProps.onCalendarChange,
|
|
70
|
+
onSelect: selectProps.onCalendarSelect,
|
|
71
|
+
previousMonthLabel: selectProps.previousMonthLabel,
|
|
72
|
+
calendarRef: selectProps.calendarRef,
|
|
73
|
+
selected: [selectProps.calendarValue],
|
|
74
|
+
shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
|
|
75
|
+
locale: selectProps.calendarLocale,
|
|
76
|
+
testId: selectProps.testId && `${selectProps.testId}--calendar`,
|
|
77
|
+
weekStartDay: selectProps.calendarWeekStartDay
|
|
78
|
+
})),
|
|
79
|
+
testId: selectProps.testId
|
|
80
|
+
}));
|
|
81
|
+
};
|
|
@@ -10,11 +10,44 @@ export const makeSingleValue = ({
|
|
|
10
10
|
lang
|
|
11
11
|
}) => ({
|
|
12
12
|
children,
|
|
13
|
-
|
|
13
|
+
className,
|
|
14
|
+
clearValue,
|
|
15
|
+
cx,
|
|
16
|
+
data,
|
|
17
|
+
getStyles,
|
|
18
|
+
getValue,
|
|
19
|
+
hasValue,
|
|
20
|
+
isDisabled,
|
|
21
|
+
isMulti,
|
|
22
|
+
isRtl,
|
|
23
|
+
options,
|
|
24
|
+
selectOption,
|
|
25
|
+
selectProps,
|
|
26
|
+
setValue,
|
|
27
|
+
theme,
|
|
28
|
+
...rest
|
|
14
29
|
}) => {
|
|
15
|
-
return /*#__PURE__*/React.createElement(components.SingleValue, _extends({},
|
|
30
|
+
return /*#__PURE__*/React.createElement(components.SingleValue, _extends({}, rest, {
|
|
31
|
+
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
|
|
32
|
+
className: className,
|
|
33
|
+
clearValue: clearValue,
|
|
34
|
+
cx: cx,
|
|
35
|
+
data: data,
|
|
36
|
+
getStyles: getStyles,
|
|
37
|
+
getValue: getValue,
|
|
38
|
+
hasValue: hasValue,
|
|
16
39
|
innerProps: {
|
|
17
40
|
lang
|
|
18
|
-
}
|
|
41
|
+
},
|
|
42
|
+
isDisabled: isDisabled,
|
|
43
|
+
isMulti: isMulti,
|
|
44
|
+
isRtl: isRtl,
|
|
45
|
+
options: options,
|
|
46
|
+
selectOption: selectOption,
|
|
47
|
+
selectProps: selectProps,
|
|
48
|
+
setValue: setValue
|
|
49
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
|
|
50
|
+
,
|
|
51
|
+
theme: theme
|
|
19
52
|
}), children);
|
|
20
53
|
};
|
|
@@ -31,7 +31,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
|
|
|
31
31
|
import { convertTokens } from '../internal/parse-tokens';
|
|
32
32
|
import { makeSingleValue } from '../internal/single-value';
|
|
33
33
|
var packageName = "@atlaskit/datetime-picker";
|
|
34
|
-
var packageVersion = "13.11.
|
|
34
|
+
var packageVersion = "13.11.2";
|
|
35
35
|
var datePickerDefaultProps = {
|
|
36
36
|
appearance: 'default',
|
|
37
37
|
autoFocus: false,
|
|
@@ -440,8 +440,6 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
|
|
|
440
440
|
onCalendarSelect: this.onCalendarSelect,
|
|
441
441
|
calendarLocale: locale,
|
|
442
442
|
calendarWeekStartDay: weekStartDay,
|
|
443
|
-
nextMonthLabel: nextMonthLabel,
|
|
444
|
-
previousMonthLabel: previousMonthLabel,
|
|
445
443
|
shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
|
|
446
444
|
};
|
|
447
445
|
var mergedStyles = mergeStyles(selectStyles, {
|
|
@@ -478,31 +476,48 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
|
|
|
478
476
|
value: value,
|
|
479
477
|
"data-testid": testId && "".concat(testId, "--input")
|
|
480
478
|
}), jsx(Select, _extends({
|
|
479
|
+
appearance: this.props.appearance,
|
|
481
480
|
"aria-describedby": ariaDescribedBy,
|
|
482
481
|
"aria-label": label || undefined,
|
|
483
|
-
appearance: this.props.appearance,
|
|
484
|
-
enableAnimation: false,
|
|
485
|
-
menuIsOpen: menuIsOpen,
|
|
486
|
-
closeMenuOnSelect: true,
|
|
487
482
|
autoFocus: autoFocus,
|
|
483
|
+
closeMenuOnSelect: true,
|
|
484
|
+
components: selectComponents,
|
|
485
|
+
enableAnimation: false,
|
|
488
486
|
inputId: id,
|
|
487
|
+
inputValue: actualSelectInputValue,
|
|
489
488
|
isDisabled: isDisabled,
|
|
489
|
+
menuIsOpen: menuIsOpen,
|
|
490
490
|
onBlur: this.onSelectBlur,
|
|
491
|
+
onChange: this.onSelectChange,
|
|
491
492
|
onFocus: this.onSelectFocus,
|
|
492
|
-
inputValue: actualSelectInputValue,
|
|
493
493
|
onInputChange: this.handleSelectInputChange,
|
|
494
|
-
components: selectComponents,
|
|
495
|
-
onChange: this.onSelectChange
|
|
496
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
497
|
-
,
|
|
498
|
-
styles: mergedStyles,
|
|
499
494
|
placeholder: this.getPlaceholder(),
|
|
495
|
+
styles: mergedStyles,
|
|
500
496
|
value: initialValue
|
|
501
|
-
}, selectProps,
|
|
497
|
+
}, selectProps, {
|
|
498
|
+
// These are below the spread because I don't know what is in
|
|
499
|
+
// selectProps or not and what wil be overwritten
|
|
502
500
|
isClearable: true,
|
|
503
|
-
spacing: spacing,
|
|
504
501
|
isInvalid: isInvalid,
|
|
502
|
+
spacing: spacing,
|
|
505
503
|
testId: testId
|
|
504
|
+
// These aren't part of `Select`'s API, but we're using them here.
|
|
505
|
+
,
|
|
506
|
+
calendarContainerRef: calendarProps.calendarContainerRef,
|
|
507
|
+
calendarDisabled: calendarProps.calendarDisabled,
|
|
508
|
+
calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
|
|
509
|
+
calendarLocale: calendarProps.calendarLocale,
|
|
510
|
+
calendarMaxDate: calendarProps.calendarMaxDate,
|
|
511
|
+
calendarMinDate: calendarProps.calendarMinDate,
|
|
512
|
+
calendarRef: calendarProps.calendarRef,
|
|
513
|
+
calendarValue: calendarProps.calendarValue,
|
|
514
|
+
calendarView: calendarProps.calendarView,
|
|
515
|
+
calendarWeekStartDay: calendarProps.calendarWeekStartDay,
|
|
516
|
+
nextMonthLabel: nextMonthLabel,
|
|
517
|
+
onCalendarChange: calendarProps.onCalendarChange,
|
|
518
|
+
onCalendarSelect: calendarProps.onCalendarSelect,
|
|
519
|
+
previousMonthLabel: previousMonthLabel,
|
|
520
|
+
shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
|
|
506
521
|
})))
|
|
507
522
|
);
|
|
508
523
|
}
|
|
@@ -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.11.
|
|
33
|
+
var packageVersion = "13.11.2";
|
|
34
34
|
// Make DatePicker 50% the width of DateTimePicker
|
|
35
35
|
// If rendering an icon container, shrink the TimePicker
|
|
36
36
|
var datePickerContainerStyles = css({
|
|
@@ -264,39 +264,79 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
264
264
|
css: datePickerContainerStyles
|
|
265
265
|
}, jsx(DatePicker, _extends({
|
|
266
266
|
appearance: appearance,
|
|
267
|
-
autoFocus: autoFocus,
|
|
268
|
-
dateFormat: dateFormat,
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
267
|
+
autoFocus: datePickerProps.autoFocus || autoFocus,
|
|
268
|
+
dateFormat: datePickerProps.dateFormat || dateFormat,
|
|
269
|
+
defaultIsOpen: datePickerProps.defaultIsOpen,
|
|
270
|
+
defaultValue: datePickerProps.defaultValue,
|
|
271
|
+
disabled: datePickerProps.disabled,
|
|
272
|
+
disabledDateFilter: datePickerProps.disabledDateFilter,
|
|
273
|
+
formatDisplayLabel: datePickerProps.formatDisplayLabel,
|
|
274
|
+
hideIcon: datePickerProps.hideIcon || true,
|
|
275
|
+
icon: datePickerProps.icon,
|
|
276
|
+
id: datePickerProps.id || id,
|
|
277
|
+
innerProps: datePickerProps.innerProps,
|
|
278
|
+
isDisabled: datePickerProps.isDisabled || isDisabled,
|
|
279
|
+
isInvalid: datePickerProps.isInvalid || isInvalid
|
|
280
|
+
// If you set this or `value` explicitly like
|
|
281
|
+
// `isOpen={datePickerProps.isOpen}`, the date picker will set
|
|
282
|
+
// `isOpen` to `undefined` forever. I believe this has to do with
|
|
283
|
+
// the `getSafeState` function in the picker, since it overwrites
|
|
284
|
+
// state with values from the props.
|
|
285
|
+
}, datePickerProps.isOpen ? {
|
|
286
|
+
isOpen: datePickerProps.isOpen
|
|
287
|
+
} : {}, {
|
|
288
|
+
locale: datePickerProps.locale || locale,
|
|
289
|
+
maxDate: datePickerProps.maxDate,
|
|
290
|
+
minDate: datePickerProps.minDate,
|
|
291
|
+
name: datePickerProps.name,
|
|
292
|
+
nextMonthLabel: datePickerProps.nextMonthLabel,
|
|
293
|
+
onBlur: datePickerProps.onBlur || this.onBlur,
|
|
294
|
+
onChange: datePickerProps.onChange || this.onDateChange,
|
|
295
|
+
onFocus: datePickerProps.onFocus || this.onFocus,
|
|
296
|
+
parseInputValue: datePickerProps.parseInputValue,
|
|
297
|
+
placeholder: datePickerProps.placeholder,
|
|
298
|
+
previousMonthLabel: datePickerProps.previousMonthLabel,
|
|
277
299
|
selectProps: mergedDatePickerSelectProps,
|
|
278
|
-
spacing: spacing,
|
|
279
|
-
testId: testId && "".concat(testId, "--datepicker"),
|
|
280
|
-
value: dateValue
|
|
281
|
-
|
|
300
|
+
spacing: datePickerProps.spacing || spacing,
|
|
301
|
+
testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
|
|
302
|
+
value: dateValue,
|
|
303
|
+
weekStartDay: datePickerProps.weekStartDay
|
|
304
|
+
}))), jsx("div", {
|
|
282
305
|
css: timePickerContainerStyles
|
|
283
306
|
}, jsx(TimePicker, _extends({
|
|
284
|
-
appearance: appearance,
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
307
|
+
appearance: timePickerProps.appearance || appearance,
|
|
308
|
+
autoFocus: timePickerProps.autoFocus,
|
|
309
|
+
defaultIsOpen: timePickerProps.defaultIsOpen,
|
|
310
|
+
defaultValue: timePickerProps.defaultValue,
|
|
311
|
+
formatDisplayLabel: timePickerProps.formatDisplayLabel,
|
|
312
|
+
hideIcon: timePickerProps.hideIcon || true,
|
|
313
|
+
id: timePickerProps.id,
|
|
314
|
+
innerProps: timePickerProps.innerProps,
|
|
315
|
+
isDisabled: timePickerProps.isDisabled || isDisabled,
|
|
316
|
+
isInvalid: timePickerProps.isInvalid || isInvalid
|
|
317
|
+
// If you set this or `value` explicitly like
|
|
318
|
+
// `isOpen={datePickerProps.isOpen}`, the date picker will set
|
|
319
|
+
// `isOpen` to `undefined` forever. I believe this has to do with
|
|
320
|
+
// the `getSafeState` function in the picker, since it overwrites
|
|
321
|
+
// state with values from the props.
|
|
322
|
+
}, timePickerProps.isOpen ? {
|
|
323
|
+
isOpen: timePickerProps.isOpen
|
|
324
|
+
} : {}, {
|
|
325
|
+
locale: timePickerProps.locale || locale,
|
|
326
|
+
name: timePickerProps.name,
|
|
327
|
+
onBlur: timePickerProps.onBlur || this.onBlur,
|
|
328
|
+
onChange: timePickerProps.onChange || this.onTimeChange,
|
|
329
|
+
onFocus: timePickerProps.onFocus || this.onFocus,
|
|
330
|
+
parseInputValue: timePickerProps.parseInputValue,
|
|
331
|
+
placeholder: timePickerProps.placeholder,
|
|
292
332
|
selectProps: mergedTimePickerSelectProps,
|
|
293
|
-
spacing: spacing,
|
|
294
|
-
testId: testId && "".concat(testId, "--timepicker"),
|
|
295
|
-
timeFormat: timeFormat,
|
|
296
|
-
timeIsEditable: timeIsEditable,
|
|
297
|
-
times: times,
|
|
333
|
+
spacing: timePickerProps.spacing || spacing,
|
|
334
|
+
testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
|
|
335
|
+
timeFormat: timePickerProps.timeFormat || timeFormat,
|
|
336
|
+
timeIsEditable: timePickerProps.timeIsEditable || timeIsEditable,
|
|
337
|
+
times: timePickerProps.times || times,
|
|
298
338
|
value: timeValue
|
|
299
|
-
}
|
|
339
|
+
}))), isClearable && !isDisabled ? jsx("button", {
|
|
300
340
|
css: iconContainerStyles,
|
|
301
341
|
onClick: this.onClear,
|
|
302
342
|
"data-testid": testId && "".concat(testId, "--icon--container"),
|
|
@@ -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.11.
|
|
31
|
+
var packageVersion = "13.11.2";
|
|
32
32
|
var menuStyles = {
|
|
33
33
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
34
34
|
position: 'static',
|
|
@@ -313,9 +313,7 @@ var TimePickerComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
313
313
|
placeholder: placeholder || l10n.formatTime(placeholderDatetime),
|
|
314
314
|
styles: mergedStyles,
|
|
315
315
|
value: initialValue,
|
|
316
|
-
spacing: spacing
|
|
317
|
-
// @ts-ignore caused by prop not part of @atlaskit/select
|
|
318
|
-
,
|
|
316
|
+
spacing: spacing,
|
|
319
317
|
fixedLayerRef: this.containerRef,
|
|
320
318
|
isInvalid: isInvalid,
|
|
321
319
|
testId: testId
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["selectProps"];
|
|
3
|
+
var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "innerProps", "innerRef", "isLoading", "isMulti", "isRtl", "maxMenuHeight", "menuPlacement", "menuPosition", "menuShouldScrollIntoView", "minMenuHeight", "options", "placement", "selectOption", "selectProps", "setValue", "theme", "children"];
|
|
4
4
|
/**
|
|
5
5
|
* @jsxRuntime classic
|
|
6
6
|
* @jsx jsx
|
|
@@ -14,14 +14,60 @@ import FixedLayer from '../internal/fixed-layer';
|
|
|
14
14
|
* This is the fixed layer menu used in the time picker.
|
|
15
15
|
*/
|
|
16
16
|
export var FixedLayerMenu = function FixedLayerMenu(_ref) {
|
|
17
|
-
var
|
|
17
|
+
var className = _ref.className,
|
|
18
|
+
clearValue = _ref.clearValue,
|
|
19
|
+
cx = _ref.cx,
|
|
20
|
+
getStyles = _ref.getStyles,
|
|
21
|
+
getValue = _ref.getValue,
|
|
22
|
+
hasValue = _ref.hasValue,
|
|
23
|
+
innerProps = _ref.innerProps,
|
|
24
|
+
innerRef = _ref.innerRef,
|
|
25
|
+
isLoading = _ref.isLoading,
|
|
26
|
+
isMulti = _ref.isMulti,
|
|
27
|
+
isRtl = _ref.isRtl,
|
|
28
|
+
maxMenuHeight = _ref.maxMenuHeight,
|
|
29
|
+
menuPlacement = _ref.menuPlacement,
|
|
30
|
+
menuPosition = _ref.menuPosition,
|
|
31
|
+
menuShouldScrollIntoView = _ref.menuShouldScrollIntoView,
|
|
32
|
+
minMenuHeight = _ref.minMenuHeight,
|
|
33
|
+
options = _ref.options,
|
|
34
|
+
placement = _ref.placement,
|
|
35
|
+
selectOption = _ref.selectOption,
|
|
36
|
+
selectProps = _ref.selectProps,
|
|
37
|
+
setValue = _ref.setValue,
|
|
38
|
+
theme = _ref.theme,
|
|
39
|
+
children = _ref.children,
|
|
18
40
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
19
41
|
return jsx(FixedLayer, {
|
|
20
42
|
inputValue: selectProps.inputValue,
|
|
21
43
|
containerRef: selectProps.fixedLayerRef,
|
|
22
44
|
content: jsx(components.Menu, _extends({}, rest, {
|
|
23
|
-
|
|
24
|
-
|
|
45
|
+
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
|
|
46
|
+
className: className,
|
|
47
|
+
clearValue: clearValue,
|
|
48
|
+
cx: cx,
|
|
49
|
+
getStyles: getStyles,
|
|
50
|
+
getValue: getValue,
|
|
51
|
+
hasValue: hasValue,
|
|
52
|
+
innerProps: innerProps,
|
|
53
|
+
innerRef: innerRef,
|
|
54
|
+
isLoading: isLoading,
|
|
55
|
+
isMulti: isMulti,
|
|
56
|
+
isRtl: isRtl,
|
|
57
|
+
maxMenuHeight: maxMenuHeight,
|
|
58
|
+
menuPlacement: menuPlacement,
|
|
59
|
+
menuPosition: menuPosition,
|
|
60
|
+
menuShouldScrollIntoView: false || menuShouldScrollIntoView,
|
|
61
|
+
minMenuHeight: minMenuHeight,
|
|
62
|
+
options: options,
|
|
63
|
+
placement: placement,
|
|
64
|
+
selectOption: selectOption,
|
|
65
|
+
selectProps: selectProps,
|
|
66
|
+
setValue: setValue
|
|
67
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
|
|
68
|
+
,
|
|
69
|
+
theme: theme
|
|
70
|
+
}), children),
|
|
25
71
|
testId: selectProps.testId
|
|
26
72
|
});
|
|
27
73
|
};
|
|
@@ -11,13 +11,20 @@ import { UNSAFE_LAYERING } from '@atlaskit/layering';
|
|
|
11
11
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
12
12
|
import { layers } from '@atlaskit/theme/constants';
|
|
13
13
|
import FixedLayer from '../internal/fixed-layer';
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* @param isos A series of ISO dates.
|
|
17
|
+
* @returns The last valid date within the array of ISO strings.
|
|
18
|
+
*/
|
|
19
|
+
function getValidDate(isos) {
|
|
20
|
+
return isos.reduce(function (acc, iso) {
|
|
21
|
+
var date = parseISO(iso);
|
|
22
|
+
return isValid(date) ? {
|
|
23
|
+
day: date.getDate(),
|
|
24
|
+
month: date.getMonth() + 1,
|
|
25
|
+
year: date.getFullYear()
|
|
26
|
+
} : acc;
|
|
27
|
+
}, {});
|
|
21
28
|
}
|
|
22
29
|
var menuStyles = css({
|
|
23
30
|
zIndex: layers.dialog(),
|
|
@@ -33,6 +40,12 @@ var menuStyles = css({
|
|
|
33
40
|
export var Menu = function Menu(_ref) {
|
|
34
41
|
var selectProps = _ref.selectProps,
|
|
35
42
|
innerProps = _ref.innerProps;
|
|
43
|
+
var calendarValue = selectProps.calendarValue,
|
|
44
|
+
calendarView = selectProps.calendarView;
|
|
45
|
+
var _getValidDate = getValidDate([calendarValue, calendarView]),
|
|
46
|
+
day = _getValidDate.day,
|
|
47
|
+
month = _getValidDate.month,
|
|
48
|
+
year = _getValidDate.year;
|
|
36
49
|
return jsx(UNSAFE_LAYERING, {
|
|
37
50
|
isDisabled: false
|
|
38
51
|
}, jsx(FixedLayer, {
|
|
@@ -40,7 +53,10 @@ export var Menu = function Menu(_ref) {
|
|
|
40
53
|
containerRef: selectProps.calendarContainerRef,
|
|
41
54
|
content: jsx("div", _extends({
|
|
42
55
|
css: menuStyles
|
|
43
|
-
}, innerProps), jsx(Calendar,
|
|
56
|
+
}, innerProps), jsx(Calendar, {
|
|
57
|
+
day: day,
|
|
58
|
+
month: month,
|
|
59
|
+
year: year,
|
|
44
60
|
disabled: selectProps.calendarDisabled,
|
|
45
61
|
disabledDateFilter: selectProps.calendarDisabledDateFilter,
|
|
46
62
|
minDate: selectProps.calendarMinDate,
|
|
@@ -55,7 +71,7 @@ export var Menu = function Menu(_ref) {
|
|
|
55
71
|
locale: selectProps.calendarLocale,
|
|
56
72
|
testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
|
|
57
73
|
weekStartDay: selectProps.calendarWeekStartDay
|
|
58
|
-
}))
|
|
74
|
+
})),
|
|
59
75
|
testId: selectProps.testId
|
|
60
76
|
}));
|
|
61
77
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["children"];
|
|
3
|
+
var _excluded = ["children", "className", "clearValue", "cx", "data", "getStyles", "getValue", "hasValue", "isDisabled", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { components } from '@atlaskit/select';
|
|
6
6
|
|
|
@@ -12,11 +12,44 @@ export var makeSingleValue = function makeSingleValue(_ref) {
|
|
|
12
12
|
var lang = _ref.lang;
|
|
13
13
|
return function (_ref2) {
|
|
14
14
|
var children = _ref2.children,
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
className = _ref2.className,
|
|
16
|
+
clearValue = _ref2.clearValue,
|
|
17
|
+
cx = _ref2.cx,
|
|
18
|
+
data = _ref2.data,
|
|
19
|
+
getStyles = _ref2.getStyles,
|
|
20
|
+
getValue = _ref2.getValue,
|
|
21
|
+
hasValue = _ref2.hasValue,
|
|
22
|
+
isDisabled = _ref2.isDisabled,
|
|
23
|
+
isMulti = _ref2.isMulti,
|
|
24
|
+
isRtl = _ref2.isRtl,
|
|
25
|
+
options = _ref2.options,
|
|
26
|
+
selectOption = _ref2.selectOption,
|
|
27
|
+
selectProps = _ref2.selectProps,
|
|
28
|
+
setValue = _ref2.setValue,
|
|
29
|
+
theme = _ref2.theme,
|
|
30
|
+
rest = _objectWithoutProperties(_ref2, _excluded);
|
|
31
|
+
return /*#__PURE__*/React.createElement(components.SingleValue, _extends({}, rest, {
|
|
32
|
+
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
|
|
33
|
+
className: className,
|
|
34
|
+
clearValue: clearValue,
|
|
35
|
+
cx: cx,
|
|
36
|
+
data: data,
|
|
37
|
+
getStyles: getStyles,
|
|
38
|
+
getValue: getValue,
|
|
39
|
+
hasValue: hasValue,
|
|
17
40
|
innerProps: {
|
|
18
41
|
lang: lang
|
|
19
|
-
}
|
|
42
|
+
},
|
|
43
|
+
isDisabled: isDisabled,
|
|
44
|
+
isMulti: isMulti,
|
|
45
|
+
isRtl: isRtl,
|
|
46
|
+
options: options,
|
|
47
|
+
selectOption: selectOption,
|
|
48
|
+
selectProps: selectProps,
|
|
49
|
+
setValue: setValue
|
|
50
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
|
|
51
|
+
,
|
|
52
|
+
theme: theme
|
|
20
53
|
}), children);
|
|
21
54
|
};
|
|
22
55
|
};
|
|
@@ -7,4 +7,4 @@ import { type MenuProps, type OptionType } from '@atlaskit/select';
|
|
|
7
7
|
/**
|
|
8
8
|
* This is the fixed layer menu used in the time picker.
|
|
9
9
|
*/
|
|
10
|
-
export declare const FixedLayerMenu: ({ selectProps, ...rest }: MenuProps<OptionType>) => jsx.JSX.Element;
|
|
10
|
+
export declare const FixedLayerMenu: ({ className, clearValue, cx, getStyles, getValue, hasValue, innerProps, innerRef, isLoading, isMulti, isRtl, maxMenuHeight, menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, options, placement, selectOption, selectProps, setValue, theme, children, ...rest }: MenuProps<OptionType>) => jsx.JSX.Element;
|
|
@@ -6,4 +6,4 @@ import { type OptionType, type SingleValueProps } from '@atlaskit/select';
|
|
|
6
6
|
*/
|
|
7
7
|
export declare const makeSingleValue: ({ lang }: {
|
|
8
8
|
lang: string;
|
|
9
|
-
}) => ({ children, ...
|
|
9
|
+
}) => ({ children, className, clearValue, cx, data, getStyles, getValue, hasValue, isDisabled, isMulti, isRtl, options, selectOption, selectProps, setValue, theme, ...rest }: SingleValueProps<OptionType, false>) => JSX.Element;
|
|
@@ -7,4 +7,4 @@ import { type MenuProps, type OptionType } from '@atlaskit/select';
|
|
|
7
7
|
/**
|
|
8
8
|
* This is the fixed layer menu used in the time picker.
|
|
9
9
|
*/
|
|
10
|
-
export declare const FixedLayerMenu: ({ selectProps, ...rest }: MenuProps<OptionType>) => jsx.JSX.Element;
|
|
10
|
+
export declare const FixedLayerMenu: ({ className, clearValue, cx, getStyles, getValue, hasValue, innerProps, innerRef, isLoading, isMulti, isRtl, maxMenuHeight, menuPlacement, menuPosition, menuShouldScrollIntoView, minMenuHeight, options, placement, selectOption, selectProps, setValue, theme, children, ...rest }: MenuProps<OptionType>) => jsx.JSX.Element;
|
|
@@ -6,4 +6,4 @@ import { type OptionType, type SingleValueProps } from '@atlaskit/select';
|
|
|
6
6
|
*/
|
|
7
7
|
export declare const makeSingleValue: ({ lang }: {
|
|
8
8
|
lang: string;
|
|
9
|
-
}) => ({ children, ...
|
|
9
|
+
}) => ({ children, className, clearValue, cx, data, getStyles, getValue, hasValue, isDisabled, isMulti, isRtl, options, selectOption, selectProps, setValue, theme, ...rest }: SingleValueProps<OptionType, false>) => JSX.Element;
|