Next 11 (#6414)

.changeset/chatty-seals-fail.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/keystone': major
+---
+
+Updated to Next.js 11. If you were using a custom Babel config, it will no longer be respected because of changes in Next.js.

.changeset/heavy-crews-hope.md

@@ -0,0 +1,21 @@
+---
+'@keystone-ui/button': patch
+'@keystone-ui/core': patch
+'@keystone-ui/fields': patch
+'@keystone-ui/icons': patch
+'@keystone-ui/loading': patch
+'@keystone-ui/modals': patch
+'@keystone-ui/notice': patch
+'@keystone-ui/options': patch
+'@keystone-ui/pill': patch
+'@keystone-ui/popover': patch
+'@keystone-ui/segmented-control': patch
+'@keystone-ui/toast': patch
+'@keystone-ui/tooltip': patch
+'@keystone-next/auth': patch
+'@keystone-next/cloudinary': patch
+'@keystone-next/fields-document': patch
+'@keystone-next/keystone': patch
+---
+
+Updated usages of `jsx` from `@keystone-ui/core` to explicitly use `/** @jsxRuntime classic */`

.changeset/shy-pans-hunt.md

@@ -0,0 +1,8 @@
+---
+'@keystone-next/auth': patch
+'@keystone-next/cloudinary': patch
+'@keystone-next/fields-document': patch
+'@keystone-next/keystone': patch
+---
+
+Changed the way the package directory for resolving views is obtained to use `__dirname` rather than `require.resolve('pkg/package.json')` because in Next.js 11 `require.resolve` returns a numeric id instead of the path.

design-system/packages/button/src/Button.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { ReactNode, useContext } from 'react';

design-system/packages/button/src/hooks/button.ts

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { useTheme } from '@keystone-ui/core';

design-system/packages/core/src/components/Box.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { jsx } from '../emotion';

design-system/packages/core/src/components/Center.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { jsx } from '../emotion';

design-system/packages/core/src/components/Core.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { Fragment, ReactNode } from 'react';
 import { jsx, Global } from '../emotion';

design-system/packages/core/src/components/Divider.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { jsx } from '../emotion';

design-system/packages/core/src/components/Heading.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { jsx } from '../emotion';

design-system/packages/core/src/components/Inline.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { Children, ReactNode } from 'react';

design-system/packages/core/src/components/Link.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { jsx } from '../emotion';

design-system/packages/core/src/components/Stack.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { ElementType, Children, Fragment, ReactNode, isValidElement } from 'react';

design-system/packages/core/src/components/Text.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { jsx } from '../emotion';

design-system/packages/fields/src/Checkbox.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { Fragment, InputHTMLAttributes, ReactNode, forwardRef } from 'react';

design-system/packages/fields/src/DatePicker/Calendar.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { useMemo } from 'react';

design-system/packages/fields/src/DatePicker/components/Adornments.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { ElementType, ReactNode, createContext, useContext } from 'react';

design-system/packages/fields/src/DatePicker/components/InputButton.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { ButtonHTMLAttributes, forwardRef } from 'react';

design-system/packages/fields/src/DatePicker/index.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import React, { Fragment, useCallback } from 'react';

design-system/packages/fields/src/FieldContainer.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import { jsx, forwardRefWithAs } from '@keystone-ui/core';
 
 export const FieldContainer = forwardRefWithAs<'div', {}>(({ as: Tag = 'div', ...props }, ref) => {

design-system/packages/fields/src/FieldLabel.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { forwardRefWithAs, jsx, useTheme } from '@keystone-ui/core';
 import type { ReactNode } from 'react';

design-system/packages/fields/src/FieldLegend.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { jsx, useTheme } from '@keystone-ui/core';
 import type { HTMLAttributes } from 'react';

design-system/packages/fields/src/Radio.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { Fragment, InputHTMLAttributes, ReactNode, forwardRef } from 'react';

design-system/packages/fields/src/Select.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx, useTheme } from '@keystone-ui/core';
 import ReactSelect, { OptionsType, mergeStyles, NamedProps } from 'react-select';

design-system/packages/fields/src/Switch.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 /**

design-system/packages/fields/src/TextArea.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import { InputHTMLAttributes, forwardRef } from 'react';
 import { jsx } from '@keystone-ui/core';
 

design-system/packages/fields/src/TextInput.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 /**
  * TODO

design-system/packages/fields/src/components/ControlLabel.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { ReactNode, ReactElement } from 'react';

design-system/packages/fields/src/components/Icons.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { ReactNode } from 'react';

design-system/packages/icons/src/Icon.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { SVGAttributes, forwardRef, ReactNode } from 'react';

design-system/packages/loading/src/Loading.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { jsx, keyframes, useTheme } from '@keystone-ui/core';

design-system/packages/modals/src/AlertDialog.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { Button } from '@keystone-ui/button';

design-system/packages/modals/src/Blanket.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { HTMLAttributes, forwardRef } from 'react';

design-system/packages/modals/src/DialogBase.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { Fragment, KeyboardEvent, ReactNode } from 'react';

design-system/packages/modals/src/Drawer.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { MutableRefObject, ReactNode } from 'react';

design-system/packages/modals/src/DrawerBase.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { Fragment, KeyboardEvent, MutableRefObject, ReactNode, useCallback, useRef } from 'react';

design-system/packages/notice/src/Notice.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { ReactNode, useMemo } from 'react';

design-system/packages/notice/src/hooks/button.ts

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { useTheme } from '@keystone-ui/core';

design-system/packages/options/src/index.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx, useTheme } from '@keystone-ui/core';
 import { useIndicatorTokens } from '@keystone-ui/fields';

design-system/packages/pill/src/index.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx, useTheme } from '@keystone-ui/core';
 import { ButtonHTMLAttributes, HTMLAttributes, forwardRef, ReactNode } from 'react';

design-system/packages/popover/src/Popover.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import {

design-system/packages/segmented-control/src/SegmentedControl.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 /**

design-system/packages/toast/src/Toast.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { HTMLAttributes, ReactNode, forwardRef, useEffect, useMemo, useState } from 'react';

design-system/packages/tooltip/src/Tooltip.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import {

design-system/website/components/Code.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { ReactNode } from 'react';
 import { jsx, useTheme } from '@keystone-ui/core';

design-system/website/components/Navigation.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { Fragment, ReactNode } from 'react';
 import { jsx, useTheme } from '@keystone-ui/core';

design-system/website/components/Page.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import type { HTMLAttributes, ReactNode } from 'react';
 import { jsx, useTheme } from '@keystone-ui/core';

design-system/website/components/ReadableColor.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import type { ReactNode } from 'react';
 import { jsx } from '@keystone-ui/core';

design-system/website/package.json

@@ -25,7 +25,7 @@
     "@types/react-dom": "^17.0.9",
     "@types/tinycolor2": "^1.4.3",
     "@types/webpack": "^4.41.30",
-    "next": "^10.2.3",
+    "next": "^11.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "tinycolor2": "^1.4.2"

design-system/website/pages/components/button.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { jsx, Stack } from '@keystone-ui/core';
 import { Button, buttonToneValues, ToneKey, buttonWeightValues } from '@keystone-ui/button';

design-system/website/pages/components/fields.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { ComponentProps, ReactNode, useState } from 'react';
 import { jsx, Stack, useTheme } from '@keystone-ui/core';

design-system/website/pages/components/loading.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { Fragment } from 'react';
 import { jsx, Box, Stack } from '@keystone-ui/core';

design-system/website/pages/components/modals.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { useState } from 'react';

design-system/website/pages/components/notice.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { jsx } from '@keystone-ui/core';
 import { Notice, noticeToneValues } from '@keystone-ui/notice';

design-system/website/pages/components/options.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { jsx } from '@keystone-ui/core';

design-system/website/pages/components/pill.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { Stack, jsx } from '@keystone-ui/core';

design-system/website/pages/components/popover.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { jsx, Box } from '@keystone-ui/core';

design-system/website/pages/components/toast.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { Button } from '@keystone-ui/button';

design-system/website/pages/components/tooltip.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 
 import { jsx } from '@keystone-ui/core';

design-system/website/pages/core/alias-tokens.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { jsx, useTheme, Inline } from '@keystone-ui/core';
 

design-system/website/pages/core/global-tokens.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { jsx, useTheme } from '@keystone-ui/core';
 

design-system/website/pages/core/theme.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { jsx } from '@keystone-ui/core';
 

design-system/website/pages/index.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { jsx } from '@keystone-ui/core';
 

design-system/website/pages/layout/box.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { jsx, Box, useTheme } from '@keystone-ui/core';
 

design-system/website/pages/layout/center.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { jsx, Box, useTheme, Center } from '@keystone-ui/core';
 

design-system/website/pages/layout/stack.tsx

@@ -1,4 +1,5 @@
-/* @jsx jsx */
+/** @jsxRuntime classic */
+/** @jsx jsx */
 
 import { jsx, Text, Stack } from '@keystone-ui/core';