@atlaskit/datetime-picker 12.1.2 → 12.1.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/datetime-picker
 
+## 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

package/dist/cjs/components/date-picker.js

@@ -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.2";
+var packageVersion = "12.1.3";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -400,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: _this.getSafeState().isOpen ? "var(--ds-background-input-pressed, transparent)" : 'transparent',
-        padding: '1px'
-      };
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "parseDate", function (date) {
       var _this$props = _this.props,
           parseInputValue = _this$props.parseInputValue,
@@ -524,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'
       } : {};
@@ -558,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,
@@ -572,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/date-time-picker.js

@@ -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.2";
+var packageVersion = "12.1.3";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = (0, _core.css)({
@@ -78,6 +78,14 @@ 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, ")"),
@@ -332,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' && (isFocused ? subtleFocusedBgStyles : 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", {

package/dist/cjs/components/time-picker.js

@@ -39,8 +39,6 @@ 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");
@@ -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.2";
+var packageVersion = "12.1.3";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -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: _this.getSafeState().isFocused ? "var(--ds-background-input-pressed, transparent)" : '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/version.json

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

package/dist/es2019/components/date-picker.js

@@ -14,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/fixed-layer';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.1.2";
+const packageVersion = "12.1.3";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -351,12 +351,6 @@ class DatePicker extends Component {
       }
     });
 
