@atlaskit/datetime-picker 19.0.0 → 19.0.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 (17) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/components/date-picker.js +6 -2
  3. package/dist/cjs/components/date-time-picker.js +95 -65
  4. package/dist/cjs/components/time-picker.js +6 -2
  5. package/dist/cjs/internal/date-time-picker-container.compiled.css +3 -1
  6. package/dist/cjs/internal/date-time-picker-container.js +8 -1
  7. package/dist/es2019/components/date-picker.js +12 -5
  8. package/dist/es2019/components/date-time-picker.js +39 -12
  9. package/dist/es2019/components/time-picker.js +11 -4
  10. package/dist/es2019/internal/date-time-picker-container.compiled.css +3 -1
  11. package/dist/es2019/internal/date-time-picker-container.js +8 -1
  12. package/dist/esm/components/date-picker.js +6 -2
  13. package/dist/esm/components/date-time-picker.js +96 -66
  14. package/dist/esm/components/time-picker.js +6 -2
  15. package/dist/esm/internal/date-time-picker-container.compiled.css +3 -1
  16. package/dist/esm/internal/date-time-picker-container.js +8 -1
  17. package/package.json +12 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/datetime-picker
2
2
 
3
+ ## 19.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`164b63cff3429`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/164b63cff3429) -
8
+ [ux] Add input hover, focus, blur, and invalid-state motion to Date Picker, Time Picker, and
9
+ DateTime Picker input surfaces behind the `platform-dst-motion-uplift-input` feature gate. Behind
10
+ the same gate, the focused DateTime Picker date or time input shows a 2px focus ring that covers
11
+ the outer border and rounds its outer corners, and the invalid state matches the other pickers.
12
+ - Updated dependencies
13
+
3
14
  ## 19.0.0
4
15
 
5
16
  ### Major Changes
package/dist/cjs/components/date-picker.js CHANGED
@@ -47,7 +47,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
47
47
  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; }
48
48
  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; }
49
49
  var packageName = "@atlaskit/datetime-picker";
50
- var packageVersion = "18.7.4";
50
+ var packageVersion = "19.0.0";
51
51
  var styles = {
52
52
  pickerContainerStyle: "_kqswh2mm",
53
53
  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -549,9 +549,13 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
549
549
  */
550
550
  menuInnerWrapper: props === null || props === void 0 ? void 0 : props.menuInnerWrapper
551
551
  };
