fix(multishift): remove @reach/auto-id (#2006)

.changeset/clean-pianos-fly.md

@@ -0,0 +1,5 @@
+---
+'multishift': patch
+---
+
+Remove maintained `@reach/auto-id` from dependencies.

packages/multishift/package.json

@@ -30,7 +30,6 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@reach/auto-id": "^0.18.0",
     "@remirror/core-helpers": "^2.0.1",
     "@remirror/core-types": "^2.0.4",
     "@seznam/compose-react-refs": "^1.0.6",

packages/multishift/src/multishift-hooks.ts

@@ -1,4 +1,3 @@
-import { useId } from '@reach/auto-id';
 import { setStatus } from 'a11y-status';
 import type { DependencyList, Dispatch, EffectCallback, MutableRefObject } from 'react';
 import { useEffect, useReducer, useRef } from 'react';
@@ -23,6 +22,7 @@ import {
   getInitialStateProps,
   isOrContainsNode,
 } from './multishift-utils';
+import { useId } from './use-id';
 
 /**
  * Creates the reducer for managing the multishift internal state.

packages/multishift/src/use-id.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+const useIsomorphicLayoutEffect =
+  typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+let count = 0;
+const genId = () => `multishift-id-${count++}`;
+
+let serverHandoffComplete = false;
+
+function useReact17Id() {
+  const [id, setId] = React.useState(() => (serverHandoffComplete ? genId() : undefined));
+
+  useIsomorphicLayoutEffect(() => {
+    if (id == null) {
+      setId(genId());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    if (!serverHandoffComplete) {
+      serverHandoffComplete = true;
+    }
+  }, []);
+
+  return id;
+}
+
+// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
+const useReact18Id = (React as any)['useId'.toString()] as () => string;
+
+const useId = useReact18Id || useReact17Id;
+
+export { useId };