f create

types/react/ts5.0/test/cssProperties.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+const initialStyle: React.CSSProperties = { fontWeight: 'initial' };
+const initialStyleTest = <div style={initialStyle} />;
+
+const borderRadiusStyle: React.CSSProperties = { borderRadius: 5, borderTopRightRadius: '20%' };
+const borderRadiusStyleTest = <div style={borderRadiusStyle} />;
+
+const backgroundAttachmentStyle: React.CSSProperties = { backgroundAttachment: 'fixed' };
+const backgroundAttachmentStyleTest = <div style={backgroundAttachmentStyle} />;
+
+const columnCountStyle: React.CSSProperties = { columnCount: 'auto' };
+const columnCountStyleTest = <div style={columnCountStyle} />;
+
+const fontSizeAdjustStyle: React.CSSProperties = { fontSizeAdjust: 'none' };
+const fontSizeAdjustStyleTest = <div style={fontSizeAdjustStyle} />;
+
+const fontStretchStyle: React.CSSProperties = { fontStretch: 'condensed' };
+const fontStretchStyleTest = <div style={fontStretchStyle} />;
+
+const fontStyleStyle: React.CSSProperties = { fontStyle: 'italic' };
+const fontStyleStyleTest = <div style={fontStyleStyle} />;
+
+const fontWeightStyle: React.CSSProperties = { fontWeight: 400 };
+const fontWeightStyleTest = <div style={fontWeightStyle} />;
+
+const justifyContentStyle: React.CSSProperties = { justifyContent: 'space-evenly' };
+const justifyContentStyleTest = <div style={justifyContentStyle} />;
+
+const boxShadowStyle: React.CSSProperties = { boxShadow: '2px 2px 2px 1px rgba(0, 0, 0, 0.2)' };
+const boxShadowStyleTest = <div style={boxShadowStyle} />;
+
+const overflowStyle: React.CSSProperties = { overflow: 'auto', overflowX: 'visible', overflowY: 'scroll' };
+const overflowStyleTest = <div style={overflowStyle} />;
+
+const positionStyle: React.CSSProperties = { position: 'relative' };
+const positionStyleTest = <div style={positionStyle} />;
+
+// SVG specific style attribute declarations
+
+const fillOpacityStyle: React.CSSProperties = { fillOpacity: 0.3 };
+const fillOpacityStyleTest = <svg style={fillOpacityStyle} />;
+
+const strokeOpacityStyle: React.CSSProperties = { strokeOpacity: 0.3 };
+const strokeOpacityStyleTest = <svg style={strokeOpacityStyle} />;
+
+const strokeWidthStyle: React.CSSProperties = { strokeWidth: '10px' };
+const strokeWidthStyleTest = <svg style={strokeWidthStyle} />;

