@atlaskit/datetime-picker 15.9.6 → 15.10.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 (19) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/components/date-picker-class.js +33 -50
  3. package/dist/cjs/components/date-picker-fc.js +17 -35
  4. package/dist/cjs/components/date-time-picker-class.js +1 -1
  5. package/dist/cjs/components/date-time-picker-fc.js +1 -1
  6. package/dist/cjs/components/time-picker.js +1 -1
  7. package/dist/es2019/components/date-picker-class.js +32 -51
  8. package/dist/es2019/components/date-picker-fc.js +16 -36
  9. package/dist/es2019/components/date-time-picker-class.js +1 -1
  10. package/dist/es2019/components/date-time-picker-fc.js +1 -1
  11. package/dist/es2019/components/time-picker.js +1 -1
  12. package/dist/esm/components/date-picker-class.js +34 -51
  13. package/dist/esm/components/date-picker-fc.js +18 -36
  14. package/dist/esm/components/date-time-picker-class.js +1 -1
  15. package/dist/esm/components/date-time-picker-fc.js +1 -1
  16. package/dist/esm/components/time-picker.js +1 -1
  17. package/dist/types/types.d.ts +2 -0
  18. package/dist/types-ts4.5/types.d.ts +2 -0
  19. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/datetime-picker
2
2
 
