Introduces a Merge<> utility and a type testing pattern (#1505)

* Introduces a Merge<> utility and a type testing pattern

* Fix the glob to include tests

* Update src/TextInput.tsx

Co-authored-by: Cole Bemis <[email protected]>

Co-authored-by: Cole Bemis <[email protected]>

Author: jfuchs

jest.config.js

@@ -9,5 +9,5 @@ module.exports = {
     '<rootDir>/src/utils/test-deprecations.tsx',
     '<rootDir>/src/utils/test-helpers.tsx'
   ],
-  testRegex: '/(src|codemods)/__tests__/.*\\.test.[jt]sx?$'
+  testMatch: ['<rootDir>/(src|codemods)/__tests__/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)']
 }

src/ActionList/List.tsx

@@ -7,11 +7,12 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import {SystemCssProperties} from '@styled-system/css'
 import {hasActiveDescendantAttribute} from '../behaviors/focusZone'
+import {Merge} from '../utils/types/Merge'
 
 type RenderItemFn = (props: ItemProps) => React.ReactElement
 
 export type ItemInput =
-  | (ItemProps & Omit<React.ComponentPropsWithoutRef<'div'>, keyof ItemProps>)
+  | Merge<React.ComponentPropsWithoutRef<'div'>, ItemProps>
   | ((Partial<ItemProps> & {renderItem: RenderItemFn}) & {key?: Key})
 
 /**

src/TextInput.tsx

@@ -4,7 +4,7 @@ import styled, {css} from 'styled-components'
 import {maxWidth, MaxWidthProps, minWidth, MinWidthProps, variant, width, WidthProps} from 'styled-system'
 import {get} from './constants'
 import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
+import {ComponentProps, Merge} from './utils/types'
 
 const sizeVariants = variant({
   variants: {
@@ -127,9 +127,8 @@ type NonPassthroughProps = {
   'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'
 >
 
-type TextInputInternalProps = NonPassthroughProps &
-  // Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop.
-  Omit<React.ComponentPropsWithoutRef<typeof Input>, keyof NonPassthroughProps>
+// Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop.
+type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof Input>, NonPassthroughProps>
 
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
 const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(

src/__tests__/ActionList.types.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import {ActionList} from '..'
+
+export function emptyList() {
+  return <ActionList items={[]} />
+}
+
+export function listWithSingleItem() {
+  return <ActionList items={[{text: 'One'}]} />
+}
+
+export function canUseDivDOMProps() {
+  return (
+    <ActionList
+      items={[
+        {
+          text: 'One',
+          onMouseDown: () => undefined
+        }
+      ]}
+    />
+  )
+}
+
+export function cannotUseAnchorDOMProps() {
+  return (
+    <ActionList
+      items={[
+        {
+          text: 'One',
+          // @ts-expect-error href is not a div DOM prop
+          href: '#'
+        }
+      ]}
+    />
+  )
+}
+
+export function cannotUseAsWithoutRenderProp() {
+  return (
+    <ActionList
+      items={[
+        {
+          text: 'One',
+          // @ts-expect-error as is only available via manual rendering of items
+          as: 'a'
+        }
+      ]}
+    />
+  )
+}

src/__tests__/Merge.types.test.ts

@@ -0,0 +1,39 @@
+import {Merge} from '../utils/types/Merge'
+
+type AString = {
+  a: string
+}
+
+type BString = {
+  b: string
+}
+
+type CString = {
+  c: string
+}
+
+type CNumber = {
+  c: number
+}
+
+type DOptionalString = {
+  d?: string
+}
+
+export function canMergeTwoTypes(x: Merge<AString, BString>): {a: string; b: string} {
+  return x
+}
+
+export function overridesAsExpected(x: Merge<CString, CNumber>): {c: number} {
+  return x
+}
+
+export function optionalityIsPreservedInFirstParameter(x: Merge<DOptionalString, AString>): {d: number} {
+  // @ts-expect-error: d is optional
+  return x
+}
+
+export function optionalityIsPreservedInSecondParameter(x: Merge<DOptionalString, AString>): {d: number} {
+  // @ts-expect-error: d is optional
+  return x
+}

src/utils/types.ts renamed to src/utils/types/AriaRole.ts

@@ -1,22 +1,3 @@
-/**
- * Extract a component's props
- *
- * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
- *
- * @example ComponentProps<typeof MyComponent>
- */
-export type ComponentProps<T> = T extends React.ComponentType<infer Props>
-  ? // eslint-disable-next-line @typescript-eslint/ban-types
-    Props extends object
-    ? Props
-    : never
-  : never
-
-/**
- * Contruct a type describing the items in `T`, if `T` is an array.
- */
-export type Flatten<T extends unknown> = T extends (infer U)[] ? U : never
-
 // ref: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
 export type AriaRole =
   | 'alert'

src/utils/types/ComponentProps.ts

@@ -0,0 +1,13 @@
+/**
+ * Extract a component's props
+ *
+ * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
+ *
+ * @example ComponentProps<typeof MyComponent>
+ */
+export type ComponentProps<T> = T extends React.ComponentType<infer Props>
+  ? // eslint-disable-next-line @typescript-eslint/ban-types
+    Props extends object
+    ? Props
+    : never
+  : never

src/utils/types/Flatten.ts

@@ -0,0 +1,4 @@
+/**
+ * Contruct a type describing the items in `T`, if `T` is an array.
+ */
+export type Flatten<T extends unknown> = T extends (infer U)[] ? U : never

src/utils/types/Merge.ts

@@ -0,0 +1,20 @@
+/**
+ * Given two object types A and B, return a type with all the properties of A that aren't also
+ * properties of B, and all the properties of B.
+ *
+ * Useful when we have a component that spreads a "rest" of its props on a subcomponent:
+ *
+ * ```ts
+ * interface OwnProps {
+ *  foo: string
+ * }
+ *
+ * type MyComponentProps = Merge<SubcomponentProps, OwnProps>
+ * const MyComponent = ({foo, ...rest}: MyComponentProps) => {
+ *   // ...
+ *   return <SubComponent {...rest} />
+ * }
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type Merge<A = {}, B = {}> = Omit<A, keyof B> & B

src/utils/types/index.ts

@@ -0,0 +1,4 @@
+export * from './AriaRole'
+export * from './ComponentProps'
+export * from './Flatten'
+export * from './Merge'