Update typescript, react, react-dom

package.json

@@ -55,8 +55,8 @@
  "@types/googlemaps": "^3.39.7",
  "@types/highlightjs": "^9.12.0",
  "@types/jest": "^26.0.21",
- "@types/react": "^18.0.9",
- "@types/react-dom": "^18.0.3",
+ "@types/react": "^18.0.14",
+ "@types/react-dom": "^18.0.5",
  "@types/react-google-recaptcha": "^2.1.5",
  "@types/react-router-dom": "^5.3.3",
  "@types/sinon": "^9.0.8",
@@ -73,14 +73,14 @@
  "match-media-mock": "^0.1.1",
  "monaco-editor-webpack-plugin": "^7.0.1",
  "prettier": "^2.4.1",
- "react": "^18.1.0",
- "react-dom": "^18.1.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
  "rimraf": "^3.0.2",
  "sinon": "^4.5.0",
  "strip-css-comments": "^3.0.0",
  "ts-jest": "^26.5.6",
  "ts-node": "^10.4.0",
- "typescript": "^3.9.10",
+ "typescript": "^4.7.4",
  "zxcvbn": "^4.4.2"
  },
  "dependencies": {
@@ -116,10 +116,11 @@
  "grommet": "~2.23.0",
  "hast-util-sanitize": "^3.0.2",
  "json-e": "^4.4.3",
+ "json-schema": "^0.4.0",
  "lodash": "^4.17.21",
  "memoizee": "^0.4.15",
- "moment": "^2.29.3",
  "mermaid": "^8.14.0",
+ "moment": "^2.29.3",
  "pinejs-client-fetch": "^0.2.2",
  "prismjs": "^1.25.0",
  "prop-types": "^15.7.2",

src/components/Async/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 // Load given React component asynchronously, needed when implementing WASM
 // This component can be replaced with React.lazy once we upgrade to React v16.6
@@ -18,7 +18,10 @@ export const Async = (importComponent: () => any) => {
  }
 
  public render() {
- const Component = this.state.component as React.SFC<any> | null;
+ const Component = this.state.component as React.ComponentFactory<
+ any,
+ any
+ > | null;
  return Component ? <Component {...this.props} /> : null;
  }
  };

src/components/Button/index.tsx