3
+ ## 15.10.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 15.10.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#168398](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168398)
14
+ [`3b1f085cfd51b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3b1f085cfd51b) -
15
+ update calendar button component
16
+
3
17
  ## 15.9.6
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/components/date-picker-class.js CHANGED
@@ -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.9.6";
45
+ var packageVersion = "15.10.1";
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, _react2.css)({
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: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
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
- '&:hover': {
89
- color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
87
+ ':hover': {
88
+ color: 'color.text.subtle'
90
89
  }
91
90
  });
92
- var iconSpacingWithClearButtonStyles = (0, _react2.css)({
93
- marginInlineEnd: "var(--ds-space-400, 2rem)"
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 iconSpacingWithoutClearButtonStyles = (0, _react2.css)({
99
- marginInlineEnd: "var(--ds-space-025, 0.125rem)"
94
+ var iconSpacingWithoutClearButtonStylesNew = (0, _primitives.xcss)({
95
+ marginInlineEnd: 'space.050'
100
96
  });
101
- var calendarButtonFixedSizeStyles = (0, _primitives.xcss)({
102
- width: "".concat(32 / 14, "em"),
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,7 +550,7 @@ 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, " , ").concat(openCalendarLabel) : openCalendarLabel;
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.
@@ -646,30 +632,27 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
646
632
  prefix: "open-calendar-label--"
647
633
  }, function (_ref3) {
648
634
  var openCalendarLabelId = _ref3.id;
649
- return (0, _react2.jsx)("div", {
650
- css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
651
- }, inputLabelId && (0, _react2.jsx)(_visuallyHidden.default, {
652
- id: openCalendarLabelId
653
- }, ", ", openCalendarLabel), (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({}, inputLabelId ? {
654
- 'aria-labelledby': "".concat(inputLabelId, " ").concat(openCalendarLabelId)
655
- } : {
656
- 'aria-label': fullopenCalendarLabel
657
- }, {
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
+ },
658
651
  onClick: _this2.onCalendarButtonClick,
659
652
  onKeyDown: _this2.onCalendarButtonKeyDown,
660
653
  ref: _this2.calendarButtonRef,
661
- testId: testId && "".concat(testId, "--open-calendar-button"),
662
- type: "button",
663
- backgroundColor: "color.background.neutral.subtle",
664
- padding: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
665
- xcss: [calendarButtonStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
666
- }), (0, _react2.jsx)(CalendarIcon, (0, _extends2.default)({
667
- label: ""
668
- }, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? {
669
- color: "var(--ds-icon, #44546F)"
670
- } : {
671
- primaryColor: "var(--ds-icon, #44546F)"
672
- }))));
654
+ testId: testId && "".concat(testId, "--open-calendar-button")
655
+ }));
673
656
  }) : null)
674
657
  );
675
658
  }
package/dist/cjs/components/date-picker-fc.js CHANGED
@@ -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.9.6";
42
+ var packageVersion = "15.10.1";
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,7 +543,7 @@ 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, " , ").concat(openCalendarLabel) : openCalendarLabel;
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
@@ -641,28 +628,23 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
641
628
  xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
642
629
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
643
630
  (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
644
- }, inputLabelId && (0, _react2.jsx)(_visuallyHidden.default, {
645
- id: openCalendarLabelId
646
- }, ", ", openCalendarLabel), (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({}, inputLabelId ? {
647
- 'aria-labelledby': "".concat(inputLabelId, " ").concat(openCalendarLabelId)
648
- } : {
649
- 'aria-label': fullopenCalendarLabel
650
- }, {
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
+ },
651
643
  onClick: onCalendarButtonClick,
652
644
  onKeyDown: onCalendarButtonKeyDown,
653
645
  ref: calendarButtonRef,
654
- testId: testId && "".concat(testId, "--open-calendar-button"),
655
- type: "button",
656
- backgroundColor: "color.background.neutral.subtle",
657
- padding: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
658
- xcss: [calendarButtonStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
659
- }), (0, _react2.jsx)(CalendarIcon, (0, _extends2.default)({
660
- label: ""
661
- }, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? {
662
- color: "var(--ds-icon, #44546F)"
663
- } : {
664
- primaryColor: "var(--ds-icon, #44546F)"
665
- })))) : null)
646
+ testId: testId && "".concat(testId, "--open-calendar-button")
647
+ })) : null)
666
648
  );
667
649
  });
668
650
  var _default = exports.default = DatePicker;
package/dist/cjs/components/date-time-picker-class.js CHANGED
@@ -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.9.6";
41
+ var packageVersion = "15.10.1";
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)({
package/dist/cjs/components/date-time-picker-fc.js CHANGED
@@ -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.9.6";
40
+ var packageVersion = "15.10.1";
41
41
  var analyticsAttributes = {
42
42
  componentName: 'dateTimePicker',
43
43
  packageName: packageName,
package/dist/cjs/components/time-picker.js CHANGED
@@ -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.9.6";
30
+ var packageVersion = "15.10.1";
31
31
  var menuStyles = {
32
32
  /* Need to remove default absolute positioning as that causes issues with position fixed */
33
33
  position: 'static',
package/dist/es2019/components/date-picker-class.js CHANGED
@@ -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, Pressable, xcss } from '@atlaskit/primitives';
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.9.6";
28
+ const packageVersion = "15.10.1";
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 = css({
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: `var(--ds-text-subtlest, ${N70})`,
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
- '&:hover': {
70
- color: `var(--ds-text-subtle, ${N500})`
68
+ ':hover': {
69
+ color: 'color.text.subtle'
71
70
  }
72
71
  });
73
- const iconSpacingWithClearButtonStyles = css({
74
- marginInlineEnd: "var(--ds-space-400, 2rem)"
75
- });
76
- const iconSpacingWithoutClearButtonStylesNew = css({
77
- marginInlineEnd: "var(--ds-space-050, 0.25rem)"
78
- });
79
- const iconSpacingWithoutClearButtonStyles = css({
80
- marginInlineEnd: "var(--ds-space-025, 0.125rem)"
72
+ const iconSpacingWithClearButtonStyles = xcss({
73
+ marginInlineEnd: 'space.400'
81
74
  });
82
- const calendarButtonFixedSizeStyles = xcss({
83
- width: `${32 / 14}em`,
84
- height: `${32 / 14}em`
75
+ const iconSpacingWithoutClearButtonStylesNew = xcss({
76
+ marginInlineEnd: 'space.050'
85
77
  });
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,7 +526,7 @@ class DatePickerComponent extends Component {
540
526
  } : null;
541
527
 
542
528
  // `label` takes precedence of the `inputLabel`
543
- const fullopenCalendarLabel = label || inputLabel ? `${label || inputLabel} , ${openCalendarLabel}` : openCalendarLabel;
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.
@@ -622,30 +608,25 @@ class DatePickerComponent extends Component {
622
608
  prefix: "open-calendar-label--"
623
609
  }, ({
624
610
  id: openCalendarLabelId
625
- }) => jsx("div", {
626
- css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
627
- }, inputLabelId && jsx(VisuallyHidden, {
628
- id: openCalendarLabelId
629
- }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
630
- 'aria-labelledby': `${inputLabelId} ${openCalendarLabelId}`
631
- } : {
632
- 'aria-label': fullopenCalendarLabel
633
- }, {
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
+ })),
634
625
  onClick: this.onCalendarButtonClick,
635
626
  onKeyDown: this.onCalendarButtonKeyDown,
636
627
  ref: this.calendarButtonRef,
637
- testId: testId && `${testId}--open-calendar-button`,
638
- type: "button",
639
- backgroundColor: "color.background.neutral.subtle",
640
- padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
641
- xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
642
- }), jsx(CalendarIcon, _extends({
643
- label: ""
644
- }, fg('platform-visual-refresh-icon-ads-migration') ? {
645
- color: "var(--ds-icon, #44546F)"
646
- } : {
647
- primaryColor: "var(--ds-icon, #44546F)"
648
- }))))) : null)
628
+ testId: testId && `${testId}--open-calendar-button`
629
+ }))) : null)
649
630
  );
650
631
  }
651
632
  }
package/dist/es2019/components/date-picker-fc.js CHANGED
@@ -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, Pressable, xcss } from '@atlaskit/primitives';
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.9.6";
27
+ const packageVersion = "15.10.1";
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,7 +469,7 @@ 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} , ${openCalendarLabel}` : openCalendarLabel;
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
@@ -567,28 +554,21 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
567
554
  xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
568
555
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
569
556
  fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
570
- }, inputLabelId && jsx(VisuallyHidden, {
571
- id: openCalendarLabelId
572
- }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
573
- 'aria-labelledby': `${inputLabelId} ${openCalendarLabelId}`
574
- } : {
575
- 'aria-label': fullopenCalendarLabel
576
- }, {
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
+ })),
577
567
  onClick: onCalendarButtonClick,
