refactor: move polymorphic types into a separate package

.changeset/config.json

@@ -17,6 +17,7 @@
 			"@reach/listbox",
 			"@reach/machine",
 			"@reach/menu-button",
+			"@reach/polymorphic",
 			"@reach/popover",
 			"@reach/portal",
 			"@reach/rect",

.changeset/stupid-eels-stare.md

@@ -0,0 +1,6 @@
+---
+"@reach/utils": minor
+"@reach/polymorphic": minor
+---
+
+All `Polymorphic` types that were previously exported from `@reach/utils` have been moved to a separate package `@reach/polymorphic`. As `@reach/utils` is an internal package, this [breaking] change should not affect you [if you listened to us and did not use the package directly].

packages/accordion/package.json

@@ -18,6 +18,7 @@
 	"dependencies": {
 		"@reach/auto-id": "workspace:*",
 		"@reach/descendants": "workspace:*",
+		"@reach/polymorphic": "workspace:*",
 		"@reach/utils": "workspace:*"
 	},
 	"devDependencies": {

packages/accordion/src/reach-accordion.tsx

@@ -19,7 +19,7 @@ import {
 	composeEventHandlers,
 	useStatefulRefValue,
 } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 import {
 	createDescendantContext,
 	DescendantProvider,

packages/alert-dialog/package.json

@@ -15,6 +15,7 @@
 	"dependencies": {
 		"@reach/auto-id": "workspace:*",
 		"@reach/dialog": "workspace:*",
+		"@reach/polymorphic": "workspace:*",
 		"@reach/utils": "workspace:*",
 		"tiny-invariant": "^1.2.0"
 	},

packages/alert-dialog/src/reach-alert-dialog.tsx

@@ -39,7 +39,7 @@ import {
 	makeId,
 	useComposedRefs,
 } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 import invariant from "tiny-invariant";
 
 import type { DialogProps, DialogContentProps } from "@reach/dialog";

packages/alert/package.json

@@ -13,6 +13,7 @@
 		"build": "tsup"
 	},
 	"dependencies": {
+		"@reach/polymorphic": "workspace:*",
 		"@reach/utils": "workspace:*",
 		"@reach/visually-hidden": "workspace:*"
 	},

packages/alert/src/reach-alert.tsx

@@ -26,7 +26,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { VisuallyHidden } from "@reach/visually-hidden";
 import { getOwnerDocument, useComposedRefs } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 
 /*
  * Singleton state is fine because you don't server render

packages/checkbox/package.json

@@ -19,6 +19,7 @@
 	"dependencies": {
 		"@reach/auto-id": "workspace:*",
 		"@reach/machine": "workspace:*",
+		"@reach/polymorphic": "workspace:*",
 		"@reach/utils": "workspace:*"
 	},
 	"devDependencies": {

packages/checkbox/src/custom.tsx

@@ -39,7 +39,7 @@ import {
 	useComposedRefs,
 	composeEventHandlers,
 } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 import {
 	internal_checkedPropToStateValue as checkedPropToStateValue,
 	useMixedCheckbox,

packages/checkbox/src/mixed.tsx

@@ -37,7 +37,7 @@ import {
 	useIsomorphicLayoutEffect,
 	useComposedRefs,
 } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 import { assign, useCreateMachine, useMachine } from "@reach/machine";
 import type { MachineEventWithRefs, StateMachine } from "@reach/machine";
 

packages/combobox/package.json

@@ -18,6 +18,7 @@
 	"dependencies": {
 		"@reach/auto-id": "workspace:*",
 		"@reach/descendants": "workspace:*",
+		"@reach/polymorphic": "workspace:*",
 		"@reach/popover": "workspace:*",
 		"@reach/portal": "workspace:*",
 		"@reach/utils": "workspace:*"

packages/combobox/src/reach-combobox.tsx

@@ -31,7 +31,7 @@ import {
 	useStatefulRefValue,
 	useUpdateEffect,
 } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 import {
 	createDescendantContext,
 	DescendantProvider,

packages/dialog/package.json

@@ -16,6 +16,7 @@
 		"build": "tsup"
 	},
 	"dependencies": {
+		"@reach/polymorphic": "workspace:*",
 		"@reach/portal": "workspace:*",
 		"@reach/utils": "workspace:*",
 		"react-focus-lock": "2.5.2",

packages/dialog/src/reach-dialog.tsx

@@ -21,7 +21,7 @@ import {
 	useCheckStyles,
 	useComposedRefs,
 } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 import FocusLock from "react-focus-lock";
 import { RemoveScroll } from "react-remove-scroll";
 

packages/disclosure/package.json

@@ -14,6 +14,7 @@
 	},
 	"dependencies": {
 		"@reach/auto-id": "workspace:*",
+		"@reach/polymorphic": "workspace:*",
 		"@reach/utils": "workspace:*"
 	},
 	"devDependencies": {

packages/disclosure/src/reach-disclosure.tsx

@@ -23,7 +23,7 @@ import {
 	composeEventHandlers,
 	useControlledState,
 } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 import { useId } from "@reach/auto-id";
 
 const [DisclosureProvider, useDisclosureCtx] =

packages/dropdown/package.json

@@ -18,6 +18,7 @@
 	"dependencies": {
 		"@reach/auto-id": "workspace:*",
 		"@reach/descendants": "workspace:*",
+		"@reach/polymorphic": "workspace:*",
 		"@reach/popover": "workspace:*",
 		"@reach/utils": "workspace:*"
 	},

packages/dropdown/src/reach-dropdown.tsx

@@ -24,7 +24,7 @@ import {
 	useStatefulRefValue,
 	makeId,
 } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 
 import type { Descendant } from "@reach/descendants";
 import type { Position } from "@reach/popover";

packages/listbox/package.json

@@ -19,6 +19,7 @@
 		"@reach/auto-id": "workspace:*",
 		"@reach/descendants": "workspace:*",
 		"@reach/machine": "workspace:*",
+		"@reach/polymorphic": "workspace:*",
 		"@reach/popover": "workspace:*",
 		"@reach/utils": "workspace:*",
 		"tiny-invariant": "^1.2.0"

packages/menu-button/package.json

@@ -17,6 +17,7 @@
 	},
 	"dependencies": {
 		"@reach/dropdown": "workspace:*",
+		"@reach/polymorphic": "workspace:*",
 		"@reach/popover": "workspace:*",
 		"@reach/utils": "workspace:*"
 	},

packages/menu-button/src/reach-menu-button.tsx

@@ -22,7 +22,7 @@ import {
 	useDropdownContext,
 } from "@reach/dropdown";
 import { noop, useCheckStyles } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 import { isFragment } from "react-is";
 
 import type { Position } from "@reach/popover";

packages/polymorphic/.eslintignore

@@ -0,0 +1 @@
+dist

packages/polymorphic/CHANGELOG.md

@@ -0,0 +1 @@
+# @reach/polymorphic

packages/polymorphic/README.md

@@ -0,0 +1,5 @@
+# @reach/polymorphic
+
+[![Stable release](https://img.shields.io/npm/v/@reach/polymorphic.svg)](https://npm.im/@reach/polymorphic) ![MIT license](https://badgen.now.sh/badge/license/MIT)
+
+**Important:** This package is primarily intended for internal use by the Reach UI library. You should not use it directly in your production projects, as the APIs can change at any time without regard to semver.

packages/polymorphic/package.json

@@ -0,0 +1,36 @@
+{
+	"name": "@reach/polymorphic",
+	"version": "0.18.0-pre.3",
+	"description": "Internal utility types for polymorphism in Reach UI.",
+	"author": "React Training <hello@reacttraining.com>",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/reach/reach-ui.git",
+		"directory": "packages/polymorphic"
+	},
+	"scripts": {
+		"build": "tsup"
+	},
+	"dependencies": {},
+	"devDependencies": {
+		"@reach-internal/dev": "workspace:*",
+		"@reach-internal/tsconfig": "workspace:*",
+		"react": "^17.0.2",
+		"tsup": "^6.1.3"
+	},
+	"peerDependencies": {
+		"react": "^16.8.0 || 17.x"
+	},
+	"main": "./src/reach-polymorphic.ts",
+	"types": "./src/reach-polymorphic.ts",
+	"files": [
+		"CHANGELOG.md",
+		"LICENSE",
+		"README.md",
+		"dist"
+	],
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/utils/src/polymorphic.ts → packages/polymorphic/src/reach-polymorphic.ts

@@ -6,6 +6,8 @@
 
 import type * as React from "react";
 
+declare const __DEV__: boolean;
+
 type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
 
 /**
@@ -69,6 +71,15 @@ interface MemoComponent<IntrinsicElementString, OwnProps = {}>
 	): React.ReactElement | null;
 }
 
+/** @internal */
+export default () => {
+	if (__DEV__) {
+		throw new Error(
+			"@reach/polymorphic is a package for internal utility types and should not be used directly."
+		);
+	}
+};
+
 export type {
 	ForwardRefComponent,
 	IntrinsicElement,

packages/polymorphic/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"extends": "@reach-internal/tsconfig/react-library.json",
+	"include": ["."],
+	"exclude": ["node_modules", "dist", "__tests__", "examples"],
+	"compilerOptions": {
+		"stripInternal": true
+	}
+}

packages/polymorphic/tsup.config.ts

@@ -0,0 +1,14 @@
+import type { defineConfig } from "tsup";
+import { getTsupConfig, getPackageInfo } from "@reach-internal/dev/tsup.js";
+
+type TsupConfig = ReturnType<typeof defineConfig>;
+
+let { name: packageName, version: packageVersion } = getPackageInfo(
+	// @ts-expect-error
+	__dirname
+);
+let cfg: TsupConfig = getTsupConfig(`src/reach-polymorphic.ts`, {
+	packageName,
+	packageVersion,
+});
+export default cfg;

packages/popover/package.json

@@ -13,6 +13,7 @@
 		"directory": "packages/popover"
 	},
 	"dependencies": {
+		"@reach/polymorphic": "workspace:*",
 		"@reach/portal": "workspace:*",
 		"@reach/rect": "workspace:*",
 		"@reach/utils": "workspace:*",

packages/popover/src/reach-popover.tsx

@@ -7,7 +7,7 @@ import { Portal } from "@reach/portal";
 import type { PRect } from "@reach/rect";
 import { useRect } from "@reach/rect";
 import { getOwnerDocument, useComposedRefs } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 import { tabbable } from "tabbable";
 
 // TODO: tabbable types incorrectly exclude `document` as a param. Open a PR to

packages/skip-nav/package.json

@@ -16,6 +16,7 @@
 		"build": "tsup"
 	},
 	"dependencies": {
+		"@reach/polymorphic": "workspace:*",
 		"@reach/utils": "workspace:*"
 	},
 	"devDependencies": {

packages/skip-nav/src/reach-skip-nav.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useCheckStyles } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 
 // The user may want to provide their own ID (maybe there are multiple nav
 // menus on a page a use might want to skip at various points in tabbing?).

