@atlaskit/datetime-picker 14.0.2 → 14.0.4

package/dist/esm/internal/date-picker-migration.js

@@ -0,0 +1,85 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Everything in this file is to smooth out the migration of the new date picker
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
+ * complete, all of these functions will ilkely be merged back into the date
+ * picker. Please do not pre-optimize and put these back into the date picker
+ * unless you are working on the DTP Refresh and you have a good reason to do
+ * so, thank you!
+ *
+ * All variables within the `di` objects are dependency injections. They should
+ * be read from within the component at the end of the day. But because we are
+ * extracting them, we have to inject them in every place manually. When we
+ * re-introduce them to the components, we can likely remove the `di` variables
+ * and instead use internal variables.
+ *
+ * If component _only_ has injected variables, it is fully internal and was
+ * broken out to be it's own function.
+ */
+
+import { format, lastDayOfMonth, parseISO } from 'date-fns';
+import { convertTokens } from './parse-tokens';
+import { defaultDateFormat, padToTwo, placeholderDatetime } from './index';
+export var isDateDisabled = function isDateDisabled(date, di) {
+  var disabled = di.disabled;
+  return disabled.indexOf(date) > -1;
+};
+export var getParsedISO = function getParsedISO(di) {
+  var iso = di.iso;
+  var _iso$split = iso.split('-'),
+    _iso$split2 = _slicedToArray(_iso$split, 3),
+    year = _iso$split2[0],
+    month = _iso$split2[1],
+    date = _iso$split2[2];
+  var newIso = iso;
+  var parsedDate = parseInt(date, 10);
+  var parsedMonth = parseInt(month, 10);
+  var parsedYear = parseInt(year, 10);
+  var lastDayInMonth = lastDayOfMonth(new Date(parsedYear, parsedMonth - 1) // This needs to be -1, because the Date constructor expects an index of the given month
+  ).getDate();
+  if (lastDayInMonth < parsedDate) {
+    newIso = "".concat(year, "-").concat(padToTwo(parsedMonth), "-").concat(padToTwo(lastDayInMonth));
+  } else {
+    newIso = "".concat(year, "-").concat(padToTwo(parsedMonth), "-").concat(padToTwo(parsedDate));
+  }
+  return newIso;
+};
+
+/**
+ * There are two props that can change how the date is parsed.
+ * The priority of props used is:
+ *   1. `parseInputValue`
+ *   2. `locale`
+ */
+export var parseDate = function parseDate(date, di) {
+  var parseInputValue = di.parseInputValue,
+    dateFormat = di.dateFormat,
+    l10n = di.l10n;
+  if (parseInputValue) {
+    return parseInputValue(date, dateFormat || defaultDateFormat);
+  }
+  return l10n.parseDate(date);
+};
+
+/**
+ * There are multiple props that can change how the date is formatted.
+ * The priority of props used is:
+ *   1. `formatDisplayLabel`
+ *   2. `dateFormat`
+ *   3. `locale`
+ */
+export var formatDate = function formatDate(value, di) {
+  var formatDisplayLabel = di.formatDisplayLabel,
+    dateFormat = di.dateFormat,
+    l10n = di.l10n;
+  if (formatDisplayLabel) {
+    return formatDisplayLabel(value, dateFormat || defaultDateFormat);
+  }
+  var date = parseISO(value);
+  return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
+};
+export var getPlaceholder = function getPlaceholder(di) {
+  var placeholder = di.placeholder,
+    l10n = di.l10n;
+  return placeholder || l10n.formatDate(placeholderDatetime);
+};

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

@@ -77,7 +77,6 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     } | null;
     getValue: () => string;
     getIsOpen: () => boolean;
-    isDateDisabled: (date: string) => boolean;
     onCalendarChange: ({ iso }: {
         iso: string;
     }) => void;
@@ -95,22 +94,6 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     onSelectChange: (_value: unknown, action: ActionMeta) => void;
     handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
     getContainerRef: (ref: HTMLElement | null) => void;
-    /**
-     * There are two props that can change how the date is parsed.
-     * The priority of props used is:
-     *   1. `parseInputValue`
-     *   2. `locale`
-     */
-    parseDate: (date: string) => Date;
-    /**
-     * There are multiple props that can change how the date is formatted.
-     * The priority of props used is:
-     *   1. `formatDisplayLabel`
-     *   2. `dateFormat`
-     *   3. `locale`
-     */
-    formatDate: (value: string) => string;
-    getPlaceholder: () => string;
     render(): jsx.JSX.Element;
 }
 export { DatePickerComponent as DatePickerWithoutAnalytics };
