@atlaskit/datetime-picker 15.9.5 → 15.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 +14 -0
- package/dist/cjs/components/date-picker-class.js +37 -51
- package/dist/cjs/components/date-picker-fc.js +20 -37
- package/dist/cjs/components/date-time-picker-class.js +1 -1
- package/dist/cjs/components/date-time-picker-fc.js +1 -1
- package/dist/cjs/components/time-picker.js +2 -5
- package/dist/es2019/components/date-picker-class.js +36 -52
- package/dist/es2019/components/date-picker-fc.js +19 -38
- package/dist/es2019/components/date-time-picker-class.js +1 -1
- package/dist/es2019/components/date-time-picker-fc.js +1 -1
- package/dist/es2019/components/time-picker.js +2 -5
- package/dist/esm/components/date-picker-class.js +38 -52
- package/dist/esm/components/date-picker-fc.js +21 -38
- package/dist/esm/components/date-time-picker-class.js +1 -1
- package/dist/esm/components/date-time-picker-fc.js +1 -1
- package/dist/esm/components/time-picker.js +2 -5
- package/dist/types/types.d.ts +2 -0
- package/dist/types-ts4.5/types.d.ts +2 -0
- package/package.json +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/datetime-picker
|
|
2
2
|
|
|
3
|
+
## 15.10.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#168398](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168398)
|
|
8
|
+
[`3b1f085cfd51b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3b1f085cfd51b) -
|
|
9
|
+
update calendar button component
|
|
10
|
+
|
|
11
|
+
## 15.9.6
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 15.9.5
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -18,6 +18,7 @@ var _react = require("react");
|
|
|
18
18
|
var _react2 = require("@emotion/react");
|
|
19
19
|
var _dateFns = require("date-fns");
|
|
20
20
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
21
|
+
var _new = require("@atlaskit/button/new");
|
|
21
22
|
var _useId = require("@atlaskit/ds-lib/use-id");
|
|
22
23
|
var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar"));
|
|
23
24
|
var _calendar2 = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
|
|
@@ -25,8 +26,6 @@ var _locale = require("@atlaskit/locale");
|
|
|
25
26
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
26
27
|
var _primitives = require("@atlaskit/primitives");
|
|
27
28
|
var _select = _interopRequireWildcard(require("@atlaskit/select"));
|
|
28
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
29
|
-
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
|
|
30
29
|
var _internal = require("../internal");
|
|
31
30
|
var _datePickerMigration = require("../internal/date-picker-migration");
|
|
32
31
|
var _indicatorsContainer = require("../internal/indicators-container");
|
|
@@ -43,7 +42,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
43
42
|
* @jsx jsx
|
|
44
43
|
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
45
44
|
var packageName = "@atlaskit/datetime-picker";
|
|
46
|
-
var packageVersion = "15.
|
|
45
|
+
var packageVersion = "15.10.0";
|
|
47
46
|
var dropdownIndicatorStyles = (0, _primitives.xcss)({
|
|
48
47
|
minWidth: "var(--ds-space-300, 24px)",
|
|
49
48
|
minHeight: "var(--ds-space-300, 24px)",
|
|
@@ -75,41 +74,28 @@ var datePickerDefaultProps = {
|
|
|
75
74
|
var pickerContainerStyles = (0, _react2.css)({
|
|
76
75
|
position: 'relative'
|
|
77
76
|
});
|
|
78
|
-
var iconContainerStyles = (0,
|
|
77
|
+
var iconContainerStyles = (0, _primitives.xcss)({
|
|
79
78
|
display: 'flex',
|
|
80
79
|
height: '100%',
|
|
81
80
|
position: 'absolute',
|
|
82
81
|
alignItems: 'center',
|
|
83
82
|
flexBasis: 'inherit',
|
|
84
|
-
color:
|
|
85
|
-
insetBlockStart: 0,
|
|
86
|
-
insetInlineEnd: 0,
|
|
83
|
+
color: 'color.text.subtlest',
|
|
84
|
+
insetBlockStart: 'space.0',
|
|
85
|
+
insetInlineEnd: 'space.0',
|
|
87
86
|
transition: "color 150ms",
|
|
88
|
-
'
|
|
89
|
-
color:
|
|
87
|
+
':hover': {
|
|
88
|
+
color: 'color.text.subtle'
|
|
90
89
|
}
|
|
91
90
|
});
|
|
92
|
-
var iconSpacingWithClearButtonStyles = (0,
|
|
93
|
-
marginInlineEnd:
|
|
94
|
-
});
|
|
95
|
-
var iconSpacingWithoutClearButtonStylesNew = (0, _react2.css)({
|
|
96
|
-
marginInlineEnd: "var(--ds-space-050, 0.25rem)"
|
|
91
|
+
var iconSpacingWithClearButtonStyles = (0, _primitives.xcss)({
|
|
92
|
+
marginInlineEnd: 'space.400'
|
|
97
93
|
});
|
|
98
|
-
var
|
|
99
|
-
marginInlineEnd:
|
|
94
|
+
var iconSpacingWithoutClearButtonStylesNew = (0, _primitives.xcss)({
|
|
95
|
+
marginInlineEnd: 'space.050'
|
|
100
96
|
});
|
|
101
|
-
var
|
|
102
|
-
|
|
103
|
-
height: "".concat(32 / 14, "em")
|
|
104
|
-
});
|
|
105
|
-
var calendarButtonStyles = (0, _primitives.xcss)({
|
|
106
|
-
borderRadius: 'border.radius',
|
|
107
|
-
':hover': {
|
|
108
|
-
backgroundColor: 'color.background.neutral.subtle.hovered'
|
|
109
|
-
},
|
|
110
|
-
':active': {
|
|
111
|
-
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
112
|
-
}
|
|
97
|
+
var iconSpacingWithoutClearButtonStyles = (0, _primitives.xcss)({
|
|
98
|
+
marginInlineEnd: 'space.025'
|
|
113
99
|
});
|
|
114
100
|
|
|
115
101
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
@@ -564,12 +550,15 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
|
|
|
564
550
|
} : null;
|
|
565
551
|
|
|
566
552
|
// `label` takes precedence of the `inputLabel`
|
|
567
|
-
var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, "
|
|
553
|
+
var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, ", ").concat(openCalendarLabel) : openCalendarLabel;
|
|
568
554
|
return (
|
|
569
555
|
// These event handlers must be on this element because the events come
|
|
570
556
|
// from different child elements.
|
|
557
|
+
// Until innerProps is removed, it must remain a div rather than a primitive component.
|
|
571
558
|
(0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
|
|
572
|
-
css: pickerContainerStyles
|
|
559
|
+
css: pickerContainerStyles
|
|
560
|
+
// Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
|
|
561
|
+
,
|
|
573
562
|
role: "presentation",
|
|
574
563
|
onBlur: this.onContainerBlur,
|
|
575
564
|
onFocus: this.onContainerFocus,
|
|
@@ -643,30 +632,27 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
|
|
|
643
632
|
prefix: "open-calendar-label--"
|
|
644
633
|
}, function (_ref3) {
|
|
645
634
|
var openCalendarLabelId = _ref3.id;
|
|
646
|
-
return (0, _react2.jsx)(
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
},
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
635
|
+
return (0, _react2.jsx)(_primitives.Box, {
|
|
636
|
+
xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
|
|
637
|
+
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
638
|
+
(0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
|
|
639
|
+
}, (0, _react2.jsx)(_new.IconButton, {
|
|
640
|
+
appearance: "subtle",
|
|
641
|
+
label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
|
|
642
|
+
"aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,
|
|
643
|
+
id: openCalendarLabelId,
|
|
644
|
+
icon: function icon(iconProps) {
|
|
645
|
+
return (0, _react2.jsx)(CalendarIcon, (0, _extends2.default)({}, iconProps, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? {
|
|
646
|
+
color: "var(--ds-icon, #44546F)"
|
|
647
|
+
} : {
|
|
648
|
+
primaryColor: "var(--ds-icon, #44546F)"
|
|
649
|
+
}));
|
|
650
|
+
},
|
|
655
651
|
onClick: _this2.onCalendarButtonClick,
|
|
656
652
|
onKeyDown: _this2.onCalendarButtonKeyDown,
|
|
657
653
|
ref: _this2.calendarButtonRef,
|
|
658
|
-
testId: testId && "".concat(testId, "--open-calendar-button")
|
|
659
|
-
|
|
660
|
-
backgroundColor: "color.background.neutral.subtle",
|
|
661
|
-
padding: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
|
|
662
|
-
xcss: [calendarButtonStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
|
|
663
|
-
}), (0, _react2.jsx)(CalendarIcon, (0, _extends2.default)({
|
|
664
|
-
label: ""
|
|
665
|
-
}, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? {
|
|
666
|
-
color: "var(--ds-icon, #44546F)"
|
|
667
|
-
} : {
|
|
668
|
-
primaryColor: "var(--ds-icon, #44546F)"
|
|
669
|
-
}))));
|
|
654
|
+
testId: testId && "".concat(testId, "--open-calendar-button")
|
|
655
|
+
}));
|
|
670
656
|
}) : null)
|
|
671
657
|
);
|
|
672
658
|
}
|
|
@@ -14,6 +14,7 @@ var _react = require("react");
|
|
|
14
14
|
var _react2 = require("@emotion/react");
|
|
15
15
|
var _dateFns = require("date-fns");
|
|
16
16
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
17
|
+
var _new = require("@atlaskit/button/new");
|
|
17
18
|
var _useId = require("@atlaskit/ds-lib/use-id");
|
|
18
19
|
var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar"));
|
|
19
20
|
var _calendar2 = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
|
|
@@ -21,7 +22,6 @@ var _locale = require("@atlaskit/locale");
|
|
|
21
22
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
23
|
var _primitives = require("@atlaskit/primitives");
|
|
23
24
|
var _select = _interopRequireWildcard(require("@atlaskit/select"));
|
|
24
|
-
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
|
|
25
25
|
var _internal = require("../internal");
|
|
26
26
|
var _datePickerMigration = require("../internal/date-picker-migration");
|
|
27
27
|
var _indicatorsContainer = require("../internal/indicators-container");
|
|
@@ -39,7 +39,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
39
39
|
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; }
|
|
40
40
|
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; }
|
|
41
41
|
var packageName = "@atlaskit/datetime-picker";
|
|
42
|
-
var packageVersion = "15.
|
|
42
|
+
var packageVersion = "15.10.0";
|
|
43
43
|
var analyticsAttributes = {
|
|
44
44
|
componentName: 'datePicker',
|
|
45
45
|
packageName: packageName,
|
|
@@ -83,19 +83,6 @@ var iconSpacingWithoutClearButtonStylesNew = (0, _primitives.xcss)({
|
|
|
83
83
|
var iconSpacingWithoutClearButtonStyles = (0, _primitives.xcss)({
|
|
84
84
|
marginInlineEnd: 'space.025'
|
|
85
85
|
});
|
|
86
|
-
var calendarButtonFixedSizeStyles = (0, _primitives.xcss)({
|
|
87
|
-
width: "".concat(32 / 14, "em"),
|
|
88
|
-
height: "".concat(32 / 14, "em")
|
|
89
|
-
});
|
|
90
|
-
var calendarButtonStyles = (0, _primitives.xcss)({
|
|
91
|
-
borderRadius: 'border.radius',
|
|
92
|
-
':hover': {
|
|
93
|
-
backgroundColor: 'color.background.neutral.subtle.hovered'
|
|
94
|
-
},
|
|
95
|
-
':active': {
|
|
96
|
-
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
86
|
/**
|
|
100
87
|
* __Date picker__
|
|
101
88
|
*
|
|
@@ -556,11 +543,12 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
|
|
|
556
543
|
} : null;
|
|
557
544
|
|
|
558
545
|
// `label` takes precedence of the `inputLabel`
|
|
559
|
-
var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, "
|
|
546
|
+
var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, ", ").concat(openCalendarLabel) : openCalendarLabel;
|
|
560
547
|
var openCalendarLabelId = "open-calendar-label--".concat((0, _useId.useId)());
|
|
561
548
|
return (
|
|
562
549
|
// These event handlers must be on this element because the events come
|
|
563
|
-
// from different child elements.
|
|
550
|
+
// from different child elements.
|
|
551
|
+
// Until innerProps is removed, it must remain a div rather than a primitive component.
|
|
564
552
|
(0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
|
|
565
553
|
css: pickerContainerStyles,
|
|
566
554
|
"data-testid": testId && "".concat(testId, "--container"),
|
|
@@ -570,7 +558,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
|
|
|
570
558
|
onInput: onTextInput,
|
|
571
559
|
onKeyDown: onInputKeyDown,
|
|
572
560
|
ref: getContainerRef
|
|
573
|
-
//
|
|
561
|
+
// Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
|
|
574
562
|
,
|
|
575
563
|
role: "presentation"
|
|
576
564
|
}), (0, _react2.jsx)("input", {
|
|
@@ -640,28 +628,23 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
|
|
|
640
628
|
xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
|
|
641
629
|
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
642
630
|
(0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
|
|
643
|
-
},
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
631
|
+
}, (0, _react2.jsx)(_new.IconButton, {
|
|
632
|
+
appearance: "subtle",
|
|
633
|
+
label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
|
|
634
|
+
"aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,
|
|
635
|
+
id: openCalendarLabelId,
|
|
636
|
+
icon: function icon(iconProps) {
|
|
637
|
+
return (0, _react2.jsx)(CalendarIcon, (0, _extends2.default)({}, iconProps, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? {
|
|
638
|
+
color: "var(--ds-icon, #44546F)"
|
|
639
|
+
} : {
|
|
640
|
+
primaryColor: "var(--ds-icon, #44546F)"
|
|
641
|
+
}));
|
|
642
|
+
},
|
|
650
643
|
onClick: onCalendarButtonClick,
|
|
651
644
|
onKeyDown: onCalendarButtonKeyDown,
|
|
652
645
|
ref: calendarButtonRef,
|
|
653
|
-
testId: testId && "".concat(testId, "--open-calendar-button")
|
|
654
|
-
|
|
655
|
-
backgroundColor: "color.background.neutral.subtle",
|
|
656
|
-
padding: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
|
|
657
|
-
xcss: [calendarButtonStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
|
|
658
|
-
}), (0, _react2.jsx)(CalendarIcon, (0, _extends2.default)({
|
|
659
|
-
label: ""
|
|
660
|
-
}, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? {
|
|
661
|
-
color: "var(--ds-icon, #44546F)"
|
|
662
|
-
} : {
|
|
663
|
-
primaryColor: "var(--ds-icon, #44546F)"
|
|
664
|
-
})))) : null)
|
|
646
|
+
testId: testId && "".concat(testId, "--open-calendar-button")
|
|
647
|
+
})) : null)
|
|
665
648
|
);
|
|
666
649
|
});
|
|
667
650
|
var _default = exports.default = DatePicker;
|
|
@@ -38,7 +38,7 @@ var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
|
|
|
38
38
|
return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
|
|
39
39
|
}, _datePickerFc.default, _datePickerClass.default);
|
|
40
40
|
var packageName = "@atlaskit/datetime-picker";
|
|
41
|
-
var packageVersion = "15.
|
|
41
|
+
var packageVersion = "15.10.0";
|
|
42
42
|
// Make DatePicker 50% the width of DateTimePicker
|
|
43
43
|
// If rendering an icon container, shrink the TimePicker
|
|
44
44
|
var datePickerContainerStyles = (0, _react2.css)({
|
|
@@ -37,7 +37,7 @@ function () {
|
|
|
37
37
|
return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
|
|
38
38
|
}, _datePickerFc.default, _datePickerClass.default);
|
|
39
39
|
var packageName = "@atlaskit/datetime-picker";
|
|
40
|
-
var packageVersion = "15.
|
|
40
|
+
var packageVersion = "15.10.0";
|
|
41
41
|
var analyticsAttributes = {
|
|
42
42
|
componentName: 'dateTimePicker',
|
|
43
43
|
packageName: packageName,
|
|
@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
27
27
|
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; }
|
|
28
28
|
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; }
|
|
29
29
|
var packageName = "@atlaskit/datetime-picker";
|
|
30
|
-
var packageVersion = "15.
|
|
30
|
+
var packageVersion = "15.10.0";
|
|
31
31
|
var menuStyles = {
|
|
32
32
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
33
33
|
position: 'static',
|
|
@@ -317,10 +317,7 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
317
317
|
}), /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
|
|
318
318
|
"aria-describedby": ariaDescribedBy,
|
|
319
319
|
"aria-label": label || undefined,
|
|
320
|
-
appearance: appearance
|
|
321
|
-
// we need this disabled as we might need focus to move to the select
|
|
322
|
-
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
323
|
-
,
|
|
320
|
+
appearance: appearance,
|
|
324
321
|
autoFocus: autoFocus,
|
|
325
322
|
clearControlLabel: clearControlLabel,
|
|
326
323
|
components: selectComponents,
|
|
@@ -10,15 +10,14 @@ import { Component, createRef } from 'react';
|
|
|
10
10
|
import { css, jsx } from '@emotion/react';
|
|
11
11
|
import { isValid, parseISO } from 'date-fns';
|
|
12
12
|
import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
13
|
+
import { IconButton } from '@atlaskit/button/new';
|
|
13
14
|
import { IdProvider } from '@atlaskit/ds-lib/use-id';
|
|
14
15
|
import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
|
|
15
16
|
import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
|
|
16
17
|
import { createLocalizationProvider } from '@atlaskit/locale';
|
|
17
18
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
18
|
-
import { Box,
|
|
19
|
+
import { Box, xcss } from '@atlaskit/primitives';
|
|
19
20
|
import Select, { mergeStyles } from '@atlaskit/select';
|
|
20
|
-
import { N500, N70 } from '@atlaskit/theme/colors';
|
|
21
|
-
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
22
21
|
import { EmptyComponent } from '../internal';
|
|
23
22
|
import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
|
|
24
23
|
import { IndicatorsContainer } from '../internal/indicators-container';
|
|
@@ -26,7 +25,7 @@ import { Menu } from '../internal/menu';
|
|
|
26
25
|
import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
|
|
27
26
|
import { makeSingleValue } from '../internal/single-value';
|
|
28
27
|
const packageName = "@atlaskit/datetime-picker";
|
|
29
|
-
const packageVersion = "15.
|
|
28
|
+
const packageVersion = "15.10.0";
|
|
30
29
|
const dropdownIndicatorStyles = xcss({
|
|
31
30
|
minWidth: "var(--ds-space-300, 24px)",
|
|
32
31
|
minHeight: "var(--ds-space-300, 24px)",
|
|
@@ -56,41 +55,28 @@ const datePickerDefaultProps = {
|
|
|
56
55
|
const pickerContainerStyles = css({
|
|
57
56
|
position: 'relative'
|
|
58
57
|
});
|
|
59
|
-
const iconContainerStyles =
|
|
58
|
+
const iconContainerStyles = xcss({
|
|
60
59
|
display: 'flex',
|
|
61
60
|
height: '100%',
|
|
62
61
|
position: 'absolute',
|
|
63
62
|
alignItems: 'center',
|
|
64
63
|
flexBasis: 'inherit',
|
|
65
|
-
color:
|
|
66
|
-
insetBlockStart: 0,
|
|
67
|
-
insetInlineEnd: 0,
|
|
64
|
+
color: 'color.text.subtlest',
|
|
65
|
+
insetBlockStart: 'space.0',
|
|
66
|
+
insetInlineEnd: 'space.0',
|
|
68
67
|
transition: `color 150ms`,
|
|
69
|
-
'
|
|
70
|
-
color:
|
|
68
|
+
':hover': {
|
|
69
|
+
color: 'color.text.subtle'
|
|
71
70
|
}
|
|
72
71
|
});
|
|
73
|
-
const iconSpacingWithClearButtonStyles =
|
|
74
|
-
marginInlineEnd:
|
|
75
|
-
});
|
|
76
|
-
const iconSpacingWithoutClearButtonStylesNew = css({
|
|
77
|
-
marginInlineEnd: "var(--ds-space-050, 0.25rem)"
|
|
72
|
+
const iconSpacingWithClearButtonStyles = xcss({
|
|
73
|
+
marginInlineEnd: 'space.400'
|
|
78
74
|
});
|
|
79
|
-
const
|
|
80
|
-
marginInlineEnd:
|
|
75
|
+
const iconSpacingWithoutClearButtonStylesNew = xcss({
|
|
76
|
+
marginInlineEnd: 'space.050'
|
|
81
77
|
});
|
|
82
|
-
const
|
|
83
|
-
|
|
84
|
-
height: `${32 / 14}em`
|
|
85
|
-
});
|
|
86
|
-
const calendarButtonStyles = xcss({
|
|
87
|
-
borderRadius: 'border.radius',
|
|
88
|
-
':hover': {
|
|
89
|
-
backgroundColor: 'color.background.neutral.subtle.hovered'
|
|
90
|
-
},
|
|
91
|
-
':active': {
|
|
92
|
-
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
93
|
-
}
|
|
78
|
+
const iconSpacingWithoutClearButtonStyles = xcss({
|
|
79
|
+
marginInlineEnd: 'space.025'
|
|
94
80
|
});
|
|
95
81
|
|
|
96
82
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
@@ -540,12 +526,15 @@ class DatePickerComponent extends Component {
|
|
|
540
526
|
} : null;
|
|
541
527
|
|
|
542
528
|
// `label` takes precedence of the `inputLabel`
|
|
543
|
-
const fullopenCalendarLabel = label || inputLabel ? `${label || inputLabel}
|
|
529
|
+
const fullopenCalendarLabel = label || inputLabel ? `${label || inputLabel}, ${openCalendarLabel}` : openCalendarLabel;
|
|
544
530
|
return (
|
|
545
531
|
// These event handlers must be on this element because the events come
|
|
546
532
|
// from different child elements.
|
|
533
|
+
// Until innerProps is removed, it must remain a div rather than a primitive component.
|
|
547
534
|
jsx("div", _extends({}, innerProps, {
|
|
548
|
-
css: pickerContainerStyles
|
|
535
|
+
css: pickerContainerStyles
|
|
536
|
+
// Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
|
|
537
|
+
,
|
|
549
538
|
role: "presentation",
|
|
550
539
|
onBlur: this.onContainerBlur,
|
|
551
540
|
onFocus: this.onContainerFocus,
|
|
@@ -619,30 +608,25 @@ class DatePickerComponent extends Component {
|
|
|
619
608
|
prefix: "open-calendar-label--"
|
|
620
609
|
}, ({
|
|
621
610
|
id: openCalendarLabelId
|
|
622
|
-
}) => jsx(
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
},
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
611
|
+
}) => jsx(Box, {
|
|
612
|
+
xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
|
|
613
|
+
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
614
|
+
fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
|
|
615
|
+
}, jsx(IconButton, {
|
|
616
|
+
appearance: "subtle",
|
|
617
|
+
label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
|
|
618
|
+
"aria-labelledby": inputLabelId ? `${inputLabelId} ${openCalendarLabelId}` : undefined,
|
|
619
|
+
id: openCalendarLabelId,
|
|
620
|
+
icon: iconProps => jsx(CalendarIcon, _extends({}, iconProps, fg('platform-visual-refresh-icon-ads-migration') ? {
|
|
621
|
+
color: "var(--ds-icon, #44546F)"
|
|
622
|
+
} : {
|
|
623
|
+
primaryColor: "var(--ds-icon, #44546F)"
|
|
624
|
+
})),
|
|
631
625
|
onClick: this.onCalendarButtonClick,
|
|
632
626
|
onKeyDown: this.onCalendarButtonKeyDown,
|
|
633
627
|
ref: this.calendarButtonRef,
|
|
634
|
-
testId: testId && `${testId}--open-calendar-button
|
|
635
|
-
|
|
636
|
-
backgroundColor: "color.background.neutral.subtle",
|
|
637
|
-
padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
|
|
638
|
-
xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
|
|
639
|
-
}), jsx(CalendarIcon, _extends({
|
|
640
|
-
label: ""
|
|
641
|
-
}, fg('platform-visual-refresh-icon-ads-migration') ? {
|
|
642
|
-
color: "var(--ds-icon, #44546F)"
|
|
643
|
-
} : {
|
|
644
|
-
primaryColor: "var(--ds-icon, #44546F)"
|
|
645
|
-
}))))) : null)
|
|
628
|
+
testId: testId && `${testId}--open-calendar-button`
|
|
629
|
+
}))) : null)
|
|
646
630
|
);
|
|
647
631
|
}
|
|
648
632
|
}
|
|
@@ -9,14 +9,14 @@ import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from
|
|
|
9
9
|
import { css, jsx } from '@emotion/react';
|
|
10
10
|
import { isValid, parseISO } from 'date-fns';
|
|
11
11
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
12
|
+
import { IconButton } from '@atlaskit/button/new';
|
|
12
13
|
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
13
14
|
import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
|
|
14
15
|
import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
|
|
15
16
|
import { createLocalizationProvider } from '@atlaskit/locale';
|
|
16
17
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
|
-
import { Box,
|
|
18
|
+
import { Box, xcss } from '@atlaskit/primitives';
|
|
18
19
|
import Select, { mergeStyles } from '@atlaskit/select';
|
|
19
|
-
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
20
20
|
import { EmptyComponent } from '../internal';
|
|
21
21
|
import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
|
|
22
22
|
import { IndicatorsContainer } from '../internal/indicators-container';
|
|
@@ -24,7 +24,7 @@ import { Menu } from '../internal/menu';
|
|
|
24
24
|
import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
|
|
25
25
|
import { makeSingleValue } from '../internal/single-value';
|
|
26
26
|
const packageName = "@atlaskit/datetime-picker";
|
|
27
|
-
const packageVersion = "15.
|
|
27
|
+
const packageVersion = "15.10.0";
|
|
28
28
|
const analyticsAttributes = {
|
|
29
29
|
componentName: 'datePicker',
|
|
30
30
|
packageName,
|
|
@@ -68,19 +68,6 @@ const iconSpacingWithoutClearButtonStylesNew = xcss({
|
|
|
68
68
|
const iconSpacingWithoutClearButtonStyles = xcss({
|
|
69
69
|
marginInlineEnd: 'space.025'
|
|
70
70
|
});
|
|
71
|
-
const calendarButtonFixedSizeStyles = xcss({
|
|
72
|
-
width: `${32 / 14}em`,
|
|
73
|
-
height: `${32 / 14}em`
|
|
74
|
-
});
|
|
75
|
-
const calendarButtonStyles = xcss({
|
|
76
|
-
borderRadius: 'border.radius',
|
|
77
|
-
':hover': {
|
|
78
|
-
backgroundColor: 'color.background.neutral.subtle.hovered'
|
|
79
|
-
},
|
|
80
|
-
':active': {
|
|
81
|
-
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
71
|
/**
|
|
85
72
|
* __Date picker__
|
|
86
73
|
*
|
|
@@ -482,11 +469,12 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
482
469
|
} : null;
|
|
483
470
|
|
|
484
471
|
// `label` takes precedence of the `inputLabel`
|
|
485
|
-
const fullopenCalendarLabel = label || inputLabel ? `${label || inputLabel}
|
|
472
|
+
const fullopenCalendarLabel = label || inputLabel ? `${label || inputLabel}, ${openCalendarLabel}` : openCalendarLabel;
|
|
486
473
|
const openCalendarLabelId = `open-calendar-label--${useId()}`;
|
|
487
474
|
return (
|
|
488
475
|
// These event handlers must be on this element because the events come
|
|
489
|
-
// from different child elements.
|
|
476
|
+
// from different child elements.
|
|
477
|
+
// Until innerProps is removed, it must remain a div rather than a primitive component.
|
|
490
478
|
jsx("div", _extends({}, innerProps, {
|
|
491
479
|
css: pickerContainerStyles,
|
|
492
480
|
"data-testid": testId && `${testId}--container`,
|
|
@@ -496,7 +484,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
496
484
|
onInput: onTextInput,
|
|
497
485
|
onKeyDown: onInputKeyDown,
|
|
498
486
|
ref: getContainerRef
|
|
499
|
-
//
|
|
487
|
+
// Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
|
|
500
488
|
,
|
|
501
489
|
role: "presentation"
|
|
502
490
|
}), jsx("input", {
|
|
@@ -566,28 +554,21 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
566
554
|
xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
|
|
567
555
|
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
568
556
|
fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
|
|
569
|
-
},
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
'
|
|
575
|
-
|
|
557
|
+
}, jsx(IconButton, {
|
|
558
|
+
appearance: "subtle",
|
|
559
|
+
label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
|
|
560
|
+
"aria-labelledby": inputLabelId ? `${inputLabelId} ${openCalendarLabelId}` : undefined,
|
|
561
|
+
id: openCalendarLabelId,
|
|
562
|
+
icon: iconProps => jsx(CalendarIcon, _extends({}, iconProps, fg('platform-visual-refresh-icon-ads-migration') ? {
|
|
563
|
+
color: "var(--ds-icon, #44546F)"
|
|
564
|
+
} : {
|
|
565
|
+
primaryColor: "var(--ds-icon, #44546F)"
|
|
566
|
+
})),
|
|
576
567
|
onClick: onCalendarButtonClick,
|
|
577
568
|
onKeyDown: onCalendarButtonKeyDown,
|
|
578
569
|
ref: calendarButtonRef,
|
|
579
|
-
testId: testId && `${testId}--open-calendar-button
|
|
580
|
-
|
|
581
|
-
backgroundColor: "color.background.neutral.subtle",
|
|
582
|
-
padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
|
|
583
|
-
xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
|
|
584
|
-
}), jsx(CalendarIcon, _extends({
|
|
585
|
-
label: ""
|
|
586
|
-
}, fg('platform-visual-refresh-icon-ads-migration') ? {
|
|
587
|
-
color: "var(--ds-icon, #44546F)"
|
|
588
|
-
} : {
|
|
589
|
-
primaryColor: "var(--ds-icon, #44546F)"
|
|
590
|
-
})))) : null)
|
|
570
|
+
testId: testId && `${testId}--open-calendar-button`
|
|
571
|
+
})) : null)
|
|
591
572
|
);
|
|
592
573
|
});
|
|
593
574
|
export default DatePicker;
|
|
@@ -22,7 +22,7 @@ import DatePickerNew from './date-picker-fc';
|
|
|
22
22
|
import TimePicker from './time-picker';
|
|
23
23
|
const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
|
|
24
24
|
const packageName = "@atlaskit/datetime-picker";
|
|
25
|
-
const packageVersion = "15.
|
|
25
|
+
const packageVersion = "15.10.0";
|
|
26
26
|
// Make DatePicker 50% the width of DateTimePicker
|
|
27
27
|
// If rendering an icon container, shrink the TimePicker
|
|
28
28
|
const datePickerContainerStyles = css({
|
|
@@ -18,7 +18,7 @@ const DatePicker = componentWithCondition(
|
|
|
18
18
|
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
19
19
|
() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
|
|
20
20
|
const packageName = "@atlaskit/datetime-picker";
|
|
21
|
-
const packageVersion = "15.
|
|
21
|
+
const packageVersion = "15.10.0";
|
|
22
22
|
const analyticsAttributes = {
|
|
23
23
|
componentName: 'dateTimePicker',
|
|
24
24
|
packageName,
|
|
@@ -11,7 +11,7 @@ import parseTime from '../internal/parse-time';
|
|
|
11
11
|
import { convertTokens } from '../internal/parse-tokens';
|
|
12
12
|
import { makeSingleValue } from '../internal/single-value';
|
|
13
13
|
const packageName = "@atlaskit/datetime-picker";
|
|
14
|
-
const packageVersion = "15.
|
|
14
|
+
const packageVersion = "15.10.0";
|
|
15
15
|
const menuStyles = {
|
|
16
16
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
17
17
|
position: 'static',
|
|
@@ -263,10 +263,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
|
|
|
263
263
|
}), /*#__PURE__*/React.createElement(SelectComponent, _extends({
|
|
264
264
|
"aria-describedby": ariaDescribedBy,
|
|
265
265
|
"aria-label": label || undefined,
|
|
266
|
-
appearance: appearance
|
|
267
|
-
// we need this disabled as we might need focus to move to the select
|
|
268
|
-
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
269
|
-
,
|
|
266
|
+
appearance: appearance,
|
|
270
267
|
autoFocus: autoFocus,
|
|
271
268
|
clearControlLabel: clearControlLabel,
|
|
272
269
|
components: selectComponents,
|
|
@@ -20,15 +20,14 @@ import { Component, createRef } from 'react';
|
|
|
20
20
|
import { css, jsx } from '@emotion/react';
|
|
21
21
|
import { isValid, parseISO } from 'date-fns';
|
|
22
22
|
import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
23
|
+
import { IconButton } from '@atlaskit/button/new';
|
|
23
24
|
import { IdProvider } from '@atlaskit/ds-lib/use-id';
|
|
24
25
|
import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
|
|
25
26
|
import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
|
|
26
27
|
import { createLocalizationProvider } from '@atlaskit/locale';
|
|
27
28
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
28
|
-
import { Box,
|
|
29
|
+
import { Box, xcss } from '@atlaskit/primitives';
|
|
29
30
|
import Select, { mergeStyles } from '@atlaskit/select';
|
|
30
|
-
import { N500, N70 } from '@atlaskit/theme/colors';
|
|
31
|
-
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
32
31
|
import { EmptyComponent } from '../internal';
|
|
33
32
|
import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
|
|
34
33
|
import { IndicatorsContainer as _IndicatorsContainer } from '../internal/indicators-container';
|
|
@@ -36,7 +35,7 @@ import { Menu } from '../internal/menu';
|
|
|
36
35
|
import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
|
|
37
36
|
import { makeSingleValue } from '../internal/single-value';
|
|
38
37
|
var packageName = "@atlaskit/datetime-picker";
|
|
39
|
-
var packageVersion = "15.
|
|
38
|
+
var packageVersion = "15.10.0";
|
|
40
39
|
var dropdownIndicatorStyles = xcss({
|
|
41
40
|
minWidth: "var(--ds-space-300, 24px)",
|
|
42
41
|
minHeight: "var(--ds-space-300, 24px)",
|
|
@@ -68,41 +67,28 @@ var datePickerDefaultProps = {
|
|
|
68
67
|
var pickerContainerStyles = css({
|
|
69
68
|
position: 'relative'
|
|
70
69
|
});
|
|
71
|
-
var iconContainerStyles =
|
|
70
|
+
var iconContainerStyles = xcss({
|
|
72
71
|
display: 'flex',
|
|
73
72
|
height: '100%',
|
|
74
73
|
position: 'absolute',
|
|
75
74
|
alignItems: 'center',
|
|
76
75
|
flexBasis: 'inherit',
|
|
77
|
-
color:
|
|
78
|
-
insetBlockStart: 0,
|
|
79
|
-
insetInlineEnd: 0,
|
|
76
|
+
color: 'color.text.subtlest',
|
|
77
|
+
insetBlockStart: 'space.0',
|
|
78
|
+
insetInlineEnd: 'space.0',
|
|
80
79
|
transition: "color 150ms",
|
|
81
|
-
'
|
|
82
|
-
color:
|
|
80
|
+
':hover': {
|
|
81
|
+
color: 'color.text.subtle'
|
|
83
82
|
}
|
|
84
83
|
});
|
|
85
|
-
var iconSpacingWithClearButtonStyles =
|
|
86
|
-
marginInlineEnd:
|
|
87
|
-
});
|
|
88
|
-
var iconSpacingWithoutClearButtonStylesNew = css({
|
|
89
|
-
marginInlineEnd: "var(--ds-space-050, 0.25rem)"
|
|
84
|
+
var iconSpacingWithClearButtonStyles = xcss({
|
|
85
|
+
marginInlineEnd: 'space.400'
|
|
90
86
|
});
|
|
91
|
-
var
|
|
92
|
-
marginInlineEnd:
|
|
87
|
+
var iconSpacingWithoutClearButtonStylesNew = xcss({
|
|
88
|
+
marginInlineEnd: 'space.050'
|
|
93
89
|
});
|
|
94
|
-
var
|
|
95
|
-
|
|
96
|
-
height: "".concat(32 / 14, "em")
|
|
97
|
-
});
|
|
98
|
-
var calendarButtonStyles = xcss({
|
|
99
|
-
borderRadius: 'border.radius',
|
|
100
|
-
':hover': {
|
|
101
|
-
backgroundColor: 'color.background.neutral.subtle.hovered'
|
|
102
|
-
},
|
|
103
|
-
':active': {
|
|
104
|
-
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
105
|
-
}
|
|
90
|
+
var iconSpacingWithoutClearButtonStyles = xcss({
|
|
91
|
+
marginInlineEnd: 'space.025'
|
|
106
92
|
});
|
|
107
93
|
|
|
108
94
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
@@ -557,12 +543,15 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
|
|
|
557
543
|
} : null;
|
|
558
544
|
|
|
559
545
|
// `label` takes precedence of the `inputLabel`
|
|
560
|
-
var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, "
|
|
546
|
+
var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, ", ").concat(openCalendarLabel) : openCalendarLabel;
|
|
561
547
|
return (
|
|
562
548
|
// These event handlers must be on this element because the events come
|
|
563
549
|
// from different child elements.
|
|
550
|
+
// Until innerProps is removed, it must remain a div rather than a primitive component.
|
|
564
551
|
jsx("div", _extends({}, innerProps, {
|
|
565
|
-
css: pickerContainerStyles
|
|
552
|
+
css: pickerContainerStyles
|
|
553
|
+
// Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
|
|
554
|
+
,
|
|
566
555
|
role: "presentation",
|
|
567
556
|
onBlur: this.onContainerBlur,
|
|
568
557
|
onFocus: this.onContainerFocus,
|
|
@@ -636,30 +625,27 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
|
|
|
636
625
|
prefix: "open-calendar-label--"
|
|
637
626
|
}, function (_ref3) {
|
|
638
627
|
var openCalendarLabelId = _ref3.id;
|
|
639
|
-
return jsx(
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
},
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
628
|
+
return jsx(Box, {
|
|
629
|
+
xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
|
|
630
|
+
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
631
|
+
fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
|
|
632
|
+
}, jsx(IconButton, {
|
|
633
|
+
appearance: "subtle",
|
|
634
|
+
label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
|
|
635
|
+
"aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,
|
|
636
|
+
id: openCalendarLabelId,
|
|
637
|
+
icon: function icon(iconProps) {
|
|
638
|
+
return jsx(CalendarIcon, _extends({}, iconProps, fg('platform-visual-refresh-icon-ads-migration') ? {
|
|
639
|
+
color: "var(--ds-icon, #44546F)"
|
|
640
|
+
} : {
|
|
641
|
+
primaryColor: "var(--ds-icon, #44546F)"
|
|
642
|
+
}));
|
|
643
|
+
},
|
|
648
644
|
onClick: _this2.onCalendarButtonClick,
|
|
649
645
|
onKeyDown: _this2.onCalendarButtonKeyDown,
|
|
650
646
|
ref: _this2.calendarButtonRef,
|
|
651
|
-
testId: testId && "".concat(testId, "--open-calendar-button")
|
|
652
|
-
|
|
653
|
-
backgroundColor: "color.background.neutral.subtle",
|
|
654
|
-
padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
|
|
655
|
-
xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
|
|
656
|
-
}), jsx(CalendarIcon, _extends({
|
|
657
|
-
label: ""
|
|
658
|
-
}, fg('platform-visual-refresh-icon-ads-migration') ? {
|
|
659
|
-
color: "var(--ds-icon, #44546F)"
|
|
660
|
-
} : {
|
|
661
|
-
primaryColor: "var(--ds-icon, #44546F)"
|
|
662
|
-
}))));
|
|
647
|
+
testId: testId && "".concat(testId, "--open-calendar-button")
|
|
648
|
+
}));
|
|
663
649
|
}) : null)
|
|
664
650
|
);
|
|
665
651
|
}
|
|
@@ -15,14 +15,14 @@ import { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from
|
|
|
15
15
|
import { css, jsx } from '@emotion/react';
|
|
16
16
|
import { isValid, parseISO } from 'date-fns';
|
|
17
17
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
18
|
+
import { IconButton } from '@atlaskit/button/new';
|
|
18
19
|
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
19
20
|
import CalendarIconNew from '@atlaskit/icon/core/migration/calendar';
|
|
20
21
|
import CalendarIconOld from '@atlaskit/icon/glyph/calendar';
|
|
21
22
|
import { createLocalizationProvider } from '@atlaskit/locale';
|
|
22
23
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
23
|
-
import { Box,
|
|
24
|
+
import { Box, xcss } from '@atlaskit/primitives';
|
|
24
25
|
import Select, { mergeStyles } from '@atlaskit/select';
|
|
25
|
-
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
26
26
|
import { EmptyComponent } from '../internal';
|
|
27
27
|
import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
|
|
28
28
|
import { IndicatorsContainer as _IndicatorsContainer } from '../internal/indicators-container';
|
|
@@ -30,7 +30,7 @@ import { Menu } from '../internal/menu';
|
|
|
30
30
|
import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
|
|
31
31
|
import { makeSingleValue } from '../internal/single-value';
|
|
32
32
|
var packageName = "@atlaskit/datetime-picker";
|
|
33
|
-
var packageVersion = "15.
|
|
33
|
+
var packageVersion = "15.10.0";
|
|
34
34
|
var analyticsAttributes = {
|
|
35
35
|
componentName: 'datePicker',
|
|
36
36
|
packageName: packageName,
|
|
@@ -74,19 +74,6 @@ var iconSpacingWithoutClearButtonStylesNew = xcss({
|
|
|
74
74
|
var iconSpacingWithoutClearButtonStyles = xcss({
|
|
75
75
|
marginInlineEnd: 'space.025'
|
|
76
76
|
});
|
|
77
|
-
var calendarButtonFixedSizeStyles = xcss({
|
|
78
|
-
width: "".concat(32 / 14, "em"),
|
|
79
|
-
height: "".concat(32 / 14, "em")
|
|
80
|
-
});
|
|
81
|
-
var calendarButtonStyles = xcss({
|
|
82
|
-
borderRadius: 'border.radius',
|
|
83
|
-
':hover': {
|
|
84
|
-
backgroundColor: 'color.background.neutral.subtle.hovered'
|
|
85
|
-
},
|
|
86
|
-
':active': {
|
|
87
|
-
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
77
|
/**
|
|
91
78
|
* __Date picker__
|
|
92
79
|
*
|
|
@@ -547,11 +534,12 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
|
|
|
547
534
|
} : null;
|
|
548
535
|
|
|
549
536
|
// `label` takes precedence of the `inputLabel`
|
|
550
|
-
var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, "
|
|
537
|
+
var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, ", ").concat(openCalendarLabel) : openCalendarLabel;
|
|
551
538
|
var openCalendarLabelId = "open-calendar-label--".concat(useId());
|
|
552
539
|
return (
|
|
553
540
|
// These event handlers must be on this element because the events come
|
|
554
|
-
// from different child elements.
|
|
541
|
+
// from different child elements.
|
|
542
|
+
// Until innerProps is removed, it must remain a div rather than a primitive component.
|
|
555
543
|
jsx("div", _extends({}, innerProps, {
|
|
556
544
|
css: pickerContainerStyles,
|
|
557
545
|
"data-testid": testId && "".concat(testId, "--container"),
|
|
@@ -561,7 +549,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
|
|
|
561
549
|
onInput: onTextInput,
|
|
562
550
|
onKeyDown: onInputKeyDown,
|
|
563
551
|
ref: getContainerRef
|
|
564
|
-
//
|
|
552
|
+
// Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
|
|
565
553
|
,
|
|
566
554
|
role: "presentation"
|
|
567
555
|
}), jsx("input", {
|
|
@@ -631,28 +619,23 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
|
|
|
631
619
|
xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
|
|
632
620
|
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
633
621
|
fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
|
|
634
|
-
},
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
622
|
+
}, jsx(IconButton, {
|
|
623
|
+
appearance: "subtle",
|
|
624
|
+
label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
|
|
625
|
+
"aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,
|
|
626
|
+
id: openCalendarLabelId,
|
|
627
|
+
icon: function icon(iconProps) {
|
|
628
|
+
return jsx(CalendarIcon, _extends({}, iconProps, fg('platform-visual-refresh-icon-ads-migration') ? {
|
|
629
|
+
color: "var(--ds-icon, #44546F)"
|
|
630
|
+
} : {
|
|
631
|
+
primaryColor: "var(--ds-icon, #44546F)"
|
|
632
|
+
}));
|
|
633
|
+
},
|
|
641
634
|
onClick: onCalendarButtonClick,
|
|
642
635
|
onKeyDown: onCalendarButtonKeyDown,
|
|
643
636
|
ref: calendarButtonRef,
|
|
644
|
-
testId: testId && "".concat(testId, "--open-calendar-button")
|
|
645
|
-
|
|
646
|
-
backgroundColor: "color.background.neutral.subtle",
|
|
647
|
-
padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
|
|
648
|
-
xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
|
|
649
|
-
}), jsx(CalendarIcon, _extends({
|
|
650
|
-
label: ""
|
|
651
|
-
}, fg('platform-visual-refresh-icon-ads-migration') ? {
|
|
652
|
-
color: "var(--ds-icon, #44546F)"
|
|
653
|
-
} : {
|
|
654
|
-
primaryColor: "var(--ds-icon, #44546F)"
|
|
655
|
-
})))) : null)
|
|
637
|
+
testId: testId && "".concat(testId, "--open-calendar-button")
|
|
638
|
+
})) : null)
|
|
656
639
|
);
|
|
657
640
|
});
|
|
658
641
|
export default DatePicker;
|
|
@@ -34,7 +34,7 @@ var DatePicker = componentWithCondition(function () {
|
|
|
34
34
|
return fg('dst-date-picker-use-functional-component');
|
|
35
35
|
}, DatePickerNew, DatePickerOld);
|
|
36
36
|
var packageName = "@atlaskit/datetime-picker";
|
|
37
|
-
var packageVersion = "15.
|
|
37
|
+
var packageVersion = "15.10.0";
|
|
38
38
|
// Make DatePicker 50% the width of DateTimePicker
|
|
39
39
|
// If rendering an icon container, shrink the TimePicker
|
|
40
40
|
var datePickerContainerStyles = css({
|
|
@@ -27,7 +27,7 @@ function () {
|
|
|
27
27
|
return fg('dst-date-picker-use-functional-component');
|
|
28
28
|
}, DatePickerNew, DatePickerOld);
|
|
29
29
|
var packageName = "@atlaskit/datetime-picker";
|
|
30
|
-
var packageVersion = "15.
|
|
30
|
+
var packageVersion = "15.10.0";
|
|
31
31
|
var analyticsAttributes = {
|
|
32
32
|
componentName: 'dateTimePicker',
|
|
33
33
|
packageName: packageName,
|
|
@@ -17,7 +17,7 @@ import parseTime from '../internal/parse-time';
|
|
|
17
17
|
import { convertTokens } from '../internal/parse-tokens';
|
|
18
18
|
import { makeSingleValue } from '../internal/single-value';
|
|
19
19
|
var packageName = "@atlaskit/datetime-picker";
|
|
20
|
-
var packageVersion = "15.
|
|
20
|
+
var packageVersion = "15.10.0";
|
|
21
21
|
var menuStyles = {
|
|
22
22
|
/* Need to remove default absolute positioning as that causes issues with position fixed */
|
|
23
23
|
position: 'static',
|
|
@@ -307,10 +307,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
307
307
|
}), /*#__PURE__*/React.createElement(SelectComponent, _extends({
|
|
308
308
|
"aria-describedby": ariaDescribedBy,
|
|
309
309
|
"aria-label": label || undefined,
|
|
310
|
-
appearance: appearance
|
|
311
|
-
// we need this disabled as we might need focus to move to the select
|
|
312
|
-
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
313
|
-
,
|
|
310
|
+
appearance: appearance,
|
|
314
311
|
autoFocus: autoFocus,
|
|
315
312
|
clearControlLabel: clearControlLabel,
|
|
316
313
|
components: selectComponents,
|
package/dist/types/types.d.ts
CHANGED
|
@@ -229,6 +229,8 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
|
|
|
229
229
|
hideIcon?: boolean;
|
|
230
230
|
/**
|
|
231
231
|
* Format the date with a string that is accepted by [date-fn's format function](https://date-fns.org/v1.29.0/docs/format).
|
|
232
|
+
*
|
|
233
|
+
* Note that though we are using `date-fns` version 2, we use [the tokens from `date-fns` version 1](https://date-fns.org/v1.30.1/docs/format) under the hood.
|
|
232
234
|
*/
|
|
233
235
|
dateFormat?: string;
|
|
234
236
|
/**
|
|
@@ -229,6 +229,8 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
|
|
|
229
229
|
hideIcon?: boolean;
|
|
230
230
|
/**
|
|
231
231
|
* Format the date with a string that is accepted by [date-fn's format function](https://date-fns.org/v1.29.0/docs/format).
|
|
232
|
+
*
|
|
233
|
+
* Note that though we are using `date-fns` version 2, we use [the tokens from `date-fns` version 1](https://date-fns.org/v1.30.1/docs/format) under the hood.
|
|
232
234
|
*/
|
|
233
235
|
dateFormat?: string;
|
|
234
236
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/datetime-picker",
|
|
3
|
-
"version": "15.
|
|
3
|
+
"version": "15.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/"
|
|
@@ -32,24 +32,24 @@
|
|
|
32
32
|
"team": "Design System Team",
|
|
33
33
|
"website": {
|
|
34
34
|
"name": "Date time picker",
|
|
35
|
-
"category": "
|
|
35
|
+
"category": "Forms and input"
|
|
36
36
|
},
|
|
37
37
|
"runReact18": true
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@atlaskit/analytics-next": "^10.
|
|
40
|
+
"@atlaskit/analytics-next": "^10.2.0",
|
|
41
41
|
"@atlaskit/button": "^20.3.1",
|
|
42
42
|
"@atlaskit/calendar": "^15.1.0",
|
|
43
|
-
"@atlaskit/ds-lib": "^3.
|
|
44
|
-
"@atlaskit/icon": "^
|
|
43
|
+
"@atlaskit/ds-lib": "^3.3.0",
|
|
44
|
+
"@atlaskit/icon": "^23.1.0",
|
|
45
45
|
"@atlaskit/layering": "^0.8.0",
|
|
46
46
|
"@atlaskit/locale": "^2.8.0",
|
|
47
47
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
48
48
|
"@atlaskit/popper": "^6.3.0",
|
|
49
|
-
"@atlaskit/primitives": "^13.
|
|
50
|
-
"@atlaskit/select": "^18.
|
|
49
|
+
"@atlaskit/primitives": "^13.3.0",
|
|
50
|
+
"@atlaskit/select": "^18.8.0",
|
|
51
51
|
"@atlaskit/theme": "^14.0.0",
|
|
52
|
-
"@atlaskit/tokens": "^2.
|
|
52
|
+
"@atlaskit/tokens": "^2.4.0",
|
|
53
53
|
"@atlaskit/visually-hidden": "^1.5.0",
|
|
54
54
|
"@babel/runtime": "^7.0.0",
|
|
55
55
|
"@emotion/react": "^11.7.1",
|
|
@@ -64,13 +64,13 @@
|
|
|
64
64
|
"@af/visual-regression": "*",
|
|
65
65
|
"@atlaskit/codemod-utils": "4.2.4",
|
|
66
66
|
"@atlaskit/docs": "*",
|
|
67
|
-
"@atlaskit/form": "^10.
|
|
68
|
-
"@atlaskit/modal-dialog": "^12.
|
|
69
|
-
"@atlaskit/popup": "^1.
|
|
70
|
-
"@atlaskit/range": "^
|
|
71
|
-
"@atlaskit/section-message": "^6.
|
|
67
|
+
"@atlaskit/form": "^10.6.0",
|
|
68
|
+
"@atlaskit/modal-dialog": "^12.18.0",
|
|
69
|
+
"@atlaskit/popup": "^1.30.0",
|
|
70
|
+
"@atlaskit/range": "^8.0.0",
|
|
71
|
+
"@atlaskit/section-message": "^6.8.0",
|
|
72
72
|
"@atlaskit/ssr": "*",
|
|
73
|
-
"@atlaskit/textfield": "^6.
|
|
73
|
+
"@atlaskit/textfield": "^6.7.0",
|
|
74
74
|
"@atlaskit/toggle": "^13.4.0",
|
|
75
75
|
"@atlaskit/visual-regression": "*",
|
|
76
76
|
"@atlassian/feature-flags-test-utils": "*",
|