@atlaskit/datetime-picker 15.3.0 → 15.4.0

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

@@ -20,15 +20,18 @@ import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
 import { formatDateTimeZoneIntoIso } from '../internal';
 import { DateTimePickerContainer } from '../internal/date-time-picker-container';
 import { convertTokens } from '../internal/parse-tokens';
-import DatePicker from './date-picker';
+import DatePickerOld from './date-picker-class';
+import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
+var DatePicker = fg('dst-date-picker-use-functional-component') ? DatePickerNew : DatePickerOld;
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.3.0";
+var packageVersion = "15.4.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

@@ -17,7 +17,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 = "15.3.0";
+var packageVersion = "15.4.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -0,0 +1,119 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Component } from 'react';
+import { jsx } from '@emotion/react';
+import { type LocalizationProvider } from '@atlaskit/locale';
+import { type ActionMeta, type InputActionMeta } from '@atlaskit/select';
+import { type DatePickerBaseProps } from '../types';
+type DatePickerProps = typeof datePickerDefaultProps & DatePickerBaseProps;
+interface State {
+    isKeyDown: boolean;
+    isOpen: boolean;
+    /**
+     * When being cleared from the icon the DatePicker is blurred.
+     * This variable defines whether the default onSelectBlur or onSelectFocus
+     * events should behave as normal.
+     */
+    isFocused: boolean;
+    clearingFromIcon: boolean;
+    value: string;
+    calendarValue: string;
+    selectInputValue: string;
+    l10n: LocalizationProvider;
+    locale: string;
+    shouldSetFocusOnCurrentDay: boolean;
+    wasOpenedFromCalendarButton: boolean;
+}
+declare const datePickerDefaultProps: {
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    disabled: string[];
+    disabledDateFilter: (_: string) => boolean;
+    locale: string;
+    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (_value: string) => void;
+    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
+};
+declare class DatePickerComponent extends Component<DatePickerProps, State> {
+    static defaultProps: {
+        defaultIsOpen: boolean;
+        defaultValue: string;
+        disabled: string[];
+        disabledDateFilter: (_: string) => boolean;
+        locale: string;
+        onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
+        onChange: (_value: string) => void;
+        onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
+    };
+    containerRef: HTMLElement | null;
+    calendarRef: React.RefObject<HTMLDivElement | null>;
+    calendarButtonRef: React.RefObject<HTMLButtonElement>;
+    constructor(props: any);
+    static getDerivedStateFromProps(nextProps: Readonly<DatePickerProps>, prevState: State): {
+        l10n: LocalizationProvider;
+        locale: string;
+    } | null;
+    getValue: () => string;
+    getIsOpen: () => boolean;
+    onCalendarChange: ({ iso }: {
+        iso: string;
+    }) => void;
+    onCalendarSelect: ({ iso }: {
+        iso: string;
+    }) => void;
+    onInputClick: () => void;
+    onContainerBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onContainerFocus: () => void;
+    onSelectBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    onCalendarButtonKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    onCalendarButtonClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onClear: () => void;
+    onSelectChange: (_value: unknown, action: ActionMeta) => void;
+    handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
+    getContainerRef: (ref: HTMLElement | null) => void;
+    render(): jsx.JSX.Element;
+}
+export { DatePickerComponent as DatePickerWithoutAnalytics };
+/**
+ * __Date picker__
+ *
+ * A date picker allows the user to select a particular date.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
+ * - [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<{
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    disabled: string[];
+    disabledDateFilter: (_: string) => boolean;
+    locale: string;
+    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (_value: string) => void;
+    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
+} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    disabled: string[];
+    disabledDateFilter: (_: string) => boolean;
+    locale: string;
+    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (_value: string) => void;
+    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
+} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "disabled" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "defaultIsOpen">> & Partial<Pick<{
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    disabled: string[];
+    disabledDateFilter: (_: string) => boolean;
+    locale: string;
+    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (_value: string) => void;
+    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
+}, 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" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
+export default DatePicker;

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { type DropdownIndicatorProps, type GroupType, type OptionType } from '@atlaskit/select';
+import { type DatePickerBaseProps, type DateTimePickerSelectProps } from '../types';
+export type DatePickerProps = DatePickerBaseProps & {
+    icon?: React.ComponentType<DropdownIndicatorProps<OptionType>>;
+    selectProps?: DateTimePickerSelectProps & {
+        inputValue?: string;
+    };
+};
+/**
+ * __Date picker__
+ *
+ * A date picker allows the user to select a particular date.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
+ * - [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<DatePickerBaseProps & {
+    icon?: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, GroupType<OptionType>>> | undefined;
+    selectProps?: (Omit<import("@atlaskit/select").SelectProps<OptionType, false>, "placeholder" | "aria-describedby" | "aria-label" | "inputId"> & {
+        'aria-describedby'?: undefined;
+        'aria-label'?: undefined;
+        inputId?: undefined;
+        placeholder?: undefined;
+    } & {
+        inputValue?: string | undefined;
+    }) | undefined;
+}, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
+export default DatePicker;

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

@@ -1,119 +1,40 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Component } from 'react';
-import { jsx } from '@emotion/react';
-import { type LocalizationProvider } from '@atlaskit/locale';
-import { type ActionMeta, type InputActionMeta } from '@atlaskit/select';
-import { type DatePickerBaseProps } from '../types';
-type DatePickerProps = typeof datePickerDefaultProps & DatePickerBaseProps;
-interface State {
-    isKeyDown: boolean;
-    isOpen: boolean;
-    /**
-     * When being cleared from the icon the DatePicker is blurred.
-     * This variable defines whether the default onSelectBlur or onSelectFocus
-     * events should behave as normal.
-     */
-    isFocused: boolean;
-    clearingFromIcon: boolean;
-    value: string;
-    calendarValue: string;
-    selectInputValue: string;
-    l10n: LocalizationProvider;
-    locale: string;
-    shouldSetFocusOnCurrentDay: boolean;
-    wasOpenedFromCalendarButton: boolean;
-}
-declare const datePickerDefaultProps: {
-    defaultIsOpen: boolean;
-    defaultValue: string;
-    disabled: string[];
-    disabledDateFilter: (_: string) => boolean;
-    locale: string;
-    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
-    onChange: (_value: string) => void;
-    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-};
-declare class DatePickerComponent extends Component<DatePickerProps, State> {
-    static defaultProps: {
-        defaultIsOpen: boolean;
-        defaultValue: string;
-        disabled: string[];
-        disabledDateFilter: (_: string) => boolean;
-        locale: string;
-        onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
-        onChange: (_value: string) => void;
-        onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
-    };
-    containerRef: HTMLElement | null;
-    calendarRef: React.RefObject<HTMLDivElement | null>;
-    calendarButtonRef: React.RefObject<HTMLButtonElement>;
-    constructor(props: any);
-    static getDerivedStateFromProps(nextProps: Readonly<DatePickerProps>, prevState: State): {
-        l10n: LocalizationProvider;
-        locale: string;
-    } | null;
-    getValue: () => string;
-    getIsOpen: () => boolean;
-    onCalendarChange: ({ iso }: {
-        iso: string;
-    }) => void;
-    onCalendarSelect: ({ iso }: {
-        iso: string;
-    }) => void;
-    onInputClick: () => void;
-    onContainerBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onContainerFocus: () => void;
-    onSelectBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
-    onCalendarButtonKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
-    onCalendarButtonClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    onClear: () => void;
-    onSelectChange: (_value: unknown, action: ActionMeta) => void;
-    handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
-    getContainerRef: (ref: HTMLElement | null) => void;
-    render(): jsx.JSX.Element;
-}
-export { DatePickerComponent as DatePickerWithoutAnalytics };
-/**
- * __Date picker__
- *
- * A date picker allows the user to select a particular date.
- *
- * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
- * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
- * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
- */
+/// <reference types="react" />
 declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     locale: string;