@@ -285,7 +285,7 @@ interface ButtonBaseProps extends Coloring, Sizing {
 
 export interface InternalButtonProps
  extends ButtonBaseProps,
- Omit<React.HTMLAttributes<HTMLElement>, 'dir' | 'color'>,
+ Omit<React.HTMLAttributes<HTMLElement>, 'dir' | 'color' | 'children'>,
  GrommetButtonProps {
  type?: 'submit' | 'reset' | 'button';
  confirmation?: ConfirmOptions | string;

src/components/Checkbox/index.tsx

@@ -85,7 +85,7 @@ const BaseCheckbox = ({ className, ...otherProps }: InternalCheckboxProps) => {
 };
 
 export interface InternalCheckboxProps
- extends React.HTMLAttributes<HTMLElement>,
+ extends Omit<React.HTMLAttributes<HTMLElement>, 'children'>,
  GrommetCheckBoxProps {
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }

src/components/Form/fields/ObjectField.tsx

@@ -36,12 +36,12 @@ interface ObjectFieldProps {
  title: string;
  description: string;
  properties: Properties[];
- TitleField: React.StatelessComponent<{
+ TitleField: React.FunctionComponent<{
  id: string;
  title: string;
  required: boolean;
  }>;
- DescriptionField: React.StatelessComponent<{
+ DescriptionField: React.FunctionComponent<{
  id: string;
  description: string | React.ReactElement;
  }>;

src/components/Notifications/defaultStyle.ts

@@ -192,6 +192,10 @@ export default css`
  border-radius: 0;
  margin-bottom: 0;
  }
+ .rnc__notification-container--bottom-full .rnc__notification,
+ .rnc__notification-container--top-full .rnc__notification {
+ width: 100% !important;
+ }
  .rnc__notification-timer {
  margin-top: 10px;
  width: 100%;

src/components/Notifications/index.tsx

@@ -113,7 +113,7 @@ const NotificationContainer = ({
 
 /**
  * To use this component, you first need to add the `NotificationsContainer` component at the root of your React application.
- * You can then programatically add or remove notifications using the `notifications` module. For example:
+ * You can then programmatically add or remove notifications using the `notifications` module. For example:
  *
  * ```
  * import {notifications} from 'rendition';

src/components/Provider/BreakpointProvider.tsx

@@ -1,7 +1,7 @@
 import debounce from 'lodash/debounce';
 import * as React from 'react';
 import { BreakpointContext } from '../../contexts/BreakpointContext';
-export interface BreakpointProviderProps {
+export interface BreakpointProviderProps extends React.PropsWithChildren<{}> {
  breakpoints: number[];
  onBreakpointChange?: (breakpoint: number) => void;
 }

src/components/RadioButton/index.tsx

@@ -62,7 +62,7 @@ const BaseRadioButton = ({
 
 // Make name optional, and override onChange to not be of `any` type.
 interface InternalRadioButtonProps
- extends Omit<GrommetRadioButtonProps, 'name'>,
+ extends Omit<GrommetRadioButtonProps, 'name' | 'children'>,
  React.HTMLAttributes<HTMLElement> {
  /** The DOM name attribute value to use for the underlying <input/> element. */
  name?: string;

src/components/Renderer/RendererPlayground/index.tsx

@@ -181,7 +181,7 @@ const RendererPlaygroundBase = ({
  </Flex>
  </Flex>
  <EditCard flex={1} {...commonCardProps}>
- {/* <JsonEditor
+ <JsonEditor
  title="Data"
  value={valueStr}
  onChange={onValueStrChange}
@@ -201,7 +201,7 @@ const RendererPlaygroundBase = ({
  onChange={onUiSchemaStrChange}
  schema={uiSchemaMetaSchema}
  isValid={isUiSchemaJsonValid}
- /> */}
+ />
  </EditCard>
  </Flex>
  <Flex flex="1 1 50%" minWidth={0} flexDirection="column" pl={2}>

src/components/SurroundingOverlay/SurroundingOverlay.stories.tsx

@@ -8,7 +8,7 @@ const SurroundingOverlayDemo = (props: SurroundingOverlayProps) => {
  const [rect, setRect] = React.useState<PartialDomRect | null>(null);
  return (
  <>
- <SurroundingOverlay rect={rect} {...props} />
+ <SurroundingOverlay {...props} rect={rect} />
  <Input
  mb={4}
  type="text"

src/components/Terminal/index.tsx

@@ -162,7 +162,6 @@ export class Terminal extends React.Component<ThemedTerminalProps, {}> {
  });
  }
  this.resize();
- // @ts-expect-error this was added to the window types on TS 4.2
  const nativeResizeObserver = window.ResizeObserver;
  const ResizeObserverCtor =
  typeof nativeResizeObserver === 'function'

src/extra/AutoUI/index.tsx

@@ -187,7 +187,7 @@ export const AutoUI = <T extends AutoUIBaseResource<T>>({
  }, [lenses]);
 
  const lensRendererOnEntityClick: typeof onEntityClick = React.useCallback(
- (row, event) => {
+ (row: T, event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
  onEntityClick?.(row, event);
 
  if (event.isPropagationStopped() && event.isDefaultPrevented()) {

src/hooks/spec.tsx

@@ -26,7 +26,6 @@ test('useTheme should return correct theme object', () => {
 });
 
 const resizeWindow = (width = 600) => {
- // @ts-expect-error
  global.window.innerWidth = width;
  global.window.dispatchEvent(new Event('resize'));
 };

src/internal/Confirm.tsx

@@ -82,9 +82,12 @@ export function withConfirm<T extends {}>(
  setClickEvent(null);
  }, []);
 
- const handleBaseClick = React.useCallback((e) => {
- setClickEvent(e);
- }, []);
+ const handleBaseClick = React.useCallback(
+ (e: React.SyntheticEvent<T, Event>) => {
+ setClickEvent(e);
+ },
+ [],
+ );
 
  const confirmOptions = React.useMemo(() => {
  return typeof confirmation === 'string'

src/internal/ErrorBoundary/index.tsx

@@ -6,7 +6,7 @@ interface ErrorBoundaryState {
  error: any;
 }
 
-interface ErrorBoundaryProps {
+interface ErrorBoundaryProps extends React.ComponentProps<any> {
  getErrorDisplay?: (error: any) => JSX.Element;
 }
 

src/typings/tag-hoc.d.ts

@@ -2,9 +2,7 @@ declare module 'tag-hoc' {
  import * as React from 'react';
  function tag(
  blacklist: string[],
- ): <P extends object>(
- type: React.StatelessComponent<P>,
- ) => React.StatelessComponent<P>;
+ ): <P extends object>(type: React.Component<P>) => React.Component<P>;
 
  export = tag;
 }