@atlaskit/datetime-picker 12.3.2 → 12.3.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/datetime-picker
 
+## 12.3.3
+
+### Patch Changes
+
+- [`cb8f8e76d25`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb8f8e76d25) - Update types for react-select and @atlaskit/select upgrade
+  Update commerce-ui entrypoints that caused a pipeline issue.
+- Updated dependencies
+
 ## 12.3.2
 
 ### Patch Changes

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

@@ -68,7 +68,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.2";
+var packageVersion = "12.3.3";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -506,14 +506,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       var menuIsOpen = isOpen && !isDisabled;
       var showClearIndicator = Boolean((value || inputValue) && !hideIcon);
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
-      var selectComponents = {
+
+      var selectComponents = _objectSpread({
         DropdownIndicator: dropDownIcon,
         Menu: Menu
-      };
-
-      if (!showClearIndicator) {
-        selectComponents.ClearIndicator = _internal.EmptyClearIndicator;
-      }
+      }, !showClearIndicator && {
+        ClearIndicator: _internal.EmptyComponent
+      });
 
       var _selectProps$styles = selectProps.styles,
           selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;

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

@@ -58,7 +58,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.2";
+var packageVersion = "12.3.3";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = (0, _react2.css)({

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.3.2";
+var packageVersion = "12.3.3";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -142,8 +142,9 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSafeState", function () {
       return _objectSpread(_objectSpread({}, _this.state), (0, _pick.default)(_this.props, ['value', 'isOpen']));
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (v, action) {
-      var value = v ? v.value : '';
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (newValue, action) {
+      var rawValue = newValue ? newValue.value || newValue : '';
+      var value = rawValue.toString();
       var changedState = {
         value: value
       };
@@ -321,7 +322,8 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           selectProps = _this$props3.selectProps,
           spacing = _this$props3.spacing,
           testId = _this$props3.testId,
-          isInvalid = _this$props3.isInvalid;
+          isInvalid = _this$props3.isInvalid,
+          timeIsEditable = _this$props3.timeIsEditable;
       var ICON_PADDING = 2;
 
       var _this$getSafeState3 = this.getSafeState(),
@@ -332,19 +334,18 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       var _selectProps$styles = selectProps.styles,
           selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
           otherSelectProps = (0, _objectWithoutProperties2.default)(selectProps, _excluded2);
-      var SelectComponent = this.props.timeIsEditable ? _select.CreatableSelect : _select.default;
+      var SelectComponent = timeIsEditable ? _select.CreatableSelect : _select.default;
       var labelAndValue = value && {
         label: this.formatTime(value),
         value: value
       };
-      var selectComponents = {
-        DropdownIndicator: _internal.DropdownIndicator,
-        Menu: FixedLayerMenu
-      };
 
-      if (hideIcon) {
-        selectComponents.ClearIndicator = _internal.EmptyClearIndicator;
-      }
+      var selectComponents = _objectSpread({
+        DropdownIndicator: _internal.EmptyComponent,
+        Menu: FixedLayerMenu
+      }, hideIcon && {
+        ClearIndicator: _internal.EmptyComponent
+      });
 
       var renderIconContainer = Boolean(!hideIcon && value);
       var mergedStyles = (0, _select.mergeStyles)(selectStyles, {
@@ -397,7 +398,8 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           placeholder: this.getPlaceholder(),
           styles: mergedStyles,
           value: labelAndValue,
-          spacing: spacing,
+          spacing: spacing // @ts-ignore caused by prop not part of @atlaskit/select
+          ,
           fixedLayerRef: this.containerRef,
           isInvalid: isInvalid,
           testId: testId

package/dist/cjs/internal/index.js

@@ -1,22 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultTimes = exports.defaultTimeFormat = exports.defaultDateFormat = exports.EmptyClearIndicator = exports.DropdownIndicator = void 0;
+exports.defaultTimes = exports.defaultTimeFormat = exports.defaultDateFormat = exports.EmptyComponent = void 0;
 exports.formatDateTimeZoneIntoIso = formatDateTimeZoneIntoIso;
 exports.padToTwo = padToTwo;
 exports.placeholderDatetime = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 /* eslint-disable @repo/internal/react/require-jsdoc */
-var EmptyClearIndicator = null; // This date was chosen to clearly show date and time formats (day > 12)
+var EmptyComponent = function EmptyComponent() {
+  return 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
 
-exports.EmptyClearIndicator = EmptyClearIndicator;
+
+exports.EmptyComponent = EmptyComponent;
 var placeholderDatetime = new Date(1993, 1, 18, 13);
 exports.placeholderDatetime = placeholderDatetime;
 var defaultTimes = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00'];
@@ -30,15 +29,6 @@ function padToTwo(number) {
   return number <= 99 ? "0".concat(number).slice(-2) : "".concat(number);
 }
 
-var DropdownIndicator = function DropdownIndicator(props) {
-  // Wanted to use React.Component<{}> but that was having issues
-  // https://github.com/basarat/typescript-book/blob/master/docs/jsx/react.md#react-jsx-tip-accept-a-component-that-can-act-on-props-and-be-rendered-using-jsx
-  var Icon = props.selectProps.dropdownIndicatorIcon;
-  return Icon ? /*#__PURE__*/_react.default.createElement(Icon, null) : null;
-};
-
-exports.DropdownIndicator = DropdownIndicator;
-
 function formatDateTimeZoneIntoIso(date, time, zone) {
   // 12:00 => 12:00, 1:00 => 01:00
   var needsLeadingZero = /^\d:/;

package/dist/cjs/version.json

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

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

@@ -16,11 +16,11 @@ import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { N20, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize, layers } from '@atlaskit/theme/constants';
-import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime } from '../internal';
+import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.3.2";
+const packageVersion = "12.3.3";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -461,13 +461,11 @@ class DatePicker extends Component {
     const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
     const selectComponents = {
       DropdownIndicator: dropDownIcon,
-      Menu
+      Menu,
+      ...(!showClearIndicator && {
+        ClearIndicator: EmptyComponent
+      })
     };
-
-    if (!showClearIndicator) {
-      selectComponents.ClearIndicator = EmptyClearIndicator;
-    }
-
     const {
       styles: selectStyles = {}
     } = selectProps;

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

@@ -19,7 +19,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.3.2";
+const packageVersion = "12.3.3";
 /* eslint-disable react/no-unused-prop-types */
 
 const isInvalidBorderStyles = css({

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

@@ -10,12 +10,12 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/select';
 import { gridSize } from '@atlaskit/theme/constants';
-import { defaultTimeFormat, defaultTimes, DropdownIndicator, EmptyClearIndicator, placeholderDatetime } from '../internal';
+import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.3.2";
+const packageVersion = "12.3.3";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -83,8 +83,9 @@ class TimePicker extends React.Component {
       };
     });
 
-    _defineProperty(this, "onChange", (v, action) => {
-      const value = v ? v.value : '';
+    _defineProperty(this, "onChange", (newValue, action) => {
+      const rawValue = newValue ? newValue.value || newValue : '';
+      const value = rawValue.toString();
       let changedState = {
         value
       };
@@ -263,7 +264,8 @@ class TimePicker extends React.Component {
       selectProps,
       spacing,
       testId,
-      isInvalid
+      isInvalid,
+      timeIsEditable
     } = this.props;
     const ICON_PADDING = 2;
     const {
@@ -274,20 +276,18 @@ class TimePicker extends React.Component {
       styles: selectStyles = {},
       ...otherSelectProps
     } = selectProps;
-    const SelectComponent = this.props.timeIsEditable ? CreatableSelect : Select;
+    const SelectComponent = timeIsEditable ? CreatableSelect : Select;
     const labelAndValue = value && {
       label: this.formatTime(value),
       value
     };
     const selectComponents = {
-      DropdownIndicator,
-      Menu: FixedLayerMenu
+      DropdownIndicator: EmptyComponent,
+      Menu: FixedLayerMenu,
+      ...(hideIcon && {
+        ClearIndicator: EmptyComponent
+      })
     };
-
-    if (hideIcon) {
-      selectComponents.ClearIndicator = EmptyClearIndicator;
-    }
-
     const renderIconContainer = Boolean(!hideIcon && value);
     const mergedStyles = mergeStyles(selectStyles, {
       control: base => ({ ...base
@@ -335,7 +335,8 @@ class TimePicker extends React.Component {
         placeholder: this.getPlaceholder(),
         styles: mergedStyles,
         value: labelAndValue,
-        spacing: spacing,
+        spacing: spacing // @ts-ignore caused by prop not part of @atlaskit/select
+        ,
         fixedLayerRef: this.containerRef,
         isInvalid: isInvalid,
         testId: testId

package/dist/es2019/internal/index.js

@@ -1,6 +1,5 @@
 /* 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)
+export const EmptyComponent = () => 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
 
 export const placeholderDatetime = new Date(1993, 1, 18, 13);
@@ -10,12 +9,6 @@ export const defaultDateFormat = 'YYYY/MM/DD';
 export function padToTwo(number) {
   return number <= 99 ? `0${number}`.slice(-2) : `${number}`;
 }
-export const DropdownIndicator = props => {
-  // Wanted to use React.Component<{}> but that was having issues
-  // https://github.com/basarat/typescript-book/blob/master/docs/jsx/react.md#react-jsx-tip-accept-a-component-that-can-act-on-props-and-be-rendered-using-jsx
-  const Icon = props.selectProps.dropdownIndicatorIcon;
-  return Icon ? /*#__PURE__*/React.createElement(Icon, null) : null;
-};
 export function formatDateTimeZoneIntoIso(date, time, zone) {
   // 12:00 => 12:00, 1:00 => 01:00
   const needsLeadingZero = /^\d:/;

package/dist/es2019/version.json

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

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

@@ -31,11 +31,11 @@ import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { mergeStyles } from '@atlaskit/select';
 import { N20, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize, layers } from '@atlaskit/theme/constants';
-import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime } from '../internal';
+import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.2";
+var packageVersion = "12.3.3";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -493,14 +493,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       var menuIsOpen = isOpen && !isDisabled;
       var showClearIndicator = Boolean((value || inputValue) && !hideIcon);
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
-      var selectComponents = {
+
+      var selectComponents = _objectSpread({
         DropdownIndicator: dropDownIcon,
         Menu: Menu
-      };
-
-      if (!showClearIndicator) {
-        selectComponents.ClearIndicator = EmptyClearIndicator;
-      }
+      }, !showClearIndicator && {
+        ClearIndicator: EmptyComponent
+      });
 
       var _selectProps$styles = selectProps.styles,
           selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;

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

@@ -33,7 +33,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.2";
+var packageVersion = "12.3.3";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = css({

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

@@ -27,12 +27,12 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/select';
 import { gridSize } from '@atlaskit/theme/constants';
-import { defaultTimeFormat, defaultTimes, DropdownIndicator, EmptyClearIndicator, placeholderDatetime } from '../internal';
+import { defaultTimeFormat, defaultTimes, EmptyComponent, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/fixed-layer';
 import parseTime from '../internal/parse-time';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.3.2";
+var packageVersion = "12.3.3";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -114,8 +114,9 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       return _objectSpread(_objectSpread({}, _this.state), pick(_this.props, ['value', 'isOpen']));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (v, action) {
-      var value = v ? v.value : '';
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (newValue, action) {
+      var rawValue = newValue ? newValue.value || newValue : '';
+      var value = rawValue.toString();
       var changedState = {
         value: value
       };
@@ -303,7 +304,8 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           selectProps = _this$props3.selectProps,
           spacing = _this$props3.spacing,
           testId = _this$props3.testId,
-          isInvalid = _this$props3.isInvalid;
+          isInvalid = _this$props3.isInvalid,
+          timeIsEditable = _this$props3.timeIsEditable;
       var ICON_PADDING = 2;
 
       var _this$getSafeState3 = this.getSafeState(),
@@ -315,19 +317,18 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
           otherSelectProps = _objectWithoutProperties(selectProps, _excluded2);
 
-      var SelectComponent = this.props.timeIsEditable ? CreatableSelect : Select;
+      var SelectComponent = timeIsEditable ? CreatableSelect : Select;
       var labelAndValue = value && {
         label: this.formatTime(value),
         value: value
       };
-      var selectComponents = {
-        DropdownIndicator: DropdownIndicator,
-        Menu: FixedLayerMenu
-      };
 
-      if (hideIcon) {
-        selectComponents.ClearIndicator = EmptyClearIndicator;
-      }
+      var selectComponents = _objectSpread({
+        DropdownIndicator: EmptyComponent,
+        Menu: FixedLayerMenu
+      }, hideIcon && {
+        ClearIndicator: EmptyComponent
+      });
 
       var renderIconContainer = Boolean(!hideIcon && value);
       var mergedStyles = mergeStyles(selectStyles, {
@@ -380,7 +381,8 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           placeholder: this.getPlaceholder(),
           styles: mergedStyles,
           value: labelAndValue,
-          spacing: spacing,
+          spacing: spacing // @ts-ignore caused by prop not part of @atlaskit/select
+          ,
           fixedLayerRef: this.containerRef,
           isInvalid: isInvalid,
           testId: testId

package/dist/esm/internal/index.js

@@ -1,6 +1,7 @@
 /* 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)
+export var EmptyComponent = function EmptyComponent() {
+  return 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
 
 export var placeholderDatetime = new Date(1993, 1, 18, 13);
@@ -10,12 +11,6 @@ export var defaultDateFormat = 'YYYY/MM/DD';
 export function padToTwo(number) {
   return number <= 99 ? "0".concat(number).slice(-2) : "".concat(number);
 }
-export var DropdownIndicator = function DropdownIndicator(props) {
-  // Wanted to use React.Component<{}> but that was having issues
-  // https://github.com/basarat/typescript-book/blob/master/docs/jsx/react.md#react-jsx-tip-accept-a-component-that-can-act-on-props-and-be-rendered-using-jsx
-  var Icon = props.selectProps.dropdownIndicatorIcon;
-  return Icon ? /*#__PURE__*/React.createElement(Icon, null) : null;
-};
 export function formatDateTimeZoneIntoIso(date, time, zone) {
   // 12:00 => 12:00, 1:00 => 01:00
   var needsLeadingZero = /^\d:/;

package/dist/esm/version.json

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

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

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { CalendarRef } from '@atlaskit/calendar';
 import { LocalizationProvider } from '@atlaskit/locale';
-import { ActionMeta, IndicatorComponentType, IndicatorProps, OptionType, ValueType } from '@atlaskit/select';
+import { ActionMeta, DropdownIndicatorProps, OptionType, ValueType } from '@atlaskit/select';
 import { Appearance, SelectProps, Spacing } from '../types';
 export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
     /**
@@ -48,7 +48,7 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
     /**
      * The icon shown in the picker.
      */
-    icon?: IndicatorComponentType<OptionType>;
+    icon?: React.ComponentType<DropdownIndicatorProps<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`.
      *
@@ -179,7 +179,7 @@ declare const datePickerDefaultProps: {
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     hideIcon: boolean;
-    icon: import("react").ComponentType<IndicatorProps<OptionType, false>>;
+    icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, import("@atlaskit/select").GroupType<OptionType>>>;
     id: string;
     innerProps: {};
     isDisabled: boolean;
@@ -201,7 +201,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
         disabled: string[];
         disabledDateFilter: (_: string) => boolean;
         hideIcon: boolean;
-        icon: import("react").ComponentType<IndicatorProps<OptionType, false>>;
+        icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, import("@atlaskit/select").GroupType<OptionType>>>;
         id: string;
         innerProps: {};
         isDisabled: boolean;
@@ -272,7 +272,7 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Omit
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     hideIcon: boolean;
-    icon: import("react").ComponentType<IndicatorProps<OptionType, false>>;
+    icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, import("@atlaskit/select").GroupType<OptionType>>>;
     id: string;
     innerProps: {};
     isDisabled: boolean;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { LocalizationProvider } from '@atlaskit/locale';
-import { ActionMeta, OptionType, SelectProps } from '@atlaskit/select';
+import { ActionMeta, OptionType, SelectProps, ValueType } from '@atlaskit/select';
 import { Appearance, Spacing } from '../types';
 interface Option {
     label: string;
@@ -179,13 +179,11 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     UNSAFE_componentWillReceiveProps(nextProps: TimePickerProps): void;
     getSafeState: () => State;
     getOptions(): Array<Option>;
-    onChange: (v: {
-        value: string;
-    } | null, action?: ActionMeta<OptionType> | undefined) => void;
+    onChange: (newValue: ValueType<OptionType> | string, action?: ActionMeta<OptionType> | undefined) => void;
     /**
      * Only allow custom times if timeIsEditable prop is true
      */
-    onCreateOption: (inputValue: any) => void;
+    onCreateOption: (inputValue: string) => void;
     onMenuOpen: () => void;
     onMenuClose: () => void;
     setContainerRef: (ref: HTMLElement | null) => void;

package/dist/types/internal/index.d.ts

@@ -1,10 +1,7 @@
-/// <reference types="react" />
-import { IndicatorProps } from '@atlaskit/select';
-export declare const EmptyClearIndicator: null;
+export declare const EmptyComponent: () => null;
 export declare const placeholderDatetime: Date;
 export declare const defaultTimes: string[];
 export declare const defaultTimeFormat = "h:mma";
 export declare const defaultDateFormat = "YYYY/MM/DD";
 export declare function padToTwo(number: number): string;
-export declare const DropdownIndicator: (props: IndicatorProps<any>) => JSX.Element | null;
 export declare function formatDateTimeZoneIntoIso(date: string, time: string, zone: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "12.3.2",
+  "version": "12.3.3",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,8 +30,8 @@
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/locale": "^2.1.0",
-    "@atlaskit/popper": "^5.2.0",
-    "@atlaskit/select": "^15.7.0",
+    "@atlaskit/popper": "^5.4.0",
+    "@atlaskit/select": "^16.0.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
@@ -44,10 +44,10 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/docs": "*",
     "@atlaskit/field-base": "^15.0.5",
-    "@atlaskit/form": "^8.7.0",
+    "@atlaskit/form": "^8.8.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/popup": "^1.5.0",
     "@atlaskit/range": "^7.0.0",
@@ -60,8 +60,8 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/react": "^11.7.1",
     "@testing-library/react": "^12.1.5",
-    "enzyme": "^3.10.0",
-    "enzyme-to-json": "^3.3.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "moment": "^2.29.2",
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",

package/report.api.md

@@ -1,19 +1,24 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/datetime-picker"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
 
-<!--
-	Generated API Report version: 2.0
--->
+### Main Entry Types
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 import { ComponentType } from 'react';
+import { DropdownIndicatorProps } from '@atlaskit/select';
 import { FocusEvent as FocusEvent_2 } from 'react';
 import { ForwardRefExoticComponent } from 'react';
-import { IndicatorComponentType } from '@atlaskit/select';
-import { IndicatorProps } from '@atlaskit/select';
+import { GroupType } from '@atlaskit/select';
 import { OptionType } from '@atlaskit/select';
 import { default as React_2 } from 'react';
 import { RefAttributes } from 'react';
@@ -22,48 +27,48 @@ import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { WithContextProps } from '@atlaskit/analytics-next';
 
 // @public (undocumented)
-export type Appearance = 'default' | 'subtle' | 'none';
+export type Appearance = 'default' | 'none' | 'subtle';
 
 // @public (undocumented)
 export const DatePicker: ForwardRefExoticComponent<
   Pick<
     Pick<
       Omit<DatePickerProps_2, keyof WithAnalyticsEventsProps>,
-      | 'testId'
+      | 'dateFormat'
+      | 'formatDisplayLabel'
+      | 'isOpen'
       | 'maxDate'
       | 'minDate'
-      | 'isOpen'
       | 'nextMonthLabel'
       | 'parseInputValue'
-      | 'formatDisplayLabel'
+      | 'placeholder'
       | 'previousMonthLabel'
+      | 'testId'
       | 'value'
-      | 'dateFormat'
-      | 'placeholder'
       | 'weekStartDay'
     > &
       Partial<
         Pick<
           Omit<DatePickerProps_2, keyof WithAnalyticsEventsProps>,
-          | 'icon'
-          | 'disabled'
           | 'appearance'
-          | 'selectProps'
-          | 'innerProps'
           | 'autoFocus'
           | 'defaultIsOpen'
           | 'defaultValue'
+          | 'disabled'
           | 'disabledDateFilter'
           | 'hideIcon'
+          | 'icon'
           | 'id'
+          | 'innerProps'
           | 'isDisabled'
           | 'isInvalid'
+          | 'locale'
           | 'name'
           | 'onBlur'
           | 'onChange'
           | 'onFocus'
+          | 'selectProps'
           | 'spacing'
-          | 'locale'
         >
       > &
       Partial<
@@ -76,7 +81,9 @@ export const DatePicker: ForwardRefExoticComponent<
             disabled: string[];
             disabledDateFilter: (_: string) => boolean;
             hideIcon: boolean;
-            icon: ComponentType<IndicatorProps<OptionType, false>>;
+            icon: ComponentType<
+              DropdownIndicatorProps<OptionType, boolean, GroupType<OptionType>>
+            >;
             id: string;
             innerProps: {};
             isDisabled: boolean;
@@ -94,39 +101,39 @@ export const DatePicker: ForwardRefExoticComponent<
       > &
       RefAttributes<any> &
       WithContextProps,
-    | 'testId'
-    | 'icon'
-    | 'disabled'
+    | 'analyticsContext'
     | 'appearance'
-    | 'selectProps'
-    | 'innerProps'
     | 'autoFocus'
+    | 'dateFormat'
     | 'defaultIsOpen'
     | 'defaultValue'
+    | 'disabled'
     | 'disabledDateFilter'
+    | 'formatDisplayLabel'
     | 'hideIcon'
+    | 'icon'
     | 'id'
+    | 'innerProps'
     | 'isDisabled'
     | 'isInvalid'
-    | 'name'
-    | 'onBlur'
-    | 'onChange'
-    | 'onFocus'
-    | 'spacing'
+    | 'isOpen'
+    | 'key'
     | 'locale'
     | 'maxDate'
     | 'minDate'
-    | 'isOpen'
+    | 'name'
     | 'nextMonthLabel'
+    | 'onBlur'
+    | 'onChange'
+    | 'onFocus'
     | 'parseInputValue'
-    | 'formatDisplayLabel'
+    | 'placeholder'
     | 'previousMonthLabel'
+    | 'selectProps'
+    | 'spacing'
+    | 'testId'
     | 'value'
-    | 'dateFormat'
-    | 'placeholder'
     | 'weekStartDay'
-    | 'key'
-    | 'analyticsContext'
   > &
     RefAttributes<any>
 >;
@@ -140,7 +147,9 @@ const datePickerDefaultProps: {
   disabled: string[];
   disabledDateFilter: (_: string) => boolean;
   hideIcon: boolean;
-  icon: ComponentType<IndicatorProps<OptionType, false>>;
+  icon: ComponentType<
+    DropdownIndicatorProps<OptionType, boolean, GroupType<OptionType>>
+  >;
   id: string;
   innerProps: {};
   isDisabled: boolean;
@@ -165,7 +174,7 @@ export interface DatePickerProps extends WithAnalyticsEventsProps {
   disabledDateFilter?: (date: string) => boolean;
   formatDisplayLabel?: (value: string, dateFormat: string) => string;
   hideIcon?: boolean;
-  icon?: IndicatorComponentType<OptionType>;
+  icon?: React.ComponentType<DropdownIndicatorProps<OptionType>>;
   id?: string;
   innerProps?: React.AllHTMLAttributes<HTMLElement>;
   isDisabled?: boolean;
@@ -197,30 +206,30 @@ export const DateTimePicker: React_2.ForwardRefExoticComponent<
   Pick<
     Pick<
       Omit<DateTimePickerProps_2, keyof WithAnalyticsEventsProps>,
-      'testId' | 'value' | 'dateFormat' | 'timeFormat' | 'parseValue'
+      'dateFormat' | 'parseValue' | 'testId' | 'timeFormat' | 'value'
     > &
       Partial<
         Pick<
           Omit<DateTimePickerProps_2, keyof WithAnalyticsEventsProps>,
           | 'appearance'
-          | 'innerProps'
           | 'autoFocus'
+          | 'datePickerProps'
+          | 'datePickerSelectProps'
           | 'defaultValue'
           | 'id'
+          | 'innerProps'
           | 'isDisabled'
           | 'isInvalid'
+          | 'locale'
           | 'name'
           | 'onBlur'
           | 'onChange'
           | 'onFocus'
           | 'spacing'
-          | 'locale'
-          | 'times'
           | 'timeIsEditable'
-          | 'datePickerProps'
           | 'timePickerProps'
-          | 'datePickerSelectProps'
           | 'timePickerSelectProps'
+          | 'times'
         >
       > &
       Partial<
@@ -251,32 +260,32 @@ export const DateTimePicker: React_2.ForwardRefExoticComponent<
       > &
       React_2.RefAttributes<any> &
       WithContextProps,
-    | 'testId'
+    | 'analyticsContext'
     | 'appearance'
-    | 'innerProps'
     | 'autoFocus'
+    | 'dateFormat'
+    | 'datePickerProps'
+    | 'datePickerSelectProps'
     | 'defaultValue'
     | 'id'
+    | 'innerProps'
     | 'isDisabled'
     | 'isInvalid'
+    | 'key'
+    | 'locale'
     | 'name'
     | 'onBlur'
     | 'onChange'
     | 'onFocus'
+    | 'parseValue'
     | 'spacing'
-    | 'locale'
-    | 'value'
-    | 'dateFormat'
-    | 'key'
-    | 'analyticsContext'
-    | 'times'
-    | 'timeIsEditable'
+    | 'testId'
     | 'timeFormat'
-    | 'datePickerProps'
+    | 'timeIsEditable'
     | 'timePickerProps'
-    | 'datePickerSelectProps'
     | 'timePickerSelectProps'
-    | 'parseValue'
+    | 'times'
+    | 'value'
   > &
     React_2.RefAttributes<any>
 >;
@@ -356,35 +365,35 @@ export const TimePicker: React_2.ForwardRefExoticComponent<
   Pick<
     Pick<
       Omit<TimePickerProps_2, keyof WithAnalyticsEventsProps>,
-      | 'testId'
-      | 'isOpen'
       | 'formatDisplayLabel'
-      | 'value'
+      | 'isOpen'
       | 'placeholder'
+      | 'testId'
       | 'timeFormat'
+      | 'value'
     > &
       Partial<
         Pick<
           Omit<TimePickerProps_2, keyof WithAnalyticsEventsProps>,
           | 'appearance'
-          | 'selectProps'
-          | 'innerProps'
           | 'autoFocus'
           | 'defaultIsOpen'
           | 'defaultValue'
           | 'hideIcon'
           | 'id'
+          | 'innerProps'
           | 'isDisabled'
           | 'isInvalid'
+          | 'locale'
           | 'name'
           | 'onBlur'
           | 'onChange'
           | 'onFocus'
-          | 'spacing'
-          | 'locale'
           | 'parseInputValue'
-          | 'times'
+          | 'selectProps'
+          | 'spacing'
           | 'timeIsEditable'
+          | 'times'
         >
       > &
       Partial<
@@ -406,7 +415,7 @@ export const TimePicker: React_2.ForwardRefExoticComponent<
             parseInputValue: (
               time: string,
               timeFormat: string,
-            ) => string | Date;
+            ) => Date | string;
             selectProps: {};
             spacing: Spacing;
             times: string[];
@@ -418,33 +427,33 @@ export const TimePicker: React_2.ForwardRefExoticComponent<
       > &
       React_2.RefAttributes<any> &
       WithContextProps,
-    | 'testId'
+    | 'analyticsContext'
     | 'appearance'
-    | 'selectProps'
-    | 'innerProps'
     | 'autoFocus'
     | 'defaultIsOpen'
     | 'defaultValue'
+    | 'formatDisplayLabel'
     | 'hideIcon'
     | 'id'
+    | 'innerProps'
     | 'isDisabled'
     | 'isInvalid'
+    | 'isOpen'
+    | 'key'
+    | 'locale'
     | 'name'
     | 'onBlur'
     | 'onChange'
     | 'onFocus'
-    | 'spacing'
-    | 'locale'
-    | 'isOpen'
     | 'parseInputValue'
-    | 'formatDisplayLabel'
-    | 'value'
     | 'placeholder'
-    | 'key'
-    | 'analyticsContext'
-    | 'times'
-    | 'timeIsEditable'
+    | 'selectProps'
+    | 'spacing'
+    | 'testId'
     | 'timeFormat'
+    | 'timeIsEditable'
+    | 'times'
+    | 'value'
   > &
     React_2.RefAttributes<any>
 >;
@@ -464,7 +473,7 @@ const timePickerDefaultProps: {
   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;
+  parseInputValue: (time: string, timeFormat: string) => Date | string;
   selectProps: {};
   spacing: Spacing;
   times: string[];
@@ -491,7 +500,7 @@ export interface TimePickerProps extends WithAnalyticsEventsProps {
   onChange?: (value: string) => void;
   onFocus?: React_2.FocusEventHandler<HTMLElement>;
   // (undocumented)
-  parseInputValue?: (time: string, timeFormat: string) => string | Date;
+  parseInputValue?: (time: string, timeFormat: string) => Date | string;
   placeholder?: string;
   selectProps?: SelectProps_2<any>;
   spacing?: Spacing;
@@ -507,3 +516,5 @@ type TimePickerProps_2 = typeof timePickerDefaultProps & TimePickerProps;
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->