Use new JSX transform

packages/react-calendar/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "wojtekmaj/react-no-automatic-runtime"
+  "extends": "wojtekmaj/react"
 }

packages/react-calendar/src/Calendar.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { act, render } from '@testing-library/react';
 import { getMonthStart } from '@wojtekmaj/date-utils';
 

packages/react-calendar/src/Calendar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 

packages/react-calendar/src/Calendar/Navigation.spec.tsx

@@ -1,5 +1,4 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
 import Navigation from './Navigation.js';

packages/react-calendar/src/Calendar/Navigation.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import React from 'react';
 import { getUserLocale } from 'get-user-locale';
 
 import {

packages/react-calendar/src/CenturyView.spec.tsx

@@ -1,5 +1,4 @@
 import { describe, expect, it } from 'vitest';
-import React from 'react';
 import { render } from '@testing-library/react';
 import { getDecadeStart, getDecadeEnd } from '@wojtekmaj/date-utils';
 

packages/react-calendar/src/CenturyView.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import Decades from './CenturyView/Decades.js';

packages/react-calendar/src/CenturyView/Decade.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import React from 'react';
+
 import { fireEvent, render } from '@testing-library/react';
 
 import Decade from './Decade.js';

packages/react-calendar/src/CenturyView/Decade.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { getDecadeStart, getDecadeEnd, getCenturyStart } from '@wojtekmaj/date-utils';
 
 import Tile from '../Tile.js';

packages/react-calendar/src/CenturyView/Decades.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { getDecadeStart } from '@wojtekmaj/date-utils';
 
 import TileGroup from '../TileGroup.js';

packages/react-calendar/src/DecadeView.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import React from 'react';
+
 import { render } from '@testing-library/react';
 
 import DecadeView from './DecadeView.js';

packages/react-calendar/src/DecadeView.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import Years from './DecadeView/Years.js';

packages/react-calendar/src/DecadeView/Year.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import React from 'react';
+
 import { fireEvent, render } from '@testing-library/react';
 
 import Year from './Year.js';

packages/react-calendar/src/DecadeView/Year.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { getYearStart, getYearEnd, getDecadeStart } from '@wojtekmaj/date-utils';
 
 import Tile from '../Tile.js';

packages/react-calendar/src/DecadeView/Years.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { getYearStart } from '@wojtekmaj/date-utils';
 
 import TileGroup from '../TileGroup.js';

packages/react-calendar/src/Flex.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import React from 'react';
+
 import { render } from '@testing-library/react';
 
 import Flex from './Flex.js';

packages/react-calendar/src/Flex.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Children, cloneElement } from 'react';
 
 type FlexProps = React.HTMLAttributes<HTMLDivElement> & {
   children: React.ReactElement[];
@@ -35,10 +35,10 @@ export default function Flex({
       }}
       {...otherProps}
     >
-      {React.Children.map(children, (child, index) => {
+      {Children.map(children, (child, index) => {
         const marginInlineStart = offset && index === 0 ? toPercent((100 * offset) / count) : null;
 
-        return React.cloneElement(child, {
+        return cloneElement(child, {
           ...child.props,
           style: {
             flexBasis: toPercent(100 / count),

packages/react-calendar/src/MonthView.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import React from 'react';
+
 import { render } from '@testing-library/react';
 
 import MonthView from './MonthView.js';

packages/react-calendar/src/MonthView.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 

packages/react-calendar/src/MonthView/Day.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import React from 'react';
+
 import { fireEvent, render } from '@testing-library/react';
 
 import Day from './Day.js';

packages/react-calendar/src/MonthView/Day.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { getDayStart, getDayEnd } from '@wojtekmaj/date-utils';
 
 import Tile from '../Tile.js';

packages/react-calendar/src/MonthView/Days.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { getYear, getMonth, getDaysInMonth, getDayStart } from '@wojtekmaj/date-utils';
 
 import TileGroup from '../TileGroup.js';

packages/react-calendar/src/MonthView/WeekNumber.spec.tsx

@@ -1,5 +1,4 @@
 import { describe, expect, it } from 'vitest';
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import WeekNumber from './WeekNumber.js';

packages/react-calendar/src/MonthView/WeekNumber.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { OnClickWeekNumberFunc } from '../shared/types.js';
 
 const className = 'react-calendar__tile';

packages/react-calendar/src/MonthView/WeekNumbers.spec.tsx

@@ -1,5 +1,4 @@
 import { describe, expect, it, vi } from 'vitest';
-import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
 import WeekNumbers from './WeekNumbers.js';

packages/react-calendar/src/MonthView/WeekNumbers.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { getYear, getMonth, getDate, getDaysInMonth } from '@wojtekmaj/date-utils';
 
 import WeekNumber from './WeekNumber.js';

packages/react-calendar/src/MonthView/Weekdays.spec.tsx

@@ -1,5 +1,4 @@
 import { describe, expect, it } from 'vitest';
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import Weekdays from './Weekdays.js';

packages/react-calendar/src/MonthView/Weekdays.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import clsx from 'clsx';
 import { getYear, getMonth, getMonthStart } from '@wojtekmaj/date-utils';
 

packages/react-calendar/src/Tile.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import React from 'react';
+
 import { fireEvent, render } from '@testing-library/react';
 
 import Tile from './Tile.js';

packages/react-calendar/src/Tile.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import clsx from 'clsx';
 
 import type {

packages/react-calendar/src/TileGroup.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Flex from './Flex.js';
 
 import { getTileClasses } from './shared/utils.js';

packages/react-calendar/src/YearView.spec.tsx

@@ -1,5 +1,4 @@
 import { describe, expect, it } from 'vitest';
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import YearView from './YearView.js';

packages/react-calendar/src/YearView.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Months from './YearView/Months.js';
 
 import { tileGroupProps } from './shared/propTypes.js';

packages/react-calendar/src/YearView/Month.spec.tsx

@@ -1,5 +1,4 @@
 import { describe, expect, it, vi } from 'vitest';
-import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
 import Month from './Month.js';

packages/react-calendar/src/YearView/Month.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { getMonthStart, getMonthEnd } from '@wojtekmaj/date-utils';
 
 import Tile from '../Tile.js';

packages/react-calendar/src/YearView/Months.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { getMonthStart, getYear } from '@wojtekmaj/date-utils';
 
 import TileGroup from '../TileGroup.js';

packages/react-calendar/tsconfig.json

@@ -3,7 +3,7 @@
     "declaration": true,
     "esModuleInterop": true,
     "isolatedModules": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "module": "nodenext",
     "noEmit": true,
     "noUncheckedIndexedAccess": true,