@atlaskit/datetime-picker 15.1.4 → 15.3.0

package/dist/types/types.d.ts

@@ -122,6 +122,10 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * Set if the picker is open.
      */
     isOpen?: boolean;
+    /**
+     * Sets the aria-required passed down to the combobox in the select component.
+     */
+    isRequired?: boolean;
     /**
      * The name of the field.
      */
@@ -142,6 +146,37 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * Called when the field is focused.
      */
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * The name of the input, used when `shouldShowCalendarButton` is true. See `shouldShowCalendarButton` description for more details.
+     *
+     * @default 'Date picker'
+     */
+    inputLabel?: string;
+    /**
+     * The ID of the label for the input, used when `shouldShowCalendarButton` is
+     * true. See `shouldShowCalendarButton` description for more details.
+     */
+    inputLabelId?: string;
+    /**
+     * The label associated with the button to open the calendar, rendered via the
+     * `shouldShowCalendarButton` prop. If a `label` prop is provided, this
+     * calendar button label will be prefixed by the value of `label`. If no
+     * `label` prop is provided, this prefix should be manually added. For
+     * example,
+     *
+     * ```tsx
+     * <label id="label" htmlFor="datepicker">Desired Appointment Date</label>
+     * <DatePicker
+     * 	id="datepicker"
+     * 	shouldShowCalendarButton
+     * 	inputLabel="Desired Appointment Date"
+     * 	openCalendarLabel="open calendar"
+     * />
+     * ```
+     *
+     * @default 'open calendar'
+     */
+    openCalendarLabel?: string;
     /**
      * A function for parsing input characters and transforming them into a Date object.
      * By default parses the date string based off the locale.
@@ -155,6 +190,17 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * The aria-label attribute associated with the previous-month arrow.
      */
     previousMonthLabel?: string;
+    /**
+     * Provides a functional calendar button that opens the calendar picker that
+     * lives on the right side of the date picker.
+     *
+     * The accessible name for this button is caculated using either the `label`,
+     * `inputLabel`, or `inputLabelId` props, along with the `openCalendarLabel`
+     * prop.
+     *
+     * @default false
+     */
+    shouldShowCalendarButton?: boolean;
     /**
      * The spacing for the select control.
      *
@@ -257,6 +303,10 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * Set if the dropdown is open. Will be `false` if not provided.
      */
     isOpen?: boolean;
+    /**
+     * Sets the aria-required passed down to the combobox in the select component.
+     */
+    isRequired?: boolean;
     /**
      * Accessible name for the Time Picker Select, rendered as `aria-label`. This will override any other method of providing a label.
      */
@@ -369,6 +419,10 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      * Set if the field is disabled.
      */
     isDisabled?: boolean;
+    /**
+     * Sets the aria-required passed down to the combobox in the select component.
+     */
+    isRequired?: boolean;
     /**
      * The name of the field.
      */

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

@@ -9,6 +9,7 @@ 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.
@@ -23,6 +24,7 @@ interface State {
     l10n: LocalizationProvider;
     locale: string;
     shouldSetFocusOnCurrentDay: boolean;
+    wasOpenedFromCalendarButton: boolean;
 }
 declare const datePickerDefaultProps: {
     defaultIsOpen: boolean;
@@ -46,6 +48,8 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
         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;
@@ -66,6 +70,8 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     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;
@@ -82,7 +88,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>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "name" | "spacing" | "isOpen" | "hideIcon"> & Partial<Pick<Omit<DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "disabled" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "locale" | "defaultIsOpen">> & Partial<Pick<{
+declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -91,5 +97,23 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     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" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "hideIcon"> & import("react").RefAttributes<any>>;
+} & 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-time-picker.d.ts

@@ -52,5 +52,5 @@ export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "isInvalid" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
 export default DateTimePicker;

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

@@ -9,5 +9,5 @@ import { type TimePickerBaseProps } from '../types';
  * - [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<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
+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" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
 export default TimePicker;

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

@@ -122,6 +122,10 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * Set if the picker is open.
      */
     isOpen?: boolean;
+    /**
+     * Sets the aria-required passed down to the combobox in the select component.
+     */
+    isRequired?: boolean;
     /**
      * The name of the field.
      */
@@ -142,6 +146,37 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * Called when the field is focused.
      */
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * The name of the input, used when `shouldShowCalendarButton` is true. See `shouldShowCalendarButton` description for more details.
+     *
+     * @default 'Date picker'
+     */
+    inputLabel?: string;
+    /**
+     * The ID of the label for the input, used when `shouldShowCalendarButton` is
+     * true. See `shouldShowCalendarButton` description for more details.
+     */
+    inputLabelId?: string;
+    /**
+     * The label associated with the button to open the calendar, rendered via the
+     * `shouldShowCalendarButton` prop. If a `label` prop is provided, this
+     * calendar button label will be prefixed by the value of `label`. If no
+     * `label` prop is provided, this prefix should be manually added. For
+     * example,
+     *
+     * ```tsx
+     * <label id="label" htmlFor="datepicker">Desired Appointment Date</label>
+     * <DatePicker
+     * 	id="datepicker"
+     * 	shouldShowCalendarButton
+     * 	inputLabel="Desired Appointment Date"
+     * 	openCalendarLabel="open calendar"
+     * />
+     * ```
+     *
+     * @default 'open calendar'
+     */
+    openCalendarLabel?: string;
     /**
      * A function for parsing input characters and transforming them into a Date object.
      * By default parses the date string based off the locale.
@@ -155,6 +190,17 @@ export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * The aria-label attribute associated with the previous-month arrow.
      */
     previousMonthLabel?: string;
+    /**
+     * Provides a functional calendar button that opens the calendar picker that
+     * lives on the right side of the date picker.
+     *
+     * The accessible name for this button is caculated using either the `label`,
+     * `inputLabel`, or `inputLabelId` props, along with the `openCalendarLabel`
+     * prop.
+     *
+     * @default false
+     */
+    shouldShowCalendarButton?: boolean;
     /**
      * The spacing for the select control.
      *
@@ -257,6 +303,10 @@ export interface TimePickerBaseProps extends WithAnalyticsEventsProps, PickerSel
      * Set if the dropdown is open. Will be `false` if not provided.
      */
     isOpen?: boolean;
+    /**
+     * Sets the aria-required passed down to the combobox in the select component.
+     */
+    isRequired?: boolean;
     /**
      * Accessible name for the Time Picker Select, rendered as `aria-label`. This will override any other method of providing a label.
      */
@@ -369,6 +419,10 @@ export interface DateTimePickerBaseProps extends WithAnalyticsEventsProps {
      * Set if the field is disabled.
      */
     isDisabled?: boolean;
+    /**
+     * Sets the aria-required passed down to the combobox in the select component.
+     */
+    isRequired?: boolean;
     /**
      * The name of the field.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "15.1.4",
+	"version": "15.3.0",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,16 +38,18 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/calendar": "^15.0.0",
 		"@atlaskit/ds-lib": "^3.0.0",
-		"@atlaskit/icon": "^22.20.0",
+		"@atlaskit/icon": "^22.22.0",
 		"@atlaskit/layering": "^0.5.0",
 		"@atlaskit/locale": "^2.8.0",
 		"@atlaskit/popper": "^6.3.0",
-		"@atlaskit/select": "^18.0.0",
+		"@atlaskit/primitives": "^12.2.0",
+		"@atlaskit/select": "^18.1.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
-		"date-fns": "^2.17.0"
+		"date-fns": "^2.17.0",
+		"react-uid": "^2.2.0"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"