@atlaskit/datetime-picker 12.0.0 → 12.1.2

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.0.0";
+const packageVersion = "12.1.2";
 /* eslint-disable react/no-unused-prop-types */
 
 const isInvalidBorderStyles = css({
@@ -27,16 +29,20 @@ 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 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 +58,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': {
@@ -273,11 +279,13 @@ class DateTimePicker extends React.Component {
 
     const isClearable = Boolean(dateValue || timeValue);
     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)]
     }, innerProps, {
       "data-testid": testId
     }), jsx("input", {
+      id: labelId,
       name: name,
       type: "hidden",
       value: value

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

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+
+/* eslint-disable @repo/internal/react/use-noop */
 import React from 'react'; // eslint-disable-next-line no-restricted-imports
 
 import { format, isValid } from 'date-fns';
@@ -10,11 +12,11 @@ import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/sele
 import { B100 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { defaultTimeFormat, defaultTimes, DropdownIndicator, EmptyClearIndicator, placeholderDatetime } from '../internal';
-import FixedLayer from '../internal/FixedLayer';
-import parseTime from '../internal/parseTime';
+import FixedLayer from '../internal/fixed-layer';
+import parseTime from '../internal/parse-time';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.0.0";
+const packageVersion = "12.1.2";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -104,7 +106,15 @@ class TimePicker extends React.Component {
           parseInputValue,
           timeFormat
         } = this.props;
-        const formattedValue = format(parseInputValue(inputValue, timeFormat || defaultTimeFormat), 'HH:mm') || '';
+        let sanitizedInput;
+
+        try {
+          sanitizedInput = parseInputValue(inputValue, timeFormat || defaultTimeFormat);
+        } catch (e) {
+          return; // do nothing, the main validation should happen in the form
+        }
+
+        const formattedValue = format(sanitizedInput, 'HH:mm') || '';
         this.setState({
           value: formattedValue
         });
@@ -180,7 +190,7 @@ class TimePicker extends React.Component {
 
     _defineProperty(this, "getSubtleControlStyles", selectStyles => !selectStyles.control ? {
       border: `2px solid ${this.getSafeState().isFocused ? `var(--ds-border-focused, ${B100})` : `transparent`}`,
-      backgroundColor: 'transparent',
+      backgroundColor: this.getSafeState().isFocused ? "var(--ds-background-input-pressed, transparent)" : 'transparent',
       padding: '1px'
     } : {});
 
@@ -262,7 +272,6 @@ class TimePicker extends React.Component {
       testId
     } = this.props;
     const ICON_PADDING = 2;
-    const BORDER_WIDTH = 2;
     const {
       value = '',
       isOpen
@@ -287,7 +296,7 @@ class TimePicker extends React.Component {
       selectComponents.ClearIndicator = EmptyClearIndicator;
     }
 
-    const renderIconContainer = Boolean(hideIcon && value);
+    const renderIconContainer = Boolean(!hideIcon && value);
     const mergedStyles = mergeStyles(selectStyles, {
       control: base => ({ ...base,
         ...controlStyles
@@ -300,7 +309,7 @@ class TimePicker extends React.Component {
       }),
       indicatorsContainer: base => ({ ...base,
         paddingLeft: renderIconContainer ? ICON_PADDING : 0,
-        paddingRight: renderIconContainer ? gridSize() - BORDER_WIDTH : 0
+        paddingRight: renderIconContainer ? gridSize() - ICON_PADDING : 0
       })
     });
     return (
@@ -311,6 +320,7 @@ class TimePicker extends React.Component {
         "data-testid": testId && `${testId}--container`,
         onKeyDown: this.onSelectKeyDown
       }), /*#__PURE__*/React.createElement("input", {
+        id: selectProps.inputId,
         name: name,
         type: "hidden",
         value: value

package/dist/es2019/index.js

@@ -1,3 +1,3 @@
-export { default as DatePicker } from './components/DatePicker';
-export { default as TimePicker } from './components/TimePicker';
-export { default as DateTimePicker } from './components/DateTimePicker';
+export { default as DatePicker } from './components/date-picker';
+export { default as TimePicker } from './components/time-picker';
+export { default as DateTimePicker } from './components/date-time-picker';

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import ScrollLock from 'react-scrolllock';
+import noop from '@atlaskit/ds-lib/noop';
 import { sizes } from '@atlaskit/icon';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { gridSize, layers } from '@atlaskit/theme/constants';
@@ -14,7 +15,7 @@ export default class FixedLayer extends React.Component {
   constructor(...args) {
     super(...args);
 
-    _defineProperty(this, "update", () => {});
+    _defineProperty(this, "update", noop);
   }
 
   componentDidUpdate(prevProps) {

package/dist/es2019/internal/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
 import React from 'react';
 export const 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/es2019/internal/{parseTime.js → parse-time.js}

@@ -102,14 +102,14 @@ export default function (time) {
   const trimmedTime = time.toString().trim();
 
   if (!isValid(trimmedTime)) {
-    return 'invalid time format';
+    throw RangeError('invalid time format');
   }
 
   const time1 = removeSpacer(trimmedTime);
   const time2 = convertTo24hrTime(time1);
 
   if (!time2) {
-    return 'invalid time format';
+    throw RangeError('invalid time format');
   }
 
   return assignToDate(time2);

package/dist/es2019/version.json

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

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

@@ -16,6 +16,8 @@ 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; } }
 
+/* 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
@@ -30,10 +32,10 @@ import Select, { mergeStyles } from '@atlaskit/select';
 import { B100, 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';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.0.0";
+var packageVersion = "12.1.2";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -51,9 +53,10 @@ function getValidDate(iso) {
 
 var menuStyles = css({
   zIndex: layers.dialog(),
-  backgroundColor: "var(--ds-surface, ".concat(N20, ")"),
+  backgroundColor: "var(--ds-surface-overlay, ".concat(N20, ")"),
   borderRadius: "".concat(borderRadius(), "px"),
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
+  overflow: 'hidden'
 });
 
 var Menu = function Menu(_ref) {
@@ -77,7 +80,8 @@ var Menu = function Menu(_ref) {
       selected: [selectProps.calendarValue],
       locale: selectProps.calendarLocale,
       testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
-      weekStartDay: selectProps.calendarWeekStartDay
+      weekStartDay: selectProps.calendarWeekStartDay,
+      tabIndex: -1
     }))),
     testId: selectProps.testId
   });
@@ -189,7 +193,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         });
       } else {
         _this.setState({
-          isOpen: false
+          isOpen: false,
+          isFocused: false
         });
       }
 
@@ -209,7 +214,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       } else {
         _this.setState({
           isOpen: true,
-          view: value
+          view: value,
+          isFocused: true
         });
       }
 
@@ -292,12 +298,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,
@@ -306,7 +321,9 @@ var DatePicker = /*#__PURE__*/function (_Component) {
               view: view
             });
 
-            _this.props.onChange(view);
+            if (valueChanged) {
+              _this.props.onChange(view);
+            }
           }
 
           break;
@@ -368,10 +385,10 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getSubtleControlStyles", function (isOpen) {
+    _defineProperty(_assertThisInitialized(_this), "getSubtleControlStyles", function () {
       return {
-        border: "2px solid ".concat(isOpen ? "var(--ds-border-focused, ".concat(B100, ")") : "transparent"),
-        backgroundColor: 'transparent',
+        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'
       };
     });
@@ -385,8 +402,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         return parseInputValue(date, dateFormat || defaultDateFormat);
       }
 
-      var _this$getSafeState3 = _this.getSafeState(),
-          l10n = _this$getSafeState3.l10n;
+      var _this$getSafeState4 = _this.getSafeState(),
+          l10n = _this$getSafeState4.l10n;
 
       return l10n.parseDate(date);
     });
@@ -396,8 +413,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 || defaultDateFormat);
@@ -414,8 +431,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(placeholderDatetime);
     });
@@ -427,6 +444,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
 
     _this.state = {
       isOpen: _this.props.defaultIsOpen,
+      isFocused: false,
       clearingFromIcon: false,
       inputValue: _this.props.selectProps.inputValue,
       selectedValue: _this.props.value || _this.props.defaultValue,
@@ -472,14 +490,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           locale = _this$props3.locale,
           testId = _this$props3.testId,
           weekStartDay = _this$props3.weekStartDay;
-      var BORDER_WIDTH = 2;
       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);
@@ -495,7 +512,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
 
       var _selectProps$styles = selectProps.styles,
           selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;
-      var controlStyles = appearance === 'subtle' ? this.getSubtleControlStyles(isOpen) : {};
+      var controlStyles = appearance === 'subtle' ? this.getSubtleControlStyles() : {};
       var disabledStyle = isDisabled ? {
         pointerEvents: 'none'
       } : {};
@@ -523,6 +540,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         ref: this.getContainerRef,
         "data-testid": testId && "".concat(testId, "--container")
       }), jsx("input", {
+        id: selectProps.inputId,
         name: name,
         type: "hidden",
         value: value,
@@ -547,7 +565,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           indicatorsContainer: function indicatorsContainer(base) {
             return _objectSpread(_objectSpread({}, base), {}, {
               paddingLeft: ICON_PADDING,
-              paddingRight: gridSize() - BORDER_WIDTH
+              paddingRight: gridSize() - ICON_PADDING
             });
           }
         }),

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

