@atlaskit/datetime-picker 10.4.2 → 11.1.0

package/dist/types/components/DatePicker.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { CalendarRef } from '@atlaskit/calendar';
 import { LocalizationProvider } from '@atlaskit/locale';
@@ -23,7 +24,7 @@ export interface Props extends WithAnalyticsEventsProps {
     disabled?: string[];
     /**
       A filter function for disabling dates on the calendar. This does not affect what users can type into the picker.
-     
+  
       The function is called with a date string in the format `YYYY-MM-DD` and should return `true` if the date should be disabled.
      */
     disabledDateFilter?: (date: string) => boolean;
@@ -62,7 +63,7 @@ export interface Props extends WithAnalyticsEventsProps {
     selectProps?: SelectProps;
     /**
       The spacing for the select control.
-     
+  
       Compact is `gridSize() * 4`, default is `gridSize * 5`.
      */
     spacing?: Spacing;
@@ -120,7 +121,7 @@ declare const datePickerDefaultProps: {
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     hideIcon: boolean;
-    icon: React.ComponentType<import("react-select").IndicatorProps<OptionType, false, import("@atlaskit/select").GroupType<OptionType>>>;
+    icon: import("react").ComponentType<import("react-select").IndicatorProps<OptionType, false, import("@atlaskit/select").GroupType<OptionType>>>;
     id: string;
     innerProps: {};
     isDisabled: boolean;
@@ -133,9 +134,7 @@ declare const datePickerDefaultProps: {
     spacing: Spacing;
     locale: string;
 };
-declare class DatePicker extends React.Component<DatePickerProps, State> {
-    calendarRef: CalendarRef | null;
-    containerRef: HTMLElement | null;
+declare class DatePicker extends Component<DatePickerProps, State> {
     static defaultProps: {
         appearance: Appearance;
         autoFocus: boolean;
@@ -144,19 +143,21 @@ declare class DatePicker extends React.Component<DatePickerProps, State> {
         disabled: string[];
         disabledDateFilter: (_: string) => boolean;
         hideIcon: boolean;
-        icon: React.ComponentType<import("react-select").IndicatorProps<OptionType, false, import("@atlaskit/select").GroupType<OptionType>>>;
+        icon: import("react").ComponentType<import("react-select").IndicatorProps<OptionType, false, import("@atlaskit/select").GroupType<OptionType>>>;
         id: string;
         innerProps: {};
         isDisabled: boolean;
         isInvalid: boolean;
         name: string;
-        onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+        onBlur: (event: import("react").FocusEvent<HTMLInputElement>) => void;
         onChange: (value: string) => void;
-        onFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
+        onFocus: (event: import("react").FocusEvent<HTMLInputElement>) => void;
         selectProps: {};
         spacing: Spacing;
         locale: string;
     };
+    calendarRef: CalendarRef | null;
+    containerRef: HTMLElement | null;
     constructor(props: any);
     componentWillReceiveProps(nextProps: Readonly<DatePickerProps>): void;
     getSafeState: () => {
@@ -196,7 +197,7 @@ declare class DatePicker extends React.Component<DatePickerProps, State> {
      *   1. parseInputValue
      *   2. locale
      */
-    parseDate: (date: string) => Date | null;
+    parseDate: (date: string) => Date;
     /**
      * There are multiple props that can change how the date is formatted.
      * The priority of props used is:
@@ -209,7 +210,7 @@ declare class DatePicker extends React.Component<DatePickerProps, State> {
     render(): JSX.Element;
 }
 export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<DatePickerProps, "testId" | "icon" | "disabled" | "appearance" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "weekStartDay">, "testId" | "placeholder" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "weekStartDay"> & Partial<Pick<Pick<DatePickerProps, "testId" | "icon" | "disabled" | "appearance" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "weekStartDay">, "icon" | "disabled" | "appearance" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale">> & Partial<Pick<{
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Pick<DatePickerProps, "testId" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay">, "testId" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay"> & Partial<Pick<Pick<DatePickerProps, "testId" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay">, "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -217,17 +218,17 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<DatePicke
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     hideIcon: boolean;
-    icon: React.ComponentType<import("react-select").IndicatorProps<OptionType, false, import("@atlaskit/select").GroupType<OptionType>>>;
+    icon: import("react").ComponentType<import("react-select").IndicatorProps<OptionType, false, import("@atlaskit/select").GroupType<OptionType>>>;
     id: string;
     innerProps: {};
     isDisabled: boolean;
     isInvalid: boolean;
     name: string;
-    onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur: (event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (value: string) => void;
-    onFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus: (event: import("react").FocusEvent<HTMLInputElement>) => void;
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "appearance" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "weekStartDay" | "analyticsContext"> & React.RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay" | "key" | "analyticsContext"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types/components/DateTimePicker.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { SelectProps } from '@atlaskit/select';
@@ -6,9 +7,9 @@ import { Props as DatePickerProps } from './DatePicker';
 import { Props as TimePickerProps } from './TimePicker';
 export interface Props extends WithAnalyticsEventsProps {
     /**
-      Set the appearance of the picker.
-     
-      `subtle` will remove the borders and background.
+     * Set the appearance of the picker.
+     *
+     * `subtle` will remove the borders and background.
      */
     appearance?: Appearance;
     /** Set the picker to autofocus on mount. */
@@ -16,9 +17,8 @@ export interface Props extends WithAnalyticsEventsProps {
     /** The default for `value`. */
     defaultValue?: string;
     /**
-      The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`.
-     
-      Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
+     * The id of the field. Currently, react-select transforms this to have a `react-select-` prefix, and an `--input` suffix when applied to the input. For example, the id `my-input` would be transformed to `react-select-my-input--input`.
+     * Keep this in mind when needing to refer to the ID. This will be fixed in an upcoming release.
      */
     id?: string;
     /** Props to apply to the container. **/
@@ -62,9 +62,9 @@ export interface Props extends WithAnalyticsEventsProps {
     /** The format that times are displayed in. Values should be those accepted by [date-fns's format function](https://date-fns.org/v1.29.0/docs/format). */
     timeFormat?: string;
     /**
-      The spacing for the select control.
-     
-      Compact is `gridSize() * 4`, default is `gridSize * 5`.
+     * The spacing for the select control.
+     *
+     * Compact is `gridSize() * 4`, default is `gridSize() * 5`.
      */
     spacing?: Spacing;
     /** Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). */
@@ -155,7 +155,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
     render(): JSX.Element;
 }
 export { DateTimePicker as DateTimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<DateTimePickerProps, "testId" | "appearance" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "innerProps" | "autoFocus" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "value" | "dateFormat" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue">, "testId" | "hideIcon" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Pick<DateTimePickerProps, "testId" | "appearance" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "innerProps" | "autoFocus" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "value" | "dateFormat" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue">, "appearance" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "innerProps" | "autoFocus" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "times" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<DateTimePickerProps, "testId" | "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "value" | "dateFormat" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue">, "testId" | "hideIcon" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Pick<DateTimePickerProps, "testId" | "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "value" | "dateFormat" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue">, "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "times" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
     appearance: string;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -175,5 +175,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<DateTimeP
     times: string[];
     spacing: string;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "key" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "innerProps" | "autoFocus" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "value" | "dateFormat" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "value" | "dateFormat" | "key" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/TimePicker.d.ts

@@ -170,7 +170,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     render(): JSX.Element;
 }
 export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<TimePickerProps, "testId" | "appearance" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "times" | "timeIsEditable" | "timeFormat">, "testId" | "placeholder" | "isOpen" | "formatDisplayLabel" | "value" | "timeFormat"> & Partial<Pick<Pick<TimePickerProps, "testId" | "appearance" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "times" | "timeIsEditable" | "timeFormat">, "appearance" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "parseInputValue" | "times" | "timeIsEditable">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<TimePickerProps, "testId" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "placeholder" | "times" | "timeIsEditable" | "timeFormat">, "testId" | "isOpen" | "formatDisplayLabel" | "value" | "placeholder" | "timeFormat"> & Partial<Pick<Pick<TimePickerProps, "testId" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "placeholder" | "times" | "timeIsEditable" | "timeFormat">, "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "parseInputValue" | "times" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -190,5 +190,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<TimePicke
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "placeholder" | "key" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/utils.d.ts

@@ -0,0 +1 @@
+export declare function convertTokens(format: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "10.4.2",
+  "version": "11.1.0",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,16 +26,15 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/calendar": "^12.0.0",
-    "@atlaskit/field-base": "^15.0.0",
-    "@atlaskit/icon": "^21.7.0",
+    "@atlaskit/icon": "^21.9.0",
     "@atlaskit/locale": "^2.1.0",
     "@atlaskit/popper": "^5.2.0",
-    "@atlaskit/select": "^15.0.0",
-    "@atlaskit/theme": "^11.3.0",
+    "@atlaskit/select": "^15.2.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
-    "@emotion/styled": "^10.0.7",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.17.0",
     "lodash": "^4.17.15",
     "react-scrolllock": "^5.0.1"
   },
@@ -44,15 +43,20 @@
   },
   "devDependencies": {
     "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^15.1.0",
+    "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/field-base": "^15.0.5",
     "@atlaskit/field-range": "^9.0.0",
-    "@atlaskit/modal-dialog": "^11.6.0",
+    "@atlaskit/form": "^8.4.0",
+    "@atlaskit/modal-dialog": "^12.1.0",
+    "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^5.0.0",
+    "@atlaskit/toggle": "^12.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@emotion/core": "^10.0.9",
     "@testing-library/react": "^8.0.1",
     "enzyme": "^3.10.0",
     "enzyme-to-json": "^3.3.0",
@@ -65,6 +69,10 @@
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "styling": "emotion",
+      "theming": "tokens"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",