-    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
-    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
+    onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
+} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     locale: string;
-    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
-    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "disabled" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "defaultIsOpen">> & Partial<Pick<{
+    onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
+} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "disabled" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "defaultIsOpen">> & Partial<Pick<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     locale: string;
-    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
-    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-}, 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" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
+    onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
+}, 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" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>> | import("react").ForwardRefExoticComponent<Pick<import("..").DatePickerProps & {
+    icon?: import("react").ComponentType<import("@atlaskit/react-select").DropdownIndicatorProps<import("@atlaskit/select").OptionType, boolean, import("@atlaskit/react-select").GroupBase<import("@atlaskit/select").OptionType>>> | undefined;
+    selectProps?: (Omit<import("@atlaskit/select").SelectProps<import("@atlaskit/select").OptionType, false>, "placeholder" | "aria-describedby" | "aria-label" | "inputId"> & {
+        'aria-describedby'?: undefined;
+        'aria-label'?: undefined;
+        inputId?: undefined;
+        placeholder?: undefined;
+    } & {
+        inputValue?: string | undefined;
+    }) | undefined;
+}, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
 export default DatePicker;

package/dist/types/types.d.ts

@@ -123,7 +123,7 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      */
     isOpen?: boolean;
     /**
-     * Sets the aria-required passed down to the combobox in the select component.
+     * Set the field as required.
      */
     isRequired?: boolean;
     /**
@@ -304,7 +304,7 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      */
     isOpen?: boolean;
     /**
-     * Sets the aria-required passed down to the combobox in the select component.
+     * Set the field as required.
      */
     isRequired?: boolean;
     /**
@@ -420,7 +420,7 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      */
     isDisabled?: boolean;
     /**
-     * Sets the aria-required passed down to the combobox in the select component.
+     * Set the field as required.
      */
     isRequired?: boolean;
     /**

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

@@ -0,0 +1,119 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Component } from 'react';
+import { jsx } from '@emotion/react';
+import { type LocalizationProvider } from '@atlaskit/locale';
+import { type ActionMeta, type InputActionMeta } from '@atlaskit/select';
+import { type DatePickerBaseProps } from '../types';
+type DatePickerProps = typeof datePickerDefaultProps & DatePickerBaseProps;
+interface State {
+    isKeyDown: boolean;
+    isOpen: boolean;
+    /**
+     * When being cleared from the icon the DatePicker is blurred.
+     * This variable defines whether the default onSelectBlur or onSelectFocus
+     * events should behave as normal.
+     */
+    isFocused: boolean;
+    clearingFromIcon: boolean;
+    value: string;
+    calendarValue: string;
+    selectInputValue: string;
+    l10n: LocalizationProvider;
+    locale: string;
+    shouldSetFocusOnCurrentDay: boolean;
+    wasOpenedFromCalendarButton: boolean;
+}
+declare const datePickerDefaultProps: {
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    disabled: string[];
+    disabledDateFilter: (_: string) => boolean;
+    locale: string;
+    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (_value: string) => void;
+    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
+};
+declare class DatePickerComponent extends Component<DatePickerProps, State> {
+    static defaultProps: {
+        defaultIsOpen: boolean;
+        defaultValue: string;
+        disabled: string[];
+        disabledDateFilter: (_: string) => boolean;
+        locale: string;
+        onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
+        onChange: (_value: string) => void;
+        onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
+    };
+    containerRef: HTMLElement | null;
+    calendarRef: React.RefObject<HTMLDivElement | null>;
+    calendarButtonRef: React.RefObject<HTMLButtonElement>;
+    constructor(props: any);
+    static getDerivedStateFromProps(nextProps: Readonly<DatePickerProps>, prevState: State): {
+        l10n: LocalizationProvider;
+        locale: string;
+    } | null;
+    getValue: () => string;
+    getIsOpen: () => boolean;
+    onCalendarChange: ({ iso }: {
+        iso: string;
+    }) => void;
+    onCalendarSelect: ({ iso }: {
+        iso: string;
+    }) => void;
+    onInputClick: () => void;
+    onContainerBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onContainerFocus: () => void;
+    onSelectBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    onCalendarButtonKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    onCalendarButtonClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onClear: () => void;
+    onSelectChange: (_value: unknown, action: ActionMeta) => void;
+    handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
+    getContainerRef: (ref: HTMLElement | null) => void;
+    render(): jsx.JSX.Element;
+}
+export { DatePickerComponent as DatePickerWithoutAnalytics };
+/**
+ * __Date picker__
+ *
+ * A date picker allows the user to select a particular date.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
+ * - [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<{
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    disabled: string[];
+    disabledDateFilter: (_: string) => boolean;
+    locale: string;
+    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (_value: string) => void;
+    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
+} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    disabled: string[];
+    disabledDateFilter: (_: string) => boolean;
+    locale: string;
+    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (_value: string) => void;
+    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
+} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "disabled" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "defaultIsOpen">> & Partial<Pick<{
+    defaultIsOpen: boolean;
+    defaultValue: string;
+    disabled: string[];
+    disabledDateFilter: (_: string) => boolean;
+    locale: string;
+    onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (_value: string) => void;
+    onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
+}, 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" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
+export default DatePicker;

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { type DropdownIndicatorProps, type GroupType, type OptionType } from '@atlaskit/select';
+import { type DatePickerBaseProps, type DateTimePickerSelectProps } from '../types';
+export type DatePickerProps = DatePickerBaseProps & {
+    icon?: React.ComponentType<DropdownIndicatorProps<OptionType>>;
+    selectProps?: DateTimePickerSelectProps & {
+        inputValue?: string;
+    };
+};
+/**
+ * __Date picker__
+ *
+ * A date picker allows the user to select a particular date.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
+ * - [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<DatePickerBaseProps & {
+    icon?: import("react").ComponentType<DropdownIndicatorProps<OptionType, boolean, GroupType<OptionType>>> | undefined;
+    selectProps?: (Omit<import("@atlaskit/select").SelectProps<OptionType, false>, "placeholder" | "aria-describedby" | "aria-label" | "inputId"> & {
+        'aria-describedby'?: undefined;
+        'aria-label'?: undefined;
+        inputId?: undefined;
+        placeholder?: undefined;
+    } & {
+        inputValue?: string | undefined;
+    }) | undefined;
+}, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
+export default DatePicker;