@@ -15,6 +15,8 @@ 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) { _defineProperty(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; }
 
+/* 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
@@ -27,11 +29,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';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.0.0";
+var packageVersion = "12.1.2";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = css({
@@ -41,16 +43,20 @@ var isFocusedBorderStyles = css({
   borderColor: "var(--ds-border-focused, ".concat(B100, ")")
 });
 var isFocusedStyles = css({
-  backgroundColor: "var(--ds-surface, ".concat(N0, ")")
+  backgroundColor: "var(--ds-background-input-pressed, ".concat(N0, ")")
 });
 var subtleBgStyles = css({
   backgroundColor: 'transparent',
   borderColor: 'transparent'
 });
+var subtleFocusedBgStyles = css({
+  backgroundColor: "var(--ds-background-input-pressed, transparent)",
+  borderColor: 'transparent'
+});
 var hoverStyles = css({
   '&:hover': {
     backgroundColor: "var(--ds-background-input-hovered, ".concat(N30, ")"),
-    borderColor: "var(--ds-border, ".concat(N30, ")")
+    borderColor: "var(--ds-border-input, ".concat(N30, ")")
   }
 });
 var isInvalidHoverStyles = css({
@@ -66,8 +72,8 @@ var isDisabledStyles = css({
 });
 var baseContainerStyles = css({
   display: 'flex',
-  backgroundColor: "var(--ds-background-neutral, ".concat(N20, ")"),
-  border: "2px solid ".concat("var(--ds-border, ".concat(N20, ")")),
+  backgroundColor: "var(--ds-background-input, ".concat(N20, ")"),
+  border: "2px solid ".concat("var(--ds-border-input, ".concat(N20, ")")),
   borderRadius: "".concat(borderRadius(), "px"),
   transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
   '&:hover': {
@@ -307,11 +313,13 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
 
       var isClearable = Boolean(dateValue || timeValue);
       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' && 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)]
       }, innerProps, {
         "data-testid": testId
       }), jsx("input", {
+        id: labelId,
         name: name,
         type: "hidden",
         value: value

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

@@ -18,6 +18,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; } }
 
+/* eslint-disable @repo/internal/react/use-noop */
 import React from 'react'; // eslint-disable-next-line no-restricted-imports
 
 import { format, isValid } from 'date-fns';
@@ -28,11 +29,11 @@ import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/sele
 import { B100 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { defaultTimeFormat, defaultTimes, DropdownIndicator, EmptyClearIndicator, placeholderDatetime } from '../internal';
-import FixedLayer from '../internal/FixedLayer';
-import parseTime from '../internal/parseTime';
+import FixedLayer from '../internal/fixed-layer';
+import parseTime from '../internal/parse-time';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.0.0";
+var packageVersion = "12.1.2";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -136,7 +137,15 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         var _this$props = _this.props,
             parseInputValue = _this$props.parseInputValue,
             _timeFormat = _this$props.timeFormat;
-        var formattedValue = format(parseInputValue(inputValue, _timeFormat || defaultTimeFormat), 'HH:mm') || '';
+        var sanitizedInput;
+
+        try {
+          sanitizedInput = parseInputValue(inputValue, _timeFormat || defaultTimeFormat);
+        } catch (e) {
+          return; // do nothing, the main validation should happen in the form
+        }
+
+        var formattedValue = format(sanitizedInput, 'HH:mm') || '';
 
         _this.setState({
           value: formattedValue
@@ -215,7 +224,7 @@ 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: 'transparent',
+        backgroundColor: _this.getSafeState().isFocused ? "var(--ds-background-input-pressed, transparent)" : 'transparent',
         padding: '1px'
       } : {};
     });
@@ -304,7 +313,6 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           spacing = _this$props3.spacing,
           testId = _this$props3.testId;
       var ICON_PADDING = 2;
-      var BORDER_WIDTH = 2;
 
       var _this$getSafeState3 = this.getSafeState(),
           _this$getSafeState3$v = _this$getSafeState3.value,
@@ -332,7 +340,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         selectComponents.ClearIndicator = EmptyClearIndicator;
       }
 