-    _defineProperty(this, "getSubtleControlStyles", () => ({
-      border: `2px solid ${this.getSafeState().isFocused ? `var(--ds-border-focused, ${B100})` : `transparent`}`,
-      backgroundColor: this.getSafeState().isOpen ? "var(--ds-background-input-pressed, transparent)" : 'transparent',
-      padding: '1px'
-    }));
-
     _defineProperty(this, "parseDate", date => {
       const {
         parseInputValue,
@@ -477,7 +471,6 @@ class DatePicker extends Component {
     const {
       styles: selectStyles = {}
     } = selectProps;
-    const controlStyles = appearance === 'subtle' ? this.getSubtleControlStyles() : {};
     const disabledStyle = isDisabled ? {
       pointerEvents: 'none'
     } : {};
@@ -511,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,
@@ -525,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/date-time-picker.js

@@ -19,7 +19,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.1.2";
+const packageVersion = "12.1.3";
 /* eslint-disable react/no-unused-prop-types */
 
 const isInvalidBorderStyles = css({
@@ -39,6 +39,14 @@ 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})`,
@@ -281,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' && (isFocused ? subtleFocusedBgStyles : 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", {

package/dist/es2019/components/time-picker.js

@@ -9,14 +9,13 @@ import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/select';
-import { B100 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { defaultTimeFormat, defaultTimes, DropdownIndicator, EmptyClearIndicator, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.1.2";
+const packageVersion = "12.1.3";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -188,12 +187,6 @@ class TimePicker extends React.Component {
       }
     });
 
-    _defineProperty(this, "getSubtleControlStyles", selectStyles => !selectStyles.control ? {
-      border: `2px solid ${this.getSafeState().isFocused ? `var(--ds-border-focused, ${B100})` : `transparent`}`,
-      backgroundColor: this.getSafeState().isFocused ? "var(--ds-background-input-pressed, transparent)" : 'transparent',
-      padding: '1px'
-    } : {});
-
     _defineProperty(this, "formatTime", time => {
       const {
         formatDisplayLabel,
@@ -281,7 +274,6 @@ class TimePicker extends React.Component {
       styles: selectStyles = {},
       ...otherSelectProps
     } = selectProps;
-    const controlStyles = this.props.appearance === 'subtle' ? this.getSubtleControlStyles(selectStyles) : {};
     const SelectComponent = this.props.timeIsEditable ? CreatableSelect : Select;
     const labelAndValue = value && {
       label: this.formatTime(value),
@@ -298,8 +290,7 @@ class TimePicker extends React.Component {
 
     const renderIconContainer = Boolean(!hideIcon && value);
     const mergedStyles = mergeStyles(selectStyles, {
-      control: base => ({ ...base,
-        ...controlStyles
+      control: base => ({ ...base
       }),
       menu: base => ({ ...base,
         ...menuStyles,
@@ -325,6 +316,7 @@ class TimePicker extends React.Component {
         type: "hidden",
         value: value
       }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
+        appearance: this.props.appearance,
         autoFocus: autoFocus,
         components: selectComponents,
         instanceId: id,

package/dist/es2019/version.json

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

package/dist/esm/components/date-picker.js

@@ -29,13 +29,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/fixed-layer';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.2";
+var packageVersion = "12.1.3";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -385,14 +385,6 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getSubtleControlStyles", function () {
-      return {
-        border: "2px solid ".concat(_this.getSafeState().isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "transparent"),
-        backgroundColor: _this.getSafeState().isOpen ? "var(--ds-background-input-pressed, transparent)" : 'transparent',
-        padding: '1px'
-      };
-    });
-
     _defineProperty(_assertThisInitialized(_this), "parseDate", function (date) {
       var _this$props = _this.props,
           parseInputValue = _this$props.parseInputValue,
@@ -512,7 +504,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 +537,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         value: value,
         "data-testid": testId && "".concat(testId, "--input")
       }), jsx(Select, _extends({
+        appearance: this.props.appearance,
         enableAnimation: false,
         menuIsOpen: menuIsOpen,
         closeMenuOnSelect: true,
@@ -560,7 +552,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         onChange: this.onSelectChange,
         styles: 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/esm/components/date-time-picker.js

@@ -33,7 +33,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.2";
+var packageVersion = "12.1.3";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = css({
@@ -53,6 +53,14 @@ var subtleFocusedBgStyles = css({
   backgroundColor: "var(--ds-background-input-pressed, transparent)",
   borderColor: 'transparent'
 });
+var noBgStyles = css({
+  backgroundColor: 'transparent',
+  borderColor: 'transparent',
+  '&:hover': {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent'
+  }
+});
 var hoverStyles = css({
   '&:hover': {
     backgroundColor: "var(--ds-background-input-hovered, ".concat(N30, ")"),
@@ -315,7 +323,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 jsx("div", _extends({
-        css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : 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", {

package/dist/esm/components/time-picker.js

@@ -26,14 +26,13 @@ import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/select';
-import { B100 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { defaultTimeFormat, defaultTimes, DropdownIndicator, EmptyClearIndicator, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.2";
+var packageVersion = "12.1.3";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -221,14 +220,6 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getSubtleControlStyles", function (selectStyles) {
-      return !selectStyles.control ? {
-        border: "2px solid ".concat(_this.getSafeState().isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "transparent"),
-        backgroundColor: _this.getSafeState().isFocused ? "var(--ds-background-input-pressed, transparent)" : 'transparent',
-        padding: '1px'
-      } : {};
-    });
-
     _defineProperty(_assertThisInitialized(_this), "formatTime", function (time) {
       var _this$props2 = _this.props,
           formatDisplayLabel = _this$props2.formatDisplayLabel,
@@ -325,7 +316,6 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
           otherSelectProps = _objectWithoutProperties(selectProps, _excluded2);
 
-      var controlStyles = this.props.appearance === 'subtle' ? this.getSubtleControlStyles(selectStyles) : {};
       var SelectComponent = this.props.timeIsEditable ? CreatableSelect : Select;
       var labelAndValue = value && {
         label: this.formatTime(value),
@@ -343,7 +333,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       var renderIconContainer = Boolean(!hideIcon && value);
       var mergedStyles = mergeStyles(selectStyles, {
         control: function control(base) {
-          return _objectSpread(_objectSpread({}, base), controlStyles);
+          return _objectSpread({}, base);
         },
         menu: function menu(base) {
           return _objectSpread(_objectSpread(_objectSpread({}, base), menuStyles), {}, {
@@ -372,6 +362,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           type: "hidden",
           value: value
         }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
+          appearance: this.props.appearance,
           autoFocus: autoFocus,
           components: selectComponents,
           instanceId: id,

package/dist/esm/version.json

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

package/dist/types/components/date-picker.d.ts

@@ -244,11 +244,6 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     refCalendar: (ref: CalendarRef | null) => void;
     handleInputChange: (inputValue: string, actionMeta: {}) => void;
     getContainerRef: (ref: HTMLElement | null) => void;
-    getSubtleControlStyles: () => {
-        border: string;
-        backgroundColor: string;
-        padding: string;
-    };
     /**
      * There are two props that can change how the date is parsed.
      * The priority of props used is:

package/dist/types/components/time-picker.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { LocalizationProvider } from '@atlaskit/locale';
-import { ActionMeta, OptionType, SelectProps, StylesConfig } from '@atlaskit/select';
+import { ActionMeta, OptionType, SelectProps } from '@atlaskit/select';
 import { Appearance, Spacing } from '../types';
 interface Option {
     label: string;
@@ -192,15 +192,6 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     onBlur: (event: React.FocusEvent<HTMLElement>) => void;
     onFocus: (event: React.FocusEvent<HTMLElement>) => void;
     onSelectKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    getSubtleControlStyles: (selectStyles: StylesConfig) => {
-        border: string;
-        backgroundColor: string;
-        padding: string;
-    } | {
-        border?: undefined;
-        backgroundColor?: undefined;
-        padding?: undefined;
-    };
     /**
      * There are multiple props that can change how the time is formatted.
      * The priority of props used is:

package/dist/types/types.d.ts

@@ -1,3 +1,3 @@
-export declare type Appearance = 'default' | 'subtle';
+export declare type Appearance = 'default' | 'subtle' | 'none';
 export declare type Spacing = 'compact' | 'default';
 export declare type SelectProps = any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "12.1.2",
+  "version": "12.1.3",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/locale": "^2.1.0",
     "@atlaskit/popper": "^5.2.0",
-    "@atlaskit/select": "^15.5.0",
+    "@atlaskit/select": "^15.6.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",