@@ -123,7 +106,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" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "hideIcon">> & Partial<Pick<{
+declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "disabled" | "label" | "icon" | "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,5 +127,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" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

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

@@ -1,86 +1,5 @@
 import React from 'react';
-import { type ActionMeta, type OptionType, type ValueType } from '@atlaskit/select';
-import { type Appearance, type Spacing, type TimePickerBaseProps } from '../types';
-type TimePickerProps = typeof timePickerDefaultProps & TimePickerBaseProps;
-interface State {
-    isOpen: boolean;
-    /**
-     * When being cleared from the icon the TimePicker is blurred.
-     * This variable defines whether the default onMenuOpen or onMenuClose
-     * events should behave as normal
-     */
-    clearingFromIcon: boolean;
-    value: string;
-    isFocused: boolean;
-}
-declare const timePickerDefaultProps: {
-    appearance: Appearance;
-    autoFocus: boolean;
-    defaultIsOpen: boolean;
-    defaultValue: string;
-    hideIcon: boolean;
-    id: string;
-    innerProps: {};
-    isDisabled: boolean;
-    isInvalid: boolean;
-    label: string;
-    name: string;
-    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
-    onChange: (_value: string) => void;
-    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-    parseInputValue: (time: string, _timeFormat: string) => string | Date;
-    selectProps: {};
-    spacing: Spacing;
-    times: string[];
-    timeIsEditable: boolean;
-    locale: string;
-};
-declare class TimePickerComponent extends React.Component<TimePickerProps, State> {
-    containerRef: HTMLElement | null;
-    static defaultProps: {
-        appearance: Appearance;
-        autoFocus: boolean;
-        defaultIsOpen: boolean;
-        defaultValue: string;
-        hideIcon: boolean;
-        id: string;
-        innerProps: {};
-        isDisabled: boolean;
-        isInvalid: boolean;
-        label: string;
-        name: string;
-        onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
-        onChange: (_value: string) => void;
-        onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-        parseInputValue: (time: string, _timeFormat: string) => string | Date;
-        selectProps: {};
-        spacing: Spacing;
-        times: string[];
-        timeIsEditable: boolean;
-        locale: string;
-    };
-    state: {
-        isOpen: boolean;
-        clearingFromIcon: boolean;
-        value: string;
-        isFocused: boolean;
-    };
-    getValue: () => string;
-    getIsOpen: () => boolean;
-    onChange: (newValue: ValueType<OptionType> | string, action?: ActionMeta<OptionType>) => void;
-    /**
-     * Only allow custom times if timeIsEditable prop is true
-     */
-    onCreateOption: (inputValue: string) => void;
-    onMenuOpen: () => void;
-    onMenuClose: () => void;
-    setContainerRef: (ref: HTMLElement | null) => void;
-    onBlur: (event: React.FocusEvent<HTMLElement>) => void;
-    onFocus: (event: React.FocusEvent<HTMLElement>) => void;
-    onSelectKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
-}
-export { TimePickerComponent as TimePickerWithoutAnalytics };
+import { type TimePickerBaseProps } from '../types';
 /**
  * __Time picker__
  *
@@ -90,26 +9,5 @@ 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" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "parseInputValue" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
-    appearance: Appearance;
-    autoFocus: boolean;
-    defaultIsOpen: boolean;
-    defaultValue: string;
-    hideIcon: boolean;
-    id: string;
-    innerProps: {};
-    isDisabled: boolean;
-    isInvalid: boolean;
-    label: string;
-    name: string;
-    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
-    onChange: (_value: string) => void;
-    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-    parseInputValue: (time: string, _timeFormat: string) => string | Date;
-    selectProps: {};
-    spacing: Spacing;
-    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" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
 export default TimePicker;

package/dist/types/internal/date-picker-migration.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Everything in this file is to smooth out the migration of the new date picker
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
+ * complete, all of these functions will ilkely be merged back into the date
+ * picker. Please do not pre-optimize and put these back into the date picker
+ * unless you are working on the DTP Refresh and you have a good reason to do
+ * so, thank you!
+ *
+ * All variables within the `di` objects are dependency injections. They should
+ * be read from within the component at the end of the day. But because we are
+ * extracting them, we have to inject them in every place manually. When we
+ * re-introduce them to the components, we can likely remove the `di` variables
+ * and instead use internal variables.
+ *
+ * If component _only_ has injected variables, it is fully internal and was
+ * broken out to be it's own function.
+ */
+import { type LocalizationProvider } from '@atlaskit/locale';
+export declare const isDateDisabled: (date: string, di: {
+    disabled: string[];
+}) => boolean;
+export declare const getParsedISO: (di: {
+    iso: string;
+}) => string;
+/**
+ * There are two props that can change how the date is parsed.
+ * The priority of props used is:
+ *   1. `parseInputValue`
+ *   2. `locale`
+ */
+export declare const parseDate: (date: string, di: {
+    parseInputValue: ((date: string, dateFormat: string) => Date) | undefined;
+    dateFormat: string | undefined;
+    l10n: LocalizationProvider;
+}) => Date;
+/**
+ * There are multiple props that can change how the date is formatted.
+ * The priority of props used is:
+ *   1. `formatDisplayLabel`
+ *   2. `dateFormat`
+ *   3. `locale`
+ */
+export declare const formatDate: (value: string, di: {
+    formatDisplayLabel: ((value: string, dateFormat: string) => string) | undefined;
+    dateFormat: string | undefined;
+    l10n: LocalizationProvider;
+}) => string;
+export declare const getPlaceholder: (di: {
+    placeholder: string | undefined;
+    l10n: LocalizationProvider;
+}) => string;