552
+ var isInputMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-input');
552
553
  var mergedStyles = (0, _styles.mergeStyles)(selectStyles, {
553
554
  control: function control(base) {
554
- return _objectSpread(_objectSpread({}, base), disabledStyle);
555
+ var _base$transition;
556
+ return _objectSpread(_objectSpread(_objectSpread({}, base), isInputMotionEnabled && !isDisabled ? {
557
+ transition: (_base$transition = base.transition) !== null && _base$transition !== void 0 ? _base$transition : "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
558
+ } : {}), disabledStyle);
555
559
  },
556
560
  indicatorsContainer: function indicatorsContainer(base) {
557
561
  return _objectSpread(_objectSpread({}, base), {}, {
package/dist/cjs/components/date-time-picker.js CHANGED
@@ -18,6 +18,7 @@ var _dateFns = require("date-fns");
18
18
  var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
19
19
  var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
20
20
  var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
21
+ var _fg = require("@atlaskit/platform-feature-flags/fg");
21
22
  var _compiled = require("@atlaskit/primitives/compiled");
22
23
  var _styles = require("@atlaskit/react-select/styles");
23
24
  var _dateTimePickerContainer = require("../internal/date-time-picker-container");
@@ -33,7 +34,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
33
34
  // for typing `process`
34
35
  // oxlint-disable-next-line @atlassian/no-restricted-imports
35
36
  var packageName = "@atlaskit/datetime-picker";
36
- var packageVersion = "18.7.4";
37
+ var packageVersion = "19.0.0";
37
38
  var analyticsAttributes = {
38
39
  componentName: 'dateTimePicker',
39
40
  packageName: packageName,
@@ -44,21 +45,42 @@ var compiledStyles = {
44
45
  timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
45
46
  iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
46
47
  };
48
+ var innerCornerRadius = "calc(".concat("var(--ds-radius-medium, 6px)", " - ", "var(--ds-border-width, 1px)", ")");
49
+ var cornerRadiusStyles = {
50
+ start: {
51
+ borderStartStartRadius: innerCornerRadius,
52
+ borderEndStartRadius: innerCornerRadius
53
+ },
54
+ end: {
55
+ borderStartEndRadius: innerCornerRadius,
56
+ borderEndEndRadius: innerCornerRadius
57
+ },
58
+ none: {}
59
+ };
47
60
 
48
61
  // react-select overrides (via @atlaskit/select).
49
- var styles = {
50
- control: function control(style) {
51
- return _objectSpread(_objectSpread({}, style), {}, {
52
- backgroundColor: 'transparent',
53
- border: 2,
54
- borderRadius: 0,
55
- paddingLeft: 0,
56
- ':hover': {
62
+ var getStyles = function getStyles(isInputMotionEnabled, roundedCorners) {
63
+ return {
64
+ control: function control(style, _ref) {
65
+ var isDisabled = _ref.isDisabled,
66
+ isFocused = _ref.isFocused;
67
+ return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), isInputMotionEnabled && !isDisabled ? {
68
+ transition: "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
69
+ } : {}), {}, {
57
70
  backgroundColor: 'transparent',
58
- cursor: 'inherit'
59
- }
60
- });
61
- }
71
+ border: 2,
72
+ borderRadius: 0
73
+ }, isInputMotionEnabled ? _objectSpread(_objectSpread({}, cornerRadiusStyles[roundedCorners]), {}, {
74
+ boxShadow: isFocused ? "0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, #4688EC)", ", inset 0 0 0 ", "var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, #4688EC)") : 'none'
75
+ }) : {}), {}, {
76
+ paddingLeft: 0,
77
+ ':hover': {
78
+ backgroundColor: 'transparent',
79
+ cursor: 'inherit'
80
+ }
81
+ });
82
+ }
83
+ };
62
84
  };
63
85
 
64
86
  /**
@@ -85,49 +107,50 @@ var timePickerDefaultAriaLabel = exports.timePickerDefaultAriaLabel = 'Time';
85
107
  * - [Code](https://atlassian.design/components/datetime-picker/code)
86
108
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
87
109
  */
88
- var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
89
- var ariaDescribedBy = _ref['aria-describedby'],
90
- _ref$appearance = _ref.appearance,
91
- appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
92
- _ref$autoFocus = _ref.autoFocus,
93
- autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
94
- _ref$clearControlLabe = _ref.clearControlLabel,
95
- clearControlLabel = _ref$clearControlLabe === void 0 ? 'clear' : _ref$clearControlLabe,
96
- _ref$datePickerProps = _ref.datePickerProps,
97
- datePickerPropsWithSelectProps = _ref$datePickerProps === void 0 ? {} : _ref$datePickerProps,
98
- _ref$defaultValue = _ref.defaultValue,
99
- defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
100
- _ref$id = _ref.id,
101
- id = _ref$id === void 0 ? '' : _ref$id,
102
- _ref$innerProps = _ref.innerProps,
103
- innerProps = _ref$innerProps === void 0 ? {} : _ref$innerProps,
104
- _ref$isDisabled = _ref.isDisabled,
105
- isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
106
- _ref$isInvalid = _ref.isInvalid,
107
- isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
108
- _ref$isRequired = _ref.isRequired,
109
- isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
110
- _ref$name = _ref.name,
111
- name = _ref$name === void 0 ? '' : _ref$name,
112
- _ref$onBlur = _ref.onBlur,
113
- onBlur = _ref$onBlur === void 0 ? function (_event) {} : _ref$onBlur,
114
- _ref$onChange = _ref.onChange,
115
- onChangeProp = _ref$onChange === void 0 ? function (_value) {} : _ref$onChange,
116
- _ref$onFocus = _ref.onFocus,
117
- onFocus = _ref$onFocus === void 0 ? function (_event) {} : _ref$onFocus,
118
- providedParseValue = _ref.parseValue,
119
- _ref$spacing = _ref.spacing,
120
- spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
121
- _ref$locale = _ref.locale,
122
- locale = _ref$locale === void 0 ? 'en-US' : _ref$locale,
123
- testId = _ref.testId,
124
- _ref$timePickerProps = _ref.timePickerProps,
125
- timePickerPropsWithSelectProps = _ref$timePickerProps === void 0 ? {} : _ref$timePickerProps,
126
- providedValue = _ref.value;
110
+ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
111
+ var ariaDescribedBy = _ref2['aria-describedby'],
112
+ _ref2$appearance = _ref2.appearance,
113
+ appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
114
+ _ref2$autoFocus = _ref2.autoFocus,
115
+ autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
116
+ _ref2$clearControlLab = _ref2.clearControlLabel,
117
+ clearControlLabel = _ref2$clearControlLab === void 0 ? 'clear' : _ref2$clearControlLab,
118
+ _ref2$datePickerProps = _ref2.datePickerProps,
119
+ datePickerPropsWithSelectProps = _ref2$datePickerProps === void 0 ? {} : _ref2$datePickerProps,
120
+ _ref2$defaultValue = _ref2.defaultValue,
121
+ defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
122
+ _ref2$id = _ref2.id,
123
+ id = _ref2$id === void 0 ? '' : _ref2$id,
124
+ _ref2$innerProps = _ref2.innerProps,
125
+ innerProps = _ref2$innerProps === void 0 ? {} : _ref2$innerProps,
126
+ _ref2$isDisabled = _ref2.isDisabled,
127
+ isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
128
+ _ref2$isInvalid = _ref2.isInvalid,
129
+ isInvalid = _ref2$isInvalid === void 0 ? false : _ref2$isInvalid,
130
+ _ref2$isRequired = _ref2.isRequired,
131
+ isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired,
132
+ _ref2$name = _ref2.name,
133
+ name = _ref2$name === void 0 ? '' : _ref2$name,
134
+ _ref2$onBlur = _ref2.onBlur,
135
+ onBlur = _ref2$onBlur === void 0 ? function (_event) {} : _ref2$onBlur,
136
+ _ref2$onChange = _ref2.onChange,
137
+ onChangeProp = _ref2$onChange === void 0 ? function (_value) {} : _ref2$onChange,
138
+ _ref2$onFocus = _ref2.onFocus,
139
+ onFocus = _ref2$onFocus === void 0 ? function (_event) {} : _ref2$onFocus,
140
+ providedParseValue = _ref2.parseValue,
141
+ _ref2$spacing = _ref2.spacing,
142
+ spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
143
+ _ref2$locale = _ref2.locale,
144
+ locale = _ref2$locale === void 0 ? 'en-US' : _ref2$locale,
145
+ testId = _ref2.testId,
146
+ _ref2$timePickerProps = _ref2.timePickerProps,
147
+ timePickerPropsWithSelectProps = _ref2$timePickerProps === void 0 ? {} : _ref2$timePickerProps,
148
+ providedValue = _ref2.value;
127
149
  var _useState = (0, _react.useState)(false),
128
150
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
129
151
  isFocused = _useState2[0],
130
152
  setIsFocused = _useState2[1];
153
+ var isInputMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-input');
131
154
 
132
155
  /**
133
156
  * Defined inside the component so the reducer closes over `providedParseValue`
@@ -181,8 +204,8 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
181
204
  }
182
205
  };
183
206
  var _useReducer = (0, _react.useReducer)(reducer, null, function () {
184
- var _ref2;
185
- var initialValue = (_ref2 = providedValue !== null && providedValue !== void 0 ? providedValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : '';
207
+ var _ref3;
208
+ var initialValue = (_ref3 = providedValue !== null && providedValue !== void 0 ? providedValue : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
186
209
  var initialDate = (datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '';
187
210
  var initialTime = (timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '';
188
211
  if (!initialValue) {
@@ -344,10 +367,10 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
344
367
  action: 'selectedDate',
345
368
  actionSubject: 'dateTimePicker'
346
369
  }, analyticsAttributes));
347
- var onValueChange = function onValueChange(_ref3) {
348
- var providedDateValue = _ref3.providedDateValue,
349
- providedTimeValue = _ref3.providedTimeValue,
350
- providedZoneValue = _ref3.providedZoneValue;
370
+ var onValueChange = function onValueChange(_ref4) {
371
+ var providedDateValue = _ref4.providedDateValue,
372
+ providedTimeValue = _ref4.providedTimeValue,
373
+ providedZoneValue = _ref4.providedZoneValue;
351
374
  if (providedDateValue && providedTimeValue) {
352
375
  var isoValue = (0, _formatDateTimeZoneIntoIso.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, providedZoneValue);
353
376
  var _parseValue = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue),
@@ -387,24 +410,31 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
387
410
  });
388
411
  }
389
412
  };
413
+
414
+ // Render DateTimePicker's IconContainer when a value has been filled
415
+ // Don't use Date or TimePicker's because they can't be customised
416
+ var isClearable = Boolean(dtState.dateValue || dtState.timeValue);
417
+ var hasClearButton = isClearable && !isDisabled;
418
+ var dateStyles = (0, _react.useMemo)(function () {
419
+ return getStyles(isInputMotionEnabled, 'start');
420
+ }, [isInputMotionEnabled]);
421
+ var timeStyles = (0, _react.useMemo)(function () {
422
+ return getStyles(isInputMotionEnabled, hasClearButton ? 'none' : 'end');
423
+ }, [isInputMotionEnabled, hasClearButton]);
390
424
  var datePickerSelectProps = datePickerPropsWithSelectProps.selectProps,
391
425
  datePickerProps = (0, _objectWithoutProperties2.default)(datePickerPropsWithSelectProps, _excluded);
392
426
  var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
393
427
  var datePickerLabel = datePickerProps.label || 'Date';
394
428
  var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
395
- styles: (0, _styles.mergeStyles)(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
429
+ styles: (0, _styles.mergeStyles)(dateStyles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
396
430
  });
397
431
  var timePickerSelectProps = timePickerPropsWithSelectProps.selectProps,
398
432
  timePickerProps = (0, _objectWithoutProperties2.default)(timePickerPropsWithSelectProps, _excluded2);
399
433
  var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
400
434
  var timePickerLabel = timePickerProps.label || 'Time';
401
435
  var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
402
- styles: (0, _styles.mergeStyles)(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
436
+ styles: (0, _styles.mergeStyles)(timeStyles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
403
437
  });
404
-
405
- // Render DateTimePicker's IconContainer when a value has been filled
406
- // Don't use Date or TimePicker's because they can't be customised
407
- var isClearable = Boolean(dtState.dateValue || dtState.timeValue);
408
438
  return /*#__PURE__*/_react.default.createElement(_dateTimePickerContainer.DateTimePickerContainer, {
409
439
  appearance: appearance,
410
440
  isDisabled: isDisabled,
@@ -490,7 +520,7 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
490
520
  timeIsEditable: timePickerProps.timeIsEditable,
491
521
  times: timePickerProps.times,
492
522
  value: dtState.timeValue
493
- })), isClearable && !isDisabled ? /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
523
+ })), hasClearButton ? /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
494
524
  xcss: compiledStyles.iconContainerStyles
