Add use-resize-observer types (#41042)

Types are defined for CommonJS module. While the source library has both a main
entry pointing to a CommonJS module and a module entry pointing to an ESM
module, TypeScript doesn’t yet have the ability to model both formats
side-by-side for the same module, so unfortunately one had to be picked.

types/use-resize-observer/index.d.ts

@@ -0,0 +1,105 @@
+// Type definitions for use-resize-observer 5.0
+// Project: https://github.com/ZeeCoder/use-resize-observer#readme
+// Definitions by: PetrSvirak <https://github.com/PetrSvirak>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.5
+export {};
+
+/***
+ * Allows using a ResizeObserver to measure size of an element assigned with ref returned from the hook.
+ * The hook is invoked at least once before the first measurement of actual size by the observer.
+ * @return a ref,
+ *         and ref.current's width (1 before the first measurement),
+ *         and ref.current's height (1 before the first measurement).
+ */
+declare function useResizeObserver(): useResizeObserver.ObserverResultWithDefaultSize;
+
+/***
+ * Allows using a ResizeObserver to measure size of an element assigned with ref returned from the hook.
+ * The hook is invoked at least once before the first measurement of actual size by the observer.
+ * @return a ref (optionally pass in your own),
+ *         and ref.current's width (undefined before the first measurement),
+ *         and ref.current's height (undefined before the first measurement).
+ */
+declare function useResizeObserver<TElement extends HTMLElement>(defaults: DefaultsWithoutSize<TElement>): useResizeObserver.ObserverResultWithoutDefaultSize<TElement>;
+
+/***
+ * Allows using a ResizeObserver to measure size of an element assigned with ref returned from the hook.
+ * The hook is invoked at least once before the first measurement of actual size by the observer.
+ * @return a ref (optionally pass in your own),
+ *         and ref.current's width (defaultWidth the first measurement),
+ *         and height (undefined before the first measurement)".
+ */
+declare function useResizeObserver<TElement extends HTMLElement>(defaults: DefaultsWithWidthOnly<TElement>): useResizeObserver.ObserverResultWithDefaultWidthOnly<TElement>;
+
+/***
+ * Allows using a ResizeObserver to measure size of an element assigned with ref returned from the hook.
+ * The hook is invoked at least once before the first measurement of actual size by the observer.
+ * @return a ref (optionally pass in your own),
+ *         and ref.current's width (undefined the first measurement),
+ *         and height (defaultHeight before the first measurement)".
+ */
+
+declare function useResizeObserver<TElement extends HTMLElement>(defaults: DefaultsWithHeightOnly<TElement>): useResizeObserver.ObserverResultWithDefaultHeightOnly<TElement>;
+
+/***
+ * Allows using a ResizeObserver to measure size of an element assigned with ref returned from the hook.
+ * The hook is invoked at least once before the first measurement of actual size by the observer.
+ * @return a ref (optionally pass in your own),
+ *         and ref.current's width (defaultWidth the first measurement),
+ *         and height (defaultHeight before the first measurement)".
+ */
+declare function useResizeObserver<TElement extends HTMLElement>(defaults: DefaultsWithSize<TElement>): useResizeObserver.ObserverResultWithDefaultSize<TElement>;
+
+import { RefObject } from 'react';
+
+interface DefaultsWithoutSize<TElement> {
+    ref?: RefObject<TElement>;
+    useDefaults?: false;
+}
+
+interface DefaultsWithWidthOnly<TElement> {
+    ref?: RefObject<TElement>;
+    useDefaults?: true;
+    defaultWidth: number;
+}
+
+interface DefaultsWithHeightOnly<TElement> {
+    ref?: RefObject<TElement>;
+    useDefaults?: true;
+    defaultHeight: number;
+}
+
+type DefaultsWithSize<TElement> = DefaultsWithHeightOnly<TElement> & DefaultsWithWidthOnly<TElement>;
+
+declare namespace useResizeObserver {
+    type ObserverDefaults<TElement extends HTMLElement = HTMLElement> =
+        DefaultsWithoutSize<TElement>
+        | DefaultsWithHeightOnly<TElement>
+        | DefaultsWithWidthOnly<TElement>
+        | DefaultsWithSize<TElement>;
+
+    interface ObserverResultWithoutDefaultSize<TElement = HTMLElement> {
+        height?: number;
+        ref: RefObject<TElement>;
+        width?: number;
+    }
+
+    interface ObserverResultWithDefaultHeightOnly<TElement = HTMLElement> {
+        height: number;
+        ref: RefObject<TElement>;
+        width?: number;
+    }
+
+    interface ObserverResultWithDefaultWidthOnly<TElement = HTMLElement> {
+        height?: number;
+        ref: RefObject<TElement>;
+        width: number;
+    }
+
+    type ObserverResultWithDefaultSize<TElement = HTMLElement> =
+        ObserverResultWithDefaultHeightOnly<TElement>
+        & ObserverResultWithDefaultWidthOnly<TElement>;
+}
+
+export = useResizeObserver;

types/use-resize-observer/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "esModuleInterop": true
+    },
+    "files": [
+        "index.d.ts",
+        "use-resize-observer-tests.ts"
+    ]
+}

