@atlaskit/datetime-picker 13.11.3 → 14.0.1

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

@@ -1,3 +1,4 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -5,6 +6,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["selectProps"],
+  _excluded2 = ["selectProps"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -28,7 +31,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.11.3";
+var packageVersion = "14.0.1";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({
@@ -92,8 +95,6 @@ var dateTimePickerDefaultProps = {
   isInvalid: false,
   datePickerProps: {},
   timePickerProps: {},
-  datePickerSelectProps: {},
-  timePickerSelectProps: {},
   times: defaultTimes,
   spacing: 'default',
   locale: 'en-US'
@@ -229,9 +230,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         ariaDescribedBy = _this$props['aria-describedby'],
         appearance = _this$props.appearance,
         autoFocus = _this$props.autoFocus,
-        dateFormat = _this$props.dateFormat,
-        datePickerProps = _this$props.datePickerProps,
-        datePickerSelectProps = _this$props.datePickerSelectProps,
+        datePickerPropsWithSelectProps = _this$props.datePickerProps,
         id = _this$props.id,
         innerProps = _this$props.innerProps,
         isDisabled = _this$props.isDisabled,
@@ -240,29 +239,25 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         name = _this$props.name,
         spacing = _this$props.spacing,
         testId = _this$props.testId,
-        timeFormat = _this$props.timeFormat,
-        timeIsEditable = _this$props.timeIsEditable,
-        timePickerProps = _this$props.timePickerProps,
-        timePickerSelectProps = _this$props.timePickerSelectProps,
-        times = _this$props.times;
+        timePickerPropsWithSelectProps = _this$props.timePickerProps;
       var value = this.getValue();
       var isFocused = this.state.isFocused;
       var parsedValues = this.getParsedValues();
       var dateValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.dateValue;
       var timeValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.timeValue;
-      var _datePickerSelectProp = datePickerSelectProps.styles,
-        datePickerStyles = _datePickerSelectProp === void 0 ? {} : _datePickerSelectProp;
-      var _timePickerSelectProp = timePickerSelectProps.styles,
-        timePickerStyles = _timePickerSelectProp === void 0 ? {} : _timePickerSelectProp;
+      var datePickerSelectProps = datePickerPropsWithSelectProps.selectProps,
+        datePickerProps = _objectWithoutProperties(datePickerPropsWithSelectProps, _excluded);
+      var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
+      var datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
       var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
-        'aria-describedby': datePickerProps['aria-describedby'] || ariaDescribedBy,
-        'aria-label': datePickerProps['label'] || datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
-        styles: mergeStyles(styles, datePickerStyles)
+        styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
       });
+      var timePickerSelectProps = timePickerPropsWithSelectProps.selectProps,
+        timePickerProps = _objectWithoutProperties(timePickerPropsWithSelectProps, _excluded2);
+      var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
+      var timePickerLabel = timePickerProps.label || timePickerDefaultAriaLabel;
       var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
-        'aria-describedby': timePickerProps['aria-describedby'] || ariaDescribedBy,
-        'aria-label': timePickerProps['label'] || timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
-        styles: mergeStyles(styles, timePickerStyles)
+        styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
       });
 
       // Render DateTimePicker's IconContainer when a value has been filled
