descendants types

packages/descendants/README.md

@@ -75,7 +75,7 @@ The solution most people turn to is to bail out of the element API and turn to a
 />;
 
 function Menu({ items }) {
-  const [activeIndex, setActiveIndex] = useState();
+  const [activeIndex, setActiveIndex] = React.useState();
   return (
     <div data-menu aria-activedescendant={activeIndex}>
       {items.map((item, index) => (
@@ -180,7 +180,7 @@ We can use `React.cloneElement` to keep (most of) the normal React composition.
 
 ```jsx
 function Menu({ children }) {
-  const [activeIndex, setActiveIndex] = useState();
+  const [activeIndex, setActiveIndex] = React.useState();
   return (
     <div data-menu aria-activedescendant={activeIndex}>
       {React.Children.map(children, (child, index) =>
@@ -262,7 +262,7 @@ function Menu({ id, children }) {
   // component and we don't want to force creating an arbitrary child
   // component just so we can consume the context.
   let [descendants, setDescendants] = useDescendantsInit();
-  let [activeIndex, setActiveIndex] = useState(-1);
+  let [activeIndex, setActiveIndex] = React.useState(-1);
   return (
     <DescendantProvider
       context={DescendantContext}
@@ -296,7 +296,7 @@ function MenuList(props) {
 
 function MenuItem({ index: explicitIndex, ...props }) {
   let { activeIndex, setActiveIndex } = useContext(MenuContext);
-  let ref = useRef(null);
+  let ref = React.useRef(null);
   let index = useDescendant(
     {
       // Assign the DOM node using a ref
@@ -363,7 +363,7 @@ function Comp() {
 function CompSSR() {
   // This limits composition, but now you have your data in one place at the top
   let options = ["Apple", "Orange", "Banana"];
-  let [activeOption, setActiveOption] = useState(options[0]);
+  let [activeOption, setActiveOption] = React.useState(options[0]);
   <Listbox onChange={setActiveOption} selected={activeOption}>
     {/* The button needs to know which value is selected to render its label! */}
     <ListboxButton>{activeOption}</ListboxButton>
@@ -378,7 +378,7 @@ function CompSSR() {
 function ComposableSSR() {
   // You can manage state at the top and still get back some composition, you'll
   // just have to deal with a bit of repitition
-  let [activeOption, setActiveOption] = useState("Apple");
+  let [activeOption, setActiveOption] = React.useState("Apple");
   <Listbox onChange={setActiveOption} selected={activeOption}>
     {/* The button needs to know which value is selected to render its label! */}
     <ListboxButton>{activeOption}</ListboxButton>

packages/descendants/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useMemo, useState } from "react";
+import * as React from "react";
 import {
   createNamedContext,
   noop,
@@ -50,9 +50,11 @@ export function useDescendant<DescendantType extends Descendant>(
   indexProp?: number
 ) {
   let forceUpdate = useForceUpdate();
-  let { registerDescendant, unregisterDescendant, descendants } = useContext(
-    context
-  );
+  let {
+    registerDescendant,
+    unregisterDescendant,
+    descendants,
+  } = React.useContext(context);
 
   // This will initially return -1 because we haven't registered the descendant
   // on the first render. After we register, this will then return the correct
@@ -96,13 +98,13 @@ export function useDescendant<DescendantType extends Descendant>(
 }
 
 export function useDescendantsInit<DescendantType extends Descendant>() {
-  return useState<DescendantType[]>([]);
+  return React.useState<DescendantType[]>([]);
 }
 
 export function useDescendants<DescendantType extends Descendant>(
   ctx: React.Context<DescendantContextValue<DescendantType>>
 ) {
-  return useContext(ctx).descendants;
+  return React.useContext(ctx).descendants;
 }
 
 export function DescendantProvider<DescendantType extends Descendant>({
@@ -116,7 +118,7 @@ export function DescendantProvider<DescendantType extends Descendant>({
   items: DescendantType[];
   set: React.Dispatch<React.SetStateAction<DescendantType[]>>;
 }) {
-  let registerDescendant = useCallback(
+  let registerDescendant = React.useCallback(
     ({
       element,
       index: explicitIndex,
@@ -204,7 +206,7 @@ export function DescendantProvider<DescendantType extends Descendant>({
     []
   );
 
-  let unregisterDescendant = useCallback(
+  let unregisterDescendant = React.useCallback(
     (element: DescendantType["element"]) => {
       if (!element) {
         return;
@@ -221,7 +223,7 @@ export function DescendantProvider<DescendantType extends Descendant>({
 
   return (
     <Ctx.Provider
-      value={useMemo(() => {
+      value={React.useMemo(() => {
         return {
           descendants: items,
           registerDescendant,
@@ -262,7 +264,7 @@ export function useDescendantKeyDown<
     callback(nextOption: DescendantType | DescendantType[K]): void;
   }
 ) {
-  let { descendants } = useContext(context);
+  let { descendants } = React.useContext(context);
   let {
     callback,
     currentIndex,