package/dist/types/types.d.ts

@@ -206,6 +206,10 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
     weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }
 export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
+    /**
+     * Additional information to be included in the `context` of analytics events
+     */
+    analyticsContext?: Record<string, any>;
     /**
      * Set the appearance of the picker.
      * `subtle` will remove the borders, background, and icon.

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

@@ -77,7 +77,6 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     } | null;
     getValue: () => string;
     getIsOpen: () => boolean;
-    isDateDisabled: (date: string) => boolean;
     onCalendarChange: ({ iso }: {
         iso: string;
     }) => void;
@@ -95,22 +94,6 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     onSelectChange: (_value: unknown, action: ActionMeta) => void;
     handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
     getContainerRef: (ref: HTMLElement | null) => void;
-    /**
-     * There are two props that can change how the date is parsed.
-     * The priority of props used is:
-     *   1. `parseInputValue`
-     *   2. `locale`
-     */
-    parseDate: (date: string) => Date;
-    /**
-     * There are multiple props that can change how the date is formatted.
-     * The priority of props used is:
-     *   1. `formatDisplayLabel`
-     *   2. `dateFormat`
-     *   3. `locale`
-     */
-    formatDate: (value: string) => string;
-    getPlaceholder: () => string;
     render(): jsx.JSX.Element;
 }
 export { DatePickerComponent as DatePickerWithoutAnalytics };
@@ -123,7 +106,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" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "hideIcon">> & Partial<Pick<{
+declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "isOpen"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "disabled" | "label" | "icon" | "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,5 +127,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" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "hideIcon" | "dateFormat"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

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

@@ -1,86 +1,5 @@
 import React from 'react';
