@atlaskit/datetime-picker 12.1.4 → 12.2.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/datetime-picker
 
+## 12.2.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 12.2.0
+
+### Minor Changes
+
+- [`a91fbaf0552`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a91fbaf0552) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- [`0fbb2840aba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0fbb2840aba) - Add isInvalid prop to `@atlastkit/Select`. The prop indicates whether if the component is in the error state. If true, it visually shows a red border around the input.
+
+  This replaces validationState to make Select more consistent like other components that uses isInvalid prop.
+
+- Updated dependencies
+
 ## 12.1.4
 
 ### Patch Changes

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

@@ -29,7 +29,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _dateFns = require("date-fns");
 
@@ -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.4";
+var packageVersion = "12.2.1";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -84,7 +84,7 @@ function getValidDate(iso) {
   return (0, _dateFns.isValid)(date) ? getDateObj(date) : {};
 }
 
-var menuStyles = (0, _core.css)({
+var menuStyles = (0, _react2.css)({
   zIndex: _constants.layers.dialog(),
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N20, ")"),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
@@ -95,12 +95,12 @@ var menuStyles = (0, _core.css)({
 var Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
       innerProps = _ref.innerProps;
-  return (0, _core.jsx)(_fixedLayer.default, {
+  return (0, _react2.jsx)(_fixedLayer.default, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
-    content: (0, _core.jsx)("div", (0, _extends2.default)({
+    content: (0, _react2.jsx)("div", (0, _extends2.default)({
       css: menuStyles
-    }, innerProps), (0, _core.jsx)(_calendar.default, (0, _extends2.default)({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
+    }, innerProps), (0, _react2.jsx)(_calendar.default, (0, _extends2.default)({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
       disabled: selectProps.calendarDisabled,
       disabledDateFilter: selectProps.calendarDisabledDateFilter,
       minDate: selectProps.calendarMinDate,
@@ -536,20 +536,20 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         nextMonthLabel: nextMonthLabel,
         previousMonthLabel: previousMonthLabel
       };
-      return (0, _core.jsx)("div", (0, _extends2.default)({}, innerProps, {
+      return (0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
         role: "presentation",
         onClick: this.onInputClick,
         onInput: this.onSelectInput,
         onKeyDown: this.onSelectKeyDown,
         ref: this.getContainerRef,
         "data-testid": testId && "".concat(testId, "--container")
-      }), (0, _core.jsx)("input", {
+      }), (0, _react2.jsx)("input", {
         id: selectProps.inputId,
         name: name,
         type: "hidden",
         value: value,
         "data-testid": testId && "".concat(testId, "--input")
-      }), (0, _core.jsx)(_select.default, (0, _extends2.default)({
+      }), (0, _react2.jsx)(_select.default, (0, _extends2.default)({
         appearance: this.props.appearance,
         enableAnimation: false,
         menuIsOpen: menuIsOpen,
@@ -582,7 +582,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       }, selectProps, calendarProps, {
         isClearable: true,
         spacing: spacing,
-        validationState: isInvalid ? 'error' : 'default',
+        isInvalid: isInvalid,
         testId: testId
       })));
     }

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

@@ -25,7 +25,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _dateFns = require("date-fns");
 
@@ -58,27 +58,27 @@ 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.4";
+var packageVersion = "12.2.1";
 /* eslint-disable react/no-unused-prop-types */
 
-var isInvalidBorderStyles = (0, _core.css)({
+var isInvalidBorderStyles = (0, _react2.css)({
   borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
 });
-var isFocusedBorderStyles = (0, _core.css)({
+var isFocusedBorderStyles = (0, _react2.css)({
   borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
 });
-var isFocusedStyles = (0, _core.css)({
+var isFocusedStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")")
 });
-var subtleBgStyles = (0, _core.css)({
+var subtleBgStyles = (0, _react2.css)({
   backgroundColor: 'transparent',
   borderColor: 'transparent'
 });
-var subtleFocusedBgStyles = (0, _core.css)({
+var subtleFocusedBgStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-input-pressed, transparent)",
   borderColor: 'transparent'
 });
-var noBgStyles = (0, _core.css)({
+var noBgStyles = (0, _react2.css)({
   backgroundColor: 'transparent',
   borderColor: 'transparent',
   '&:hover': {
@@ -86,24 +86,24 @@ var noBgStyles = (0, _core.css)({
     borderColor: 'transparent'
   }
 });
-var hoverStyles = (0, _core.css)({
+var hoverStyles = (0, _react2.css)({
   '&:hover': {
     backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
     borderColor: "var(--ds-border-input, ".concat(_colors.N30, ")")
   }
 });
-var isInvalidHoverStyles = (0, _core.css)({
+var isInvalidHoverStyles = (0, _react2.css)({
   '&:hover': {
     backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N0, ")"),
     borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
   }
 });
-var isDisabledStyles = (0, _core.css)({
+var isDisabledStyles = (0, _react2.css)({
   '&:hover': {
     cursor: 'default'
   }
 });
-var baseContainerStyles = (0, _core.css)({
+var baseContainerStyles = (0, _react2.css)({
   display: 'flex',
   backgroundColor: "var(--ds-background-input, ".concat(_colors.N20, ")"),
   border: "2px solid ".concat("var(--ds-border-input, ".concat(_colors.N20, ")")),
@@ -115,17 +115,17 @@ var baseContainerStyles = (0, _core.css)({
 }); // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 
-var datePickerContainerStyles = (0, _core.css)({
+var datePickerContainerStyles = (0, _react2.css)({
   flexBasis: '50%',
   flexGrow: 1,
   flexShrink: 0
 });
-var timePickerContainerStyles = (0, _core.css)({
+var timePickerContainerStyles = (0, _react2.css)({
   flexBasis: '50%',
   flexGrow: 1
 });
 var ICON_PADDING = 2;
-var iconContainerStyles = (0, _core.css)({
+var iconContainerStyles = (0, _react2.css)({
   display: 'flex',
   paddingTop: "6px",
   paddingRight: "".concat((0, _constants.gridSize)(), "px"),
@@ -339,18 +339,18 @@ 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)({
+      return (0, _react2.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), bothProps.appearance === 'none' && noBgStyles]
       }, innerProps, {
         "data-testid": testId
-      }), (0, _core.jsx)("input", {
+      }), (0, _react2.jsx)("input", {
         id: labelId,
         name: name,
         type: "hidden",
         value: value
-      }), (0, _core.jsx)("div", {
+      }), (0, _react2.jsx)("div", {
         css: datePickerContainerStyles
-      }, (0, _core.jsx)(_datePicker.default, (0, _extends2.default)({}, bothProps, {
+      }, (0, _react2.jsx)(_datePicker.default, (0, _extends2.default)({}, bothProps, {
         autoFocus: autoFocus,
         dateFormat: dateFormat,
         hideIcon: true,
@@ -360,9 +360,9 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         value: dateValue,
         locale: locale,
         testId: testId && "".concat(testId, "--datepicker")
-      }, datePickerProps))), (0, _core.jsx)("div", {
+      }, datePickerProps))), (0, _react2.jsx)("div", {
         css: timePickerContainerStyles
-      }, (0, _core.jsx)(_timePicker.default, (0, _extends2.default)({}, bothProps, {
+      }, (0, _react2.jsx)(_timePicker.default, (0, _extends2.default)({}, bothProps, {
         hideIcon: true,
         onChange: this.onTimeChange,
         selectProps: mergedTimePickerSelectProps,
@@ -373,11 +373,11 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         locale: locale,
         testId: testId && "".concat(testId, "--timepicker")
       }, timePickerProps))), isClearable && !isDisabled ? // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-      (0, _core.jsx)("div", {
+      (0, _react2.jsx)("div", {
         css: iconContainerStyles,
         onClick: this.onClear,
         "data-testid": testId && "".concat(testId, "--icon--container")
-      }, (0, _core.jsx)(_selectClear.default, {
+      }, (0, _react2.jsx)(_selectClear.default, {
         size: "small",
         primaryColor: "inherit",
         label: "clear"

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

@@ -65,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.4";
+var packageVersion = "12.2.1";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -320,7 +320,8 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           name = _this$props3.name,
           selectProps = _this$props3.selectProps,
           spacing = _this$props3.spacing,
-          testId = _this$props3.testId;
+          testId = _this$props3.testId,
+          isInvalid = _this$props3.isInvalid;
       var ICON_PADDING = 2;
 
       var _this$getSafeState3 = this.getSafeState(),
@@ -328,7 +329,6 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           value = _this$getSafeState3$v === void 0 ? '' : _this$getSafeState3$v,
           isOpen = _this$getSafeState3.isOpen;
 
-      var validationState = this.props.isInvalid ? 'error' : 'default';
       var _selectProps$styles = selectProps.styles,
           selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
           otherSelectProps = (0, _objectWithoutProperties2.default)(selectProps, _excluded2);
@@ -399,7 +399,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           value: labelAndValue,
           spacing: spacing,
           fixedLayerRef: this.containerRef,
-          validationState: validationState,
+          isInvalid: isInvalid,
           testId: testId
         }, otherSelectProps)))
       );

package/dist/cjs/version.json

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

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

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { Component } from 'react';
-import { css, jsx } from '@emotion/core'; // eslint-disable-next-line no-restricted-imports
+import { css, jsx } from '@emotion/react'; // eslint-disable-next-line no-restricted-imports
 
 import { format, isValid, lastDayOfMonth, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
@@ -20,7 +20,7 @@ import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime }
 import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.1.4";
+const packageVersion = "12.2.1";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -534,7 +534,7 @@ class DatePicker extends Component {
     }, selectProps, calendarProps, {
       isClearable: true,
       spacing: spacing,
-      validationState: isInvalid ? 'error' : 'default',
+      isInvalid: isInvalid,
       testId: testId
     })));
   }

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

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core'; // eslint-disable-next-line no-restricted-imports
+import { css, jsx } from '@emotion/react'; // eslint-disable-next-line no-restricted-imports
 
 import { format, isValid, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
@@ -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.4";
+const packageVersion = "12.2.1";
 /* eslint-disable react/no-unused-prop-types */
 
 const isInvalidBorderStyles = css({

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

@@ -15,7 +15,7 @@ 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.4";
+const packageVersion = "12.2.1";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -262,14 +262,14 @@ class TimePicker extends React.Component {
       name,
       selectProps,
       spacing,
-      testId
+      testId,
+      isInvalid
     } = this.props;
     const ICON_PADDING = 2;
     const {
       value = '',
       isOpen
     } = this.getSafeState();
-    const validationState = this.props.isInvalid ? 'error' : 'default';
     const {
       styles: selectStyles = {},
       ...otherSelectProps
@@ -337,7 +337,7 @@ class TimePicker extends React.Component {
         value: labelAndValue,
         spacing: spacing,
         fixedLayerRef: this.containerRef,
-        validationState: validationState,
+        isInvalid: isInvalid,
         testId: testId
       }, otherSelectProps)))
     );

package/dist/es2019/version.json

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

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

@@ -20,7 +20,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import { Component } from 'react';
-import { css, jsx } from '@emotion/core'; // eslint-disable-next-line no-restricted-imports
+import { css, jsx } from '@emotion/react'; // eslint-disable-next-line no-restricted-imports
 
 import { format, isValid, lastDayOfMonth, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
@@ -35,7 +35,7 @@ import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime }
 import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.4";
+var packageVersion = "12.2.1";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -569,7 +569,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       }, selectProps, calendarProps, {
         isClearable: true,
         spacing: spacing,
-        validationState: isInvalid ? 'error' : 'default',
+        isInvalid: isInvalid,
         testId: testId
       })));
     }

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

@@ -19,7 +19,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core'; // eslint-disable-next-line no-restricted-imports
+import { css, jsx } from '@emotion/react'; // eslint-disable-next-line no-restricted-imports
 
 import { format, isValid, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
@@ -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.4";
+var packageVersion = "12.2.1";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = css({

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

@@ -32,7 +32,7 @@ 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.4";
+var packageVersion = "12.2.1";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -302,7 +302,8 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           name = _this$props3.name,
           selectProps = _this$props3.selectProps,
           spacing = _this$props3.spacing,
-          testId = _this$props3.testId;
+          testId = _this$props3.testId,
+          isInvalid = _this$props3.isInvalid;
       var ICON_PADDING = 2;
 
       var _this$getSafeState3 = this.getSafeState(),
@@ -310,8 +311,6 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           value = _this$getSafeState3$v === void 0 ? '' : _this$getSafeState3$v,
           isOpen = _this$getSafeState3.isOpen;
 
-      var validationState = this.props.isInvalid ? 'error' : 'default';
-
       var _selectProps$styles = selectProps.styles,
           selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
           otherSelectProps = _objectWithoutProperties(selectProps, _excluded2);
@@ -383,7 +382,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           value: labelAndValue,
           spacing: spacing,
           fixedLayerRef: this.containerRef,
-          validationState: validationState,
+          isInvalid: isInvalid,
           testId: testId
         }, otherSelectProps)))
       );

package/dist/esm/version.json

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

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { Component } from 'react';
+import { jsx } from '@emotion/react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { CalendarRef } from '@atlaskit/calendar';
 import { LocalizationProvider } from '@atlaskit/locale';
@@ -260,10 +261,10 @@ declare class DatePicker extends Component<DatePickerProps, State> {
      */
     formatDate: (value: string) => string;
     getPlaceholder: () => string;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }
 export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale">> & Partial<Pick<{
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "maxDate" | "minDate" | "isOpen" | "nextMonthLabel" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay"> & Partial<Pick<Omit<DatePickerProps, keyof WithAnalyticsEventsProps>, "icon" | "disabled" | "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "id" | "innerProps" | "isDisabled" | "name" | "onBlur" | "onChange" | "onFocus" | "selectProps" | "spacing" | "isInvalid" | "hideIcon" | "locale">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -283,5 +284,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").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"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "maxDate" | "minDate" | "id" | "innerProps" | "isDisabled" | "isOpen" | "name" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "parseInputValue" | "formatDisplayLabel" | "previousMonthLabel" | "selectProps" | "spacing" | "value" | "isInvalid" | "hideIcon" | "dateFormat" | "placeholder" | "locale" | "weekStartDay" | "key" | "analyticsContext"> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { SelectProps } from '@atlaskit/select';
 import { Appearance, Spacing } from '../types';
@@ -190,10 +191,10 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
         timeValue: string;
         zoneValue: string;
     }): void;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }
 export { DateTimePicker as DateTimePickerWithoutAnalytics };
-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<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Omit<DateTimePickerProps, keyof WithAnalyticsEventsProps>, "appearance" | "autoFocus" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "isInvalid" | "locale" | "times" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
     appearance: string;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -213,5 +214,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" | "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" | "autoFocus" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "value" | "isInvalid" | "dateFormat" | "locale" | "key" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -204,7 +204,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     render(): JSX.Element;
 }
 export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "isOpen" | "formatDisplayLabel" | "value" | "placeholder" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "parseInputValue" | "times" | "timeIsEditable">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "testId" | "isOpen" | "formatDisplayLabel" | "value" | "placeholder" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof WithAnalyticsEventsProps>, "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "name" | "onBlur" | "onChange" | "onFocus" | "parseInputValue" | "selectProps" | "spacing" | "isInvalid" | "hideIcon" | "locale" | "times" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -224,5 +224,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePicke
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").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.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "id" | "innerProps" | "isDisabled" | "isOpen" | "name" | "onBlur" | "onChange" | "onFocus" | "parseInputValue" | "formatDisplayLabel" | "selectProps" | "spacing" | "value" | "isInvalid" | "hideIcon" | "placeholder" | "locale" | "key" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default _default;