@@ -284,8 +279,9 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         css: datePickerContainerStyles
       }, jsx(DatePicker, {
         appearance: appearance,
+        "aria-describedby": datePickerAriaDescribedBy,
         autoFocus: datePickerProps.autoFocus || autoFocus,
-        dateFormat: datePickerProps.dateFormat || dateFormat,
+        dateFormat: datePickerProps.dateFormat,
         defaultIsOpen: datePickerProps.defaultIsOpen,
         defaultValue: datePickerProps.defaultValue,
         disabled: datePickerProps.disabled,
@@ -298,6 +294,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         isDisabled: datePickerProps.isDisabled || isDisabled,
         isInvalid: datePickerProps.isInvalid || isInvalid,
         isOpen: datePickerProps.isOpen,
+        label: datePickerLabel,
         locale: datePickerProps.locale || locale,
         maxDate: datePickerProps.maxDate,
         minDate: datePickerProps.minDate,
@@ -318,6 +315,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         css: timePickerContainerStyles
       }, jsx(TimePicker, {
         appearance: timePickerProps.appearance || appearance,
+        "aria-describedby": timePickerAriaDescribedBy,
         autoFocus: timePickerProps.autoFocus,
         defaultIsOpen: timePickerProps.defaultIsOpen,
         defaultValue: timePickerProps.defaultValue,
@@ -328,6 +326,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         isDisabled: timePickerProps.isDisabled || isDisabled,
         isInvalid: timePickerProps.isInvalid || isInvalid,
         isOpen: timePickerProps.isOpen,
+        label: timePickerLabel,
         locale: timePickerProps.locale || locale,
         name: timePickerProps.name,
         onBlur: timePickerProps.onBlur || this.onBlur,
@@ -338,9 +337,9 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         selectProps: mergedTimePickerSelectProps,
         spacing: timePickerProps.spacing || spacing,
         testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
-        timeFormat: timePickerProps.timeFormat || timeFormat,
-        timeIsEditable: timePickerProps.timeIsEditable || timeIsEditable,
-        times: timePickerProps.times || times,
+        timeFormat: timePickerProps.timeFormat,
+        timeIsEditable: timePickerProps.timeIsEditable,
+        times: timePickerProps.times,
         value: timeValue
       })), isClearable && !isDisabled ? jsx("button", {
         css: iconContainerStyles,

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

@@ -27,7 +27,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.11.3";
+var packageVersion = "14.0.1";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -28,8 +28,6 @@ declare const dateTimePickerDefaultProps: {
     isInvalid: boolean;
     datePickerProps: {};
     timePickerProps: {};
-    datePickerSelectProps: {};
-    timePickerSelectProps: {};
     times: string[];
     spacing: NonNullable<import("../types").Spacing | undefined>;
     locale: string;
@@ -72,5 +70,5 @@ export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<DateTimePickerProps, "ref" | "createAnalyticsEvent">>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerProps, "ref" | "createAnalyticsEvent">>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
 export default DateTimePicker;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { default as DatePicker } from './components/date-picker';
 export { default as TimePicker } from './components/time-picker';
 export { default as DateTimePicker } from './components/date-time-picker';
-export type { Appearance, Spacing, DatePickerBaseProps as DatePickerProps, TimePickerBaseProps as TimePickerProps, DateTimePickerBaseProps as DateTimePickerProps, } from './types';
+export type { Appearance, Spacing, DatePickerBaseProps as DatePickerProps, TimePickerBaseProps as TimePickerProps, DateTimePickerBaseProps as DateTimePickerProps, DateTimePickerSelectProps, } from './types';

package/dist/types/types.d.ts

@@ -4,12 +4,48 @@ import { type DropdownIndicatorProps, type OptionType, type SelectProps } from '
 export type Appearance = 'default' | 'subtle' | 'none';
 export type Spacing = 'compact' | 'default';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
+/**
+ * Props to apply to the select. These include all of [the props from our
+ * `Select` component](/components/select). For the following properties, use
+ * the top-level prop alternatives:
+ *
+ * - `aria-describedby`, use `aria-describedby` prop
+ * - `aria-label`, use `label` prop
+ * - `inputId`, use `id` prop
+ * - `placeholder`, use `placeholder` prop
+ *
+ * Example:
+ *
+ * ```tsx
+ * // Don't do this
+ * <DatePicker selectProps={{
+ *   'aria-describedby': 'helper-id'
+ * }} />
+ *
+ * // Do this
+ * <DatePicker aria-describedby="helper-id" />
+ * ```
+ */
+export type DateTimePickerSelectProps = Combine<SelectProps<OptionType>, {
+    /**
+     * Use the `aria-describedby` prop on the picker..
+     */
+    'aria-describedby'?: never;
+    /**
+     * Use the `label` prop on the picker..
+     */
+    'aria-label'?: never;
+    /**
+     * Use the `id` prop on the picker.`.
+     */
+    inputId?: never;
+    /**
+     * Use the `placeholder` prop on the picker.
+     */
+    placeholder?: never;
+}>;
 interface PickerSelectProps {
-    /**
-     * Props to apply to the select. These include all of [the props from our
-     * `Select` component](/components/select).
-     */
-    selectProps?: Combine<SelectProps<OptionType>, {}>;
+    selectProps?: DateTimePickerSelectProps;
 }
 export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
     /**
@@ -175,6 +211,8 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * `subtle` will remove the borders, background, and icon.
      *
      * __NOTE:__ Appearance values will be ignored if styles are parsed through `selectProps`.
+     *
+     * @deprecated
      */
     appearance?: Appearance;
     /**
@@ -293,13 +331,15 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      * Set the appearance of the picker.
      *
      * `subtle` will remove the borders and background.
+     *
+     * @deprecated
      */
     appearance?: Appearance;
     /**
      * Used to associate accessible descriptions to both the date and time
      * picker. If you want to associate individual accessible descriptions, this
-     * should be done through the `datePickerSelectProps` and
-     * `timePickerSelectProps`.
+     * should be done through the `aria-describedby` props on the
+     * `datePickerProps` and `timePickerProps`.
      */
     'aria-describedby'?: string;
     /**
@@ -345,18 +385,10 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      * 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;
-    /**
-     * 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`.
      */
@@ -373,22 +405,6 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
         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<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<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.
      *

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

@@ -28,8 +28,6 @@ declare const dateTimePickerDefaultProps: {
     isInvalid: boolean;
     datePickerProps: {};
     timePickerProps: {};
-    datePickerSelectProps: {};
-    timePickerSelectProps: {};
     times: string[];
     spacing: NonNullable<import("../types").Spacing | undefined>;
     locale: string;
@@ -72,5 +70,5 @@ export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<DateTimePickerProps, "ref" | "createAnalyticsEvent">>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "dateFormat" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "parseValue" | "datePickerSelectProps" | "timePickerSelectProps"> & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerProps, "ref" | "createAnalyticsEvent">>, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
 export default DateTimePicker;

package/dist/types-ts4.5/index.d.ts

@@ -1,4 +1,4 @@
 export { default as DatePicker } from './components/date-picker';
 export { default as TimePicker } from './components/time-picker';
 export { default as DateTimePicker } from './components/date-time-picker';
-export type { Appearance, Spacing, DatePickerBaseProps as DatePickerProps, TimePickerBaseProps as TimePickerProps, DateTimePickerBaseProps as DateTimePickerProps, } from './types';
+export type { Appearance, Spacing, DatePickerBaseProps as DatePickerProps, TimePickerBaseProps as TimePickerProps, DateTimePickerBaseProps as DateTimePickerProps, DateTimePickerSelectProps, } from './types';

package/dist/types-ts4.5/types.d.ts

@@ -4,12 +4,48 @@ import { type DropdownIndicatorProps, type OptionType, type SelectProps } from '
 export type Appearance = 'default' | 'subtle' | 'none';
 export type Spacing = 'compact' | 'default';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
+/**
+ * Props to apply to the select. These include all of [the props from our
+ * `Select` component](/components/select). For the following properties, use
+ * the top-level prop alternatives:
+ *
+ * - `aria-describedby`, use `aria-describedby` prop
+ * - `aria-label`, use `label` prop
+ * - `inputId`, use `id` prop
+ * - `placeholder`, use `placeholder` prop
+ *
+ * Example:
+ *
+ * ```tsx
+ * // Don't do this
+ * <DatePicker selectProps={{
+ *   'aria-describedby': 'helper-id'
+ * }} />
+ *
+ * // Do this
+ * <DatePicker aria-describedby="helper-id" />
+ * ```
+ */
+export type DateTimePickerSelectProps = Combine<SelectProps<OptionType>, {
+    /**
+     * Use the `aria-describedby` prop on the picker..
+     */
+    'aria-describedby'?: never;
+    /**
+     * Use the `label` prop on the picker..
+     */
+    'aria-label'?: never;
+    /**
+     * Use the `id` prop on the picker.`.
+     */
+    inputId?: never;
+    /**
+     * Use the `placeholder` prop on the picker.
+     */
+    placeholder?: never;
+}>;
 interface PickerSelectProps {
-    /**
-     * Props to apply to the select. These include all of [the props from our
-     * `Select` component](/components/select).
-     */
-    selectProps?: Combine<SelectProps<OptionType>, {}>;
+    selectProps?: DateTimePickerSelectProps;
 }
 export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
     /**
@@ -175,6 +211,8 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * `subtle` will remove the borders, background, and icon.
      *
      * __NOTE:__ Appearance values will be ignored if styles are parsed through `selectProps`.
+     *
+     * @deprecated
      */
     appearance?: Appearance;
     /**
@@ -293,13 +331,15 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      * Set the appearance of the picker.
      *
      * `subtle` will remove the borders and background.
+     *
+     * @deprecated
      */
     appearance?: Appearance;
     /**
      * Used to associate accessible descriptions to both the date and time
      * picker. If you want to associate individual accessible descriptions, this
-     * should be done through the `datePickerSelectProps` and
-     * `timePickerSelectProps`.
+     * should be done through the `aria-describedby` props on the
+     * `datePickerProps` and `timePickerProps`.
      */
     'aria-describedby'?: string;
     /**
@@ -345,18 +385,10 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      * 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;
-    /**
-     * 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`.
      */
@@ -373,22 +405,6 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
         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<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<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.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "13.11.3",
+	"version": "14.0.1",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/calendar": "^14.5.0",
 		"@atlaskit/ds-lib": "^2.5.0",
-		"@atlaskit/icon": "^22.14.0",
+		"@atlaskit/icon": "^22.15.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/locale": "^2.8.0",
 		"@atlaskit/popper": "^6.2.0",
@@ -61,6 +61,7 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/button": "^20.1.0",
+		"@atlaskit/codemod-utils": "4.2.4",
 		"@atlaskit/docs": "*",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/modal-dialog": "^12.15.0",
@@ -76,6 +77,7 @@
 		"@testing-library/user-event": "^14.4.3",
 		"@types/testing-library__jest-dom": "^5.14.5",
 		"jest-in-case": "^1.0.2",
+		"jscodeshift": "^0.13.0",
 		"moment": "^2.29.2",
 		"react-dom": "^16.8.0",
 		"react-lorem-component": "^0.13.0",