packages/slider/package.json

@@ -17,6 +17,7 @@
 	},
 	"dependencies": {
 		"@reach/auto-id": "workspace:*",
+		"@reach/polymorphic": "workspace:*",
 		"@reach/utils": "workspace:*"
 	},
 	"devDependencies": {

packages/slider/src/reach-slider.tsx

@@ -38,7 +38,7 @@ import {
 	useIsomorphicLayoutEffect as useLayoutEffect,
 	useStableLayoutCallback,
 } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 
 declare const __DEV__: boolean;
 

packages/tabs/package.json

@@ -18,6 +18,7 @@
 	"dependencies": {
 		"@reach/auto-id": "workspace:*",
 		"@reach/descendants": "workspace:*",
+		"@reach/polymorphic": "workspace:*",
 		"@reach/utils": "workspace:*"
 	},
 	"devDependencies": {

packages/tabs/src/reach-tabs.tsx

@@ -42,7 +42,7 @@ import {
 	useComposedRefs,
 	composeEventHandlers,
 } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 import { useId } from "@reach/auto-id";
 
 const TabsDescendantsContext = createDescendantContext<TabDescendant>(

packages/tooltip/package.json

@@ -17,6 +17,7 @@
 	},
 	"dependencies": {
 		"@reach/auto-id": "workspace:*",
+		"@reach/polymorphic": "workspace:*",
 		"@reach/portal": "workspace:*",
 		"@reach/rect": "workspace:*",
 		"@reach/utils": "workspace:*",

packages/tooltip/src/reach-tooltip.tsx

@@ -50,7 +50,7 @@ import {
 	useComposedRefs,
 	composeEventHandlers,
 } from "@reach/utils";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 import { Portal } from "@reach/portal";
 import { VisuallyHidden } from "@reach/visually-hidden";
 import { useRect } from "@reach/rect";

packages/utils/src/reach-utils.ts

@@ -1,5 +1,3 @@
-import type * as Polymorphic from "./polymorphic";
-
 export * from "./can-use-dom";
 export * from "./clone-valid-element";
 export * from "./compose-event-handlers";
@@ -27,5 +25,3 @@ export * from "./use-stable-callback";
 export * from "./use-stateful-ref-value";
 export * from "./use-update-effect";
 export * from "./types";
-
-export type { Polymorphic };

packages/visually-hidden/package.json

@@ -16,7 +16,7 @@
 		"build": "tsup"
 	},
 	"dependencies": {
-		"@reach/utils": "workspace:*"
+		"@reach/polymorphic": "workspace:*"
 	},
 	"devDependencies": {
 		"@reach-internal/dev": "workspace:*",

packages/visually-hidden/src/reach-visually-hidden.tsx

@@ -11,7 +11,7 @@
  */
 
 import * as React from "react";
-import type { Polymorphic } from "@reach/utils";
+import type * as Polymorphic from "@reach/polymorphic";
 
 /**
  * VisuallyHidden