[datetime] deprecate react-day-picker v7 components

packages/datetime/src/components/date-input/date-input.md

@@ -1,15 +1,29 @@
 @# Date input
 
-The __DateInput__ component is an [__InputGroup__](#core/components/input-group)
-that shows a [__DatePicker__](#datetime/datepicker) inside a [__Popover__](#core/components/popover)
-on focus. It optionally shows a [__TimezoneSelect__](#datetime/timezone-select) on the right side of
+<div class="@ns-callout @ns-intent-danger @ns-icon-error @ns-callout-has-body-content">
+    <h5 class="@ns-heading">
+
+Deprecated: use [**DateInput3**](#datetime2/date-input3)
+
+</h5>
+
+This component is **deprecated since @blueprintjs/datetime v5.2.0** in favor of the new
+**DateInput3** component available in the `@blueprintjs/datetime2` package which uses
+react-day-picker v8.x instead of v7.x. You should migrate to the new API which will become the
+standard in Blueprint v6.
+
+</div>
+
+The **DateInput** component is an [**InputGroup**](#core/components/input-group)
+that shows a [**DatePicker**](#datetime/datepicker) inside a [**Popover**](#core/components/popover)
+on focus. It optionally shows a [**TimezoneSelect**](#datetime/timezone-select) on the right side of
 the InputGroup, allowing the user to change the timezone of the selected date.
 
 @reactExample DateInputExample
 
 @## Usage
 
-__DateInput__ supports both controlled and uncontrolled usage. You can control
+**DateInput** supports both controlled and uncontrolled usage. You can control
 the selected date by setting the `value` prop, or use the component in
 uncontrolled mode and specify an initial date by setting `defaultValue`.
 Use the `onChange` prop callback to listen for changes to the selected day and
@@ -20,18 +34,18 @@ and the `onChange` callback.
 
 @## Date formatting
 
-__DateInput__ requires two props for parsing and formatting dates. These are essentially the plumbing
+**DateInput** requires two props for parsing and formatting dates. These are essentially the plumbing
 between the text input and the DatePicker.
 
-- `formatDate(date, locale?)` receives the current `Date` and returns a string representation of it.
+-   `formatDate(date, locale?)` receives the current `Date` and returns a string representation of it.
     The result of this function becomes the input value when it is not being edited.
-- `parseDate(str, locale?)` receives text inputted by the user and converts it to a `Date` object.
+-   `parseDate(str, locale?)` receives text inputted by the user and converts it to a `Date` object.
     The returned `Date` becomes the next value of the component.
 
 The optional `locale` argument to these functions is the value of the `locale` prop set on the component.
 
 Note that we still use JS `Date` here instead of ISO strings &mdash; this makes it easy to delegate to
-third party libraries like __date-fns__.
+third party libraries like **date-fns**.
 
 A simple implementation using built-in browser methods could look like this:
 
@@ -57,7 +71,7 @@ function Example() {
 }
 ```
 
-An implementation using __date-fns__ could look like this:
+An implementation using **date-fns** could look like this:
 
 ```tsx
 import { DateInput } from "@blueprintjs/datetime";

packages/datetime/src/components/date-input/dateInput.tsx

@@ -14,6 +14,14 @@
  * limitations under the License.
  */
 
+/**
+ * @fileoverview This component is DEPRECATED, and the code is frozen.
+ * All changes & bugfixes should be made to DateInput3 in the datetime2
+ * package instead.
+ */
+
+/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */
+
 import classNames from "classnames";
 import * as React from "react";
 import type { DayPickerProps } from "react-day-picker";
@@ -209,6 +217,7 @@ const DEFAULT_MIN_DATE = DatePickerUtils.getDefaultMinDate();
  * Date input component.
  *
  * @see https://blueprintjs.com/docs/#datetime/date-input
+ * @deprecated use `{ DateInput3 } from "@blueprintjs/datetime2"` instead
  */
 export const DateInput: React.FC<DateInputProps> = React.memo(function _DateInput(props) {
     const {

packages/datetime/src/components/date-picker/datePicker.tsx

@@ -14,6 +14,14 @@
  * limitations under the License.
  */
 
+/**
+ * @fileoverview This component is DEPRECATED, and the code is frozen.
+ * All changes & bugfixes should be made to DatePicker3 in the datetime2
+ * package instead.
+ */
+
+/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */
+
 import classNames from "classnames";
 import * as React from "react";
 import DayPicker, { CaptionElementProps, DayModifiers, NavbarElementProps } from "react-day-picker";
@@ -110,6 +118,7 @@ export interface DatePickerState {
  * Date picker component.
  *
  * @see https://blueprintjs.com/docs/#datetime/datepicker
+ * @deprecated use `{ DatePicker3 } from "@blueprintjs/datetime2"` instead
  */
 export class DatePicker extends AbstractPureComponent<DatePickerProps, DatePickerState> {
     public static defaultProps: DatePickerProps = {

packages/datetime/src/components/date-picker/datepicker.md

@@ -1,22 +1,36 @@
 @# Date picker
 
-__DatePicker__ renders a UI to choose a single date and (optionally) a time of day. It is built on top of the
-[__react-day-picker__ library](https://github.com/gpbl/react-day-picker). Time selection is enabled by the
-[__TimePicker__](#datetime/timepicker) component.
+<div class="@ns-callout @ns-intent-danger @ns-icon-error @ns-callout-has-body-content">
+    <h5 class="@ns-heading">
+
+Deprecated: use [**DatePicker3**](#datetime2/date-picker3)
+
+</h5>
+
+This component is **deprecated since @blueprintjs/datetime v5.2.0** in favor of the new
+**DatePicker3** component available in the `@blueprintjs/datetime2` package which uses
+react-day-picker v8.x instead of v7.x. You should migrate to the new API which will become the
+standard in Blueprint v6.
+
+</div>
+
+**DatePicker** renders a UI to choose a single date and (optionally) a time of day. It is built on top of the
+[**react-day-picker** library](https://github.com/gpbl/react-day-picker). Time selection is enabled by the
+[**TimePicker**](#datetime/timepicker) component.
 
 @reactExample DatePickerExample
 
 @## Usage
 
-__DatePicker__ supports both controlled and uncontrolled usage. You can control the selected day by setting the `value`
+**DatePicker** supports both controlled and uncontrolled usage. You can control the selected day by setting the `value`
 prop, or use the component in uncontrolled mode and specify an initial day by setting `defaultValue`. Use the `onChange`
 prop to listen for changes to the selected day.
 
 @## Props interface
 
-Some props are managed by __DatePicker__, while others are passed to the __react-day-picker__ library. These
+Some props are managed by **DatePicker**, while others are passed to the **react-day-picker** library. These
 passed-through props are documented in full in the
-[__react-day-picker__ documentation](https://react-day-picker-v7.netlify.app/).
+[**react-day-picker** documentation](https://react-day-picker-v7.netlify.app/).
 
 @interface DatePickerProps
 
@@ -47,7 +61,7 @@ The **preset shortcuts** can be seen in the example above. They are as follows:
 
 You can use the `modifiers` prop to conditionally apply styles to days. Modifiers are a react-day-picker concept and are
 documented in full in the
-[__react-day-picker__ documentation](https://react-day-picker-v7.netlify.app/docs/matching-days).
+[**react-day-picker** documentation](https://react-day-picker-v7.netlify.app/docs/matching-days).
 
 The example below renders a DatePicker that prevents the user from selecting any Sundays, by using the component in
 controlled mode and with the `modifiers` prop:
@@ -92,8 +106,8 @@ function isSunday(date: Date) {
 
 @## Localization
 
-__DatePicker__, __DateRangePicker__, __DateInput__, and __DateRangeInput__ all support calendar localization
-using an interface defined by __react-day-picker__:
+**DatePicker**, **DateRangePicker**, **DateInput**, and **DateRangeInput** all support calendar localization
+using an interface defined by **react-day-picker**:
 
 ```js
 import { LocaleUtils } from "react-day-picker";
@@ -106,7 +120,7 @@ You will need to define the functions of `LocaleUtil` on your own.
 [See the interface definition](https://github.com/gpbl/react-day-picker/blob/v7.3.0/types/utils.d.ts#L5)
 for more details.
 
-Since __@blueprintjs/datetime__ depends on [__date-fns__](https://date-fns.org/), you may wish to leverage this library
+Since **@blueprintjs/datetime** depends on [**date-fns**](https://date-fns.org/), you may wish to leverage this library
 which is already in your bundle to implement localization, for example:
 
 ```tsx
@@ -121,4 +135,4 @@ const DATE_FNS_LOCALE_UTILS: DatePickerLocaleUtils = {
 ```
 
 More detailed examples can be found in the
-[__react-day-picker__ documentation](https://react-day-picker-v7.netlify.app/docs/localization).
+[**react-day-picker** documentation](https://react-day-picker-v7.netlify.app/docs/localization).

packages/datetime/src/components/date-range-input/date-range-input.md

@@ -1,21 +1,32 @@
 @# Date range input
 
-The __DateRangeInput__ component is [__ControlGroup__](#core/components/control-group) composed
-of two [__InputGroups__](#core/components/input-group). It shows a
-[__DateRangePicker__](#datetime/daterangepicker) in a [__Popover__](#core/components/popover)
-on focus.
+<div class="@ns-callout @ns-intent-danger @ns-icon-error @ns-callout-has-body-content">
+    <h5 class="@ns-heading">
+
+Deprecated: use [**DateRangeInput3**](#datetime2/date-range-input3)
+
+</h5>
 
-Unlike [__DateInput__](#datetime/date-input), this component does _not_ yet have support for
-a built-in [__TimezoneSelect__](#datetime/timezone-select).
+This component is **deprecated since @blueprintjs/datetime v5.2.0** in favor of the new
+**DateRangeInput3** component available in the `@blueprintjs/datetime2` package which uses
+react-day-picker v8.x instead of v7.x. You should migrate to the new API which will become the
+standard in Blueprint v6.
+
+</div>
+
+The **DateRangeInput** component is [**ControlGroup**](#core/components/control-group) composed
+of two [**InputGroups**](#core/components/input-group). It shows a
+[**DateRangePicker**](#datetime/daterangepicker) in a [**Popover**](#core/components/popover)
+on focus.
 
-<!-- It optionally shows a [TimezoneSelect](#datetime/timezone-select) as the third
-element in the ControlGroup, allowing the user to change the timezone of the selected date range. -->
+Unlike [**DateInput**](#datetime/date-input), this component does _not_ yet have support for
+a built-in [**TimezoneSelect**](#datetime/timezone-select).
 
 @reactExample DateRangeInputExample
 
 @## Usage
 
-__DateRangeInput__ supports both controlled and uncontrolled usage. You can control
+**DateRangeInput** supports both controlled and uncontrolled usage. You can control
 the selected date by setting the `value` prop, or use the component in
 uncontrolled mode and specify an initial date by setting `defaultValue`.
 Use the `onChange` prop callback to listen for changes to the selected day and

packages/datetime/src/components/date-range-input/dateRangeInput.tsx

@@ -14,6 +14,14 @@
  * limitations under the License.
  */
 
+/**
+ * @fileoverview This component is DEPRECATED, and the code is frozen.
+ * All changes & bugfixes should be made to DateRangeInput3 in the datetime2
+ * package instead.
+ */
+
+/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */
+
 import classNames from "classnames";
 import { isSameDay, isValid } from "date-fns";
 import * as React from "react";
@@ -214,6 +222,7 @@ interface StateKeysAndValuesObject {
  * Date range input component.
  *
  * @see https://blueprintjs.com/docs/#datetime/date-range-input
+ * @deprecated use `{ DateRangeInput3 } from "@blueprintjs/datetime2"` instead
  */
 export class DateRangeInput extends AbstractPureComponent<DateRangeInputProps, DateRangeInputState> {
     public static defaultProps: Partial<DateRangeInputProps> = {

packages/datetime/src/components/date-range-picker/dateRangePicker.tsx

@@ -14,6 +14,14 @@
  * limitations under the License.
  */
 
+/**
+ * @fileoverview This component is DEPRECATED, and the code is frozen.
+ * All changes & bugfixes should be made to DateRangePicker3 in the datetime2
+ * package instead.
+ */
+
+/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */
+
 import classNames from "classnames";
 import * as React from "react";
 import DayPicker, { CaptionElementProps, DayModifiers, DayPickerProps, NavbarElementProps } from "react-day-picker";
@@ -136,6 +144,7 @@ export interface DateRangePickerState {
  * Date range picker component.
  *
  * @see https://blueprintjs.com/docs/#datetime/daterangepicker
+ * @deprecated use `{ DateRangePicker3 } from "@blueprintjs/datetime2"` instead
  */
 export class DateRangePicker extends AbstractPureComponent<DateRangePickerProps, DateRangePickerState> {
     public static defaultProps: DateRangePickerProps = {

packages/datetime/src/components/date-range-picker/daterangepicker.md

@@ -1,24 +1,38 @@
 @# Date range picker
 
-__DateRangePicker__ shows two sequential month calendars and allows the user to select a _range_ of days.
+<div class="@ns-callout @ns-intent-danger @ns-icon-error @ns-callout-has-body-content">
+    <h5 class="@ns-heading">
+
+Deprecated: use [**DateRangePicker3**](#datetime2/date-range-picker3)
+
+</h5>
+
+This component is **deprecated since @blueprintjs/datetime v5.2.0** in favor of the new
+**DateRangePicker3** component available in the `@blueprintjs/datetime2` package which uses
+react-day-picker v8.x instead of v7.x. You should migrate to the new API which will become the
+standard in Blueprint v6.
+
+</div>
+
+**DateRangePicker** shows two sequential month calendars and allows the user to select a _range_ of days.
 
 @reactExample DateRangePickerExample
 
 @## Usage
 
-__DateRangePicker__ supports both controlled and uncontrolled usage. You can control the selected date range by setting
+**DateRangePicker** supports both controlled and uncontrolled usage. You can control the selected date range by setting
 the `value` prop, or use the component in uncontrolled mode and specify an initial date range by setting `defaultValue`.
 Use the `onChange` prop to listen for changes to the selected range.
 
 @## Date ranges
 
-__DateRangePicker__ uses the `DateRange` type across its API. This is an alias for the tuple type `[Date, Date]`.
+**DateRangePicker** uses the `DateRange` type across its API. This is an alias for the tuple type `[Date, Date]`.
 
 Semantically:
 
-*   `[null, null]` represents an empty selection.
-*   `[someDate, null]` represents a date range where a single endpoint is known.
-*   `[someDate, someOtherDate]` represents a full date range where both endpoints are known.
+-   `[null, null]` represents an empty selection.
+-   `[someDate, null]` represents a date range where a single endpoint is known.
+-   `[someDate, someOtherDate]` represents a full date range where both endpoints are known.
 
 @## Shortcuts
 

packages/datetime/src/index.md

@@ -4,20 +4,20 @@ reference: datetime
 
 @# Datetime
 
-The [__@blueprintjs/datetime__ package](https://www.npmjs.com/package/@blueprintjs/datetime)
+The [**@blueprintjs/datetime** package](https://www.npmjs.com/package/@blueprintjs/datetime)
 provides React components for interacting with dates and times:
 
-- [DatePicker](#datetime/datepicker) for selecting a single date (day, month, year).
+-   [**DatePicker**](#datetime/datepicker) for selecting a single date (day, month, year) (DEPRECATED).
 
-- [DateRangePicker](#datetime/daterangepicker) for selecting date ranges.
+-   [**DateRangePicker**](#datetime/daterangepicker) for selecting date ranges (DEPRECATED).
 
-- [TimePicker](#datetime/timepicker) for selecting a time (hour, minute, second, millisecond).
+-   [**DateInput**](#datetime/date-input), which composes a text input with a DatePicker in
+    a Popover, for use in forms (DEPRECATED).
 
-- [DateInput](#datetime/date-input), which composes a text input with a DatePicker in
-  a Popover, for use in forms.
+-   [**DateRangeInput**](#datetime/date-range-input), which composes two text inputs with a
+    DateRangePicker in a Popover, for use in forms (DEPRECATED).
 
-- [DateRangeInput](#datetime/date-range-input), which composes two text inputs with a
-    DateRangePicker in a Popover, for use in forms.
+-   [**TimePicker**](#datetime/timepicker) for selecting a time (hour, minute, second, millisecond).
 
 Make sure to review the [getting started docs for installation info](#blueprint/getting-started).
 

packages/datetime/src/index.ts

@@ -28,12 +28,8 @@ export { MonthAndYear } from "./common/monthAndYear";
 export { TimePickerProps } from "./common/timePickerProps";
 export { TimePrecision } from "./common/timePrecision";
 
-export { DateInput, DateInputProps } from "./components/date-input/dateInput";
-export { DatePicker, DatePickerProps } from "./components/date-picker/datePicker";
 export { DatePickerUtils } from "./components/date-picker/datePickerUtils";
 export { DatePickerBaseProps, DatePickerModifiers } from "./common/datePickerBaseProps";
-export { DateRangeInput, DateRangeInputProps } from "./components/date-range-input/dateRangeInput";
-export { DateRangePicker, DateRangePickerProps } from "./components/date-range-picker/dateRangePicker";
 export { TimePicker } from "./components/time-picker/timePicker";
 export {
     DatePickerShortcut,
@@ -42,3 +38,10 @@ export {
     DateRangeShortcut,
 } from "./components/shortcuts/shortcuts";
 export { TimezoneSelect, TimezoneSelectProps } from "./components/timezone-select/timezoneSelect";
+
+/* eslint-disable deprecation/deprecation */
+
+export { DateInput, DateInputProps } from "./components/date-input/dateInput";
+export { DatePicker, DatePickerProps } from "./components/date-picker/datePicker";
+export { DateRangeInput, DateRangeInputProps } from "./components/date-range-input/dateRangeInput";
+export { DateRangePicker, DateRangePickerProps } from "./components/date-range-picker/dateRangePicker";

packages/datetime/test/components/dateInputTests.tsx

@@ -14,6 +14,14 @@
  * limitations under the License.
  */
 
+/**
+ * @fileoverview This component is DEPRECATED, and the code is frozen.
+ * All changes & bugfixes should be made to DateInput3 in the datetime2
+ * package instead.
+ */
+
+/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */
+
 import { assert } from "chai";
 import { intlFormat, isEqual, parseISO } from "date-fns";
 import { formatInTimeZone, zonedTimeToUtc } from "date-fns-tz";