diff --git a/packages/datetime/src/components/date-input/date-input.md b/packages/datetime/src/components/date-input/date-input.md
index 0dfd91cf0a..5804de0615 100644
--- a/packages/datetime/src/components/date-input/date-input.md
+++ b/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
+
+
+
+Deprecated: use [**DateInput3**](#datetime2/date-input3)
+
+
+
+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.
+
+
+
+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 — 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";
diff --git a/packages/datetime/src/components/date-input/dateInput.tsx b/packages/datetime/src/components/date-input/dateInput.tsx
index 75f73851e5..8f433d795d 100644
--- a/packages/datetime/src/components/date-input/dateInput.tsx
+++ b/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 = React.memo(function _DateInput(props) {
const {
diff --git a/packages/datetime/src/components/date-picker/datePicker.tsx b/packages/datetime/src/components/date-picker/datePicker.tsx
index 65c636ac28..5512d049ca 100644
--- a/packages/datetime/src/components/date-picker/datePicker.tsx
+++ b/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 {
public static defaultProps: DatePickerProps = {
diff --git a/packages/datetime/src/components/date-picker/datepicker.md b/packages/datetime/src/components/date-picker/datepicker.md
index bd0909cc17..5acd832dc7 100644
--- a/packages/datetime/src/components/date-picker/datepicker.md
+++ b/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.
+
+
+
+Deprecated: use [**DatePicker3**](#datetime2/date-picker3)
+
+
+
+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.
+
+
+
+**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).
diff --git a/packages/datetime/src/components/date-range-input/date-range-input.md b/packages/datetime/src/components/date-range-input/date-range-input.md
index 100c40c011..7bab7bacd7 100644
--- a/packages/datetime/src/components/date-range-input/date-range-input.md
+++ b/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.
+
+
+
+Deprecated: use [**DateRangeInput3**](#datetime2/date-range-input3)
+
+
-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.
+
+
+
+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.
-
+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
diff --git a/packages/datetime/src/components/date-range-input/dateRangeInput.tsx b/packages/datetime/src/components/date-range-input/dateRangeInput.tsx
index 42be26247b..c09c0f8b88 100644
--- a/packages/datetime/src/components/date-range-input/dateRangeInput.tsx
+++ b/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 {
public static defaultProps: Partial = {
diff --git a/packages/datetime/src/components/date-range-picker/dateRangePicker.tsx b/packages/datetime/src/components/date-range-picker/dateRangePicker.tsx
index d8ed2e710a..2f0faa774c 100644
--- a/packages/datetime/src/components/date-range-picker/dateRangePicker.tsx
+++ b/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 {
public static defaultProps: DateRangePickerProps = {
diff --git a/packages/datetime/src/components/date-range-picker/daterangepicker.md b/packages/datetime/src/components/date-range-picker/daterangepicker.md
index 93707e9ffc..e297dbfeaf 100644
--- a/packages/datetime/src/components/date-range-picker/daterangepicker.md
+++ b/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.
+
+
+
+Deprecated: use [**DateRangePicker3**](#datetime2/date-range-picker3)
+
+
+
+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.
+
+
+
+**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
diff --git a/packages/datetime/src/index.md b/packages/datetime/src/index.md
index b6fc5b1f63..764f63a727 100644
--- a/packages/datetime/src/index.md
+++ b/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).
diff --git a/packages/datetime/src/index.ts b/packages/datetime/src/index.ts
index c5eae3c2d0..7f8713aa2f 100644
--- a/packages/datetime/src/index.ts
+++ b/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";
diff --git a/packages/datetime/test/components/dateInputTests.tsx b/packages/datetime/test/components/dateInputTests.tsx
index 02dcd13c3f..0fe240d756 100644
--- a/packages/datetime/test/components/dateInputTests.tsx
+++ b/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";
diff --git a/packages/datetime/test/components/datePickerTests.tsx b/packages/datetime/test/components/datePickerTests.tsx
index e11af27b73..eaa75080a9 100644
--- a/packages/datetime/test/components/datePickerTests.tsx
+++ b/packages/datetime/test/components/datePickerTests.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 { assert } from "chai";
import { mount } from "enzyme";
import * as React from "react";
diff --git a/packages/datetime/test/components/dateRangeInputTests.tsx b/packages/datetime/test/components/dateRangeInputTests.tsx
index b855765c21..4ff1214a2a 100644
--- a/packages/datetime/test/components/dateRangeInputTests.tsx
+++ b/packages/datetime/test/components/dateRangeInputTests.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 { expect } from "chai";
import { mount, ReactWrapper } from "enzyme";
import * as React from "react";
diff --git a/packages/datetime/test/components/dateRangePickerTests.tsx b/packages/datetime/test/components/dateRangePickerTests.tsx
index 1a579724b2..681976334e 100644
--- a/packages/datetime/test/components/dateRangePickerTests.tsx
+++ b/packages/datetime/test/components/dateRangePickerTests.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 { assert } from "chai";
import { mount, ReactWrapper } from "enzyme";
import * as React from "react";
diff --git a/packages/datetime2/src/index.md b/packages/datetime2/src/index.md
index f24c085f64..0ebf7f653a 100644
--- a/packages/datetime2/src/index.md
+++ b/packages/datetime2/src/index.md
@@ -7,16 +7,16 @@ reference: datetime2
The [**@blueprintjs/datetime2** package](https://www.npmjs.com/package/@blueprintjs/datetime2)
provides next-generation components for interacting with dates & times:
-- [DatePicker3](#datetime2/date-picker3)
-- [DateInput3](#datetime2/date-input3)
-- [DateRangePicker3](#datetime2/date-range-picker3)
-- [DateRangeInput3](#datetime2/date-range-input3)
+- [**DatePicker3**](#datetime2/date-picker3)
+- [**DateInput3**](#datetime2/date-input3)
+- [**DateRangePicker3**](#datetime2/date-range-picker3)
+- [**DateRangeInput3**](#datetime2/date-range-input3)
There are also legacy APIs which are re-exported aliases for components from [**@blueprintjs/datetime**](#datetime).
These "V2" names are backwards-compatible with the previous major version of @blueprintjs/datetime2:
-- DateInput2 (alias for [DateInput](#datetime/date-input))
-- DateRangeInput2 (alias for [DateRangeInput](#datetime/date-range-input))
+- **DateInput2** (alias for [**DateInput**](#datetime/date-input)) (DEPRECATED)
+- **DateRangeInput2** (alias for [**DateRangeInput**](#datetime/date-range-input)) (DEPRECATED)
### Motivation
diff --git a/packages/datetime2/test/dateInput2MigrationUtilsTests.tsx b/packages/datetime2/test/dateInput2MigrationUtilsTests.tsx
index 310d5bf2fb..5032825fbd 100644
--- a/packages/datetime2/test/dateInput2MigrationUtilsTests.tsx
+++ b/packages/datetime2/test/dateInput2MigrationUtilsTests.tsx
@@ -14,6 +14,8 @@
* limitations under the License.
*/
+/* eslint-disable deprecation/deprecation */
+
import { assert } from "chai";
import { mount } from "enzyme";
import * as React from "react";
diff --git a/packages/demo-app/src/examples/DatePickerExample.tsx b/packages/demo-app/src/examples/DatePickerExample.tsx
index 0530f34d8a..c97eb83400 100644
--- a/packages/demo-app/src/examples/DatePickerExample.tsx
+++ b/packages/demo-app/src/examples/DatePickerExample.tsx
@@ -17,7 +17,7 @@
import * as React from "react";
import { Classes } from "@blueprintjs/core";
-import { DatePicker } from "@blueprintjs/datetime";
+import { DatePicker3 } from "@blueprintjs/datetime2";
import { ExampleCard } from "./ExampleCard";
@@ -25,7 +25,7 @@ const WIDTH = 300;
export const DatePickerExample = React.memo(() => {
return (
-
+
);
});
diff --git a/packages/demo-app/src/examples/DateRangePickerExample.tsx b/packages/demo-app/src/examples/DateRangePickerExample.tsx
index 7e902f6c6b..9749254c5a 100644
--- a/packages/demo-app/src/examples/DateRangePickerExample.tsx
+++ b/packages/demo-app/src/examples/DateRangePickerExample.tsx
@@ -17,14 +17,14 @@
import * as React from "react";
import { Classes } from "@blueprintjs/core";
-import { DateRangePicker } from "@blueprintjs/datetime";
+import { DateRangePicker3 } from "@blueprintjs/datetime2";
import { ExampleCard } from "./ExampleCard";
export const DateRangePickerExample = React.memo(() => {
return (
-
+
);
});
diff --git a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
index 26cecb1401..608fd34bf8 100644
--- a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
+++ b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
@@ -14,6 +14,13 @@
* limitations under the License.
*/
+/**
+ * @fileoverview This component is DEPRECATED, and the code is frozen.
+ * All changes & bugfixes should be made to DateInput3 instead.
+ */
+
+/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */
+
import classNames from "classnames";
import * as React from "react";
diff --git a/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx b/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx
index d73f074953..b55cd3bfb2 100644
--- a/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx
+++ b/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx
@@ -14,6 +14,13 @@
* limitations under the License.
*/
+/**
+ * @fileoverview This component is DEPRECATED, and the code is frozen.
+ * All changes & bugfixes should be made to DatePicker3 instead.
+ */
+
+/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */
+
import * as React from "react";
import { Callout, Classes, H5, Switch } from "@blueprintjs/core";
diff --git a/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx
index 28cfd096f7..44862dd592 100644
--- a/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx
+++ b/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx
@@ -14,6 +14,13 @@
* limitations under the License.
*/
+/**
+ * @fileoverview This component is DEPRECATED, and the code is frozen.
+ * All changes & bugfixes should be made to DateRangeInput3 instead.
+ */
+
+/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */
+
import * as React from "react";
import { Callout, Code, H5, Switch } from "@blueprintjs/core";
diff --git a/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx
index 91c4c52467..c562b45da4 100644
--- a/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx
+++ b/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx
@@ -14,6 +14,13 @@
* limitations under the License.
*/
+/**
+ * @fileoverview This component is DEPRECATED, and the code is frozen.
+ * All changes & bugfixes should be made to DateRangePicker3 instead.
+ */
+
+/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */
+
import moment from "moment";
import * as React from "react";
diff --git a/packages/eslint-plugin/src/rules/no-deprecated-components/index.ts b/packages/eslint-plugin/src/rules/no-deprecated-components/index.ts
index e5d6ac5487..356386d650 100644
--- a/packages/eslint-plugin/src/rules/no-deprecated-components/index.ts
+++ b/packages/eslint-plugin/src/rules/no-deprecated-components/index.ts
@@ -5,5 +5,6 @@
export * from "./no-deprecated-components";
export * from "./no-deprecated-core-components";
export * from "./no-deprecated-datetime-components";
+export * from "./no-deprecated-datetime2-components";
export * from "./no-deprecated-select-components";
export * from "./no-deprecated-table-components";
diff --git a/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-components.ts b/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-components.ts
index 29b983c1e3..f2f3842269 100644
--- a/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-components.ts
+++ b/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-components.ts
@@ -7,6 +7,7 @@ import { TSESLint } from "@typescript-eslint/utils";
import { createNoDeprecatedComponentsRule } from "./createNoDeprecatedComponentsRule";
import { coreComponentsMigrationMapping } from "./no-deprecated-core-components";
import { datetimeComponentsMigrationMapping } from "./no-deprecated-datetime-components";
+import { datetime2ComponentsMigrationMapping } from "./no-deprecated-datetime2-components";
import { selectComponentsMigrationMapping } from "./no-deprecated-select-components";
import { tableComponentsMigrationMapping } from "./no-deprecated-table-components";
@@ -18,10 +19,17 @@ import { tableComponentsMigrationMapping } from "./no-deprecated-table-component
*/
export const noDeprecatedComponentsRule: TSESLint.RuleModule = createNoDeprecatedComponentsRule(
"no-deprecated-components",
- ["@blueprintjs/core", "@blueprintjs/datetime", "@blueprintjs/select", "@blueprintjs/table"],
+ [
+ "@blueprintjs/core",
+ "@blueprintjs/datetime",
+ "@blueprintjs/datetime2",
+ "@blueprintjs/select",
+ "@blueprintjs/table",
+ ],
{
...coreComponentsMigrationMapping,
...datetimeComponentsMigrationMapping,
+ ...datetime2ComponentsMigrationMapping,
...selectComponentsMigrationMapping,
...tableComponentsMigrationMapping,
},
diff --git a/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime-components.ts b/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime-components.ts
index 894d8dc843..592b8f548f 100644
--- a/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime-components.ts
+++ b/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime-components.ts
@@ -7,8 +7,10 @@ import { TSESLint } from "@typescript-eslint/utils";
import { createNoDeprecatedComponentsRule } from "./createNoDeprecatedComponentsRule";
export const datetimeComponentsMigrationMapping = {
- // TODO(@adidahiya): Blueprint v6
- // DateTimePicker: "DatePicker",
+ DateInput: "DateInput3",
+ DatePicker: "DatePicker3",
+ DateRangeInput: "DateRangeInput3",
+ DateRangePicker: "DateRangePicker3",
};
/**
diff --git a/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime2-components.ts b/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime2-components.ts
new file mode 100644
index 0000000000..27aac4f78b
--- /dev/null
+++ b/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime2-components.ts
@@ -0,0 +1,24 @@
+/*
+ * (c) Copyright 2023 Palantir Technologies Inc. All rights reserved.
+ */
+
+import { TSESLint } from "@typescript-eslint/utils";
+
+import { createNoDeprecatedComponentsRule } from "./createNoDeprecatedComponentsRule";
+
+export const datetime2ComponentsMigrationMapping = {
+ DateInput2: "DateInput3",
+ DateRangeInput2: "DateRangeInput3",
+};
+
+/**
+ * This rule is similar to "@blueprintjs/no-deprecated-components", but it only checks for usage
+ * of deprecated components from @blueprintjs/datetime2. This is useful for incremental migration to
+ * newer Blueprint APIs.
+ */
+export const noDeprecatedDatetime2ComponentsRule: TSESLint.RuleModule =
+ createNoDeprecatedComponentsRule(
+ "no-deprecated-datetime2-components",
+ ["@blueprintjs/datetime2"],
+ datetime2ComponentsMigrationMapping,
+ );
diff --git a/packages/eslint-plugin/test/no-deprecated-datetime-components.test.ts b/packages/eslint-plugin/test/no-deprecated-datetime-components.test.ts
new file mode 100644
index 0000000000..e50091bb72
--- /dev/null
+++ b/packages/eslint-plugin/test/no-deprecated-datetime-components.test.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright 2022 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// tslint:disable object-literal-sort-keys
+/* eslint-disable no-template-curly-in-string */
+
+import { TSESLint } from "@typescript-eslint/utils";
+import dedent from "dedent";
+
+import { noDeprecatedDatetimeComponentsRule } from "../src/rules/no-deprecated-components";
+
+const ruleTester = new TSESLint.RuleTester({
+ parser: require.resolve("@typescript-eslint/parser"),
+ parserOptions: {
+ ecmaFeatures: {
+ jsx: true,
+ },
+ sourceType: "module",
+ },
+});
+
+ruleTester.run("no-deprecated-datetime-components", noDeprecatedDatetimeComponentsRule, {
+ invalid: [
+ {
+ code: dedent`
+ import { DatePicker } from "@blueprintjs/datetime";
+
+ return ;
+ `,
+ errors: [
+ {
+ messageId: "migration",
+ data: {
+ deprecatedComponentName: "DatePicker",
+ newComponentName: "DatePicker3",
+ },
+ },
+ ],
+ },
+ ],
+ valid: [
+ {
+ code: dedent`
+ import { DatePicker3 } from "@blueprintjs/datetime2";
+
+ return ;
+ `,
+ },
+ ],
+});
diff --git a/packages/eslint-plugin/test/no-deprecated-datetime2-components.test.ts b/packages/eslint-plugin/test/no-deprecated-datetime2-components.test.ts
new file mode 100644
index 0000000000..d71e477a5f
--- /dev/null
+++ b/packages/eslint-plugin/test/no-deprecated-datetime2-components.test.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright 2023 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// tslint:disable object-literal-sort-keys
+/* eslint-disable no-template-curly-in-string */
+
+import { TSESLint } from "@typescript-eslint/utils";
+import dedent from "dedent";
+
+import { noDeprecatedDatetime2ComponentsRule } from "../src/rules/no-deprecated-components";
+
+const ruleTester = new TSESLint.RuleTester({
+ parser: require.resolve("@typescript-eslint/parser"),
+ parserOptions: {
+ ecmaFeatures: {
+ jsx: true,
+ },
+ sourceType: "module",
+ },
+});
+
+ruleTester.run("no-deprecated-datetime2-components", noDeprecatedDatetime2ComponentsRule, {
+ invalid: [
+ {
+ code: dedent`
+ import { DateInput2 } from "@blueprintjs/datetime2";
+
+ return ;
+ `,
+ errors: [
+ {
+ messageId: "migration",
+ data: {
+ deprecatedComponentName: "DateInput2",
+ newComponentName: "DateInput3",
+ },
+ },
+ ],
+ },
+ ],
+ valid: [
+ {
+ code: dedent`
+ import { DateInput3 } from "@blueprintjs/datetime2";
+
+ return ;
+ `,
+ },
+ ],
+});
diff --git a/packages/eslint-plugin/test/no-deprecated-select-components.test.ts b/packages/eslint-plugin/test/no-deprecated-select-components.test.ts
index c1730e94c4..d9dd6355ff 100644
--- a/packages/eslint-plugin/test/no-deprecated-select-components.test.ts
+++ b/packages/eslint-plugin/test/no-deprecated-select-components.test.ts
@@ -32,7 +32,7 @@ const ruleTester = new TSESLint.RuleTester({
},
});
-ruleTester.run("no-deprecated-core-components", noDeprecatedSelectComponentsRule, {
+ruleTester.run("no-deprecated-select-components", noDeprecatedSelectComponentsRule, {
// N.B. most other deprecated components are tested by no-deprecated-components.test.ts, this suite just tests
// for more specific violations which involve certain syntax
invalid: [],