types/use-resize-observer/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }

types/use-resize-observer/use-resize-observer-tests.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import useResizeObserver, { ObserverDefaults } from 'use-resize-observer';
+
+const ref: React.RefObject<HTMLEmbedElement> = undefined as any;
+const defaultWidth = 42;
+const defaultHeight = 1024;
+
+// default
+useResizeObserver(); // $ExpectType ObserverResultWithDefaultSize<HTMLElement>
+
+// without default size
+useResizeObserver({ }); // $ExpectType ObserverResultWithoutDefaultSize<HTMLElement>
+useResizeObserver({ ref }); // $ExpectType ObserverResultWithoutDefaultSize<HTMLEmbedElement>
+useResizeObserver({ ref, useDefaults: false }); // $ExpectType ObserverResultWithoutDefaultSize<HTMLEmbedElement>
+useResizeObserver({ useDefaults: true }); // $ExpectError
+useResizeObserver({ ref, useDefaults: true }); // $ExpectError
+
+// with width only
+useResizeObserver({ defaultWidth }); // $ExpectType ObserverResultWithDefaultWidthOnly<HTMLElement>
+useResizeObserver({ defaultWidth, ref }); // $ExpectType ObserverResultWithDefaultWidthOnly<HTMLEmbedElement>
+useResizeObserver({ defaultWidth, ref, useDefaults: true }); // $ExpectType ObserverResultWithDefaultWidthOnly<HTMLEmbedElement>
+useResizeObserver({ defaultWidth, useDefaults: false }); // $ExpectError
+useResizeObserver({ defaultWidth, ref, useDefaults: false }); // $ExpectError
+
+// with height only
+useResizeObserver({ defaultHeight }); // $ExpectType ObserverResultWithDefaultHeightOnly<HTMLElement>
+useResizeObserver({ defaultHeight, ref }); // $ExpectType ObserverResultWithDefaultHeightOnly<HTMLEmbedElement>
+useResizeObserver({ defaultHeight, ref, useDefaults: true }); // $ExpectType ObserverResultWithDefaultHeightOnly<HTMLEmbedElement>
+useResizeObserver({ defaultHeight, useDefaults: false }); // $ExpectError
+useResizeObserver({ defaultHeight, ref, useDefaults: false }); // $ExpectError
+
+// with default size
+useResizeObserver({ defaultWidth, defaultHeight }); // $ExpectType ObserverResultWithDefaultSize<HTMLElement>
+useResizeObserver({ defaultWidth, defaultHeight, ref }); // $ExpectType ObserverResultWithDefaultSize<HTMLEmbedElement>
+useResizeObserver({ defaultWidth, defaultHeight, ref, useDefaults: true }); // $ExpectType ObserverResultWithDefaultSize<HTMLEmbedElement>
+useResizeObserver({ defaultWidth, defaultHeight, useDefaults: false }); // $ExpectError
+useResizeObserver({ defaultWidth, defaultHeight, ref, useDefaults: false }); // $ExpectError
+
+// ObserverDefaults
+const o01: ObserverDefaults = { };
+const o02: ObserverDefaults = { ref };
+const o03: ObserverDefaults = { ref, useDefaults: false };
+const o04: ObserverDefaults = { useDefaults: true }; // $ExpectError
+const o05: ObserverDefaults = { ref, useDefaults: true }; // $ExpectError
+const o06: ObserverDefaults = { defaultWidth };
+const o07: ObserverDefaults = { defaultWidth, ref };
+const o08: ObserverDefaults = { defaultWidth, ref, useDefaults: true };
+const o09: ObserverDefaults = { defaultWidth, useDefaults: false }; // $ExpectError
+const o10: ObserverDefaults = { defaultWidth, ref, useDefaults: false }; // $ExpectError
+const o11: ObserverDefaults = { defaultHeight };
+const o12: ObserverDefaults = { defaultHeight, ref };
+const o13: ObserverDefaults = { defaultHeight, ref, useDefaults: true };
+const o14: ObserverDefaults = { defaultHeight, useDefaults: false }; // $ExpectError
+const o15: ObserverDefaults = { defaultHeight, ref, useDefaults: false }; // $ExpectError
+const o16: ObserverDefaults = { defaultWidth, defaultHeight };
+const o17: ObserverDefaults = { defaultWidth, defaultHeight, ref };
+const o18: ObserverDefaults = { defaultWidth, defaultHeight, ref, useDefaults: true };
+const o19: ObserverDefaults = { defaultWidth, defaultHeight, useDefaults: false }; // $ExpectError
+const o20: ObserverDefaults = { defaultWidth, defaultHeight, ref, useDefaults: false }; // $ExpectError