@atlaskit/datetime-picker 12.1.1 → 12.1.4

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/datetime-picker
 
+## 12.1.4
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 12.1.3
+
+### Patch Changes
+
+- [`299e4104e10`](https://bitbucket.org/atlassian/atlassian-frontend/commits/299e4104e10) - [ux] Added appearance 'none' option to component and adopts appearance handling from @atlaskit/select
+- Updated dependencies
+
+## 12.1.2
+
+### Patch Changes
+
+- [`df3d5287649`](https://bitbucket.org/atlassian/atlassian-frontend/commits/df3d5287649) - Internal code change turning on new linting rules.
+- [`429a576a4b2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/429a576a4b2) - fix change-event firing for invalid inputs in datetime-picker select.
+- [`84afee665fc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/84afee665fc) - [ux] Implemented missing functionality to submit forms on enter press after a date has been selected in DatePicker
+- [`2a2dcc1cf91`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2a2dcc1cf91) - Updated styles to use new input design tokens. Fixed bug where border radius on datePicker rendered incorrectly.
+- Updated dependencies
+
 ## 12.1.1
 
 ### Patch Changes

package/dist/cjs/components/{DatePicker.js → date-picker.js}

@@ -51,7 +51,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _internal = require("../internal");
 
-var _FixedLayer = _interopRequireDefault(require("../internal/FixedLayer"));
+var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
 
 var _utils = require("./utils");
 
@@ -68,7 +68,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.1";
+var packageVersion = "12.1.4";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -86,15 +86,16 @@ function getValidDate(iso) {
 
 var menuStyles = (0, _core.css)({
   zIndex: _constants.layers.dialog(),
-  backgroundColor: "var(--ds-surface, ".concat(_colors.N20, ")"),
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N20, ")"),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+  overflow: 'hidden'
 });
 
 var Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
       innerProps = _ref.innerProps;
-  return (0, _core.jsx)(_FixedLayer.default, {
+  return (0, _core.jsx)(_fixedLayer.default, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
     content: (0, _core.jsx)("div", (0, _extends2.default)({
@@ -318,12 +319,21 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           break;
 
         case 'enter':
-          // Prevent form submission when a date is selected
+          if (!_this.state.isOpen) {
+            return;
+          } // Prevent form submission when a date is selected
           // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
           // for more details.
+
+
           event.preventDefault();
 
           if (!_this.isDateDisabled(view)) {
+            var _this$getSafeState3 = _this.getSafeState(),
+                _value = _this$getSafeState3.value;
+
+            var valueChanged = view !== _value;
+
             _this.setState({
               inputValue: '',
               isOpen: false,
@@ -332,7 +342,9 @@ var DatePicker = /*#__PURE__*/function (_Component) {
               view: view
             });
 
-            _this.props.onChange(view);
+            if (valueChanged) {
+              _this.props.onChange(view);
+            }
           }
 
           break;
@@ -388,13 +400,6 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         _this.forceUpdate();
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSubtleControlStyles", function () {
-      return {
-        border: "2px solid ".concat(_this.getSafeState().isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "transparent"),
-        backgroundColor: 'transparent',
-        padding: '1px'
-      };
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "parseDate", function (date) {
       var _this$props = _this.props,
           parseInputValue = _this$props.parseInputValue,
@@ -404,8 +409,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         return parseInputValue(date, dateFormat || _internal.defaultDateFormat);
       }
 
-      var _this$getSafeState3 = _this.getSafeState(),
-          l10n = _this$getSafeState3.l10n;
+      var _this$getSafeState4 = _this.getSafeState(),
+          l10n = _this$getSafeState4.l10n;
 
       return l10n.parseDate(date);
     });
@@ -414,8 +419,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           formatDisplayLabel = _this$props2.formatDisplayLabel,
           dateFormat = _this$props2.dateFormat;
 
-      var _this$getSafeState4 = _this.getSafeState(),
-          l10n = _this$getSafeState4.l10n;
+      var _this$getSafeState5 = _this.getSafeState(),
+          l10n = _this$getSafeState5.l10n;
 
       if (formatDisplayLabel) {
         return formatDisplayLabel(value, dateFormat || _internal.defaultDateFormat);
@@ -431,8 +436,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         return placeholder;
       }
 
-      var _this$getSafeState5 = _this.getSafeState(),
-          l10n = _this$getSafeState5.l10n;
+      var _this$getSafeState6 = _this.getSafeState(),
+          l10n = _this$getSafeState6.l10n;
 
       return l10n.formatDate(_internal.placeholderDatetime);
     });
@@ -492,11 +497,11 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           weekStartDay = _this$props3.weekStartDay;
       var ICON_PADDING = 2;
 
-      var _this$getSafeState6 = this.getSafeState(),
-          value = _this$getSafeState6.value,
-          view = _this$getSafeState6.view,
-          isOpen = _this$getSafeState6.isOpen,
-          inputValue = _this$getSafeState6.inputValue;
+      var _this$getSafeState7 = this.getSafeState(),
+          value = _this$getSafeState7.value,
+          view = _this$getSafeState7.view,
+          isOpen = _this$getSafeState7.isOpen,
+          inputValue = _this$getSafeState7.inputValue;
 
       var menuIsOpen = isOpen && !isDisabled;
       var showClearIndicator = Boolean((value || inputValue) && !hideIcon);
@@ -512,7 +517,6 @@ var DatePicker = /*#__PURE__*/function (_Component) {
 
       var _selectProps$styles = selectProps.styles,
           selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;
-      var controlStyles = appearance === 'subtle' ? this.getSubtleControlStyles() : {};
       var disabledStyle = isDisabled ? {
         pointerEvents: 'none'
       } : {};
@@ -546,6 +550,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         value: value,
         "data-testid": testId && "".concat(testId, "--input")
       }), (0, _core.jsx)(_select.default, (0, _extends2.default)({
+        appearance: this.props.appearance,
         enableAnimation: false,
         menuIsOpen: menuIsOpen,
         closeMenuOnSelect: true,
@@ -560,7 +565,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         onChange: this.onSelectChange,
         styles: (0, _select.mergeStyles)(selectStyles, {
           control: function control(base) {
-            return _objectSpread(_objectSpread(_objectSpread({}, base), controlStyles), disabledStyle);
+            return _objectSpread(_objectSpread({}, base), disabledStyle);
           },
           indicatorsContainer: function indicatorsContainer(base) {
             return _objectSpread(_objectSpread({}, base), {}, {

package/dist/cjs/components/{DateTimePicker.js → date-time-picker.js}

@@ -43,9 +43,9 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _internal = require("../internal");
 
-var _DatePicker = _interopRequireDefault(require("./DatePicker"));
+var _datePicker = _interopRequireDefault(require("./date-picker"));
 
-var _TimePicker = _interopRequireDefault(require("./TimePicker"));
+var _timePicker = _interopRequireDefault(require("./time-picker"));
 
 var _utils = require("./utils");
 
@@ -58,7 +58,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.1";
+var packageVersion = "12.1.4";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = (0, _core.css)({
@@ -68,16 +68,28 @@ var isFocusedBorderStyles = (0, _core.css)({
   borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
 });
 var isFocusedStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-surface, ".concat(_colors.N0, ")")
+  backgroundColor: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")")
 });
 var subtleBgStyles = (0, _core.css)({
   backgroundColor: 'transparent',
   borderColor: 'transparent'
 });
+var subtleFocusedBgStyles = (0, _core.css)({
+  backgroundColor: "var(--ds-background-input-pressed, transparent)",
+  borderColor: 'transparent'
+});
+var noBgStyles = (0, _core.css)({
+  backgroundColor: 'transparent',
+  borderColor: 'transparent',
+  '&:hover': {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent'
+  }
+});
 var hoverStyles = (0, _core.css)({
   '&:hover': {
     backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
-    borderColor: "var(--ds-border, ".concat(_colors.N30, ")")
+    borderColor: "var(--ds-border-input, ".concat(_colors.N30, ")")
   }
 });
 var isInvalidHoverStyles = (0, _core.css)({
@@ -93,8 +105,8 @@ var isDisabledStyles = (0, _core.css)({
 });
 var baseContainerStyles = (0, _core.css)({
   display: 'flex',
-  backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
-  border: "2px solid ".concat("var(--ds-border, ".concat(_colors.N20, ")")),
+  backgroundColor: "var(--ds-background-input, ".concat(_colors.N20, ")"),
+  border: "2px solid ".concat("var(--ds-border-input, ".concat(_colors.N20, ")")),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
   '&:hover': {
@@ -328,7 +340,7 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
       var notFocusedOrIsDisabled = !(isFocused || isDisabled);
       var labelId = (datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.inputId) || (timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.inputId) || '';
       return (0, _core.jsx)("div", (0, _extends2.default)({
-        css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && subtleBgStyles, isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles)]
+        css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles), bothProps.appearance === 'none' && noBgStyles]
       }, innerProps, {
         "data-testid": testId
       }), (0, _core.jsx)("input", {
@@ -338,7 +350,7 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         value: value
       }), (0, _core.jsx)("div", {
         css: datePickerContainerStyles
-      }, (0, _core.jsx)(_DatePicker.default, (0, _extends2.default)({}, bothProps, {
+      }, (0, _core.jsx)(_datePicker.default, (0, _extends2.default)({}, bothProps, {
         autoFocus: autoFocus,
         dateFormat: dateFormat,
         hideIcon: true,
@@ -350,7 +362,7 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         testId: testId && "".concat(testId, "--datepicker")
       }, datePickerProps))), (0, _core.jsx)("div", {
         css: timePickerContainerStyles
-      }, (0, _core.jsx)(_TimePicker.default, (0, _extends2.default)({}, bothProps, {
+      }, (0, _core.jsx)(_timePicker.default, (0, _extends2.default)({}, bothProps, {
         hideIcon: true,
         onChange: this.onTimeChange,
         selectProps: mergedTimePickerSelectProps,

package/dist/cjs/components/{TimePicker.js → time-picker.js}

@@ -39,15 +39,13 @@ var _locale = require("@atlaskit/locale");
 
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 
-var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _internal = require("../internal");
 
-var _FixedLayer = _interopRequireDefault(require("../internal/FixedLayer"));
+var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
 
-var _parseTime = _interopRequireDefault(require("../internal/parseTime"));
+var _parseTime = _interopRequireDefault(require("../internal/parse-time"));
 
 var _utils = require("./utils");
 
@@ -67,7 +65,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.1";
+var packageVersion = "12.1.4";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -82,7 +80,7 @@ var menuStyles = {
 var FixedLayerMenu = function FixedLayerMenu(_ref) {
   var selectProps = _ref.selectProps,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_FixedLayer.default, {
+  return /*#__PURE__*/_react.default.createElement(_fixedLayer.default, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.fixedLayerRef,
     content: /*#__PURE__*/_react.default.createElement(_select.components.Menu, (0, _extends2.default)({}, rest, {
@@ -242,13 +240,6 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSubtleControlStyles", function (selectStyles) {
-      return !selectStyles.control ? {
-        border: "2px solid ".concat(_this.getSafeState().isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "transparent"),
-        backgroundColor: 'transparent',
-        padding: '1px'
-      } : {};
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "formatTime", function (time) {
       var _this$props2 = _this.props,
           formatDisplayLabel = _this$props2.formatDisplayLabel,
@@ -341,7 +332,6 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       var _selectProps$styles = selectProps.styles,
           selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
           otherSelectProps = (0, _objectWithoutProperties2.default)(selectProps, _excluded2);
-      var controlStyles = this.props.appearance === 'subtle' ? this.getSubtleControlStyles(selectStyles) : {};
       var SelectComponent = this.props.timeIsEditable ? _select.CreatableSelect : _select.default;
       var labelAndValue = value && {
         label: this.formatTime(value),
@@ -359,7 +349,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       var renderIconContainer = Boolean(!hideIcon && value);
       var mergedStyles = (0, _select.mergeStyles)(selectStyles, {
         control: function control(base) {
-          return _objectSpread(_objectSpread({}, base), controlStyles);
+          return _objectSpread({}, base);
         },
         menu: function menu(base) {
           return _objectSpread(_objectSpread(_objectSpread({}, base), menuStyles), {}, {
@@ -388,6 +378,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           type: "hidden",
           value: value
         }), /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
+          appearance: this.props.appearance,
           autoFocus: autoFocus,
           components: selectComponents,
           instanceId: id,

package/dist/cjs/index.js

@@ -8,24 +8,24 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function get() {
-    return _DatePicker.default;
+    return _datePicker.default;
   }
 });
 Object.defineProperty(exports, "DateTimePicker", {
   enumerable: true,
   get: function get() {
-    return _DateTimePicker.default;
+    return _dateTimePicker.default;
   }
 });
 Object.defineProperty(exports, "TimePicker", {
   enumerable: true,
   get: function get() {
-    return _TimePicker.default;
+    return _timePicker.default;
   }
 });
 
-var _DatePicker = _interopRequireDefault(require("./components/DatePicker"));
+var _datePicker = _interopRequireDefault(require("./components/date-picker"));
 
-var _TimePicker = _interopRequireDefault(require("./components/TimePicker"));
+var _timePicker = _interopRequireDefault(require("./components/time-picker"));
 
-var _DateTimePicker = _interopRequireDefault(require("./components/DateTimePicker"));
+var _dateTimePicker = _interopRequireDefault(require("./components/date-time-picker"));

package/dist/cjs/internal/{FixedLayer.js → fixed-layer.js}

@@ -25,6 +25,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
 
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
 var _icon = require("@atlaskit/icon");
 
 var _popper = require("@atlaskit/popper");
@@ -59,7 +61,7 @@ var FixedLayer = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "update", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "update", _noop.default);
     return _this;
   }
 

package/dist/cjs/internal/index.js

@@ -12,6 +12,7 @@ exports.placeholderDatetime = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+/* eslint-disable @repo/internal/react/require-jsdoc */
 var EmptyClearIndicator = null; // This date was chosen to clearly show date and time formats (day > 12)
 // e.g. 18/02/1993 vs. 2/18/1993 and 1:00 PM vs 13:00
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.1.1",
+	"version": "12.1.4",
 	"sideEffects": false
 }

package/dist/es2019/components/{DatePicker.js → date-picker.js}

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 
+/* eslint-disable @repo/internal/react/use-noop */
+
 /** @jsx jsx */
 import { Component } from 'react';
 import { css, jsx } from '@emotion/core'; // eslint-disable-next-line no-restricted-imports
@@ -12,13 +14,13 @@ import Calendar from '@atlaskit/calendar';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { mergeStyles } from '@atlaskit/select';
-import { B100, N20, N50A, N60A } from '@atlaskit/theme/colors';
+import { N20, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize, layers } from '@atlaskit/theme/constants';
 import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime } from '../internal';
-import FixedLayer from '../internal/FixedLayer';
+import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.1.1";
+const packageVersion = "12.1.4";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -36,9 +38,10 @@ function getValidDate(iso) {
 
 const menuStyles = css({
   zIndex: layers.dialog(),
-  backgroundColor: `var(--ds-surface, ${N20})`,
+  backgroundColor: `var(--ds-surface-overlay, ${N20})`,
   borderRadius: `${borderRadius()}px`,
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`
+  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
+  overflow: 'hidden'
 });
 
 const Menu = ({
@@ -261,12 +264,20 @@ class DatePicker extends Component {
           break;
 
         case 'enter':
-          // Prevent form submission when a date is selected
+          if (!this.state.isOpen) {
+            return;
+          } // Prevent form submission when a date is selected
           // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
           // for more details.
+
+
           event.preventDefault();
 
           if (!this.isDateDisabled(view)) {
+            const {
+              value
+            } = this.getSafeState();
+            const valueChanged = view !== value;
             this.setState({
               inputValue: '',
               isOpen: false,
@@ -274,7 +285,10 @@ class DatePicker extends Component {
               value: view,
               view
             });
-            this.props.onChange(view);
+
+            if (valueChanged) {
+              this.props.onChange(view);
+            }
           }
 
           break;
@@ -337,12 +351,6 @@ class DatePicker extends Component {
       }
     });
 
-    _defineProperty(this, "getSubtleControlStyles", () => ({
-      border: `2px solid ${this.getSafeState().isFocused ? `var(--ds-border-focused, ${B100})` : `transparent`}`,
-      backgroundColor: 'transparent',
-      padding: '1px'
-    }));
-
     _defineProperty(this, "parseDate", date => {
       const {
         parseInputValue,
@@ -463,7 +471,6 @@ class DatePicker extends Component {
     const {
       styles: selectStyles = {}
     } = selectProps;
-    const controlStyles = appearance === 'subtle' ? this.getSubtleControlStyles() : {};
     const disabledStyle = isDisabled ? {
       pointerEvents: 'none'
     } : {};
@@ -497,6 +504,7 @@ class DatePicker extends Component {
       value: value,
       "data-testid": testId && `${testId}--input`
     }), jsx(Select, _extends({
+      appearance: this.props.appearance,
       enableAnimation: false,
       menuIsOpen: menuIsOpen,
       closeMenuOnSelect: true,
@@ -511,7 +519,6 @@ class DatePicker extends Component {
       onChange: this.onSelectChange,
       styles: mergeStyles(selectStyles, {
         control: base => ({ ...base,
-          ...controlStyles,
           ...disabledStyle
         }),
         indicatorsContainer: base => ({ ...base,

package/dist/es2019/components/{DateTimePicker.js → date-time-picker.js}

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
+/* eslint-disable @repo/internal/react/use-noop */
+
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/core'; // eslint-disable-next-line no-restricted-imports
@@ -13,11 +15,11 @@ import { mergeStyles } from '@atlaskit/select';
 import { B100, N0, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
-import DatePicker from './DatePicker';
-import TimePicker from './TimePicker';
+import DatePicker from './date-picker';
+import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.1.1";
+const packageVersion = "12.1.4";
 /* eslint-disable react/no-unused-prop-types */
 
 const isInvalidBorderStyles = css({
@@ -27,16 +29,28 @@ const isFocusedBorderStyles = css({
   borderColor: `var(--ds-border-focused, ${B100})`
 });
 const isFocusedStyles = css({
-  backgroundColor: `var(--ds-surface, ${N0})`
+  backgroundColor: `var(--ds-background-input-pressed, ${N0})`
 });
 const subtleBgStyles = css({
   backgroundColor: 'transparent',
   borderColor: 'transparent'
 });
+const subtleFocusedBgStyles = css({
+  backgroundColor: "var(--ds-background-input-pressed, transparent)",
+  borderColor: 'transparent'
+});
+const noBgStyles = css({
+  backgroundColor: 'transparent',
+  borderColor: 'transparent',
+  '&:hover': {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent'
+  }
+});
 const hoverStyles = css({
   '&:hover': {
     backgroundColor: `var(--ds-background-input-hovered, ${N30})`,
-    borderColor: `var(--ds-border, ${N30})`
+    borderColor: `var(--ds-border-input, ${N30})`
   }
 });
 const isInvalidHoverStyles = css({
@@ -52,8 +66,8 @@ const isDisabledStyles = css({
 });
 const baseContainerStyles = css({
   display: 'flex',
-  backgroundColor: `var(--ds-background-neutral, ${N20})`,
-  border: `2px solid ${`var(--ds-border, ${N20})`}`,
+  backgroundColor: `var(--ds-background-input, ${N20})`,
+  border: `2px solid ${`var(--ds-border-input, ${N20})`}`,
   borderRadius: `${borderRadius()}px`,
   transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
   '&:hover': {
@@ -275,7 +289,7 @@ class DateTimePicker extends React.Component {
     const notFocusedOrIsDisabled = !(isFocused || isDisabled);
     const labelId = (datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.inputId) || (timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.inputId) || '';
     return jsx("div", _extends({
-      css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && subtleBgStyles, isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles)]
+      css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles), bothProps.appearance === 'none' && noBgStyles]
     }, innerProps, {
       "data-testid": testId
     }), jsx("input", {