578
568
  onKeyDown: onCalendarButtonKeyDown,
579
569
  ref: calendarButtonRef,
580
- testId: testId && `${testId}--open-calendar-button`,
581
- type: "button",
582
- backgroundColor: "color.background.neutral.subtle",
583
- padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
584
- xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
585
- }), jsx(CalendarIcon, _extends({
586
- label: ""
587
- }, fg('platform-visual-refresh-icon-ads-migration') ? {
588
- color: "var(--ds-icon, #44546F)"
589
- } : {
590
- primaryColor: "var(--ds-icon, #44546F)"
591
- })))) : null)
570
+ testId: testId && `${testId}--open-calendar-button`
571
+ })) : null)
592
572
  );
593
573
  });
594
574
  export default DatePicker;
package/dist/es2019/components/date-time-picker-class.js CHANGED
@@ -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.9.6";
25
+ const packageVersion = "15.10.1";
26
26
  // Make DatePicker 50% the width of DateTimePicker
27
27
  // If rendering an icon container, shrink the TimePicker
28
28
  const datePickerContainerStyles = css({
package/dist/es2019/components/date-time-picker-fc.js CHANGED
@@ -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.9.6";
21
+ const packageVersion = "15.10.1";
22
22
  const analyticsAttributes = {
23
23
  componentName: 'dateTimePicker',
24
24
  packageName,
package/dist/es2019/components/time-picker.js CHANGED
@@ -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.9.6";
14
+ const packageVersion = "15.10.1";
15
15
  const menuStyles = {
16
16
  /* Need to remove default absolute positioning as that causes issues with position fixed */
17
17
  position: 'static',
package/dist/esm/components/date-picker-class.js CHANGED
@@ -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, Pressable, xcss } from '@atlaskit/primitives';
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.9.6";
38
+ var packageVersion = "15.10.1";
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 = css({
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: "var(--ds-text-subtlest, ".concat(N70, ")"),
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
- '&:hover': {
82
- color: "var(--ds-text-subtle, ".concat(N500, ")")
80
+ ':hover': {
81
+ color: 'color.text.subtle'
83
82
  }
84
83
  });
85
- var iconSpacingWithClearButtonStyles = css({
86
- marginInlineEnd: "var(--ds-space-400, 2rem)"
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 iconSpacingWithoutClearButtonStyles = css({
92
- marginInlineEnd: "var(--ds-space-025, 0.125rem)"
87
+ var iconSpacingWithoutClearButtonStylesNew = xcss({
88
+ marginInlineEnd: 'space.050'
93
89
  });
94
- var calendarButtonFixedSizeStyles = xcss({
95
- width: "".concat(32 / 14, "em"),
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,7 +543,7 @@ 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, " , ").concat(openCalendarLabel) : openCalendarLabel;
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.
@@ -639,30 +625,27 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
639
625
  prefix: "open-calendar-label--"
640
626
  }, function (_ref3) {
641
627
  var openCalendarLabelId = _ref3.id;
642
- return jsx("div", {
643
- css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
644
- }, inputLabelId && jsx(VisuallyHidden, {
645
- id: openCalendarLabelId
646
- }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
647
- 'aria-labelledby': "".concat(inputLabelId, " ").concat(openCalendarLabelId)
648
- } : {
649
- 'aria-label': fullopenCalendarLabel
650
- }, {
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
+ },
651
644
  onClick: _this2.onCalendarButtonClick,
652
645
  onKeyDown: _this2.onCalendarButtonKeyDown,
653
646
  ref: _this2.calendarButtonRef,
654
- testId: testId && "".concat(testId, "--open-calendar-button"),
655
- type: "button",
656
- backgroundColor: "color.background.neutral.subtle",
657
- padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
658
- xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
659
- }), jsx(CalendarIcon, _extends({
660
- label: ""
661
- }, fg('platform-visual-refresh-icon-ads-migration') ? {
662
- color: "var(--ds-icon, #44546F)"
663
- } : {
664
- primaryColor: "var(--ds-icon, #44546F)"
665
- }))));
647
+ testId: testId && "".concat(testId, "--open-calendar-button")
648
+ }));
666
649
  }) : null)