-import { type ActionMeta, type OptionType, type ValueType } from '@atlaskit/select';
-import { type Appearance, type Spacing, type TimePickerBaseProps } from '../types';
-type TimePickerProps = typeof timePickerDefaultProps & TimePickerBaseProps;
-interface State {
-    isOpen: boolean;
-    /**
-     * When being cleared from the icon the TimePicker is blurred.
-     * This variable defines whether the default onMenuOpen or onMenuClose
-     * events should behave as normal
-     */
-    clearingFromIcon: boolean;
-    value: string;
-    isFocused: boolean;
-}
-declare const timePickerDefaultProps: {
-    appearance: Appearance;
-    autoFocus: boolean;
-    defaultIsOpen: boolean;
-    defaultValue: string;
-    hideIcon: boolean;
-    id: string;
-    innerProps: {};
-    isDisabled: boolean;
-    isInvalid: boolean;
-    label: string;
-    name: string;
-    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
-    onChange: (_value: string) => void;
-    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-    parseInputValue: (time: string, _timeFormat: string) => string | Date;
-    selectProps: {};
-    spacing: Spacing;
-    times: string[];
-    timeIsEditable: boolean;
-    locale: string;
-};
-declare class TimePickerComponent extends React.Component<TimePickerProps, State> {
-    containerRef: HTMLElement | null;
-    static defaultProps: {
-        appearance: Appearance;
-        autoFocus: boolean;
-        defaultIsOpen: boolean;
-        defaultValue: string;
-        hideIcon: boolean;
-        id: string;
-        innerProps: {};
-        isDisabled: boolean;
-        isInvalid: boolean;
-        label: string;
-        name: string;
-        onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
-        onChange: (_value: string) => void;
-        onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-        parseInputValue: (time: string, _timeFormat: string) => string | Date;
-        selectProps: {};
-        spacing: Spacing;
-        times: string[];
-        timeIsEditable: boolean;
-        locale: string;
-    };
-    state: {
-        isOpen: boolean;
-        clearingFromIcon: boolean;
-        value: string;
-        isFocused: boolean;
-    };
-    getValue: () => string;
-    getIsOpen: () => boolean;
-    onChange: (newValue: ValueType<OptionType> | string, action?: ActionMeta<OptionType>) => void;
-    /**
-     * Only allow custom times if timeIsEditable prop is true
-     */
-    onCreateOption: (inputValue: string) => void;
-    onMenuOpen: () => void;
-    onMenuClose: () => void;
-    setContainerRef: (ref: HTMLElement | null) => void;
-    onBlur: (event: React.FocusEvent<HTMLElement>) => void;
-    onFocus: (event: React.FocusEvent<HTMLElement>) => void;
-    onSelectKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
-}
-export { TimePickerComponent as TimePickerWithoutAnalytics };
+import { type TimePickerBaseProps } from '../types';
 /**
  * __Time picker__
  *
@@ -90,26 +9,5 @@ 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" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "parseInputValue" | "hideIcon" | "timeIsEditable">> & Partial<Pick<{
-    appearance: Appearance;
-    autoFocus: boolean;
-    defaultIsOpen: boolean;
-    defaultValue: string;
-    hideIcon: boolean;
-    id: string;
-    innerProps: {};
-    isDisabled: boolean;
-    isInvalid: boolean;
-    label: string;
-    name: string;
-    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
-    onChange: (_value: string) => void;
-    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-    parseInputValue: (time: string, _timeFormat: string) => string | Date;
-    selectProps: {};
-    spacing: Spacing;
-    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" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "name" | "spacing" | "isInvalid" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
 export default TimePicker;

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

@@ -0,0 +1,51 @@
+/**
+ * Everything in this file is to smooth out the migration of the new date picker
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
+ * complete, all of these functions will ilkely be merged back into the date
+ * picker. Please do not pre-optimize and put these back into the date picker
+ * unless you are working on the DTP Refresh and you have a good reason to do
+ * so, thank you!
+ *
+ * All variables within the `di` objects are dependency injections. They should
+ * be read from within the component at the end of the day. But because we are
+ * extracting them, we have to inject them in every place manually. When we
+ * re-introduce them to the components, we can likely remove the `di` variables
+ * and instead use internal variables.
+ *
+ * If component _only_ has injected variables, it is fully internal and was
+ * broken out to be it's own function.
+ */
+import { type LocalizationProvider } from '@atlaskit/locale';
+export declare const isDateDisabled: (date: string, di: {
+    disabled: string[];
+}) => boolean;
+export declare const getParsedISO: (di: {
+    iso: string;
+}) => string;
+/**
+ * There are two props that can change how the date is parsed.
+ * The priority of props used is:
+ *   1. `parseInputValue`
+ *   2. `locale`
+ */
+export declare const parseDate: (date: string, di: {
+    parseInputValue: ((date: string, dateFormat: string) => Date) | undefined;
+    dateFormat: string | undefined;
+    l10n: LocalizationProvider;
+}) => Date;
+/**
+ * There are multiple props that can change how the date is formatted.
+ * The priority of props used is:
+ *   1. `formatDisplayLabel`
+ *   2. `dateFormat`
+ *   3. `locale`
+ */
+export declare const formatDate: (value: string, di: {
+    formatDisplayLabel: ((value: string, dateFormat: string) => string) | undefined;
+    dateFormat: string | undefined;
+    l10n: LocalizationProvider;
+}) => string;
+export declare const getPlaceholder: (di: {
+    placeholder: string | undefined;
+    l10n: LocalizationProvider;
+}) => string;

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

@@ -206,6 +206,10 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
     weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }
 export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
+    /**
+     * Additional information to be included in the `context` of analytics events
+     */
+    analyticsContext?: Record<string, any>;
     /**
      * Set the appearance of the picker.
      * `subtle` will remove the borders, background, and icon.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "14.0.2",
+	"version": "14.0.4",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,10 +38,10 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/calendar": "^15.0.0",
 		"@atlaskit/ds-lib": "^2.5.0",
-		"@atlaskit/icon": "^22.15.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/locale": "^2.8.0",
-		"@atlaskit/popper": "^6.2.0",
+		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/select": "^17.15.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^1.59.0",
@@ -61,12 +61,12 @@
 		"@atlaskit/docs": "*",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/modal-dialog": "^12.15.0",
-		"@atlaskit/popup": "^1.24.0",
+		"@atlaskit/popup": "^1.25.0",
 		"@atlaskit/range": "^7.4.0",
 		"@atlaskit/section-message": "^6.6.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.5.0",
-		"@atlaskit/toggle": "^13.3.0",
+		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/react": "^12.1.5",