rm own prop types

reach · Nov 20, 2020 · 650eb17 · 650eb17
1 parent 1e96c33
commit 650eb17
Show file tree

Hide file tree

Showing 16 changed files with 157 additions and 507 deletions.
diff --git a/packages/accordion/src/index.tsx b/packages/accordion/src/index.tsx
@@ -206,14 +206,10 @@ const Accordion = forwardRefWithAs<AccordionProps, "div">(function Accordion(
   );
 });
 
-type AccordionDOMProps = Omit<
-  React.ComponentProps<"div">,
-  keyof AccordionOwnProps
->;
 /**
  * @see Docs https://reach.tech/accordion#accordion-props
  */
-type AccordionOwnProps = {
+type AccordionProps = {
   /**
    * `Accordion` can accept `AccordionItem` components as children.
    *
@@ -280,7 +276,6 @@ type AccordionOwnProps = {
    */
   multiple?: boolean;
 };
-type AccordionProps = AccordionDOMProps & AccordionOwnProps;
 
 if (__DEV__) {
   Accordion.displayName = "Accordion";
@@ -344,70 +339,67 @@ if (__DEV__) {
  *
  * @see Docs https://reach.tech/accordion#accordionitem
  */
-const AccordionItem = forwardRefWithAs<AccordionItemProps, "div">(
-  function AccordionItem(
-    { as: Comp = "div", children, disabled = false, ...props },
-    forwardedRef
-  ) {
-    const { accordionId, openPanels, readOnly } = React.useContext(
-      AccordionContext
-    );
-    const buttonRef: ButtonRef = React.useRef(null);
-
-    const index = useDescendant(
-      {
-        element: buttonRef.current,
-        disabled,
-      },
-      AccordionDescendantContext
-    );
-
-    // We need unique IDs for the panel and button to point to one another
-    const itemId = makeId(accordionId, index);
-    const panelId = makeId("panel", itemId);
-    const buttonId = makeId("button", itemId);
-
-    const state =
-      (Array.isArray(openPanels)
-        ? openPanels.includes(index) && AccordionStates.Open
-        : openPanels === index && AccordionStates.Open) ||
-      AccordionStates.Collapsed;
+const AccordionItem = forwardRefWithAs<
+  AccordionItemProps & React.ComponentPropsWithRef<"div">,
+  "div"
+>(function AccordionItem(
+  { as: Comp = "div", children, disabled = false, ...props },
+  forwardedRef
+) {
+  const { accordionId, openPanels, readOnly } = React.useContext(
+    AccordionContext
+  );
+  const buttonRef: ButtonRef = React.useRef(null);
 
-    const context: InternalAccordionItemContextValue = {
+  const index = useDescendant(
+    {
+      element: buttonRef.current,
       disabled,
-      buttonId,
-      index,
-      itemId,
-      buttonRef,
-      panelId,
-      state,
-    };
+    },
+    AccordionDescendantContext
+  );
 
-    return (
-      <AccordionItemContext.Provider value={context}>
-        <Comp
-          {...props}
-          ref={forwardedRef}
-          data-reach-accordion-item=""
-          data-state={getDataState(state)}
-          data-disabled={disabled ? "" : undefined}
-          data-read-only={readOnly ? "" : undefined}
-        >
-          {children}
-        </Comp>
-      </AccordionItemContext.Provider>
-    );
-  }
-);
+  // We need unique IDs for the panel and button to point to one another
+  const itemId = makeId(accordionId, index);
+  const panelId = makeId("panel", itemId);
+  const buttonId = makeId("button", itemId);
+
+  const state =
+    (Array.isArray(openPanels)
+      ? openPanels.includes(index) && AccordionStates.Open
+      : openPanels === index && AccordionStates.Open) ||
+    AccordionStates.Collapsed;
+
+  const context: InternalAccordionItemContextValue = {
+    disabled,
+    buttonId,
+    index,
+    itemId,
+    buttonRef,
+    panelId,
+    state,
+  };
+
+  return (
+    <AccordionItemContext.Provider value={context}>
+      <Comp
+        {...props}
+        ref={forwardedRef}
+        data-reach-accordion-item=""
+        data-state={getDataState(state)}
+        data-disabled={disabled ? "" : undefined}
+        data-read-only={readOnly ? "" : undefined}
+      >
+        {children}
+      </Comp>
+    </AccordionItemContext.Provider>
+  );
+});
 
-type AccordionItemDOMProps = Omit<
-  React.ComponentProps<"div">,
-  keyof AccordionItemOwnProps
->;
 /**
  * @see Docs https://reach.tech/accordion#accordionitem-props
  */
-type AccordionItemOwnProps = {
+type AccordionItemProps = {
   /**
    * An `AccordionItem` expects to receive an `AccordionButton` and
    * `AccordionPanel` components as its children, though you can also nest other
@@ -425,7 +417,6 @@ type AccordionItemOwnProps = {
    */
   disabled?: boolean;
 };
-type AccordionItemProps = AccordionItemDOMProps & AccordionItemOwnProps;
 
 if (__DEV__) {
   AccordionItem.displayName = "AccordionItem";
@@ -547,14 +538,10 @@ const AccordionButton = forwardRefWithAs<AccordionButtonProps, "button">(
   }
 );
 
-type AccordionButtonDOMProps = Omit<
-  React.ComponentProps<"button">,
-  keyof AccordionButtonOwnProps
->;
 /**
  * @see Docs https://reach.tech/accordion#accordionbutton-props
  */
-type AccordionButtonOwnProps = {
+type AccordionButtonProps = {
   /**
    * Typically a text string that serves as a label for the accordion, though
    * nested DOM nodes can be passed as well so long as they are valid children
@@ -565,7 +552,6 @@ type AccordionButtonOwnProps = {
    */
   children: React.ReactNode;
 };
-type AccordionButtonProps = AccordionButtonDOMProps & AccordionButtonOwnProps;
 
 if (__DEV__) {
   AccordionButton.displayName = "AccordionButton";
@@ -626,22 +612,17 @@ const AccordionPanel = forwardRefWithAs<AccordionPanelProps, "div">(
   }
 );
 
-type AccordionPanelDOMProps = Omit<
-  React.ComponentProps<"div">,
-  keyof AccordionPanelOwnProps
->;
 /**
  * @see Docs https://reach.tech/accordion#accordionpanel-props
  */
-type AccordionPanelOwnProps = {
+type AccordionPanelProps = {
   /**
    * Inner collapsible content for the accordion item.
    *
    * @see Docs https://reach.tech/accordion#accordionpanel-children
    */
   children: React.ReactNode;
 };
-type AccordionPanelProps = AccordionPanelDOMProps & AccordionPanelOwnProps;
 
 if (__DEV__) {
   AccordionPanel.displayName = "AccordionPanel";
@@ -738,14 +719,10 @@ interface InternalAccordionItemContextValue {
 // Exports
 
 export type {
-  AccordionButtonOwnProps,
   AccordionButtonProps,
   AccordionContextValue,
   AccordionItemContextValue,
-  AccordionItemOwnProps,
   AccordionItemProps,
-  AccordionOwnProps,
-  AccordionPanelOwnProps,
   AccordionPanelProps,
   AccordionProps,
 };

diff --git a/packages/alert-dialog/src/index.tsx b/packages/alert-dialog/src/index.tsx
@@ -34,8 +34,8 @@ import * as React from "react";
 import {
   DialogOverlay,
   DialogContent,
-  DialogOwnProps,
-  DialogContentOwnProps,
+  DialogProps,
+  DialogContentProps,
 } from "@reach/dialog";
 import { useId } from "@reach/auto-id";
 import {
@@ -175,14 +175,10 @@ const AlertDialogContent = forwardRefWithAs<AlertDialogContentProps, "div">(
   }
 );
 
-type AlertDialogContentDOMProps = Omit<
-  React.ComponentProps<"div">,
-  keyof AlertDialogContentOwnProps
->;
 /**
  * @see Docs https://reach.tech/alert-dialog#alertdialogcontent-props
  */
-type AlertDialogContentOwnProps = {
+type AlertDialogContentProps = {
   /**
    * Accepts any renderable content but should generally be restricted to
    * `AlertDialogLabel`, `AlertDialogDescription` and action buttons, other
@@ -191,10 +187,7 @@ type AlertDialogContentOwnProps = {
    * @see Docs https://reach.tech/alert-dialog#alertdialogcontent-children
    */
   children: React.ReactNode;
-} & DialogContentOwnProps;
-
-type AlertDialogContentProps = AlertDialogContentDOMProps &
-  AlertDialogContentOwnProps;
+} & DialogContentProps;
 
 if (__DEV__) {
   AlertDialogContent.displayName = "AlertDialogContent";
@@ -234,13 +227,7 @@ if (__DEV__) {
   AlertDialogLabel.displayName = "AlertDialogLabel";
 }
 
-type AlertDialogLabelDOMProps = Omit<
-  React.ComponentProps<"div">,
-  keyof AlertDialogLabelOwnProps
->;
-type AlertDialogLabelOwnProps = {};
-type AlertDialogLabelProps = AlertDialogLabelDOMProps &
-  AlertDialogLabelOwnProps;
+type AlertDialogLabelProps = {};
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -276,13 +263,7 @@ if (__DEV__) {
   AlertDialogDescription.displayName = "AlertDialogDescription";
 }
 
-type AlertDialogDescriptionDOMProps = Omit<
-  React.ComponentProps<"div">,
-  keyof AlertDialogDescriptionOwnProps
->;
-type AlertDialogDescriptionOwnProps = {};
-type AlertDialogDescriptionProps = AlertDialogDescriptionDOMProps &
-  AlertDialogDescriptionOwnProps;
+type AlertDialogDescriptionProps = {};
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -307,14 +288,10 @@ const AlertDialog = forwardRefWithAs<AlertDialogProps, "div">(
   }
 );
 
-type AlertDialogDOMProps = Omit<
-  React.ComponentProps<"div">,
-  keyof AlertDialogOwnProps
->;
 /**
  * @see Docs https://reach.tech/alert-dialog#alertdialog-props
  */
-type AlertDialogOwnProps = {
+type AlertDialogProps = {
   id?: string;
   /**
    * Controls whether the dialog is open or not.
@@ -345,8 +322,7 @@ type AlertDialogOwnProps = {
    * @see Docs: https://reach.tech/alert-dialog#alertdialog-children
    */
   children: React.ReactNode;
-} & DialogOwnProps;
-type AlertDialogProps = AlertDialogDOMProps & AlertDialogOwnProps;
+} & DialogProps;
 
 if (__DEV__) {
   AlertDialog.displayName = "AlertDialog";
@@ -372,13 +348,9 @@ interface AlertDialogContextValue {
 // Exports
 
 export type {
-  AlertDialogContentOwnProps,
   AlertDialogContentProps,
-  AlertDialogDescriptionOwnProps,
   AlertDialogDescriptionProps,
-  AlertDialogLabelOwnProps,
   AlertDialogLabelProps,
-  AlertDialogOwnProps,
   AlertDialogProps,
 };
 export {

diff --git a/packages/alert/src/index.tsx b/packages/alert/src/index.tsx
@@ -85,11 +85,10 @@ const Alert = forwardRefWithAs<AlertProps, "div">(function Alert(
   return child;
 });
 
-type AlertDOMProps = Omit<React.ComponentProps<"div">, keyof AlertOwnProps>;
 /**
  * @see Docs https://reach.tech/alert#alert-props
  */
-type AlertOwnProps = {
+type AlertProps = {
   /**
    * Controls whether the assistive technology should read immediately
    * ("assertive") or wait until the user is idle ("polite").
@@ -99,7 +98,6 @@ type AlertOwnProps = {
   type?: "assertive" | "polite";
   children: React.ReactNode;
 };
-type AlertProps = AlertDOMProps & AlertOwnProps;
 
 if (__DEV__) {
   Alert.displayName = "Alert";
@@ -235,6 +233,6 @@ type RegionKeys = {
 ////////////////////////////////////////////////////////////////////////////////
 // Exports
 
-export type { AlertOwnProps, AlertProps };
+export type { AlertProps };
 export { Alert };
 export default Alert;