667
650
  );
668
651
  }
package/dist/esm/components/date-picker-fc.js CHANGED
@@ -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, Pressable, xcss } from '@atlaskit/primitives';
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.9.6";
33
+ var packageVersion = "15.10.1";
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,7 +534,7 @@ 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, " , ").concat(openCalendarLabel) : openCalendarLabel;
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
@@ -632,28 +619,23 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
632
619
  xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles :
633
620
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
634
621
  fg('platform-visual-refresh-icon-ads-migration') ? iconSpacingWithoutClearButtonStylesNew : iconSpacingWithoutClearButtonStyles]
635
- }, inputLabelId && jsx(VisuallyHidden, {
636
- id: openCalendarLabelId
637
- }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
638
- 'aria-labelledby': "".concat(inputLabelId, " ").concat(openCalendarLabelId)
639
- } : {
640
- 'aria-label': fullopenCalendarLabel
641
- }, {
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
+ },
642
634
  onClick: onCalendarButtonClick,
643
635
  onKeyDown: onCalendarButtonKeyDown,
644
636
  ref: calendarButtonRef,
645
- testId: testId && "".concat(testId, "--open-calendar-button"),
646
- type: "button",
647
- backgroundColor: "color.background.neutral.subtle",
648
- padding: fg('platform-visual-refresh-icon-ads-migration') ? 'space.0' : 'space.050',
649
- xcss: [calendarButtonStyles, fg('platform-visual-refresh-icon-ads-migration') && calendarButtonFixedSizeStyles]
650
- }), jsx(CalendarIcon, _extends({
651
- label: ""
652
- }, fg('platform-visual-refresh-icon-ads-migration') ? {
653
- color: "var(--ds-icon, #44546F)"
654
- } : {
655
- primaryColor: "var(--ds-icon, #44546F)"
656
- })))) : null)
637
+ testId: testId && "".concat(testId, "--open-calendar-button")
638
+ })) : null)
657
639
  );
658
640
  });
659
641
  export default DatePicker;
package/dist/esm/components/date-time-picker-class.js CHANGED
@@ -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.9.6";
37
+ var packageVersion = "15.10.1";
38
38
  // Make DatePicker 50% the width of DateTimePicker
39
39
  // If rendering an icon container, shrink the TimePicker
40
40
  var datePickerContainerStyles = css({
package/dist/esm/components/date-time-picker-fc.js CHANGED
@@ -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.9.6";
30
+ var packageVersion = "15.10.1";
31
31
  var analyticsAttributes = {
32
32
  componentName: 'dateTimePicker',
33
33
  packageName: packageName,
package/dist/esm/components/time-picker.js CHANGED
@@ -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.9.6";
20
+ var packageVersion = "15.10.1";
21
21
  var menuStyles = {
22
22
  /* Need to remove default absolute positioning as that causes issues with position fixed */
23
23
  position: 'static',
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
  /**
package/dist/types-ts4.5/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
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/datetime-picker",
3
- "version": "15.9.6",
3
+ "version": "15.10.1",
4
4
  "description": "A date time picker allows the user to select an associated date and time.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -37,17 +37,17 @@
37
37
  "runReact18": true
38
38
  },
39
39
  "dependencies": {
40
- "@atlaskit/analytics-next": "^10.1.0",
40
+ "@atlaskit/analytics-next": "^10.2.0",
41
41
  "@atlaskit/button": "^20.3.1",
42
42
  "@atlaskit/calendar": "^15.1.0",
43
43
  "@atlaskit/ds-lib": "^3.3.0",
44
- "@atlaskit/icon": "^23.0.0",
45
- "@atlaskit/layering": "^0.8.0",
44
+ "@atlaskit/icon": "^23.1.0",
45
+ "@atlaskit/layering": "^1.0.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
49
  "@atlaskit/primitives": "^13.3.0",
50
- "@atlaskit/select": "^18.7.0",
50
+ "@atlaskit/select": "^18.8.0",
51
51
  "@atlaskit/theme": "^14.0.0",
52
52
  "@atlaskit/tokens": "^2.4.0",
53
53
  "@atlaskit/visually-hidden": "^1.5.0",
@@ -67,10 +67,10 @@
67
67
  "@atlaskit/form": "^10.6.0",
68
68
  "@atlaskit/modal-dialog": "^12.18.0",
69
69
  "@atlaskit/popup": "^1.30.0",
70
- "@atlaskit/range": "^7.4.0",
70
+ "@atlaskit/range": "^8.0.0",
71
71
  "@atlaskit/section-message": "^6.8.0",
72
72
  "@atlaskit/ssr": "*",
73
- "@atlaskit/textfield": "^6.6.0",
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": "*",