@atlaskit/datetime-picker 13.10.0 → 13.11.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/datetime-picker
 
+## 13.11.0
+
+### Minor Changes
+
+- [#129307](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129307)
+  [`8f67a01e4e56f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8f67a01e4e56f) -
+  Fix internal type issues with regard to forwarding types from underlying `select` package.
+
+## 13.10.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.10.0
 
 ### Minor Changes

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

@@ -38,7 +38,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.10.0";
+var packageVersion = "13.11.0";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -295,6 +295,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       _this.setState(changedState);
       _this.props.onChange('');
     });
+    // `unknown` is used because `value` is unused so it does not matter.
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectChange", function (_value, action) {
       // Used for native clear event in React Select
       // Triggered when clicking ClearIndicator or backspace with no value
@@ -450,6 +451,22 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         previousMonthLabel: previousMonthLabel,
         shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
       };
+      var mergedStyles = (0, _select.mergeStyles)(selectStyles, {
+        control: function control(base) {
+          return _objectSpread(_objectSpread({}, base), disabledStyle);
+        },
+        indicatorsContainer: function indicatorsContainer(base) {
+          return _objectSpread(_objectSpread({}, base), {}, {
+            paddingLeft: "var(--ds-space-025, 2px)",
+            // ICON_PADDING = 2
+            paddingRight: "var(--ds-space-075, 6px)" // 8 - ICON_PADDING = 6
+          });
+        }
+      });
+      var initialValue = value ? {
+        label: this.formatDate(value),
+        value: value
+      } : null;
       return (
         // These event handlers must be on this element because the events come
         // from different child elements.
@@ -485,23 +502,9 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           onChange: this.onSelectChange
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           ,
-          styles: (0, _select.mergeStyles)(selectStyles, {
-            control: function control(base) {
-              return _objectSpread(_objectSpread({}, base), disabledStyle);
-            },
-            indicatorsContainer: function indicatorsContainer(base) {
-              return _objectSpread(_objectSpread({}, base), {}, {
-                paddingLeft: "var(--ds-space-025, 2px)",
-                // ICON_PADDING = 2
-                paddingRight: "var(--ds-space-075, 6px)" // 8 - ICON_PADDING = 6
-              });
-            }
-          }),
+          styles: mergedStyles,
           placeholder: this.getPlaceholder(),
-          value: value && {
-            label: this.formatDate(value),
-            value: value
-          }
+          value: initialValue
         }, selectProps, calendarProps, {
           isClearable: true,
           spacing: spacing,

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

@@ -34,7 +34,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.10.0";
+var packageVersion = "13.11.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({

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

@@ -36,7 +36,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line no-restricted-imports
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.10.0";
+var packageVersion = "13.11.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -257,10 +257,10 @@ var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/func
           value: time
         };
       });
-      var labelAndValue = value && {
+      var initialValue = value ? {
         label: formatTime(value),
         value: value
-      };
+      } : null;
       var SingleValue = (0, _singleValue.makeSingleValue)({
         lang: this.props.locale
       });
@@ -320,7 +320,7 @@ var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/func
         onMenuClose: this.onMenuClose,
         placeholder: placeholder || l10n.formatTime(_internal.placeholderDatetime),
         styles: mergedStyles,
-        value: labelAndValue,
+        value: initialValue,
         spacing: spacing
         // @ts-ignore caused by prop not part of @atlaskit/select
         ,

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

@@ -20,7 +20,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.10.0";
+const packageVersion = "13.11.0";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -276,6 +276,7 @@ class DatePickerComponent extends Component {
       this.setState(changedState);
       this.props.onChange('');
     });
+    // `unknown` is used because `value` is unused so it does not matter.
     _defineProperty(this, "onSelectChange", (_value, action) => {
       // Used for native clear event in React Select
       // Triggered when clicking ClearIndicator or backspace with no value
@@ -451,6 +452,22 @@ class DatePickerComponent extends Component {
       previousMonthLabel,
       shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
     };
+    const mergedStyles = mergeStyles(selectStyles, {
+      control: base => ({
+        ...base,
+        ...disabledStyle
+      }),
+      indicatorsContainer: base => ({
+        ...base,
+        paddingLeft: "var(--ds-space-025, 2px)",
+        // ICON_PADDING = 2
+        paddingRight: "var(--ds-space-075, 6px)" // 8 - ICON_PADDING = 6
+      })
+    });
+    const initialValue = value ? {
+      label: this.formatDate(value),
+      value
+    } : null;
     return (
       // These event handlers must be on this element because the events come
       // from different child elements.
@@ -486,23 +503,9 @@ class DatePickerComponent extends Component {
         onChange: this.onSelectChange
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        styles: mergeStyles(selectStyles, {
-          control: base => ({
-            ...base,
-            ...disabledStyle
-          }),
-          indicatorsContainer: base => ({
-            ...base,
-            paddingLeft: "var(--ds-space-025, 2px)",
-            // ICON_PADDING = 2
-            paddingRight: "var(--ds-space-075, 6px)" // 8 - ICON_PADDING = 6
-          })
-        }),
+        styles: mergedStyles,
         placeholder: this.getPlaceholder(),
-        value: value && {
-          label: this.formatDate(value),
-          value
-        }
+        value: initialValue
       }, selectProps, calendarProps, {
         isClearable: true,
         spacing: spacing,

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

@@ -20,7 +20,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.10.0";
+const packageVersion = "13.11.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({

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

@@ -16,7 +16,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.10.0";
+const packageVersion = "13.11.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -233,10 +233,10 @@ class TimePickerComponent extends React.Component {
         value: time
       };
     });
-    const labelAndValue = value && {
+    const initialValue = value ? {
       label: formatTime(value),
       value
-    };
+    } : null;
     const SingleValue = makeSingleValue({
       lang: this.props.locale
     });
@@ -296,7 +296,7 @@ class TimePickerComponent extends React.Component {
       onMenuClose: this.onMenuClose,
       placeholder: placeholder || l10n.formatTime(placeholderDatetime),
       styles: mergedStyles,
-      value: labelAndValue,
+      value: initialValue,
       spacing: spacing
       // @ts-ignore caused by prop not part of @atlaskit/select
       ,

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

@@ -31,7 +31,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.10.0";
+var packageVersion = "13.11.0";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -288,6 +288,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       _this.setState(changedState);
       _this.props.onChange('');
     });
+    // `unknown` is used because `value` is unused so it does not matter.
     _defineProperty(_assertThisInitialized(_this), "onSelectChange", function (_value, action) {
       // Used for native clear event in React Select
       // Triggered when clicking ClearIndicator or backspace with no value
@@ -443,6 +444,22 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         previousMonthLabel: previousMonthLabel,
         shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
       };
+      var mergedStyles = mergeStyles(selectStyles, {
+        control: function control(base) {
+          return _objectSpread(_objectSpread({}, base), disabledStyle);
+        },
+        indicatorsContainer: function indicatorsContainer(base) {
+          return _objectSpread(_objectSpread({}, base), {}, {
+            paddingLeft: "var(--ds-space-025, 2px)",
+            // ICON_PADDING = 2
+            paddingRight: "var(--ds-space-075, 6px)" // 8 - ICON_PADDING = 6
+          });
+        }
+      });
+      var initialValue = value ? {
+        label: this.formatDate(value),
+        value: value
+      } : null;
       return (
         // These event handlers must be on this element because the events come
         // from different child elements.
@@ -478,23 +495,9 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           onChange: this.onSelectChange
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           ,
-          styles: mergeStyles(selectStyles, {
-            control: function control(base) {
-              return _objectSpread(_objectSpread({}, base), disabledStyle);
-            },
-            indicatorsContainer: function indicatorsContainer(base) {
-              return _objectSpread(_objectSpread({}, base), {}, {
-                paddingLeft: "var(--ds-space-025, 2px)",
-                // ICON_PADDING = 2
-                paddingRight: "var(--ds-space-075, 6px)" // 8 - ICON_PADDING = 6
-              });
-            }
-          }),
+          styles: mergedStyles,
           placeholder: this.getPlaceholder(),
-          value: value && {
-            label: this.formatDate(value),
-            value: value
-          }
+          value: initialValue
         }, selectProps, calendarProps, {
           isClearable: true,
           spacing: spacing,

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

@@ -30,7 +30,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.10.0";
+var packageVersion = "13.11.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({

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

@@ -28,7 +28,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.10.0";
+var packageVersion = "13.11.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -249,10 +249,10 @@ var TimePickerComponent = /*#__PURE__*/function (_React$Component) {
           value: time
         };
       });
-      var labelAndValue = value && {
+      var initialValue = value ? {
         label: formatTime(value),
         value: value
-      };
+      } : null;
       var SingleValue = makeSingleValue({
         lang: this.props.locale
       });
@@ -312,7 +312,7 @@ var TimePickerComponent = /*#__PURE__*/function (_React$Component) {
         onMenuClose: this.onMenuClose,
         placeholder: placeholder || l10n.formatTime(placeholderDatetime),
         styles: mergedStyles,
-        value: labelAndValue,
+        value: initialValue,
         spacing: spacing
         // @ts-ignore caused by prop not part of @atlaskit/select
         ,

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

@@ -6,7 +6,7 @@ import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import { type CalendarRef } from '@atlaskit/calendar';
 import { type LocalizationProvider } from '@atlaskit/locale';
-import { type ActionMeta, type DropdownIndicatorProps, type InputActionMeta, type OptionType, type ValueType } from '@atlaskit/select';
+import { type ActionMeta, type DropdownIndicatorProps, type GroupType, type InputActionMeta, type OptionType } from '@atlaskit/select';
 import { type Appearance, type DatePickerBaseProps, type Spacing } from '../types';
 type DatePickerProps = typeof datePickerDefaultProps & DatePickerBaseProps;
 interface State {
@@ -33,7 +33,7 @@ declare const datePickerDefaultProps: {
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     hideIcon: boolean;
-    icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, import("@atlaskit/select").GroupType<OptionType>>>;
+    icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, GroupType<OptionType>>>;
     id: string;
     innerProps: {};
     isDisabled: boolean;
@@ -56,7 +56,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
         disabled: string[];
         disabledDateFilter: (_: string) => boolean;
         hideIcon: boolean;
-        icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, import("@atlaskit/select").GroupType<OptionType>>>;
+        icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, GroupType<OptionType>>>;
         id: string;
         innerProps: {};
         isDisabled: boolean;
@@ -78,7 +78,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
         locale: string;
     } | null;
     getSafeState: () => {
-        inputValue?: string | undefined;
+        inputValue: any;
         value: string;
         isOpen: boolean;
         isFocused: boolean;
@@ -104,7 +104,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     onClear: () => void;
-    onSelectChange: (_value: ValueType<OptionType>, action: ActionMeta) => void;
+    onSelectChange: (_value: unknown, action: ActionMeta) => void;
     refCalendar: (ref: CalendarRef | null) => void;
     handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
     getContainerRef: (ref: HTMLElement | null) => void;
@@ -136,7 +136,7 @@ export { DatePickerComponent as DatePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
  */
-declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "spacing" | "isInvalid" | "hideIcon">> & Partial<Pick<{
+declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "hideIcon">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -144,7 +144,7 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     hideIcon: boolean;
-    icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, import("@atlaskit/select").GroupType<OptionType>>>;
+    icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, GroupType<OptionType>>>;
     id: string;
     innerProps: {};
     isDisabled: boolean;
@@ -157,5 +157,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
 export default DatePicker;

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

@@ -89,7 +89,7 @@ export { TimePickerComponent as TimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-declare const TimePicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "value" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "value" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "parseInputValue" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -110,5 +110,5 @@ declare const TimePicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePic
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default TimePicker;

package/dist/types/types.d.ts

@@ -3,7 +3,15 @@ import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { type DropdownIndicatorProps, type OptionType, type SelectProps } from '@atlaskit/select';
 export type Appearance = 'default' | 'subtle' | 'none';
 export type Spacing = 'compact' | 'default';
-export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
+type Combine<First, Second> = Omit<First, keyof Second> & Second;
+interface PickerSelectProps {
+    /**
+     * Props to apply to the select. These include all of [the props from our
+     * `Select` component](/components/select).
+     */
+    selectProps?: Combine<SelectProps<OptionType>, {}>;
+}
+export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
     /**
      * Set the appearance of the picker.
      * `subtle` will remove the borders, background, and icon.
@@ -102,11 +110,6 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
      * The aria-label attribute associated with the previous-month arrow.
      */
     previousMonthLabel?: string;
-    /**
-     * Props to apply to the select. This can be used to set options such as placeholder text.
-     *  See [the `Select` documentation for further information](/components/select).
-     */
-    selectProps?: SelectProps<any>;
     /**
      * The spacing for the select control.
      *
@@ -155,7 +158,7 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
      */
     weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }
-export interface TimePickerBaseProps extends WithAnalyticsEventsProps {
+export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
     /**
      * Set the appearance of the picker.
      * `subtle` will remove the borders, background, and icon.
@@ -225,10 +228,6 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps {
      * By default parses the string based off the locale.
      */
     parseInputValue?: (time: string, timeFormat: string) => string | Date;
-    /**
-     * Props to apply to the select.
-     */
-    selectProps?: SelectProps<any>;
     /**
      * The spacing for the select control.
      *
@@ -388,3 +387,4 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      */
     testId?: string;
 }
+export {};

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

@@ -6,7 +6,7 @@ import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import { type CalendarRef } from '@atlaskit/calendar';
 import { type LocalizationProvider } from '@atlaskit/locale';
-import { type ActionMeta, type DropdownIndicatorProps, type InputActionMeta, type OptionType, type ValueType } from '@atlaskit/select';
+import { type ActionMeta, type DropdownIndicatorProps, type GroupType, type InputActionMeta, type OptionType } from '@atlaskit/select';
 import { type Appearance, type DatePickerBaseProps, type Spacing } from '../types';
 type DatePickerProps = typeof datePickerDefaultProps & DatePickerBaseProps;
 interface State {
@@ -33,7 +33,7 @@ declare const datePickerDefaultProps: {
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     hideIcon: boolean;
-    icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, import("@atlaskit/select").GroupType<OptionType>>>;
+    icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, GroupType<OptionType>>>;
     id: string;
     innerProps: {};
     isDisabled: boolean;
@@ -56,7 +56,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
         disabled: string[];
         disabledDateFilter: (_: string) => boolean;
         hideIcon: boolean;
-        icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, import("@atlaskit/select").GroupType<OptionType>>>;
+        icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, GroupType<OptionType>>>;
         id: string;
         innerProps: {};
         isDisabled: boolean;
@@ -78,7 +78,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
         locale: string;
     } | null;
     getSafeState: () => {
-        inputValue?: string | undefined;
+        inputValue: any;
         value: string;
         isOpen: boolean;
         isFocused: boolean;
@@ -104,7 +104,7 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     onClear: () => void;
-    onSelectChange: (_value: ValueType<OptionType>, action: ActionMeta) => void;
+    onSelectChange: (_value: unknown, action: ActionMeta) => void;
     refCalendar: (ref: CalendarRef | null) => void;
     handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
     getContainerRef: (ref: HTMLElement | null) => void;
@@ -136,7 +136,7 @@ export { DatePickerComponent as DatePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
  */
-declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "spacing" | "isInvalid" | "hideIcon">> & Partial<Pick<{
+declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "dateFormat"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "hideIcon">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -144,7 +144,7 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     hideIcon: boolean;
-    icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, import("@atlaskit/select").GroupType<OptionType>>>;
+    icon: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, GroupType<OptionType>>>;
     id: string;
     innerProps: {};
     isDisabled: boolean;
@@ -157,5 +157,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "label" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
 export default DatePicker;

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

@@ -89,7 +89,7 @@ export { TimePickerComponent as TimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-declare const TimePicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "value" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "autoFocus" | "defaultIsOpen" | "name" | "parseInputValue" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "placeholder" | "aria-describedby" | "value" | "isOpen" | "formatDisplayLabel" | "timeFormat"> & Partial<Pick<Omit<TimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "times" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "locale" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "parseInputValue" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -110,5 +110,5 @@ declare const TimePicker: React.ForwardRefExoticComponent<Pick<Pick<Omit<TimePic
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "value" | "autoFocus" | "defaultIsOpen" | "isOpen" | "name" | "parseInputValue" | "formatDisplayLabel" | "spacing" | "isInvalid" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "times" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "placeholder" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default TimePicker;

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

@@ -3,7 +3,15 @@ import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { type DropdownIndicatorProps, type OptionType, type SelectProps } from '@atlaskit/select';
 export type Appearance = 'default' | 'subtle' | 'none';
 export type Spacing = 'compact' | 'default';
-export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
+type Combine<First, Second> = Omit<First, keyof Second> & Second;
+interface PickerSelectProps {
+    /**
+     * Props to apply to the select. These include all of [the props from our
+     * `Select` component](/components/select).
+     */
+    selectProps?: Combine<SelectProps<OptionType>, {}>;
+}
+export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
     /**
      * Set the appearance of the picker.
      * `subtle` will remove the borders, background, and icon.
@@ -102,11 +110,6 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
      * The aria-label attribute associated with the previous-month arrow.
      */
     previousMonthLabel?: string;
-    /**
-     * Props to apply to the select. This can be used to set options such as placeholder text.
-     *  See [the `Select` documentation for further information](/components/select).
-     */
-    selectProps?: SelectProps<any>;
     /**
      * The spacing for the select control.
      *
@@ -155,7 +158,7 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
      */
     weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }
-export interface TimePickerBaseProps extends WithAnalyticsEventsProps {
+export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
     /**
      * Set the appearance of the picker.
      * `subtle` will remove the borders, background, and icon.
@@ -225,10 +228,6 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps {
      * By default parses the string based off the locale.
      */
     parseInputValue?: (time: string, timeFormat: string) => string | Date;
-    /**
-     * Props to apply to the select.
-     */
-    selectProps?: SelectProps<any>;
     /**
      * The spacing for the select control.
      *
@@ -388,3 +387,4 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      */
     testId?: string;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "13.10.0",
+	"version": "13.11.0",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -47,7 +47,7 @@
 		"@atlaskit/locale": "^2.8.0",
 		"@atlaskit/popper": "^6.2.0",
 		"@atlaskit/select": "^17.13.0",
-		"@atlaskit/theme": "^12.12.0",
+		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^1.58.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",