types/react/ts5.0/test/elementAttributes.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+
+const testCases = [
+    <span />,
+    <span accessKey="s" />,
+    <span autoFocus />,
+    <span className="klass" />,
+    <span contentEditable />,
+    <span contextMenu="menuId" />,
+    <span dir="rtl" />,
+    <span draggable />,
+    <span hidden />,
+    <span id="s" />,
+    <span lang="art-x-tokipona" />,
+    <input placeholder="placeholder" />,
+    <span slot="my-text" />,
+    <span spellCheck />,
+    <span tabIndex={0} />,
+    <span title="title" />,
+    <span role="button" />,
+    <span autoCapitalize="off" />,
+    <span autoCapitalize="none" />,
+    <span autoCapitalize="on" />,
+    <span autoCapitalize="words" />,
+    <span autoCapitalize="sentences" />,
+    <span autoCorrect="off" />,
+    <span autoCorrect="on" />,
+    <span translate="no" />,
+    <span translate="yes" />,
+    <svg>
+        <image crossOrigin="anonymous" />
+    </svg>,
+    <details open={true} onToggle={() => {}} />,
+    <input value={['one', 'two'] as ReadonlyArray<string>} />,
+    <input value={['one', 'two'] as string[]} />,
+    <input value={['one', 'two']} />,
+    <input enterKeyHint="done" />,
+    <input accept="image/*" capture="user" />,
+    <input accept="image/*" capture="environment" />,
+    <input accept="image/*" capture />,
+    <input accept="video/*" capture="user" />,
+    <input accept="video/*" capture="environment" />,
+    // @ts-expect-error
+    <input accept="video/*" capture="haha" />,
+    <input accept="video/*" capture />,
+    <input accept="audio/*" capture />,
+
+    <div role="dialog" />,
+    <div role="none presentation" />,
+    <svg role="treeitem" />,
+    <a target="_blank"></a>,
+    <a target="some-frame"></a>,
+    <input type="button" />,
+    <input type="some-type" />,
+    // @ts-expect-error
+    <input enterKeyHint="don" />,
+    <video disableRemotePlayback onResize={() => {}} />,
+    <picture>
+        <source media="test" srcSet="test" width={50} height={50} />
+        <img src="test" width={100} height={100} />
+    </picture>,
+    <dialog
+        onCancel={event => {
+            // $ExpectType SyntheticEvent<HTMLDialogElement, Event>
+            event;
+        }}
+        onClose={event => {
+            // $ExpectType SyntheticEvent<HTMLDialogElement, Event>
+            event;
+        }}
+    ></dialog>,
+    <link nonce="8IBTHwOdqNKAWeKl7plt8g==" />,
+    <center></center>
+];
+
+// Needed to check these HTML elements in event callbacks.
+// "Imported" from typescript's lib.dom.d.ts.
+declare global {
+    interface HTMLDetailsElement {
+        open: boolean;
+    }
+
+    interface HTMLMeterElement {
+        optimum: number;
+    }
+
+    interface HTMLModElement {
+        cite: string;
+    }
+
+    interface HTMLOutputElement {
+        value: string;
+    }
+
+    interface HTMLQuoteElement {
+        cite: string;
+    }
+
+    interface HTMLTimeElement {
+        dateTime: string;
+    }
+}
+
+const eventCallbacksTestCases = [
+    <blockquote onClick={e => e.currentTarget.cite} />,
+    <del onClick={e => e.currentTarget.cite} />,
+    <details onClick={e => e.currentTarget.open} />,
+    <meter onClick={e => e.currentTarget.optimum} />,
+    <output onClick={e => e.currentTarget.value} />,
+    <time onClick={e => e.currentTarget.dateTime} />,
+];

types/react/ts5.0/test/experimental.tsx

@@ -0,0 +1,73 @@
+/// <reference types="../experimental"/>
+
+import React = require('react');
+
+// NOTE: forward declarations for tests
+declare var console: Console;
+interface Console {
+    log(...args: any[]): void;
+}
+
+function suspenseTest() {
+    function DisplayData() {
+        return null;
+    }
+
+    function FlameChart() {
+        return (
+            <React.Suspense fallback="computing..." unstable_expectedLoadTime={2000}>
+                <DisplayData />
+            </React.Suspense>
+        );
+    }
+}
+
+// Unsupported `revealOrder` triggers a runtime warning
+// @ts-expect-error
+<React.SuspenseList revealOrder="something">
+    <React.Suspense fallback="Loading">Content</React.Suspense>
+</React.SuspenseList>;
+
+<React.SuspenseList revealOrder="backwards">
+    <React.Suspense fallback="Loading">A</React.Suspense>
+    <React.Suspense fallback="Loading">B</React.Suspense>
+</React.SuspenseList>;
+
+<React.SuspenseList revealOrder="forwards">
+    <React.Suspense fallback="Loading">A</React.Suspense>
+    <React.Suspense fallback="Loading">B</React.Suspense>
+</React.SuspenseList>;
+
+<React.SuspenseList revealOrder="together">
+    <React.Suspense fallback="Loading">A</React.Suspense>
+    <React.Suspense fallback="Loading">B</React.Suspense>
+</React.SuspenseList>;
+
+function useEvent() {
+    // Implicit any
+    // @ts-expect-error
+    const anyEvent = React.experimental_useEffectEvent(value => {
+        // $ExpectType any
+        return value;
+    });
+    // $ExpectType any
+    anyEvent({});
+    // $ExpectType (value: string) => number
+    const typedEvent = React.experimental_useEffectEvent((value: string) => {
+        return Number(value);
+    });
+    // $ExpectType number
+    typedEvent('1');
+    // Argument of type '{}' is not assignable to parameter of type 'string'.
+    // @ts-expect-error
+    typedEvent({});
+
+    function useContextuallyTypedEvent(fn: (event: Event) => string) {}
+    useContextuallyTypedEvent(
+        React.experimental_useEffectEvent(event => {
+            // $ExpectType Event
+            event;
+            return String(event);
+        }),
+    );
+}