-      var renderIconContainer = Boolean(hideIcon && value);
+      var renderIconContainer = Boolean(!hideIcon && value);
       var mergedStyles = mergeStyles(selectStyles, {
         control: function control(base) {
           return _objectSpread(_objectSpread({}, base), controlStyles);
@@ -347,7 +355,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         indicatorsContainer: function indicatorsContainer(base) {
           return _objectSpread(_objectSpread({}, base), {}, {
             paddingLeft: renderIconContainer ? ICON_PADDING : 0,
-            paddingRight: renderIconContainer ? gridSize() - BORDER_WIDTH : 0
+            paddingRight: renderIconContainer ? gridSize() - ICON_PADDING : 0
           });
         }
       });
@@ -359,6 +367,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           "data-testid": testId && "".concat(testId, "--container"),
           onKeyDown: this.onSelectKeyDown
         }), /*#__PURE__*/React.createElement("input", {
+          id: selectProps.inputId,
           name: name,
           type: "hidden",
           value: value

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-export { default as DatePicker } from './components/DatePicker';
-export { default as TimePicker } from './components/TimePicker';
-export { default as DateTimePicker } from './components/DateTimePicker';
+export { default as DatePicker } from './components/date-picker';
+export { default as TimePicker } from './components/time-picker';
+export { default as DateTimePicker } from './components/date-time-picker';

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

@@ -16,6 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import ScrollLock from 'react-scrolllock';
+import noop from '@atlaskit/ds-lib/noop';
 import { sizes } from '@atlaskit/icon';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { gridSize, layers } from '@atlaskit/theme/constants';
@@ -41,7 +42,7 @@ var FixedLayer = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "update", function () {});
+    _defineProperty(_assertThisInitialized(_this), "update", noop);
 
     return _this;
   }

package/dist/esm/internal/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
 import React from 'react';
 export 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/esm/internal/{parseTime.js → parse-time.js}

@@ -102,14 +102,14 @@ export default function (time) {
   var trimmedTime = time.toString().trim();
 
   if (!isValid(trimmedTime)) {
-    return 'invalid time format';
+    throw RangeError('invalid time format');
   }
 
   var time1 = removeSpacer(trimmedTime);
   var time2 = convertTo24hrTime(time1);
 
   if (!time2) {
-    return 'invalid time format';
+    throw RangeError('invalid time format');
   }
 
   return assignToDate(time2);

package/dist/esm/version.json

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