@atlaskit/datetime-picker 12.0.0 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/datetime-picker
 
+## 12.1.0
+
+### Minor Changes
+
+- [`58d4cd75f7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58d4cd75f7a) - Removed deprecated hideIcon prop from DateTimePicker because it is unused and serves no functionality.
+  Removed the deprecation notice for the formatDisplayLabel prop in TimePicker
+
+### Patch Changes
+
+- [`c3a1b950d49`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3a1b950d49) - DSP-3301 specifies label to input id
+- [`c2f866d31d1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2f866d31d1) - [ux] Fix timepicker clear icon alignment
+- [`7566be18f20`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7566be18f20) - [ux] Time picker no longer loses focus to the document when tabbing through it in a popup.
+- [`574b6c8ba7f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/574b6c8ba7f) - [ux] DSP-2987 Add code to catch console error
+- Updated dependencies
+
 ## 12.0.0
 
 ### Major Changes

package/dist/cjs/components/DatePicker.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.0.0";
+var packageVersion = "12.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -112,7 +112,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
   });
@@ -486,7 +487,6 @@ 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(),
@@ -537,6 +537,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         ref: this.getContainerRef,
         "data-testid": testId && "".concat(testId, "--container")
       }), (0, _core.jsx)("input", {
+        id: selectProps.inputId,
         name: name,
         type: "hidden",
         value: value,
@@ -561,7 +562,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
           indicatorsContainer: function indicatorsContainer(base) {
             return _objectSpread(_objectSpread({}, base), {}, {
               paddingLeft: ICON_PADDING,
-              paddingRight: (0, _constants.gridSize)() - BORDER_WIDTH
+              paddingRight: (0, _constants.gridSize)() - ICON_PADDING
             });
           }
         }),

package/dist/cjs/components/DateTimePicker.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.0.0";
+var packageVersion = "12.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = (0, _core.css)({
@@ -326,11 +326,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 (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)]
       }, innerProps, {
         "data-testid": testId
       }), (0, _core.jsx)("input", {
+        id: labelId,
         name: name,
         type: "hidden",
         value: value

package/dist/cjs/components/TimePicker.js

@@ -67,7 +67,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.0.0";
+var packageVersion = "12.1.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -165,7 +165,15 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         var _this$props = _this.props,
             parseInputValue = _this$props.parseInputValue,
             _timeFormat = _this$props.timeFormat;
-        var formattedValue = (0, _dateFns.format)(parseInputValue(inputValue, _timeFormat || _internal.defaultTimeFormat), 'HH:mm') || '';
+        var sanitizedInput;
+
+        try {
+          sanitizedInput = parseInputValue(inputValue, _timeFormat || _internal.defaultTimeFormat);
+        } catch (e) {
+          return; // do nothing, the main validation should happen in the form
+        }
+
+        var formattedValue = (0, _dateFns.format)(sanitizedInput, 'HH:mm') || '';
 
         _this.setState({
           value: formattedValue
@@ -323,7 +331,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,
@@ -349,7 +356,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         selectComponents.ClearIndicator = _internal.EmptyClearIndicator;
       }
 
-      var renderIconContainer = Boolean(hideIcon && value);
+      var renderIconContainer = Boolean(!hideIcon && value);
       var mergedStyles = (0, _select.mergeStyles)(selectStyles, {
         control: function control(base) {
           return _objectSpread(_objectSpread({}, base), controlStyles);
@@ -364,7 +371,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
         indicatorsContainer: function indicatorsContainer(base) {
           return _objectSpread(_objectSpread({}, base), {}, {
             paddingLeft: renderIconContainer ? ICON_PADDING : 0,
-            paddingRight: renderIconContainer ? (0, _constants.gridSize)() - BORDER_WIDTH : 0
+            paddingRight: renderIconContainer ? (0, _constants.gridSize)() - ICON_PADDING : 0
           });
         }
       });
@@ -376,6 +383,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           "data-testid": testId && "".concat(testId, "--container"),
           onKeyDown: this.onSelectKeyDown
         }), /*#__PURE__*/_react.default.createElement("input", {
+          id: selectProps.inputId,
           name: name,
           type: "hidden",
           value: value

package/dist/cjs/internal/parseTime.js

@@ -123,14 +123,14 @@ function _default(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/cjs/version.json

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

package/dist/es2019/components/DatePicker.js

@@ -18,7 +18,7 @@ import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime }
 import FixedLayer from '../internal/FixedLayer';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.0.0";
+const packageVersion = "12.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -62,7 +62,8 @@ const Menu = ({
     selected: [selectProps.calendarValue],
     locale: selectProps.calendarLocale,
     testId: selectProps.testId && `${selectProps.testId}--calendar`,
-    weekStartDay: selectProps.calendarWeekStartDay
+    weekStartDay: selectProps.calendarWeekStartDay,
+    tabIndex: -1
   }))),
   testId: selectProps.testId
 });
@@ -437,7 +438,6 @@ class DatePicker extends Component {
       testId,
       weekStartDay
     } = this.props;
-    const BORDER_WIDTH = 2;
     const ICON_PADDING = 2;
     const {
       value,
@@ -488,6 +488,7 @@ class DatePicker extends Component {
       ref: this.getContainerRef,
       "data-testid": testId && `${testId}--container`
     }), jsx("input", {
+      id: selectProps.inputId,
       name: name,
       type: "hidden",
       value: value,
@@ -512,7 +513,7 @@ class DatePicker extends Component {
         }),
         indicatorsContainer: base => ({ ...base,
           paddingLeft: ICON_PADDING,
-          paddingRight: gridSize() - BORDER_WIDTH
+          paddingRight: gridSize() - ICON_PADDING
         })
       }),
       placeholder: this.getPlaceholder(),

package/dist/es2019/components/DateTimePicker.js

@@ -17,7 +17,7 @@ import DatePicker from './DatePicker';
 import TimePicker from './TimePicker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.0.0";
+const packageVersion = "12.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 const isInvalidBorderStyles = css({
@@ -273,11 +273,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)]
     }, innerProps, {
       "data-testid": testId
     }), jsx("input", {
+      id: labelId,
       name: name,
       type: "hidden",
       value: value

package/dist/es2019/components/TimePicker.js

@@ -14,7 +14,7 @@ import FixedLayer from '../internal/FixedLayer';
 import parseTime from '../internal/parseTime';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.0.0";
+const packageVersion = "12.1.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -104,7 +104,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
         });
@@ -262,7 +270,6 @@ class TimePicker extends React.Component {
       testId
     } = this.props;
     const ICON_PADDING = 2;
-    const BORDER_WIDTH = 2;
     const {
       value = '',
       isOpen
@@ -287,7 +294,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 +307,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 +318,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/internal/parseTime.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.0",
 	"sideEffects": false
 }

package/dist/esm/components/DatePicker.js

@@ -33,7 +33,7 @@ import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime }
 import FixedLayer from '../internal/FixedLayer';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.0.0";
+var packageVersion = "12.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -77,7 +77,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
   });
@@ -472,7 +473,6 @@ 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(),
@@ -523,6 +523,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 +548,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

@@ -31,7 +31,7 @@ import DatePicker from './DatePicker';
 import TimePicker from './TimePicker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.0.0";
+var packageVersion = "12.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = css({
@@ -307,11 +307,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)]
       }, innerProps, {
         "data-testid": testId
       }), jsx("input", {
+        id: labelId,
         name: name,
         type: "hidden",
         value: value

package/dist/esm/components/TimePicker.js

@@ -32,7 +32,7 @@ import FixedLayer from '../internal/FixedLayer';
 import parseTime from '../internal/parseTime';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.0.0";
+var packageVersion = "12.1.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -136,7 +136,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
@@ -304,7 +312,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 +339,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 +354,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 +366,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/internal/parseTime.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.0",
 	"sideEffects": false
 }

package/dist/types/components/DateTimePicker.d.ts

@@ -39,8 +39,6 @@ export interface Props extends WithAnalyticsEventsProps {
     timeIsEditable?: boolean;
     /** Set if the picker has an invalid value. */
     isInvalid?: boolean;
-    /** DEPRECATED - This is here only for backwards compatibility and doesn't do anything. It will be removed in the next MAJOR. */
-    hideIcon?: boolean;
     /** Format the date with a string that is accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format). */
     dateFormat?: string;
     /** Props applied to the `DatePicker`. */
@@ -155,7 +153,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
     render(): JSX.Element;
 }
 export { DateTimePicker as DateTimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "hideIcon" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "times" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "times" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
     appearance: string;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -175,5 +173,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimeP
     times: string[];
     spacing: string;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "value" | "dateFormat" | "key" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "value" | "dateFormat" | "key" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/TimePicker.d.ts

@@ -22,7 +22,7 @@ export interface Props extends WithAnalyticsEventsProps {
     defaultIsOpen?: boolean;
     /** The default for `value`. */
     defaultValue?: string;
-    /** DEPRECATED - Use locale instead. Function for formatting the displayed time value in the input. By default parses with an internal time parser, and formats using the [date-fns format function]((https://date-fns.org/v1.29.0/docs/format)). */
+    /** A function for formatting the displayed time value in the input. By default parses with an internal time parser, and formats using the [date-fns format function]((https://date-fns.org/v1.29.0/docs/format)) */
     formatDisplayLabel?: (time: string, timeFormat: string) => string;
     /** The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`. Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release. */
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/calendar": "^12.2.0",
+    "@atlaskit/calendar": "^12.3.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/locale": "^2.1.0",
     "@atlaskit/popper": "^5.2.0",
@@ -47,6 +47,7 @@
     "@atlaskit/field-base": "^15.0.5",
     "@atlaskit/form": "^8.5.0",
     "@atlaskit/modal-dialog": "^12.2.0",
+    "@atlaskit/popup": "^1.3.9",
     "@atlaskit/range": "^6.0.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",

package/report.api.md

@@ -0,0 +1,636 @@
+## API Report File for "@atlaskit/datetime-picker"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { ComponentType } from 'react';
+import { FocusEvent as FocusEvent_2 } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { IndicatorComponentType } from '@atlaskit/select';
+import { IndicatorProps } from '@atlaskit/select';
+import { OptionType } from '@atlaskit/select';
+import { default as React_2 } from 'react';
+import { RefAttributes } from 'react';
+import { SelectProps as SelectProps_2 } from '@atlaskit/select';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { WithContextProps } from '@atlaskit/analytics-next';
+
+export declare type Appearance = 'default' | 'subtle';
+
+export declare const DatePicker: ForwardRefExoticComponent<
+  Pick<
+    Pick<
+      Omit<DatePickerProps_2, keyof WithAnalyticsEventsProps>,
+      | 'testId'
+      | 'maxDate'
+      | 'minDate'
+      | 'isOpen'
+      | 'nextMonthLabel'
+      | 'parseInputValue'
+      | 'formatDisplayLabel'
+      | 'previousMonthLabel'
+      | 'value'
+      | 'dateFormat'
+      | 'placeholder'
+      | 'weekStartDay'
+    > &
+      Partial<
+        Pick<
+          Omit<DatePickerProps_2, keyof WithAnalyticsEventsProps>,
+          | 'icon'
+          | 'disabled'
+          | 'appearance'
+          | 'selectProps'
+          | 'innerProps'
+          | 'autoFocus'
+          | 'defaultIsOpen'
+          | 'defaultValue'
+          | 'disabledDateFilter'
+          | 'hideIcon'
+          | 'id'
+          | 'isDisabled'
+          | 'isInvalid'
+          | 'name'
+          | 'onBlur'
+          | 'onChange'
+          | 'onFocus'
+          | 'spacing'
+          | 'locale'
+        >
+      > &
+      Partial<
+        Pick<
+          {
+            appearance: Appearance;
+            autoFocus: boolean;
+            defaultIsOpen: boolean;
+            defaultValue: string;
+            disabled: string[];
+            disabledDateFilter: (_: string) => boolean;
+            hideIcon: boolean;
+            icon: ComponentType<IndicatorProps<OptionType, false>>;
+            id: string;
+            innerProps: {};
+            isDisabled: boolean;
+            isInvalid: boolean;
+            name: string;
+            onBlur: (event: FocusEvent_2<HTMLInputElement>) => void;
+            onChange: (value: string) => void;
+            onFocus: (event: FocusEvent_2<HTMLInputElement>) => void;
+            selectProps: {};
+            spacing: Spacing;
+            locale: string;
+          },
+          never
+        >
+      > &
+      RefAttributes<any> &
+      WithContextProps,
+    | 'testId'
+    | 'icon'
+    | 'disabled'
+    | 'appearance'
+    | 'selectProps'
+    | 'innerProps'
+    | 'autoFocus'
+    | 'defaultIsOpen'
+    | 'defaultValue'
+    | 'disabledDateFilter'
+    | 'hideIcon'
+    | 'id'
+    | 'isDisabled'
+    | 'isInvalid'
+    | 'name'
+    | 'onBlur'
+    | 'onChange'
+    | 'onFocus'
+    | 'spacing'
+    | 'locale'
+    | 'maxDate'
+    | 'minDate'
+    | 'isOpen'
+    | 'nextMonthLabel'
+    | 'parseInputValue'
+    | 'formatDisplayLabel'
+    | 'previousMonthLabel'
+    | 'value'
+    | 'dateFormat'
+    | 'placeholder'
+    | 'weekStartDay'
+    | 'key'
+    | 'analyticsContext'
+  > &
+    RefAttributes<any>
+>;
+
+declare const datePickerDefaultProps: {
+  appearance: Appearance;
+  autoFocus: boolean;
+  defaultIsOpen: boolean;
+  defaultValue: string;
+  disabled: string[];
+  disabledDateFilter: (_: string) => boolean;
+  hideIcon: boolean;
+  icon: ComponentType<IndicatorProps<OptionType, false>>;
+  id: string;
+  innerProps: {};
+  isDisabled: boolean;
+  isInvalid: boolean;
+  name: string;
+  onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
+  onFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
+  selectProps: {};
+  spacing: Spacing;
+  locale: string;
+};
+
+export declare interface DatePickerProps extends WithAnalyticsEventsProps {
+  /**
+     Set the appearance of the picker.
+
+     `subtle` will remove the borders, background, and icon.
+
+     **NOTE:** Appearance values will be ignored if styles are parsed through `selectProps`.
+     */
+  appearance?: Appearance;
+  /** Set the picker to autofocus on mount. */
+  autoFocus?: boolean;
+  /** The default for `isOpen`. Will be `false` if not provided. */
+  defaultIsOpen?: boolean;
+  /** The default for `value`. */
+  defaultValue?: string;
+  /** An array of ISO dates that should be disabled on the calendar. This does not affect what users can type into the picker. */
+  disabled?: string[];
+  /**
+     A filter function for disabling dates on the calendar. This does not affect what users can type into the picker.
+
+     The function is called with a date string in the format `YYYY-MM-DD` and should return `true` if the date should be disabled.
+     */
+  disabledDateFilter?: (date: string) => boolean;
+  /** The latest enabled date. Dates after this are disabled on the calendar. This does not affect what users can type into the picker. */
+  maxDate?: string;
+  /** The earliest enabled date. Dates before this are disabled on the calendar. This does not affect what users can type into the picker. */
+  minDate?: string;
+  /** The icon shown in the picker. */
+  icon?: IndicatorComponentType<OptionType>;
+  /**
+     The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`.
+
+     Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
+     */
+  id?: string;
+  /** Props to apply to the container. **/
+  innerProps?: React.AllHTMLAttributes<HTMLElement>;
+  /** Set if the picker is disabled. */
+  isDisabled?: boolean;
+  /** Set if the picker is open. */
+  isOpen?: boolean;
+  /** The name of the field. */
+  name?: string;
+  /** The aria-label attribute associated with the next-month arrow. */
+  nextMonthLabel?: string;
+  /** Called when the field is blurred. */
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  /** Called when the value changes. The only argument is an ISO time or empty string. */
+  onChange?: (value: string) => void;
+  /** Called when the field is focused. */
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  /** A function for parsing input characters and transforming them into a Date object. By default parses the date string based off the locale. */
+  parseInputValue?: (date: string, dateFormat: string) => Date;
+  /** A function for formatting the date displayed in the input. By default composes together [date-fn's parse method](https://date-fns.org/v1.29.0/docs/parse) and [date-fn's format method](https://date-fns.org/v1.29.0/docs/format) to return a correctly formatted date string. */
+  formatDisplayLabel?: (value: string, dateFormat: string) => string;
+  /** The aria-label attribute associated with the previous-month arrow. */
+  previousMonthLabel?: string;
+  /** Props to apply to the select. This can be used to set options such as placeholder text.
+   *  See [the `Select` documentation for further information](/components/select). */
+  selectProps?: SelectProps;
+  /**
+     The spacing for the select control.
+
+     Compact is `gridSize() * 4`, default is `gridSize * 5`.
+     */
+  spacing?: Spacing;
+  /** The ISO time used as the input value. */
+  value?: string;
+  /** Set if the picker has an invalid value. */
+  isInvalid?: boolean;
+  /** Hides icon for dropdown indicator. */
+  hideIcon?: boolean;
+  /** Format the date with a string that is accepted by [date-fn's format function](https://date-fns.org/v1.29.0/docs/format). */
+  dateFormat?: string;
+  /** Placeholder text displayed in input */
+  placeholder?: string;
+  /** Locale used to format the date and calendar. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). */
+  locale?: string;
+  /**
+   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+   *  - `{testId}--container` wrapping element of date-picker
+   *  - `{testId}--calendar--container` nested calendar component
+   **/
+  testId?: string;
+  /**
+   * Start day of the week for the calendar.
+   * - `0` sunday (default value)
+   * - `1` monday
+   * - `2` tuesday
+   * - `3` wednesday
+   * - `4` thursday
+   * - `5` friday
+   * - `6` saturday
+   */
+  weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+declare type DatePickerProps_2 = typeof datePickerDefaultProps &
+  DatePickerProps;
+
+export declare const DateTimePicker: React_2.ForwardRefExoticComponent<
+  Pick<
+    Pick<
+      Omit<DateTimePickerProps_2, keyof WithAnalyticsEventsProps>,
+      | 'testId'
+      | 'hideIcon'
+      | 'value'
+      | 'dateFormat'
+      | 'timeFormat'
+      | 'parseValue'
+    > &
+      Partial<
+        Pick<
+          Omit<DateTimePickerProps_2, keyof WithAnalyticsEventsProps>,
+          | 'appearance'
+          | 'innerProps'
+          | 'autoFocus'
+          | 'defaultValue'
+          | 'id'
+          | 'isDisabled'
+          | 'isInvalid'
+          | 'name'
+          | 'onBlur'
+          | 'onChange'
+          | 'onFocus'
+          | 'spacing'
+          | 'locale'
+          | 'times'
+          | 'timeIsEditable'
+          | 'datePickerProps'
+          | 'timePickerProps'
+          | 'datePickerSelectProps'
+          | 'timePickerSelectProps'
+        >
+      > &
+      Partial<
+        Pick<
+          {
+            appearance: string;
+            autoFocus: boolean;
+            isDisabled: boolean;
+            name: string;
+            onBlur: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+            onChange: (value: string) => void;
+            onFocus: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+            innerProps: {};
+            id: string;
+            defaultValue: string;
+            timeIsEditable: boolean;
+            isInvalid: boolean;
+            datePickerProps: {};
+            timePickerProps: {};
+            datePickerSelectProps: {};
+            timePickerSelectProps: {};
+            times: string[];
+            spacing: string;
+            locale: string;
+          },
+          never
+        >
+      > &
+      React_2.RefAttributes<any> &
+      WithContextProps,
+    | 'testId'
+    | 'appearance'
+    | 'innerProps'
+    | 'autoFocus'
+    | 'defaultValue'
+    | 'hideIcon'
+    | 'id'
+    | 'isDisabled'
+    | 'isInvalid'
+    | 'name'
+    | 'onBlur'
+    | 'onChange'
+    | 'onFocus'
+    | 'spacing'
+    | 'locale'
+    | 'value'
+    | 'dateFormat'
+    | 'key'
+    | 'analyticsContext'
+    | 'times'
+    | 'timeIsEditable'
+    | 'timeFormat'
+    | 'datePickerProps'
+    | 'timePickerProps'
+    | 'datePickerSelectProps'
+    | 'timePickerSelectProps'
+    | 'parseValue'
+  > &
+    React_2.RefAttributes<any>
+>;
+
+declare const dateTimePickerDefaultProps: {
+  appearance: string;
+  autoFocus: boolean;
+  isDisabled: boolean;
+  name: string;
+  onBlur: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
+  onFocus: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+  innerProps: {};
+  id: string;
+  defaultValue: string;
+  timeIsEditable: boolean;
+  isInvalid: boolean;
+  datePickerProps: {};
+  timePickerProps: {};
+  datePickerSelectProps: {};
+  timePickerSelectProps: {};
+  times: string[];
+  spacing: string;
+  locale: string;
+};
+
+export declare interface DateTimePickerProps extends WithAnalyticsEventsProps {
+  /**
+   * Set the appearance of the picker.
+   *
+   * `subtle` will remove the borders and background.
+   */
+  appearance?: Appearance;
+  /** Set the picker to autofocus on mount. */
+  autoFocus?: boolean;
+  /** The default for `value`. */
+  defaultValue?: string;
+  /**
+   * The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`.
+   * Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
+   */
+  id?: string;
+  /** Props to apply to the container. **/
+  innerProps?: React_2.AllHTMLAttributes<HTMLElement>;
+  /** Set if the field is disabled. */
+  isDisabled?: boolean;
+  /** The name of the field. */
+  name?: string;
+  /** Called when the field is blurred. */
+  onBlur?: React_2.FocusEventHandler<HTMLInputElement>;
+  /** Called when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string. */
+  onChange?: (value: string) => void;
+  /** Called when the field is focused. */
+  onFocus?: React_2.FocusEventHandler<HTMLInputElement>;
+  /** The ISO time that should be used as the input value. */
+  value?: string;
+  /** Set if users can edit the input, allowing them to add custom times. */
+  timeIsEditable?: boolean;
+  /** Set if the picker has an invalid value. */
+  isInvalid?: boolean;
+  /** DEPRECATED - This is here only for backwards compatibility and doesn't do anything. It will be removed in the next MAJOR. */
+  hideIcon?: boolean;
+  /** Format the date with a string that is accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format). */
+  dateFormat?: string;
+  /** Props applied to the `DatePicker`. */
+  datePickerProps?: DatePickerProps;
+  /** Props applied to the `TimePicker`. */
+  timePickerProps?: TimePickerProps;
+  /** Function used to parse datetime values into their date, time and timezone sub-values. **/
+  parseValue?: (
+    dateTimeValue: string,
+    date: string,
+    time: string,
+    timezone: string,
+  ) => {
+    dateValue: string;
+    timeValue: string;
+    zoneValue: string;
+  };
+  /** [Select props](/components/select) to pass onto the `DatePicker` component's `Select`. This can be used to set options such as placeholder text. */
+  datePickerSelectProps?: SelectProps_2<any>;
+  /** [Select props](/components/select) to pass onto the `TimePicker` component's `Select`. This can be used to set options such as placeholder text. */
+  timePickerSelectProps?: SelectProps_2<any>;
+  /** The times shown by the `TimePicker`. */
+  times?: Array<string>;
+  /** The format that times are displayed in. Values should be those accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format). */
+  timeFormat?: string;
+  /**
+   * The spacing for the select control.
+   *
+   * Compact is `gridSize() * 4`, default is `gridSize() * 5`.
+   */
+  spacing?: Spacing;
+  /** Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). */
+  locale?: string;
+  /**
+   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+   *  - `{testId}--datepicker--container` wrapping element of date-picker
+   *  - `{testId}--timepicker--container` wrapping element of time-picker
+   **/
+  testId?: string;
+}
+
+declare type DateTimePickerProps_2 = typeof dateTimePickerDefaultProps &
+  DateTimePickerProps;
+
+declare type SelectProps = any;
+
+export declare type Spacing = 'compact' | 'default';
+
+export declare const TimePicker: React_2.ForwardRefExoticComponent<
+  Pick<
+    Pick<
+      Omit<TimePickerProps_2, keyof WithAnalyticsEventsProps>,
+      | 'testId'
+      | 'isOpen'
+      | 'formatDisplayLabel'
+      | 'value'
+      | 'placeholder'
+      | 'timeFormat'
+    > &
+      Partial<
+        Pick<
+          Omit<TimePickerProps_2, keyof WithAnalyticsEventsProps>,
+          | 'appearance'
+          | 'selectProps'
+          | 'innerProps'
+          | 'autoFocus'
+          | 'defaultIsOpen'
+          | 'defaultValue'
+          | 'hideIcon'
+          | 'id'
+          | 'isDisabled'
+          | 'isInvalid'
+          | 'name'
+          | 'onBlur'
+          | 'onChange'
+          | 'onFocus'
+          | 'spacing'
+          | 'locale'
+          | 'parseInputValue'
+          | 'times'
+          | 'timeIsEditable'
+        >
+      > &
+      Partial<
+        Pick<
+          {
+            appearance: Appearance;
+            autoFocus: boolean;
+            defaultIsOpen: boolean;
+            defaultValue: string;
+            hideIcon: boolean;
+            id: string;
+            innerProps: {};
+            isDisabled: boolean;
+            isInvalid: boolean;
+            name: string;
+            onBlur: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+            onChange: (value: string) => void;
+            onFocus: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+            parseInputValue: (
+              time: string,
+              timeFormat: string,
+            ) => string | Date;
+            selectProps: {};
+            spacing: Spacing;
+            times: string[];
+            timeIsEditable: boolean;
+            locale: string;
+          },
+          never
+        >
+      > &
+      React_2.RefAttributes<any> &
+      WithContextProps,
+    | 'testId'
+    | 'appearance'
+    | 'selectProps'
+    | 'innerProps'
+    | 'autoFocus'
+    | 'defaultIsOpen'
+    | 'defaultValue'
+    | 'hideIcon'
+    | 'id'
+    | 'isDisabled'
+    | 'isInvalid'
+    | 'name'
+    | 'onBlur'
+    | 'onChange'
+    | 'onFocus'
+    | 'spacing'
+    | 'locale'
+    | 'isOpen'
+    | 'parseInputValue'
+    | 'formatDisplayLabel'
+    | 'value'
+    | 'placeholder'
+    | 'key'
+    | 'analyticsContext'
+    | 'times'
+    | 'timeIsEditable'
+    | 'timeFormat'
+  > &
+    React_2.RefAttributes<any>
+>;
+
+declare const timePickerDefaultProps: {
+  appearance: Appearance;
+  autoFocus: boolean;
+  defaultIsOpen: boolean;
+  defaultValue: string;
+  hideIcon: boolean;
+  id: string;
+  innerProps: {};
+  isDisabled: boolean;
+  isInvalid: boolean;
+  name: string;
+  onBlur: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
+  onFocus: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+  parseInputValue: (time: string, timeFormat: string) => string | Date;
+  selectProps: {};
+  spacing: Spacing;
+  times: string[];
+  timeIsEditable: boolean;
+  locale: string;
+};
+
+export declare interface TimePickerProps extends WithAnalyticsEventsProps {
+  /**
+     Set the appearance of the picker.
+
+     `subtle` will remove the borders, background, and icon.
+
+     **NOTE:** Appearance values will be ignored if styles are parsed through `selectProps`.
+     */
+  appearance?: Appearance;
+  /** Set the picker to autofocus on mount. */
+  autoFocus?: boolean;
+  /** The default for `isOpen`. */
+  defaultIsOpen?: boolean;
+  /** The default for `value`. */
+  defaultValue?: string;
+  /** DEPRECATED - Use locale instead. Function for formatting the displayed time value in the input. By default parses with an internal time parser, and formats using the [date-fns format function]((https://date-fns.org/v1.29.0/docs/format)). */
+  formatDisplayLabel?: (time: string, timeFormat: string) => string;
+  /** The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`. Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release. */
+  id?: string;
+  /** Props to apply to the container. **/
+  innerProps?: React_2.AllHTMLAttributes<HTMLElement>;
+  /** Set if the field is disabled. */
+  isDisabled?: boolean;
+  /** Set if the dropdown is open. Will be `false` if not provided. */
+  isOpen?: boolean;
+  /** The name of the field. */
+  name?: string;
+  /** Called when the field is blurred. */
+  onBlur?: React_2.FocusEventHandler<HTMLElement>;
+  /** Called when the value changes. The only argument is an ISO time or empty string. */
+  onChange?: (value: string) => void;
+  /** Called when the field is focused. */
+  onFocus?: React_2.FocusEventHandler<HTMLElement>;
+  parseInputValue?: (time: string, timeFormat: string) => string | Date;
+  /** Props to apply to the select. */
+  selectProps?: SelectProps_2<any>;
+  /**
+     The spacing for the select control.
+
+     Compact is `gridSize() * 4`, default is `gridSize * 5`.
+     */
+  spacing?: Spacing;
+  /** The times shown in the dropdown. */
+  times?: string[];
+  /** Set if users can edit the input, allowing them to add custom times. */
+  timeIsEditable?: boolean;
+  /** The ISO time that should be used as the input value. */
+  value?: string;
+  /** Set if the picker has an invalid value. */
+  isInvalid?: boolean;
+  /** Hides icon for dropdown indicator. */
+  hideIcon?: boolean;
+  /** Time format that is accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format). */
+  timeFormat?: string;
+  /** Placeholder text displayed in input. */
+  placeholder?: string;
+  /** Locale used to format the time. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). */
+  locale?: string;
+  /**
+   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests:
+   *  - `{testId}--container` wrapping element of time-picker
+   **/
+  testId?: string;
+}
+
+declare type TimePickerProps_2 = typeof timePickerDefaultProps &
+  TimePickerProps;
+
+export {};
+```