495
525
  }, /*#__PURE__*/_react.default.createElement(_button.default, {
496
526
  appearance: "subtle",
package/dist/cjs/components/time-picker.js CHANGED
@@ -32,7 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
32
32
  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; }
33
33
  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; } // oxlint-disable-next-line @atlassian/no-restricted-imports
34
34
  var packageName = "@atlaskit/datetime-picker";
35
- var packageVersion = "18.7.4";
35
+ var packageVersion = "19.0.0";
36
36
  var defaultTimeFormat = 'h:mma';
37
37
  var menuStyles = {
38
38
  /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -291,9 +291,13 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
291
291
  ClearIndicator: _emptyComponent.EmptyComponent
292
292
  });
293
293
  var renderIconContainer = Boolean(!hideIcon && value);
294
+ var isInputMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-input');
294
295
  var mergedStyles = (0, _styles.mergeStyles)(selectStyles, {
295
296
  control: function control(base) {
296
- return _objectSpread({}, base);
297
+ var _base$transition;
298
+ return _objectSpread(_objectSpread({}, base), isInputMotionEnabled && !isDisabled ? {
299
+ transition: (_base$transition = base.transition) !== null && _base$transition !== void 0 ? _base$transition : "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
300
+ } : {});
297
301
  },
298
302
  menu: function menu(base) {
299
303
  return _objectSpread(_objectSpread(_objectSpread({}, base), menuStyles), {}, {
package/dist/cjs/internal/date-time-picker-container.compiled.css CHANGED
@@ -1,10 +1,12 @@
1
1
  ._19itno8c{border:var(--ds-border-width,1px) solid var(--ds-border-input,#8c8f97)}
2
2
  ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
3
+ ._v56497ke{transition:var(--ds-input,background-color border-color box-shadow .15s cubic-bezier(.4,1,.6,1))}
3
4
  ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
4
5
  ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
5
6
  ._1h6d1j28{border-color:transparent}
6
7
  ._1h6d1v1w{border-color:var(--ds-border-focused,#4688ec)}
7
- ._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}._16qsvyy1{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
8
+ ._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}._16qsizbr{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
9
+ ._16qsvyy1{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
8
10
  ._1e0c1txw{display:flex}
9
11
  ._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
10
12
  ._bfhk1j28{background-color:transparent}
package/dist/cjs/internal/date-time-picker-container.js CHANGED
@@ -12,8 +12,10 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
+ var _fg = require("@atlaskit/platform-feature-flags/fg");
15
16
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
16
17
  var isInvalidBorderStyles = null;
18
+ var isInvalidBorderWithShadowStyles = null;
17
19
  var isFocusedBorderStyles = null;
18
20
  var isFocusedStyles = null;
19
21
  var subtleBgStyles = null;
@@ -24,6 +26,10 @@ var isInvalidHoverStyles = null;
24
26
  var isDisabledStyles = null;
25
27
  var newBorderStyles = null;
26
28
  var baseContainerStyles = null;
29
+ var inputMotionStyles = {
30
+ legacy: "_v564r5cv",
31
+ base: "_v56497ke"
32
+ };
27
33
  /**
28
34
  * This is the container for the datetime picker component.
29
35
  */
@@ -36,11 +42,12 @@ var DateTimePickerContainer = exports.DateTimePickerContainer = /*#__PURE__*/(0,
36
42
  innerProps = _ref.innerProps,
37
43
  testId = _ref.testId;
38
44
  var notFocusedOrIsDisabled = !(isFocused || isDisabled);
45
+ var isInputMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-input');
39
46
 
40
47
  // we cannot use Box or Flex primitives because these do not allow ...innerProps to be passed
41
48
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
42
49
  "data-testid": testId,
43
50
  ref: ref,
44
- className: (0, _runtime.ax)(["_2rko1qi0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
51
+ className: (0, _runtime.ax)(["_2rko1qi0 _1e0c1txw _bfhk1j9a _d0altlke", !isInputMotionEnabled && inputMotionStyles.legacy, isInputMotionEnabled && !isDisabled && inputMotionStyles.base, "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", !isInputMotionEnabled && isInvalid && "_1h6d1bqt", isInputMotionEnabled && isInvalid && "_1h6d1bqt _16qsizbr", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
45
52
  }), children);
46
53
  });
package/dist/es2019/components/date-picker.js CHANGED
@@ -32,7 +32,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
32
32
  import { parseDate } from '../internal/parse-date';
33
33
  import { makeSingleValue } from '../internal/single-value';
34
34
  const packageName = "@atlaskit/datetime-picker";
35
- const packageVersion = "18.7.4";
35
+ const packageVersion = "19.0.0";
36
36
  const styles = {
37
37
  pickerContainerStyle: "_kqswh2mm",
38
38
  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -476,11 +476,18 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
476
476
  */
477
477
  menuInnerWrapper: props === null || props === void 0 ? void 0 : props.menuInnerWrapper
478
478
  };
479
+ const isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
479
480
  const mergedStyles = mergeStyles(selectStyles, {
480
- control: base => ({
481
- ...base,
482
- ...disabledStyle
483
- }),
481
+ control: base => {
482
+ var _base$transition;
483
+ return {
484
+ ...base,
485
+ ...(isInputMotionEnabled && !isDisabled ? {
486
+ transition: (_base$transition = base.transition) !== null && _base$transition !== void 0 ? _base$transition : "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
487
+ } : {}),
488
+ ...disabledStyle
489
+ };
490
+ },
484
491
  indicatorsContainer: base => ({
485
492
  ...base,
486
493
  paddingLeft: "var(--ds-space-025, 2px)",
package/dist/es2019/components/date-time-picker.js CHANGED
@@ -5,13 +5,14 @@ import { ax, ix } from "@compiled/react/runtime";
5
5
  /// <reference types="node" />
6
6
  // for typing `process`
7
7
 
8
- import React, { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from 'react';
8
+ import React, { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
9
9
 
10
10
  // oxlint-disable-next-line @atlassian/no-restricted-imports
11
11
  import { format, isValid, parseISO } from 'date-fns';
12
12
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
13
13
  import IconButton from '@atlaskit/button/icon/button';
14
14
  import SelectClearIcon from '@atlaskit/icon/core/cross-circle';
15
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
15
16
  import { Box, Inline } from '@atlaskit/primitives/compiled';
16
17
  import { mergeStyles } from '@atlaskit/react-select/styles';
17
18
  import { DateTimePickerContainer } from '../internal/date-time-picker-container';
@@ -20,7 +21,7 @@ import { convertTokens } from '../internal/parse-tokens';
20
21
  import DatePicker from './date-picker';
21
22
  import TimePicker from './time-picker';
22
23
  const packageName = "@atlaskit/datetime-picker";
23
- const packageVersion = "18.7.4";
24
+ const packageVersion = "19.0.0";
24
25
  const analyticsAttributes = {
25
26
  componentName: 'dateTimePicker',
26
27
  packageName,
@@ -31,21 +32,43 @@ const compiledStyles = {
31
32
  timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
32
33
  iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
33
34
  };
35
+ const innerCornerRadius = `calc(${"var(--ds-radius-medium, 6px)"} - ${"var(--ds-border-width, 1px)"})`;
36
+ const cornerRadiusStyles = {
37
+ start: {
38
+ borderStartStartRadius: innerCornerRadius,
39
+ borderEndStartRadius: innerCornerRadius
40
+ },
41
+ end: {
42
+ borderStartEndRadius: innerCornerRadius,
43
+ borderEndEndRadius: innerCornerRadius
44
+ },
45
+ none: {}
46
+ };
34
47
 
35
48
  // react-select overrides (via @atlaskit/select).
36
- const styles = {
37
- control: style => ({
49
+ const getStyles = (isInputMotionEnabled, roundedCorners) => ({
50
+ control: (style, {
51
+ isDisabled,
52
+ isFocused
53
+ }) => ({
38
54
  ...style,
55
+ ...(isInputMotionEnabled && !isDisabled ? {
56
+ transition: "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
57
+ } : {}),
39
58
  backgroundColor: 'transparent',
40
59
  border: 2,
41
60
  borderRadius: 0,
61
+ ...(isInputMotionEnabled ? {
62
+ ...cornerRadiusStyles[roundedCorners],
63
+ boxShadow: isFocused ? `0 0 0 ${"var(--ds-border-width, 1px)"} ${"var(--ds-border-focused, #4688EC)"}, inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${"var(--ds-border-focused, #4688EC)"}` : 'none'
64
+ } : {}),
42
65
  paddingLeft: 0,
43
66
  ':hover': {
44
67
  backgroundColor: 'transparent',
45
68
  cursor: 'inherit'
46
69
  }
47
70
  })
48
- };
71
+ });
49
72
 
50
73
  /**
51
74
  * Two action types keep the reducer focused:
@@ -99,6 +122,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
99
122
  value: providedValue
100
123
  }, ref) => {
101
124
  const [isFocused, setIsFocused] = useState(false);
125
+ const isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
102
126
 
103
127
  /**
104
128
  * Defined inside the component so the reducer closes over `providedParseValue`
@@ -360,6 +384,13 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
360
384
  });
361
385
  }
362
386
  };
387
+
388
+ // Render DateTimePicker's IconContainer when a value has been filled
389
+ // Don't use Date or TimePicker's because they can't be customised
390
+ const isClearable = Boolean(dtState.dateValue || dtState.timeValue);
391
+ const hasClearButton = isClearable && !isDisabled;
392
+ const dateStyles = useMemo(() => getStyles(isInputMotionEnabled, 'start'), [isInputMotionEnabled]);
393
+ const timeStyles = useMemo(() => getStyles(isInputMotionEnabled, hasClearButton ? 'none' : 'end'), [isInputMotionEnabled, hasClearButton]);
363
394
  const {
364
395
  selectProps: datePickerSelectProps,
365
396
  ...datePickerProps
@@ -368,7 +399,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
368
399
  const datePickerLabel = datePickerProps.label || 'Date';
369
400
  const mergedDatePickerSelectProps = {
370
401
  ...datePickerSelectProps,
371
- styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
402
+ styles: mergeStyles(dateStyles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
372
403
  };
373
404
  const {
374
405
  selectProps: timePickerSelectProps,
@@ -378,12 +409,8 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
378
409
  const timePickerLabel = timePickerProps.label || 'Time';
379
410
  const mergedTimePickerSelectProps = {
380
411
  ...timePickerSelectProps,
381
- styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
412
+ styles: mergeStyles(timeStyles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
382
413
  };
383
-
384
- // Render DateTimePicker's IconContainer when a value has been filled
385
- // Don't use Date or TimePicker's because they can't be customised
386
- const isClearable = Boolean(dtState.dateValue || dtState.timeValue);
387
414
  return /*#__PURE__*/React.createElement(DateTimePickerContainer, {
388
415
  appearance: appearance,
389
416
  isDisabled: isDisabled,
@@ -469,7 +496,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
469
496
  timeIsEditable: timePickerProps.timeIsEditable,
470
497
  times: timePickerProps.times,
471
498
  value: dtState.timeValue
472
- })), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(Inline, {
499
+ })), hasClearButton ? /*#__PURE__*/React.createElement(Inline, {
473
500
  xcss: compiledStyles.iconContainerStyles
474
501
  }, /*#__PURE__*/React.createElement(IconButton, {
475
502
  appearance: "subtle",
package/dist/es2019/components/time-picker.js CHANGED
@@ -19,7 +19,7 @@ import { convertTokens } from '../internal/parse-tokens';
19
19
  import { placeholderDatetime } from '../internal/placeholder-date-time';
20
20
  import { makeSingleValue } from '../internal/single-value';
21
21
  const packageName = "@atlaskit/datetime-picker";
22
- const packageVersion = "18.7.4";
22
+ const packageVersion = "19.0.0";
23
23
  const defaultTimeFormat = 'h:mma';
24
24
  const menuStyles = {
25
25
  /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -241,10 +241,17 @@ const TimePicker = /*#__PURE__*/forwardRef(({
241
241
  })
242
242
  };
243
243
  const renderIconContainer = Boolean(!hideIcon && value);
244
+ const isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
244
245
  const mergedStyles = mergeStyles(selectStyles, {
245
- control: base => ({
246
- ...base
247
- }),
246
+ control: base => {
247
+ var _base$transition;
248
+ return {
249
+ ...base,
250
+ ...(isInputMotionEnabled && !isDisabled ? {
251
+ transition: (_base$transition = base.transition) !== null && _base$transition !== void 0 ? _base$transition : "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
252
+ } : {})
253
+ };
254
+ },
248
255
  menu: base => ({
249
256
  ...base,
250
257
  ...menuStyles,
package/dist/es2019/internal/date-time-picker-container.compiled.css CHANGED
@@ -1,10 +1,12 @@
1
1
  ._19itno8c{border:var(--ds-border-width,1px) solid var(--ds-border-input,#8c8f97)}
2
2
  ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
3
+ ._v56497ke{transition:var(--ds-input,background-color border-color box-shadow .15s cubic-bezier(.4,1,.6,1))}
3
4
  ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
4
5
  ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
5
6
  ._1h6d1j28{border-color:transparent}
6
7
  ._1h6d1v1w{border-color:var(--ds-border-focused,#4688ec)}
7
- ._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}._16qsvyy1{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
8
+ ._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}._16qsizbr{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
9
+ ._16qsvyy1{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
8
10
  ._1e0c1txw{display:flex}
9
11
  ._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
10
12
  ._bfhk1j28{background-color:transparent}
package/dist/es2019/internal/date-time-picker-container.js CHANGED
@@ -4,7 +4,9 @@ import "./date-time-picker-container.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { forwardRef } from 'react';
7
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
7
8
  const isInvalidBorderStyles = null;
9
+ const isInvalidBorderWithShadowStyles = null;
8
10
  const isFocusedBorderStyles = null;
9
11
  const isFocusedStyles = null;
10
12
  const subtleBgStyles = null;
@@ -15,6 +17,10 @@ const isInvalidHoverStyles = null;
15
17
  const isDisabledStyles = null;
16
18
  const newBorderStyles = null;
17
19
  const baseContainerStyles = null;
20
+ const inputMotionStyles = {
21
+ legacy: "_v564r5cv",
22
+ base: "_v56497ke"
23
+ };
18
24
  /**
19
25
  * This is the container for the datetime picker component.
20
26
  */
@@ -28,11 +34,12 @@ export const DateTimePickerContainer = /*#__PURE__*/forwardRef(({
28
34
  testId
29
35
  }, ref) => {
30
36
  const notFocusedOrIsDisabled = !(isFocused || isDisabled);
37
+ const isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
31
38
 
32
39
  // we cannot use Box or Flex primitives because these do not allow ...innerProps to be passed
33
40
  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
34
41
  "data-testid": testId,
35
42
  ref: ref,
36
- className: ax(["_2rko1qi0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
43
+ className: ax(["_2rko1qi0 _1e0c1txw _bfhk1j9a _d0altlke", !isInputMotionEnabled && inputMotionStyles.legacy, isInputMotionEnabled && !isDisabled && inputMotionStyles.base, "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", !isInputMotionEnabled && isInvalid && "_1h6d1bqt", isInputMotionEnabled && isInvalid && "_1h6d1bqt _16qsizbr", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
37
44
  }), children);
38
45
  });
package/dist/esm/components/date-picker.js CHANGED
@@ -40,7 +40,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
40
40
  import { parseDate } from '../internal/parse-date';
41
41
  import { makeSingleValue } from '../internal/single-value';
42
42
  var packageName = "@atlaskit/datetime-picker";
43
- var packageVersion = "18.7.4";
43
+ var packageVersion = "19.0.0";
44
44
  var styles = {
45
45
  pickerContainerStyle: "_kqswh2mm",
46
46
  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -542,9 +542,13 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
542
542
  */
543
543
  menuInnerWrapper: props === null || props === void 0 ? void 0 : props.menuInnerWrapper
544
544
  };
545
+ var isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
545
546
  var mergedStyles = mergeStyles(selectStyles, {
546
547
  control: function control(base) {
547
- return _objectSpread(_objectSpread({}, base), disabledStyle);
548
+ var _base$transition;
549
+ return _objectSpread(_objectSpread(_objectSpread({}, base), isInputMotionEnabled && !isDisabled ? {
550
+ transition: (_base$transition = base.transition) !== null && _base$transition !== void 0 ? _base$transition : "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
551
+ } : {}), disabledStyle);
548
552
  },
549
553
  indicatorsContainer: function indicatorsContainer(base) {
550
554
  return _objectSpread(_objectSpread({}, base), {}, {
package/dist/esm/components/date-time-picker.js CHANGED
@@ -12,13 +12,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
12
12
  /// <reference types="node" />
13
13
  // for typing `process`
14
14
 
15
- import React, { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from 'react';
15
+ import React, { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
16
16
 
17
17
  // oxlint-disable-next-line @atlassian/no-restricted-imports
18
18
  import { format, isValid, parseISO } from 'date-fns';
19
19
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
20
20
  import IconButton from '@atlaskit/button/icon/button';
21
21
  import SelectClearIcon from '@atlaskit/icon/core/cross-circle';
22
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
22
23
  import { Box, Inline } from '@atlaskit/primitives/compiled';
23
24
  import { mergeStyles } from '@atlaskit/react-select/styles';
24
25
  import { DateTimePickerContainer } from '../internal/date-time-picker-container';
@@ -27,7 +28,7 @@ import { convertTokens } from '../internal/parse-tokens';
27
28
  import DatePicker from './date-picker';
28
29
  import TimePicker from './time-picker';
29
30
  var packageName = "@atlaskit/datetime-picker";
30
- var packageVersion = "18.7.4";
31
+ var packageVersion = "19.0.0";
31
32
  var analyticsAttributes = {
32
33
  componentName: 'dateTimePicker',
33
34
  packageName: packageName,
@@ -38,21 +39,42 @@ var compiledStyles = {
38
39
  timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
39
40
  iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
40
41
  };
42
+ var innerCornerRadius = "calc(".concat("var(--ds-radius-medium, 6px)", " - ", "var(--ds-border-width, 1px)", ")");
43
+ var cornerRadiusStyles = {
44
+ start: {
45
+ borderStartStartRadius: innerCornerRadius,
46
+ borderEndStartRadius: innerCornerRadius
47
+ },
48
+ end: {
49
+ borderStartEndRadius: innerCornerRadius,
50
+ borderEndEndRadius: innerCornerRadius
51
+ },
52
+ none: {}
53
+ };
41
54
 
42
55
  // react-select overrides (via @atlaskit/select).
43
- var styles = {
44
- control: function control(style) {
45
- return _objectSpread(_objectSpread({}, style), {}, {
46
- backgroundColor: 'transparent',
47
- border: 2,
48
- borderRadius: 0,
49
- paddingLeft: 0,
50
- ':hover': {
56
+ var getStyles = function getStyles(isInputMotionEnabled, roundedCorners) {
57
+ return {
58
+ control: function control(style, _ref) {
59
+ var isDisabled = _ref.isDisabled,
60
+ isFocused = _ref.isFocused;
61
+ return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), isInputMotionEnabled && !isDisabled ? {
62
+ transition: "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
63
+ } : {}), {}, {
51
64
  backgroundColor: 'transparent',
52
- cursor: 'inherit'
53
- }
54
- });
55
- }
65
+ border: 2,
66
+ borderRadius: 0
67
+ }, isInputMotionEnabled ? _objectSpread(_objectSpread({}, cornerRadiusStyles[roundedCorners]), {}, {
68
+ boxShadow: isFocused ? "0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, #4688EC)", ", inset 0 0 0 ", "var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, #4688EC)") : 'none'
69
+ }) : {}), {}, {
70
+ paddingLeft: 0,
71
+ ':hover': {
72
+ backgroundColor: 'transparent',
73
+ cursor: 'inherit'
74
+ }
75
+ });
76
+ }
77
+ };
56
78
  };
57
79
 
58
80
  /**
@@ -79,49 +101,50 @@ export var timePickerDefaultAriaLabel = 'Time';
79
101
  * - [Code](https://atlassian.design/components/datetime-picker/code)
80
102
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
81
103
  */
82
- var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
83
- var ariaDescribedBy = _ref['aria-describedby'],
84
- _ref$appearance = _ref.appearance,
85
- appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
86
- _ref$autoFocus = _ref.autoFocus,
87
- autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
88
- _ref$clearControlLabe = _ref.clearControlLabel,
89
- clearControlLabel = _ref$clearControlLabe === void 0 ? 'clear' : _ref$clearControlLabe,
90
- _ref$datePickerProps = _ref.datePickerProps,
91
- datePickerPropsWithSelectProps = _ref$datePickerProps === void 0 ? {} : _ref$datePickerProps,
92
- _ref$defaultValue = _ref.defaultValue,
93
- defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
94
- _ref$id = _ref.id,
95
- id = _ref$id === void 0 ? '' : _ref$id,
96
- _ref$innerProps = _ref.innerProps,
97
- innerProps = _ref$innerProps === void 0 ? {} : _ref$innerProps,
98
- _ref$isDisabled = _ref.isDisabled,
99
- isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
100
- _ref$isInvalid = _ref.isInvalid,
101
- isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
102
- _ref$isRequired = _ref.isRequired,
103
- isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
104
- _ref$name = _ref.name,
105
- name = _ref$name === void 0 ? '' : _ref$name,
106
- _ref$onBlur = _ref.onBlur,
107
- onBlur = _ref$onBlur === void 0 ? function (_event) {} : _ref$onBlur,
108
- _ref$onChange = _ref.onChange,
109
- onChangeProp = _ref$onChange === void 0 ? function (_value) {} : _ref$onChange,
110
- _ref$onFocus = _ref.onFocus,
111
- onFocus = _ref$onFocus === void 0 ? function (_event) {} : _ref$onFocus,
112
- providedParseValue = _ref.parseValue,
113
- _ref$spacing = _ref.spacing,
114
- spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
115
- _ref$locale = _ref.locale,
116
- locale = _ref$locale === void 0 ? 'en-US' : _ref$locale,
117
- testId = _ref.testId,
118
- _ref$timePickerProps = _ref.timePickerProps,
119
- timePickerPropsWithSelectProps = _ref$timePickerProps === void 0 ? {} : _ref$timePickerProps,
120
- providedValue = _ref.value;
104
+ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
105
+ var ariaDescribedBy = _ref2['aria-describedby'],
106
+ _ref2$appearance = _ref2.appearance,
107
+ appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
108
+ _ref2$autoFocus = _ref2.autoFocus,
109
+ autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
110
+ _ref2$clearControlLab = _ref2.clearControlLabel,
111
+ clearControlLabel = _ref2$clearControlLab === void 0 ? 'clear' : _ref2$clearControlLab,
112
+ _ref2$datePickerProps = _ref2.datePickerProps,
113
+ datePickerPropsWithSelectProps = _ref2$datePickerProps === void 0 ? {} : _ref2$datePickerProps,
114
+ _ref2$defaultValue = _ref2.defaultValue,
115
+ defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
116
+ _ref2$id = _ref2.id,
117
+ id = _ref2$id === void 0 ? '' : _ref2$id,
118
+ _ref2$innerProps = _ref2.innerProps,
119
+ innerProps = _ref2$innerProps === void 0 ? {} : _ref2$innerProps,
120
+ _ref2$isDisabled = _ref2.isDisabled,
121
+ isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
122
+ _ref2$isInvalid = _ref2.isInvalid,
123
+ isInvalid = _ref2$isInvalid === void 0 ? false : _ref2$isInvalid,
124
+ _ref2$isRequired = _ref2.isRequired,
125
+ isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired,
126
+ _ref2$name = _ref2.name,
127
+ name = _ref2$name === void 0 ? '' : _ref2$name,
128
+ _ref2$onBlur = _ref2.onBlur,
129
+ onBlur = _ref2$onBlur === void 0 ? function (_event) {} : _ref2$onBlur,
130
+ _ref2$onChange = _ref2.onChange,
131
+ onChangeProp = _ref2$onChange === void 0 ? function (_value) {} : _ref2$onChange,
132
+ _ref2$onFocus = _ref2.onFocus,
133
+ onFocus = _ref2$onFocus === void 0 ? function (_event) {} : _ref2$onFocus,
134
+ providedParseValue = _ref2.parseValue,
135
+ _ref2$spacing = _ref2.spacing,
136
+ spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
137
+ _ref2$locale = _ref2.locale,
138
+ locale = _ref2$locale === void 0 ? 'en-US' : _ref2$locale,
139
+ testId = _ref2.testId,
140
+ _ref2$timePickerProps = _ref2.timePickerProps,
141
+ timePickerPropsWithSelectProps = _ref2$timePickerProps === void 0 ? {} : _ref2$timePickerProps,
142
+ providedValue = _ref2.value;
121
143
  var _useState = useState(false),
122
144
  _useState2 = _slicedToArray(_useState, 2),
123
145
  isFocused = _useState2[0],
124
146
  setIsFocused = _useState2[1];
147
+ var isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
125
148
 
126
149
  /**
127
150
  * Defined inside the component so the reducer closes over `providedParseValue`
@@ -175,8 +198,8 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
175
198
  }
176
199
  };
177
200
  var _useReducer = useReducer(reducer, null, function () {
178
- var _ref2;
179
- var initialValue = (_ref2 = providedValue !== null && providedValue !== void 0 ? providedValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : '';
201
+ var _ref3;
202
+ var initialValue = (_ref3 = providedValue !== null && providedValue !== void 0 ? providedValue : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
180
203
  var initialDate = (datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '';
181
204
  var initialTime = (timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '';
182
205
  if (!initialValue) {
@@ -338,10 +361,10 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
338
361
  action: 'selectedDate',
339
362
  actionSubject: 'dateTimePicker'
340
363
  }, analyticsAttributes));
341
- var onValueChange = function onValueChange(_ref3) {
342
- var providedDateValue = _ref3.providedDateValue,
343
- providedTimeValue = _ref3.providedTimeValue,
344
- providedZoneValue = _ref3.providedZoneValue;
364
+ var onValueChange = function onValueChange(_ref4) {
365
+ var providedDateValue = _ref4.providedDateValue,
366
+ providedTimeValue = _ref4.providedTimeValue,
367
+ providedZoneValue = _ref4.providedZoneValue;
345
368
  if (providedDateValue && providedTimeValue) {
346
369
  var isoValue = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, providedZoneValue);
347
370
  var _parseValue = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue),
@@ -381,24 +404,31 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
381
404
  });
382
405
  }
383
406
  };
407
+
408
+ // Render DateTimePicker's IconContainer when a value has been filled
409
+ // Don't use Date or TimePicker's because they can't be customised
410
+ var isClearable = Boolean(dtState.dateValue || dtState.timeValue);
411
+ var hasClearButton = isClearable && !isDisabled;
412
+ var dateStyles = useMemo(function () {
413
+ return getStyles(isInputMotionEnabled, 'start');
414
+ }, [isInputMotionEnabled]);
415
+ var timeStyles = useMemo(function () {
416
+ return getStyles(isInputMotionEnabled, hasClearButton ? 'none' : 'end');
417
+ }, [isInputMotionEnabled, hasClearButton]);
384
418
  var datePickerSelectProps = datePickerPropsWithSelectProps.selectProps,
385
419
  datePickerProps = _objectWithoutProperties(datePickerPropsWithSelectProps, _excluded);
386
420
  var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
387
421
  var datePickerLabel = datePickerProps.label || 'Date';
388
422
  var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
389
- styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
423
+ styles: mergeStyles(dateStyles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
390
424
  });
391
425
  var timePickerSelectProps = timePickerPropsWithSelectProps.selectProps,
392
426
  timePickerProps = _objectWithoutProperties(timePickerPropsWithSelectProps, _excluded2);
393
427
  var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
394
428
  var timePickerLabel = timePickerProps.label || 'Time';
395
429
  var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
396
- styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
430
+ styles: mergeStyles(timeStyles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
397
431
  });
398
-
399
- // Render DateTimePicker's IconContainer when a value has been filled
400
- // Don't use Date or TimePicker's because they can't be customised
401
- var isClearable = Boolean(dtState.dateValue || dtState.timeValue);
402
432
  return /*#__PURE__*/React.createElement(DateTimePickerContainer, {
403
433
  appearance: appearance,
404
434
  isDisabled: isDisabled,
@@ -484,7 +514,7 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
484
514
  timeIsEditable: timePickerProps.timeIsEditable,
485
515
  times: timePickerProps.times,
486
516
  value: dtState.timeValue
487
- })), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(Inline, {
517
+ })), hasClearButton ? /*#__PURE__*/React.createElement(Inline, {
488
518
  xcss: compiledStyles.iconContainerStyles
489
519
  }, /*#__PURE__*/React.createElement(IconButton, {
490
520
  appearance: "subtle",
package/dist/esm/components/time-picker.js CHANGED
@@ -25,7 +25,7 @@ import { convertTokens } from '../internal/parse-tokens';
25
25
  import { placeholderDatetime } from '../internal/placeholder-date-time';
26
26
  import { makeSingleValue } from '../internal/single-value';
27
27
  var packageName = "@atlaskit/datetime-picker";
28
- var packageVersion = "18.7.4";
28
+ var packageVersion = "19.0.0";
29
29
  var defaultTimeFormat = 'h:mma';
30
30
  var menuStyles = {
31
31
  /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -284,9 +284,13 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
284
284
  ClearIndicator: EmptyComponent
285
285
  });
286
286
  var renderIconContainer = Boolean(!hideIcon && value);
287
+ var isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
287
288
  var mergedStyles = mergeStyles(selectStyles, {
288
289
  control: function control(base) {
289
- return _objectSpread({}, base);
290
+ var _base$transition;
291
+ return _objectSpread(_objectSpread({}, base), isInputMotionEnabled && !isDisabled ? {
292
+ transition: (_base$transition = base.transition) !== null && _base$transition !== void 0 ? _base$transition : "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
293
+ } : {});
290
294
  },
291
295
  menu: function menu(base) {
292
296
  return _objectSpread(_objectSpread(_objectSpread({}, base), menuStyles), {}, {
package/dist/esm/internal/date-time-picker-container.compiled.css CHANGED
@@ -1,10 +1,12 @@
1
1
  ._19itno8c{border:var(--ds-border-width,1px) solid var(--ds-border-input,#8c8f97)}
2
2
  ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
3
+ ._v56497ke{transition:var(--ds-input,background-color border-color box-shadow .15s cubic-bezier(.4,1,.6,1))}
3
4
  ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
4
5
  ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
5
6
  ._1h6d1j28{border-color:transparent}
6
7
  ._1h6d1v1w{border-color:var(--ds-border-focused,#4688ec)}
7
- ._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}._16qsvyy1{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
8
+ ._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}._16qsizbr{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
9
+ ._16qsvyy1{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
8
10
  ._1e0c1txw{display:flex}
9
11
  ._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
10
12
  ._bfhk1j28{background-color:transparent}
package/dist/esm/internal/date-time-picker-container.js CHANGED
@@ -4,7 +4,9 @@ import "./date-time-picker-container.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { forwardRef } from 'react';
7
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
7
8
  var isInvalidBorderStyles = null;
9
+ var isInvalidBorderWithShadowStyles = null;
8
10
  var isFocusedBorderStyles = null;
9
11
  var isFocusedStyles = null;
10
12
  var subtleBgStyles = null;
@@ -15,6 +17,10 @@ var isInvalidHoverStyles = null;
15
17
  var isDisabledStyles = null;
16
18
  var newBorderStyles = null;
17
19
  var baseContainerStyles = null;
20
+ var inputMotionStyles = {
21
+ legacy: "_v564r5cv",
22
+ base: "_v56497ke"
23
+ };
18
24
  /**
19
25
  * This is the container for the datetime picker component.
20
26
  */
@@ -27,11 +33,12 @@ export var DateTimePickerContainer = /*#__PURE__*/forwardRef(function (_ref, ref
27
33
  innerProps = _ref.innerProps,
28
34
  testId = _ref.testId;
29
35
  var notFocusedOrIsDisabled = !(isFocused || isDisabled);
36
+ var isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
30
37
 
31
38
  // we cannot use Box or Flex primitives because these do not allow ...innerProps to be passed
32
39
  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
33
40
  "data-testid": testId,
34
41
  ref: ref,
35
- className: ax(["_2rko1qi0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
42
+ className: ax(["_2rko1qi0 _1e0c1txw _bfhk1j9a _d0altlke", !isInputMotionEnabled && inputMotionStyles.legacy, isInputMotionEnabled && !isDisabled && inputMotionStyles.base, "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", !isInputMotionEnabled && isInvalid && "_1h6d1bqt", isInputMotionEnabled && isInvalid && "_1h6d1bqt _16qsizbr", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
36
43
  }), children);
37
44
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/datetime-picker",
3
- "version": "19.0.0",
3
+ "version": "19.0.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/"
@@ -46,10 +46,10 @@
46
46
  "@atlaskit/popper": "^9.4.0",
47
47
  "@atlaskit/primitives": "^22.5.0",
48
48
  "@atlaskit/react-compiler-gating": "^0.2.0",
49
- "@atlaskit/react-select": "^4.10.0",
50
- "@atlaskit/select": "^23.0.0",
51
- "@atlaskit/tokens": "^20.0.0",
52
- "@atlaskit/top-layer": "^6.0.0",
49
+ "@atlaskit/react-select": "^4.12.0",
50
+ "@atlaskit/select": "^23.1.0",
51
+ "@atlaskit/tokens": "^20.3.0",
52
+ "@atlaskit/top-layer": "^6.1.0",
53
53
  "@babel/runtime": "^7.0.0",
54
54
  "@compiled/react": "^1.0.2",
55
55
  "date-fns": "^2.17.0"
@@ -63,12 +63,12 @@
63
63
  "@af/visual-regression": "workspace:^",
64
64
  "@atlaskit/code": "^20.0.0",
65
65
  "@atlaskit/codemod-utils": "^5.1.0",
66
- "@atlaskit/docs": "^12.2.0",
67
- "@atlaskit/form": "^18.0.0",
66
+ "@atlaskit/docs": "^12.3.0",
67
+ "@atlaskit/form": "^18.1.0",
68
68
  "@atlaskit/heading": "^8.0.0",
69
69
  "@atlaskit/link": "^5.1.0",
70
70
  "@atlaskit/modal-dialog": "^17.0.0",
71
- "@atlaskit/popup": "^6.3.0",
71
+ "@atlaskit/popup": "^9.0.0",
72
72
  "@atlaskit/range": "^12.2.0",
73
73
  "@atlaskit/section-message": "^10.2.0",
74
74
  "@atlaskit/textfield": "^10.2.0",
@@ -96,6 +96,10 @@
96
96
  },
97
97
  "platform-dst-locale-week-start-day": {
98
98
  "type": "boolean"
99
+ },
100
+ "platform-dst-motion-uplift-input": {
101
+ "type": "boolean",
102
+ "referenceOnly": true
99
103
  }
100
104
  },
101
105
  "homepage": "https://atlassian.design/components/datetime-picker/"