disclosure: support as prop + fix types

packages/disclosure/__tests__/disclosure.test.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { render, act, fireEvent } from "$test/utils";
 import { axe } from "jest-axe";
 import {

packages/disclosure/examples/basic-ts.example.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import * as React from "react";
 import {
   Disclosure,
   DisclosureButton,
-  DisclosurePanel
+  DisclosurePanel,
 } from "@reach/disclosure";
 
 let name = "Basic (TS)";

packages/disclosure/examples/basic.example.js

@@ -1,8 +1,8 @@
-import React from "react";
+import * as React from "react";
 import {
   Disclosure,
   DisclosureButton,
-  DisclosurePanel
+  DisclosurePanel,
 } from "@reach/disclosure";
 
 let name = "Basic";

packages/disclosure/examples/controlled-ts.example.tsx

@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from "react";
+import * as React from "react";
 import {
   Disclosure,
   DisclosureButton,
-  DisclosurePanel
+  DisclosurePanel,
 } from "@reach/disclosure";
 
 let name = "Controlled (TS)";
 
 function Example() {
-  const [value, setValue] = useState("");
-  const [open, setOpen] = useState(false);
-  useEffect(() => {
+  const [value, setValue] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
     if (value.toLowerCase().trim() === "open") {
       setOpen(true);
     } else if (value.toLowerCase().trim() === "close") {
@@ -26,7 +26,7 @@ function Example() {
           style={{ display: "block", margin: "10px 0" }}
           type="text"
           value={value}
-          onChange={event => setValue(event.target.value)}
+          onChange={(event) => setValue(event.target.value)}
         />
       </label>
       <Disclosure open={open} onChange={() => setOpen(!open)}>

packages/disclosure/examples/controlled.example.js

@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from "react";
+import * as React from "react";
 import {
   Disclosure,
   DisclosureButton,
-  DisclosurePanel
+  DisclosurePanel,
 } from "@reach/disclosure";
 
 let name = "Controlled";
 
 function Example() {
-  const [value, setValue] = useState("");
-  const [open, setOpen] = useState(false);
-  useEffect(() => {
+  const [value, setValue] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
     if (value.toLowerCase().trim() === "open") {
       setOpen(true);
     } else if (value.toLowerCase().trim() === "close") {
@@ -26,7 +26,7 @@ function Example() {
           style={{ display: "block", margin: "10px 0" }}
           type="text"
           value={value}
-          onChange={event => setValue(event.target.value)}
+          onChange={(event) => setValue(event.target.value)}
         />
       </label>
       <Disclosure open={open} onChange={() => setOpen(!open)}>

packages/disclosure/src/index.tsx

@@ -119,7 +119,7 @@ export const Disclosure: React.FC<DisclosureProps> = ({
   );
 };
 
-export type DisclosureProps = {
+export type DisclosureOwnProps = {
   /**
    * `Disclosure` expects to receive accept `DisclosureButton` and
    * `DisclosurePanel` components as children. It can also accept wrapper
@@ -163,6 +163,7 @@ export type DisclosureProps = {
    */
   open?: boolean;
 };
+export type DisclosureProps = DisclosureOwnProps;
 
 if (__DEV__) {
   Disclosure.displayName = "Disclosure";
@@ -233,10 +234,14 @@ export const DisclosureButton = forwardRefWithAs<
   );
 });
 
+type DisclosureButtonDOMProps = Omit<
+  React.ComponentProps<"button">,
+  keyof DisclosureButtonOwnProps
+>;
 /**
  * @see Docs https://reach.tech/disclosure#disclosurebutton-props
  */
-export type DisclosureButtonProps = {
+export type DisclosureButtonOwnProps = {
   /**
    * Typically a text string that serves as a label for the disclosure button,
    * though nested DOM nodes can be passed as well so long as they are valid
@@ -247,6 +252,8 @@ export type DisclosureButtonProps = {
    */
   children: React.ReactNode;
 };
+export type DisclosureButtonProps = DisclosureButtonDOMProps &
+  DisclosureButtonOwnProps;
 
 if (__DEV__) {
   DisclosureButton.displayName = "DisclosureButton";
@@ -297,14 +304,20 @@ if (__DEV__) {
 /**
  * @see Docs https://reach.tech/disclosure#disclosurepanel-props
  */
-export type DisclosurePanelProps = React.HTMLAttributes<HTMLDivElement> & {
+type DisclosurePanelDOMProps = Omit<
+  React.ComponentProps<"div">,
+  keyof DisclosurePanelOwnProps
+>;
+export type DisclosurePanelOwnProps = {
   /**
    * Inner collapsible content for the disclosure item.
    *
    * @see Docs https://reach.tech/disclosure#disclosurepanel-children
    */
   children: React.ReactNode;
 };
+export type DisclosurePanelProps = DisclosurePanelDOMProps &
+  DisclosurePanelOwnProps;
 
 ////////////////////////////////////////////////////////////////////////////////
 

website/src/pages/disclosure.mdx

@@ -85,7 +85,7 @@ It is important to note that the `Disclosure` component doesn't actually render
 If you want to control the disclosure's value, you can do so by passing [`open`](#disclosure-open) and [`onChange`](#disclosure-onchange) props.
 
 ```jsx
-const [isOpen, setOpen] = useState(false);
+const [isOpen, setOpen] = React.useState(false);
 return (
   <Disclosure open={isOpen} onChange={() => setOpen(!isOpen)}>
     <DisclosureButton />
@@ -174,7 +174,7 @@ The callback that is fired when a disclosure's open state is changed.
 The controlled open state of the disclosure. The `open` prop should be used along with `onChange` to create controlled disclosure components.
 
 ```jsx
-const [open, setOpen] = useState(false);
+const [open, setOpen] = React.useState(false);
 return (
   <Disclosure open={open} onChange={() => setOpen(!open)}>
     <DisclosureButton>I have a secret</DisclosureButton>