From 650eb175928c6762479a073a1edf13860beec9e8 Mon Sep 17 00:00:00 2001 From: Chance Strickland Date: Thu, 19 Nov 2020 20:35:51 -0800 Subject: [PATCH] rm own prop types --- packages/accordion/src/index.tsx | 137 ++++++++++------------- packages/alert-dialog/src/index.tsx | 44 ++------ packages/alert/src/index.tsx | 6 +- packages/checkbox/src/custom.tsx | 28 +---- packages/checkbox/src/mixed.tsx | 14 +-- packages/combobox/src/index.tsx | 45 +------- packages/dialog/src/index.tsx | 29 +---- packages/disclosure/src/index.tsx | 28 +---- packages/listbox/src/index.tsx | 147 +++++++------------------ packages/menu-button/src/index.tsx | 45 +------- packages/popover/src/index.tsx | 6 +- packages/skip-nav/src/index.tsx | 21 +--- packages/slider/src/index.tsx | 46 +------- packages/tabs/src/index.tsx | 34 +----- packages/tooltip/src/index.tsx | 25 +---- packages/visually-hidden/src/index.tsx | 9 +- 16 files changed, 157 insertions(+), 507 deletions(-) diff --git a/packages/accordion/src/index.tsx b/packages/accordion/src/index.tsx index c2a45fcee..fad71a080 100644 --- a/packages/accordion/src/index.tsx +++ b/packages/accordion/src/index.tsx @@ -206,14 +206,10 @@ const Accordion = forwardRefWithAs(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( - 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 ( - - - {children} - - - ); - } -); + // 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 ( + + + {children} + + + ); +}); -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( } ); -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,14 +612,10 @@ const AccordionPanel = forwardRefWithAs( } ); -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. * @@ -641,7 +623,6 @@ type AccordionPanelOwnProps = { */ 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 index 916cf8911..9948f1b29 100644 --- 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( } ); -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( } ); -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 index de7e69c14..b1d21d2c9 100644 --- a/packages/alert/src/index.tsx +++ b/packages/alert/src/index.tsx @@ -85,11 +85,10 @@ const Alert = forwardRefWithAs(function Alert( return child; }); -type AlertDOMProps = Omit, 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; diff --git a/packages/checkbox/src/custom.tsx b/packages/checkbox/src/custom.tsx index 967accb89..8a544a3ce 100644 --- a/packages/checkbox/src/custom.tsx +++ b/packages/checkbox/src/custom.tsx @@ -138,11 +138,7 @@ const CustomCheckboxContainer = forwardRefWithAs< /** * @see Docs https://reach.tech/checkbox#custom-checkboxcontainer-props */ -type CustomCheckboxContainerDOMProps = Omit< - React.ComponentProps<"span">, - keyof CustomCheckboxContainerOwnProps ->; -type CustomCheckboxContainerOwnProps = { +type CustomCheckboxContainerProps = { /** * Whether or not the checkbox is checked or in a `mixed` (indeterminate) * state. @@ -196,8 +192,6 @@ type CustomCheckboxContainerOwnProps = { */ onChange?(event: React.ChangeEvent): void; }; -type CustomCheckboxContainerProps = CustomCheckboxContainerDOMProps & - CustomCheckboxContainerOwnProps; if (__DEV__) { CustomCheckboxContainer.displayName = "CustomCheckboxContainer"; @@ -273,17 +267,7 @@ const CustomCheckboxInput = forwardRefWithAs( } ); -type CustomCheckboxInputDOMProps = Omit< - React.ComponentProps<"input">, - | keyof CustomCheckboxInputOwnProps - | keyof CustomCheckboxContextValue["inputProps"] ->; -type CustomCheckboxInputOwnProps = Pick< - CustomCheckboxOwnProps, - "name" | "value" ->; -type CustomCheckboxInputProps = CustomCheckboxInputDOMProps & - CustomCheckboxInputOwnProps; +type CustomCheckboxInputProps = Pick; if (__DEV__) { CustomCheckboxInput.displayName = "CustomCheckboxInput"; @@ -327,9 +311,9 @@ const CustomCheckbox = forwardRefWithAs( */ type CustomCheckboxDOMProps = Omit< React.ComponentProps<"span">, - keyof CustomCheckboxOwnProps + keyof CustomCheckboxProps >; -type CustomCheckboxOwnProps = { +type CustomCheckboxProps = { /** * Whether or not the checkbox is checked or in a `mixed` (indeterminate) * state. @@ -381,7 +365,6 @@ type CustomCheckboxOwnProps = { */ value?: React.ComponentProps<"input">["value"]; }; -type CustomCheckboxProps = CustomCheckboxDOMProps & CustomCheckboxOwnProps; if (__DEV__) { CustomCheckbox.displayName = "CustomCheckbox"; @@ -426,11 +409,8 @@ type CustomCheckboxContainerChildRender = (args: { // Exports export type { - CustomCheckboxContainerOwnProps, CustomCheckboxContainerProps, - CustomCheckboxInputOwnProps, CustomCheckboxInputProps, - CustomCheckboxOwnProps, CustomCheckboxProps, }; export { CustomCheckbox, CustomCheckboxContainer, CustomCheckboxInput }; diff --git a/packages/checkbox/src/mixed.tsx b/packages/checkbox/src/mixed.tsx index 1335ebc68..4f89448ef 100644 --- a/packages/checkbox/src/mixed.tsx +++ b/packages/checkbox/src/mixed.tsx @@ -235,18 +235,13 @@ const MixedCheckbox = forwardRefWithAs< ); }); -type MixedCheckboxDOMProps = Omit< - React.ComponentProps<"input">, - keyof MixedCheckboxOwnProps ->; -type MixedCheckboxOwnProps = { +type MixedCheckboxProps = { /** * Whether or not the checkbox is checked or in a `mixed` (indeterminate) * state. */ checked?: MixedOrBool; }; -type MixedCheckboxProps = MixedCheckboxDOMProps & MixedCheckboxOwnProps; if (__DEV__) { MixedCheckbox.displayName = "MixedCheckbox"; @@ -514,12 +509,7 @@ type MixedCheckboxInputRef = React.RefObject; //////////////////////////////////////////////////////////////////////////////// // Exports -export type { - MixedCheckboxOwnProps, - MixedCheckboxProps, - MixedOrBool, - UseMixedCheckboxProps, -}; +export type { MixedCheckboxProps, MixedOrBool, UseMixedCheckboxProps }; export { MixedCheckbox, MixedCheckboxEvents, diff --git a/packages/combobox/src/index.tsx b/packages/combobox/src/index.tsx index 140280ea7..2b76ce39d 100644 --- a/packages/combobox/src/index.tsx +++ b/packages/combobox/src/index.tsx @@ -347,14 +347,10 @@ export const Combobox = forwardRefWithAs( } ); -type ComboboxDOMProps = Omit< - React.ComponentProps<"div">, - keyof ComboboxOwnProps ->; /** * @see Docs https://reach.tech/combobox#combobox-props */ -export type ComboboxOwnProps = { +export type ComboboxProps = { /** * @see Docs https://reach.tech/combobox#combobox-children */ @@ -385,7 +381,6 @@ export type ComboboxOwnProps = { */ "aria-labelledby"?: string; }; -export type ComboboxProps = ComboboxDOMProps & ComboboxOwnProps; if (__DEV__) { Combobox.displayName = "Combobox"; @@ -552,14 +547,10 @@ export const ComboboxInput = forwardRefWithAs( } ); -type ComboboxInputDOMProps = Omit< - React.ComponentProps<"input">, - keyof ComboboxInputOwnProps ->; /** * @see Docs https://reach.tech/combobox#comboboxinput-props */ -export type ComboboxInputOwnProps = { +export type ComboboxInputProps = { /** * If true, when the user clicks inside the text box the current value will * be selected. Use this if the user is likely to delete all the text anyway @@ -590,7 +581,6 @@ export type ComboboxInputOwnProps = { */ value?: ComboboxValue; }; -export type ComboboxInputProps = ComboboxInputDOMProps & ComboboxInputOwnProps; if (__DEV__) { ComboboxInput.displayName = "ComboboxInput"; @@ -661,14 +651,10 @@ if (__DEV__) { ComboboxPopover.displayName = "ComboboxPopover"; } -type ComboboxPopoverDOMProps = Omit< - React.ComponentProps<"div">, - keyof ComboboxPopoverOwnProps ->; /** * @see Docs https://reach.tech/combobox#comboboxpopover-props */ -export type ComboboxPopoverOwnProps = { +export type ComboboxPopoverProps = { /** * If you pass `` the popover will not * render inside of a portal, but in the same order as the React tree. This @@ -679,8 +665,6 @@ export type ComboboxPopoverOwnProps = { */ portal?: boolean; }; -export type ComboboxPopoverProps = ComboboxPopoverDOMProps & - ComboboxPopoverOwnProps; //////////////////////////////////////////////////////////////////////////////// @@ -723,14 +707,10 @@ export const ComboboxList = forwardRefWithAs( } ); -type ComboboxListDOMProps = Omit< - React.ComponentProps<"ul">, - keyof ComboboxListOwnProps ->; /** * @see Docs https://reach.tech/combobox#comboboxlist-props */ -export type ComboboxListOwnProps = { +export type ComboboxListProps = { /** * Defaults to false. When true and the list is opened, if an option's value * matches the value in the input, it will automatically be highlighted and @@ -746,7 +726,6 @@ export type ComboboxListOwnProps = { */ persistSelection?: boolean; }; -export type ComboboxListProps = ComboboxListDOMProps & ComboboxListOwnProps; if (__DEV__) { ComboboxList.displayName = "ComboboxList"; @@ -812,14 +791,10 @@ export const ComboboxOption = forwardRefWithAs( } ); -type ComboboxOptionDOMProps = Omit< - React.ComponentProps<"li">, - keyof ComboboxOptionOwnProps ->; /** * @see Docs https://reach.tech/combobox#comboboxoption-props */ -export type ComboboxOptionOwnProps = { +export type ComboboxOptionProps = { /** * Optional. If omitted, the `value` will be used as the children like as: * ``. But if you need @@ -842,8 +817,6 @@ export type ComboboxOptionOwnProps = { */ value: string; }; -export type ComboboxOptionProps = ComboboxOptionDOMProps & - ComboboxOptionOwnProps; if (__DEV__) { ComboboxOption.displayName = "ComboboxOption"; @@ -950,13 +923,7 @@ export const ComboboxButton = forwardRefWithAs( } ); -type ComboboxButtonDOMProps = Omit< - React.ComponentProps<"button">, - keyof ComboboxButtonOwnProps ->; -export type ComboboxButtonOwnProps = {}; -export type ComboboxButtonProps = ComboboxButtonDOMProps & - ComboboxButtonOwnProps; +export type ComboboxButtonProps = {}; if (__DEV__) { ComboboxButton.displayName = "ComboboxButton"; diff --git a/packages/dialog/src/index.tsx b/packages/dialog/src/index.tsx index 94e23f23c..eb7c69a69 100644 --- a/packages/dialog/src/index.tsx +++ b/packages/dialog/src/index.tsx @@ -85,11 +85,7 @@ if (__DEV__) { }; } -type DialogOverlayDOMProps = Omit< - React.ComponentProps<"div">, - keyof DialogOverlayOwnProps ->; -type DialogOverlayOwnProps = DialogOwnProps & { +type DialogOverlayProps = DialogProps & { /** * By default the dialog locks the focus inside it. Normally this is what you * want. This prop is provided so that this feature can be disabled. This, @@ -128,7 +124,6 @@ type DialogOverlayOwnProps = DialogOwnProps & { */ dangerouslyBypassScrollLock?: boolean; }; -type DialogOverlayProps = DialogOverlayDOMProps & DialogOverlayOwnProps; //////////////////////////////////////////////////////////////////////////////// @@ -262,15 +257,10 @@ const DialogContent = forwardRefWithAs( } ); -type DialogContentDOMProps = Omit< - React.ComponentProps<"div">, - keyof DialogContentOwnProps ->; - /** * @see Docs https://reach.tech/dialog#dialogcontent-props */ -type DialogContentOwnProps = { +type DialogContentProps = { /** * Accepts any renderable content. * @@ -278,7 +268,6 @@ type DialogContentOwnProps = { */ children?: React.ReactNode; }; -type DialogContentProps = DialogContentDOMProps & DialogContentOwnProps; if (__DEV__) { DialogContent.displayName = "DialogContent"; @@ -320,12 +309,10 @@ const Dialog = forwardRefWithAs(function Dialog( ); }); -type DialogDOMProps = Omit, keyof DialogOwnProps>; - /** * @see Docs https://reach.tech/dialog#dialog-props */ -type DialogOwnProps = { +type DialogProps = { /** * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. * Defaults to `false`. @@ -386,7 +373,6 @@ type DialogOwnProps = { */ unstable_lockFocusAcrossFrames?: boolean; }; -type DialogProps = DialogDOMProps & DialogOwnProps; if (__DEV__) { Dialog.displayName = "Dialog"; @@ -481,13 +467,6 @@ function ariaLabelType( //////////////////////////////////////////////////////////////////////////////// // Exports -export type { - DialogContentOwnProps, - DialogContentProps, - DialogOverlayOwnProps, - DialogOverlayProps, - DialogOwnProps, - DialogProps, -}; +export type { DialogContentProps, DialogOverlayProps, DialogProps }; export { Dialog, DialogContent, DialogOverlay }; export default Dialog; diff --git a/packages/disclosure/src/index.tsx b/packages/disclosure/src/index.tsx index 9ed17ca2c..4733afdb3 100644 --- a/packages/disclosure/src/index.tsx +++ b/packages/disclosure/src/index.tsx @@ -118,7 +118,7 @@ const Disclosure: React.FC = ({ ); }; -type DisclosureOwnProps = { +type DisclosureProps = { /** * `Disclosure` expects to receive accept `DisclosureButton` and * `DisclosurePanel` components as children. It can also accept wrapper @@ -162,7 +162,6 @@ type DisclosureOwnProps = { */ open?: boolean; }; -type DisclosureProps = DisclosureOwnProps; if (__DEV__) { Disclosure.displayName = "Disclosure"; @@ -231,15 +230,10 @@ const DisclosureButton = forwardRefWithAs( ); } ); - -type DisclosureButtonDOMProps = Omit< - React.ComponentProps<"button">, - keyof DisclosureButtonOwnProps ->; /** * @see Docs https://reach.tech/disclosure#disclosurebutton-props */ -type DisclosureButtonOwnProps = { +type DisclosureButtonProps = { /** * 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 @@ -250,8 +244,6 @@ type DisclosureButtonOwnProps = { */ children: React.ReactNode; }; -type DisclosureButtonProps = DisclosureButtonDOMProps & - DisclosureButtonOwnProps; if (__DEV__) { DisclosureButton.displayName = "DisclosureButton"; @@ -302,11 +294,7 @@ if (__DEV__) { /** * @see Docs https://reach.tech/disclosure#disclosurepanel-props */ -type DisclosurePanelDOMProps = Omit< - React.ComponentProps<"div">, - keyof DisclosurePanelOwnProps ->; -type DisclosurePanelOwnProps = { +type DisclosurePanelProps = { /** * Inner collapsible content for the disclosure item. * @@ -314,7 +302,6 @@ type DisclosurePanelOwnProps = { */ children: React.ReactNode; }; -type DisclosurePanelProps = DisclosurePanelDOMProps & DisclosurePanelOwnProps; //////////////////////////////////////////////////////////////////////////////// @@ -374,14 +361,7 @@ function useStableCallback any>( //////////////////////////////////////////////////////////////////////////////// // Exports -export type { - DisclosureButtonOwnProps, - DisclosureButtonProps, - DisclosureOwnProps, - DisclosurePanelOwnProps, - DisclosurePanelProps, - DisclosureProps, -}; +export type { DisclosureButtonProps, DisclosurePanelProps, DisclosureProps }; export { Disclosure, DisclosureButton, diff --git a/packages/listbox/src/index.tsx b/packages/listbox/src/index.tsx index 2735f9d73..5e5823bf4 100644 --- a/packages/listbox/src/index.tsx +++ b/packages/listbox/src/index.tsx @@ -348,18 +348,10 @@ if (__DEV__) { /** * @see Docs https://reach.tech/listbox#listboxinput-props */ -type ListboxInputDOMProps = Omit< - React.ComponentProps<"div">, - | keyof ListboxInputOwnProps - | "autoComplete" - | "autoFocus" - | "form" - | "name" - | "onChange" - | "defaultValue" -> & - Pick, "form" | "name" | "required">; -type ListboxInputOwnProps = { +type ListboxInputProps = Pick< + React.ComponentProps<"select">, + "form" | "name" | "required" +> & { /** * The composed listbox expects to receive `ListboxButton` and * `ListboxPopover` as children. You can also pass in arbitrary wrapper @@ -401,7 +393,6 @@ type ListboxInputOwnProps = { */ value?: ListboxValue; }; -type ListboxInputProps = ListboxInputDOMProps & ListboxInputOwnProps; //////////////////////////////////////////////////////////////////////////////// @@ -456,50 +447,39 @@ if (__DEV__) { }; } -type ListboxDOMProps = Omit< - React.ComponentProps<"div">, - | keyof ListboxInputOwnProps - | "autoComplete" - | "autoFocus" - | "form" - | "name" - | "onChange" - | "defaultValue" -> & - Pick, "form" | "name" | "required">; /** * @see Docs https://reach.tech/listbox#listbox-props */ -type ListboxOwnProps = Omit & { - /** - * Renders a text string or React node to represent an arrow inside the - * Listbox button. - * - * @see Docs https://reach.tech/listbox#listbox-arrow - */ - arrow?: React.ReactNode | boolean; - /** - * A render function or React node to to render the Listbox button's inner - * content. See the API for the ListboxButton children prop for details. - * - * @see Docs https://reach.tech/listbox#listbox-button - */ - button?: - | React.ReactNode - | ((props: { - value: ListboxValue | null; - label: string | null; - }) => React.ReactNode); - children: React.ReactNode; - /** - * Whether or not the popover should be rendered inside a portal. Defaults to - * `true`. - * - * @see Docs https://reach.tech/listbox#listbox-portal - */ - portal?: boolean; -}; -type ListboxProps = ListboxDOMProps & ListboxOwnProps; +type ListboxProps = Omit & + Pick, "form" | "name" | "required"> & { + /** + * Renders a text string or React node to represent an arrow inside the + * Listbox button. + * + * @see Docs https://reach.tech/listbox#listbox-arrow + */ + arrow?: React.ReactNode | boolean; + /** + * A render function or React node to to render the Listbox button's inner + * content. See the API for the ListboxButton children prop for details. + * + * @see Docs https://reach.tech/listbox#listbox-button + */ + button?: + | React.ReactNode + | ((props: { + value: ListboxValue | null; + label: string | null; + }) => React.ReactNode); + children: React.ReactNode; + /** + * Whether or not the popover should be rendered inside a portal. Defaults to + * `true`. + * + * @see Docs https://reach.tech/listbox#listbox-portal + */ + portal?: boolean; + }; //////////////////////////////////////////////////////////////////////////////// @@ -638,14 +618,10 @@ if (__DEV__) { const ListboxButton = memoWithAs(ListboxButtonImpl); -type ListboxButtonDOMProps = Omit< - React.ComponentProps<"span">, - keyof ListboxButtonOwnProps ->; /** * @see Docs https://reach.tech/listbox#listboxbutton-props */ -type ListboxButtonOwnProps = { +type ListboxButtonProps = { /** * Renders a text string or React node to represent an arrow inside the * button. @@ -702,7 +678,6 @@ type ListboxButtonOwnProps = { expanded: boolean; }) => React.ReactNode); }; -type ListboxButtonProps = ListboxButtonDOMProps & ListboxButtonOwnProps; //////////////////////////////////////////////////////////////////////////////// @@ -750,14 +725,10 @@ if (__DEV__) { const ListboxArrow = memoWithAs(ListboxArrowImpl); -type ListboxArrowDOMProps = Omit< - React.ComponentProps<"span">, - keyof ListboxArrowOwnProps ->; /** * @see Docs https://reach.tech/listbox#listboxarrow-props */ -type ListboxArrowOwnProps = { +type ListboxArrowProps = { /** * Children to render as the listbox button's arrow. This can be a render * function that accepts the listbox's expanded state as an argument. @@ -770,7 +741,6 @@ type ListboxArrowOwnProps = { expanded: boolean; }) => React.ReactNode); }; -type ListboxArrowProps = ListboxArrowDOMProps & ListboxArrowOwnProps; //////////////////////////////////////////////////////////////////////////////// @@ -846,14 +816,10 @@ if (__DEV__) { const ListboxPopover = memoWithAs(ListboxPopoverImpl); -type ListboxPopoverDOMProps = Omit< - React.ComponentProps<"div">, - keyof ListboxPopoverOwnProps ->; /** * @see Docs https://reach.tech/listbox#listboxpopover-props */ -type ListboxPopoverOwnProps = { +type ListboxPopoverProps = { /** * `ListboxPopover` expects to receive `ListboxList` as its children. * @@ -875,7 +841,6 @@ type ListboxPopoverOwnProps = { position?: PopoverProps["position"]; unstable_observableRefs?: PopoverProps["unstable_observableRefs"]; }; -type ListboxPopoverProps = ListboxPopoverDOMProps & ListboxPopoverOwnProps; //////////////////////////////////////////////////////////////////////////////// @@ -938,15 +903,10 @@ if (__DEV__) { ListboxList.propTypes = {}; } -type ListboxListDOMProps = Omit< - React.ComponentProps<"ul">, - keyof ListboxListOwnProps ->; /** * @see Docs https://reach.tech/listbox#listboxlist-props */ -type ListboxListOwnProps = {}; -type ListboxListProps = ListboxListDOMProps & ListboxListOwnProps; +type ListboxListProps = {}; //////////////////////////////////////////////////////////////////////////////// @@ -1127,14 +1087,10 @@ if (__DEV__) { }; } -type ListboxOptionDOMProps = Omit< - React.ComponentProps<"li">, - keyof ListboxOptionOwnProps ->; /** * @see Docs https://reach.tech/listbox#listboxoption-props */ -type ListboxOptionOwnProps = { +type ListboxOptionProps = { /** * The option's value. This will be passed into a hidden input field for use * in forms. @@ -1159,7 +1115,6 @@ type ListboxOptionOwnProps = { */ disabled?: boolean; }; -type ListboxOptionProps = ListboxOptionDOMProps & ListboxOptionOwnProps; //////////////////////////////////////////////////////////////////////////////// @@ -1205,14 +1160,10 @@ if (__DEV__) { }; } -type ListboxGroupDOMProps = Omit< - React.ComponentProps<"div">, - keyof ListboxGroupOwnProps ->; /** * @see Docs https://reach.tech/listbox#listboxgroup-props */ -type ListboxGroupOwnProps = { +type ListboxGroupProps = { /** * The text label to use for the listbox group. This can be omitted if a * group contains a `ListboxGroupLabel` component. The label should always @@ -1222,7 +1173,6 @@ type ListboxGroupOwnProps = { */ label?: React.ReactNode; }; -type ListboxGroupProps = ListboxGroupDOMProps & ListboxGroupOwnProps; //////////////////////////////////////////////////////////////////////////////// @@ -1253,16 +1203,10 @@ if (__DEV__) { ListboxGroupLabel.propTypes = {}; } -type ListboxGroupLabelDOMProps = Omit< - React.ComponentProps<"span">, - keyof ListboxGroupLabelOwnProps ->; /** * @see Docs https://reach.tech/listbox#listboxgroup-props */ -type ListboxGroupLabelOwnProps = {}; -type ListboxGroupLabelProps = ListboxGroupLabelDOMProps & - ListboxGroupLabelOwnProps; +type ListboxGroupLabelProps = {}; //////////////////////////////////////////////////////////////////////////////// @@ -1503,24 +1447,15 @@ function useStableCallback any>( // Exports export type { - ListboxArrowOwnProps, ListboxArrowProps, - ListboxButtonOwnProps, ListboxButtonProps, ListboxContextValue, ListboxDescendant, - ListboxGroupLabelOwnProps, ListboxGroupLabelProps, - ListboxGroupOwnProps, ListboxGroupProps, - ListboxInputOwnProps, ListboxInputProps, - ListboxListOwnProps, ListboxListProps, - ListboxOptionOwnProps, ListboxOptionProps, - ListboxOwnProps, - ListboxPopoverOwnProps, ListboxPopoverProps, ListboxProps, ListboxValue, diff --git a/packages/menu-button/src/index.tsx b/packages/menu-button/src/index.tsx index 5af28235d..1a7d77f76 100644 --- a/packages/menu-button/src/index.tsx +++ b/packages/menu-button/src/index.tsx @@ -300,14 +300,10 @@ const MenuButton = forwardRefWithAs( } ); -type MenuButtonDOMProps = Omit< - React.ComponentProps<"button">, - keyof MenuButtonOwnProps ->; /** * @see Docs https://reach.tech/menu-button#menubutton-props */ -type MenuButtonOwnProps = { +type MenuButtonProps = { /** * Accepts any renderable content. * @@ -315,7 +311,6 @@ type MenuButtonOwnProps = { */ children: React.ReactNode; }; -type MenuButtonProps = MenuButtonDOMProps & MenuButtonOwnProps; if (__DEV__) { MenuButton.displayName = "MenuButton"; @@ -554,15 +549,10 @@ const MenuItem = forwardRefWithAs(function MenuItem( return ; }); -type MenuItemDOMProps = Omit< - React.ComponentProps<"div">, - keyof MenuItemOwnProps ->; /** * @see Docs https://reach.tech/menu-button#menuitem-props */ -type MenuItemOwnProps = Omit; -type MenuItemProps = MenuItemDOMProps & MenuItemOwnProps; +type MenuItemProps = Omit; if (__DEV__) { MenuItem.displayName = "MenuItem"; @@ -753,14 +743,10 @@ const MenuItems = forwardRefWithAs(function MenuItems( ); }); -type MenuItemsDOMProps = Omit< - React.ComponentProps<"div">, - keyof MenuItemsOwnProps ->; /** * @see Docs https://reach.tech/menu-button#menuitems-props */ -type MenuItemsOwnProps = { +type MenuItemsProps = { /** * Can contain only `MenuItem` or a `MenuLink`. * @@ -768,7 +754,6 @@ type MenuItemsOwnProps = { */ children: React.ReactNode; }; -type MenuItemsProps = MenuItemsDOMProps & MenuItemsOwnProps; if (__DEV__) { MenuItems.displayName = "MenuItems"; @@ -813,14 +798,12 @@ const MenuLink = forwardRefWithAs( } ); -type MenuLinkDOMProps = Omit, keyof MenuLinkOwnProps>; /** * @see Docs https://reach.tech/menu-button#menulink-props */ -type MenuLinkOwnProps = Omit & { +type MenuLinkProps = Omit & { onSelect?(): void; }; -type MenuLinkProps = MenuLinkDOMProps & MenuLinkOwnProps; if (__DEV__) { MenuLink.displayName = "MenuLink"; @@ -851,14 +834,10 @@ const MenuList = forwardRefWithAs(function MenuList( ); }); -type MenuListDOMProps = Omit< - React.ComponentProps<"div">, - keyof MenuListOwnProps ->; /** * @see Docs https://reach.tech/menu-button#menulist-props */ -type MenuListOwnProps = { +type MenuListProps = { /** * Whether or not the popover should be rendered inside a portal. Defaults to * `true`. @@ -873,7 +852,6 @@ type MenuListOwnProps = { */ children: React.ReactNode; }; -type MenuListProps = MenuListDOMProps & MenuListOwnProps; if (__DEV__) { MenuList.displayName = "MenuList"; @@ -952,14 +930,10 @@ const MenuPopover = forwardRefWithAs( } ); -type MenuPopoverDOMProps = Omit< - React.ComponentProps<"div">, - keyof MenuPopoverOwnProps ->; /** * @see Docs https://reach.tech/menu-button#menupopover-props */ -type MenuPopoverOwnProps = { +type MenuPopoverProps = { /** * Must contain a `MenuItems` * @@ -984,7 +958,6 @@ type MenuPopoverOwnProps = { */ position?: Position; }; -type MenuPopoverProps = MenuPopoverDOMProps & MenuPopoverOwnProps; if (__DEV__) { MenuPopover.displayName = "MenuPopover"; @@ -1178,18 +1151,12 @@ type MenuContextValue = { // Exports export type { - MenuButtonOwnProps, MenuButtonProps, MenuContextValue, - MenuItemOwnProps, MenuItemProps, - MenuItemsOwnProps, MenuItemsProps, - MenuLinkOwnProps, MenuLinkProps, - MenuListOwnProps, MenuListProps, - MenuPopoverOwnProps, MenuPopoverProps, MenuProps, }; diff --git a/packages/popover/src/index.tsx b/packages/popover/src/index.tsx index 21ebc7e11..2c4b353db 100644 --- a/packages/popover/src/index.tsx +++ b/packages/popover/src/index.tsx @@ -24,8 +24,7 @@ const Popover = forwardRefWithAs(function Popover( ); }); -type PopoverDOMProps = Omit, keyof PopoverOwnProps>; -type PopoverOwnProps = { +type PopoverProps = { children: React.ReactNode; targetRef: React.RefObject; position?: Position; @@ -45,7 +44,6 @@ type PopoverOwnProps = { */ unstable_observableRefs?: React.RefObject[]; }; -type PopoverProps = PopoverDOMProps & PopoverOwnProps; if (__DEV__) { Popover.displayName = "Popover"; @@ -372,7 +370,7 @@ type PossibleNode = null | undefined | HTMLElement | SVGElement; // Exports export default Popover; -export type { PopoverOwnProps, PopoverProps, Position }; +export type { PopoverProps, Position }; export { getCollisions, Popover, diff --git a/packages/skip-nav/src/index.tsx b/packages/skip-nav/src/index.tsx index e97642967..7531ed042 100644 --- a/packages/skip-nav/src/index.tsx +++ b/packages/skip-nav/src/index.tsx @@ -39,11 +39,7 @@ const SkipNavLink = forwardRefWithAs( /** * @see Docs https://reach.tech/skip-nav#skipnavlink-props */ -type SkipNavLinkDOMProps = Omit< - React.ComponentProps<"a">, - keyof SkipNavLinkOwnProps | "href" ->; -type SkipNavLinkOwnProps = { +type SkipNavLinkProps = { /** * Allows you to change the text for your preferred phrase or localization. * @@ -58,7 +54,6 @@ type SkipNavLinkOwnProps = { */ contentId?: string; }; -type SkipNavLinkProps = SkipNavLinkDOMProps & SkipNavLinkOwnProps; if (__DEV__) { SkipNavLink.displayName = "SkipNavLink"; @@ -93,11 +88,7 @@ const SkipNavContent = forwardRefWithAs( /** * @see Docs https://reach.tech/skip-nav#skipnavcontent-props */ -type SkipNavContentDOMProps = Omit< - React.ComponentProps<"div">, - keyof SkipNavContentOwnProps ->; -type SkipNavContentOwnProps = { +type SkipNavContentProps = { /** * You can place the `SkipNavContent` element as a sibling to your main * content or as a wrapper. @@ -124,7 +115,6 @@ type SkipNavContentOwnProps = { */ id?: string; }; -type SkipNavContentProps = SkipNavContentDOMProps & SkipNavContentOwnProps; if (__DEV__) { SkipNavContent.displayName = "SkipNavContent"; @@ -133,10 +123,5 @@ if (__DEV__) { //////////////////////////////////////////////////////////////////////////////// // Exports -export type { - SkipNavContentProps, - SkipNavLinkOwnProps, - SkipNavLinkProps, - SkipNavContentOwnProps, -}; +export type { SkipNavContentProps, SkipNavLinkProps }; export { SkipNavLink, SkipNavContent }; diff --git a/packages/slider/src/index.tsx b/packages/slider/src/index.tsx index 96a9bade0..82f26243d 100644 --- a/packages/slider/src/index.tsx +++ b/packages/slider/src/index.tsx @@ -125,11 +125,10 @@ const Slider = forwardRefWithAs(function Slider( ); }); -type SliderDOMProps = Omit, keyof SliderOwnProps>; /** * @see Docs https://reach.tech/slider#slider-props */ -type SliderOwnProps = { +type SliderProps = { /** * `Slider` can accept `SliderMarker` children to enhance display of specific * values along the track. @@ -246,7 +245,6 @@ type SliderOwnProps = { */ step?: number; }; -type SliderProps = SliderDOMProps & SliderOwnProps; if (__DEV__) { Slider.displayName = "Slider"; @@ -712,14 +710,10 @@ const SliderInput = forwardRefWithAs< ); }); -type SliderInputDOMProps = Omit< - React.ComponentProps<"div">, - keyof SliderInputOwnProps ->; /** * @see Docs https://reach.tech/slider#sliderinput-props */ -type SliderInputOwnProps = Omit & { +type SliderInputProps = Omit & { /** * Slider expects `` as its child; The track will accept all * additional slider sub-components as children. It can also accept a @@ -730,7 +724,6 @@ type SliderInputOwnProps = Omit & { */ children: React.ReactNode | SliderChildrenRender; }; -type SliderInputProps = SliderInputDOMProps & SliderInputOwnProps; if (__DEV__) { SliderInput.displayName = "SliderInput"; @@ -777,14 +770,10 @@ if (__DEV__) { const SliderTrack = memoWithAs(SliderTrackImpl); -type SliderTrackDOMProps = Omit< - React.ComponentProps<"div">, - keyof SliderTrackOwnProps ->; /** * @see Docs https://reach.tech/slider#slidertrack-props */ -type SliderTrackOwnProps = { +type SliderTrackProps = { /** * `SliderTrack` expects ``, at minimum, for the Slider to * function. All other Slider subcomponents should be passed as children @@ -794,7 +783,6 @@ type SliderTrackOwnProps = { */ children: React.ReactNode; }; -type SliderTrackProps = SliderTrackDOMProps & SliderTrackOwnProps; if (__DEV__) { SliderTrack.displayName = "SliderTrack"; @@ -838,19 +826,13 @@ if (__DEV__) { const SliderTrackHighlight = memoWithAs(SliderTrackHighlightImpl); -type SliderTrackHighlightDOMProps = Omit< - React.ComponentProps<"div">, - keyof SliderTrackHighlightOwnProps ->; /** * `SliderTrackHighlight` accepts any props that a HTML div component accepts. * `SliderTrackHighlight` will not accept or render any children. * * @see Docs https://reach.tech/slider#slidertrackhighlight-props */ -type SliderTrackHighlightOwnProps = {}; -type SliderTrackHighlightProps = SliderTrackHighlightDOMProps & - SliderTrackHighlightOwnProps; +type SliderTrackHighlightProps = {}; if (__DEV__) { SliderTrackHighlight.displayName = "SliderTrackHighlight"; @@ -963,17 +945,12 @@ if (__DEV__) { const SliderHandle = memoWithAs(SliderHandleImpl); -type SliderHandleDOMProps = Omit< - React.ComponentProps<"div">, - keyof SliderHandleOwnProps ->; /** * `SliderTrackHighlight` accepts any props that a HTML div component accepts. * * @see Docs https://reach.tech/slider#sliderhandle-props */ -type SliderHandleOwnProps = {}; -type SliderHandleProps = SliderHandleDOMProps & SliderHandleOwnProps; +type SliderHandleProps = {}; if (__DEV__) { SliderHandle.displayName = "SliderHandle"; @@ -1048,14 +1025,10 @@ if (__DEV__) { const SliderMarker = memoWithAs(SliderMarkerImpl); -type SliderMarkerDOMProps = Omit< - React.ComponentProps<"div">, - keyof SliderMarkerOwnProps ->; /** * @see Docs https://reach.tech/slider#slidermarker-props */ -type SliderMarkerOwnProps = { +type SliderMarkerProps = { /** * The value to denote where the marker should appear along the track. * @@ -1063,7 +1036,6 @@ type SliderMarkerOwnProps = { */ value: number; }; -type SliderMarkerProps = SliderMarkerDOMProps & SliderMarkerOwnProps; if (__DEV__) { SliderMarker.displayName = "SliderMarker"; @@ -1249,17 +1221,11 @@ type SliderChildrenRender = (props: { export default Slider; export type { SliderAlignment, - SliderHandleOwnProps, SliderHandleProps, - SliderInputOwnProps, SliderInputProps, - SliderMarkerOwnProps, SliderMarkerProps, - SliderOwnProps, SliderProps, - SliderTrackHighlightOwnProps, SliderTrackHighlightProps, - SliderTrackOwnProps, SliderTrackProps, }; export { diff --git a/packages/tabs/src/index.tsx b/packages/tabs/src/index.tsx index 4934d00fd..1184b8d91 100644 --- a/packages/tabs/src/index.tsx +++ b/packages/tabs/src/index.tsx @@ -201,11 +201,10 @@ const Tabs = forwardRefWithAs(function Tabs( ); }); -type TabsDOMProps = Omit, keyof TabsOwnProps>; /** * @see Docs https://reach.tech/tabs#tabs-props */ -type TabsOwnProps = { +type TabsProps = { /** * Tabs expects `` and `` as children. The order doesn't * matter, you can have tabs on the top or the bottom. In fact, you could have @@ -263,7 +262,6 @@ type TabsOwnProps = { */ onChange?: (index: number) => void; }; -type TabsProps = TabsDOMProps & TabsOwnProps; if (__DEV__) { Tabs.displayName = "Tabs"; @@ -401,11 +399,10 @@ if (__DEV__) { const TabList = memoWithAs(TabListImpl); -type TabListDOMProps = Omit, keyof TabListOwnProps>; /** * @see Docs https://reach.tech/tabs#tablist-props */ -type TabListOwnProps = { +type TabListProps = { /** * `TabList` expects multiple `Tab` elements as children. * @@ -415,7 +412,6 @@ type TabListOwnProps = { */ children?: React.ReactNode; }; -type TabListProps = TabListDOMProps & TabListOwnProps; if (__DEV__) { TabList.displayName = "TabList"; @@ -527,11 +523,10 @@ const Tab = forwardRefWithAs(function Tab( ); }); -type TabDOMProps = Omit, keyof TabOwnProps>; /** * @see Docs https://reach.tech/tabs#tab-props */ -type TabOwnProps = { +type TabProps = { /** * `Tab` can receive any type of children. * @@ -548,10 +543,6 @@ type TabOwnProps = { index?: number; }; -// This should be TabDOMProps & TabOwnProps, but TS is hanging up on that union -// for some reason and I cannot for the life of me figure out why 🤦‍♂️ -type TabProps = TabOwnProps; - if (__DEV__) { Tab.displayName = "Tab"; Tab.propTypes = { @@ -599,15 +590,10 @@ if (__DEV__) { const TabPanels = memoWithAs(TabPanelsImpl); -type TabPanelsDOMProps = Omit< - React.ComponentProps<"div">, - keyof TabPanelsOwnProps ->; /** * @see Docs https://reach.tech/tabs#tabpanels-props */ -type TabPanelsOwnProps = TabListOwnProps & {}; -type TabPanelsProps = TabPanelsDOMProps & TabPanelsOwnProps; +type TabPanelsProps = TabListProps & {}; if (__DEV__) { TabPanels.displayName = "TabPanels"; @@ -684,14 +670,10 @@ const TabPanel = forwardRefWithAs(function TabPanel( ); }); -type TabPanelDOMProps = Omit< - React.ComponentProps<"div">, - keyof TabPanelOwnProps ->; /** * @see Docs https://reach.tech/tabs#tabpanel-props */ -type TabPanelOwnProps = { +type TabPanelProps = { /** * `TabPanel` can receive any type of children. * @@ -699,7 +681,6 @@ type TabPanelOwnProps = { */ children?: React.ReactNode; }; -type TabPanelProps = TabPanelDOMProps & TabPanelOwnProps; if (__DEV__) { TabPanel.displayName = "TabPanel"; @@ -764,16 +745,11 @@ type InternalTabsContextValue = { // Exports export type { - TabListOwnProps, TabListProps, - TabOwnProps, - TabPanelOwnProps, TabPanelProps, - TabPanelsOwnProps, TabPanelsProps, TabProps, TabsContextValue, - TabsOwnProps, TabsProps, }; export { diff --git a/packages/tooltip/src/index.tsx b/packages/tooltip/src/index.tsx index a318c6616..095c11f19 100644 --- a/packages/tooltip/src/index.tsx +++ b/packages/tooltip/src/index.tsx @@ -402,12 +402,10 @@ const Tooltip = forwardRefWithAs(function ( ); }); -type TooltipDOMProps = Omit, keyof TooltipOwnProps>; -type TooltipOwnProps = { +type TooltipProps = { children: React.ReactNode; DEBUG_STYLE?: boolean; -} & Omit; -type TooltipProps = TooltipDOMProps & TooltipOwnProps; +} & Omit; if (__DEV__) { Tooltip.displayName = "Tooltip"; @@ -453,14 +451,9 @@ const TooltipPopup = forwardRefWithAs( } ); -type TooltipPopupDOMProps = Omit< - React.ComponentProps<"div">, - keyof TooltipPopupOwnProps ->; -type TooltipPopupOwnProps = { +type TooltipPopupProps = { children?: React.ReactNode; -} & TooltipContentOwnProps; -type TooltipPopupProps = TooltipPopupDOMProps & TooltipPopupOwnProps; +} & TooltipContentProps; if (__DEV__) { TooltipPopup.displayName = "TooltipPopup"; @@ -532,18 +525,13 @@ const TooltipContent = forwardRefWithAs( } ); -type TooltipContentDOMProps = Omit< - React.ComponentProps<"div">, - keyof TooltipContentOwnProps ->; -type TooltipContentOwnProps = { +type TooltipContentProps = { ariaLabel?: string; position?: Position; label: React.ReactNode; isVisible?: boolean; triggerRect: DOMRect | null; }; -type TooltipContentProps = TooltipContentDOMProps & TooltipContentOwnProps; if (__DEV__) { TooltipContent.displayName = "TooltipContent"; @@ -713,11 +701,8 @@ type PRect = Partial & { export default Tooltip; export type { Position, - TooltipContentOwnProps, TooltipContentProps, - TooltipOwnProps, TooltipParams, - TooltipPopupOwnProps, TooltipPopupProps, TooltipProps, TriggerParams, diff --git a/packages/visually-hidden/src/index.tsx b/packages/visually-hidden/src/index.tsx index bd0ae88d0..ed7c43fcd 100644 --- a/packages/visually-hidden/src/index.tsx +++ b/packages/visually-hidden/src/index.tsx @@ -46,20 +46,15 @@ const VisuallyHidden = React.forwardRef(function VisuallyHidden( ); }) as ForwardRefExoticComponentWithAs<"span", VisuallyHiddenProps>; -type VisuallyHiddenDOMProps = Omit< - React.ComponentProps<"span">, - keyof VisuallyHiddenOwnProps ->; /** * @see Docs https://reach.tech/visually-hidden#visuallyhidden-props */ -type VisuallyHiddenOwnProps = { +type VisuallyHiddenProps = { /** * @see Docs https://reach.tech/visually-hidden#visuallyhidden-children */ children: React.ReactNode; }; -type VisuallyHiddenProps = VisuallyHiddenDOMProps & VisuallyHiddenOwnProps; if (__DEV__) { VisuallyHidden.displayName = "VisuallyHidden"; @@ -127,6 +122,6 @@ interface ForwardRefExoticComponentWithAs< //////////////////////////////////////////////////////////////////////////////// // Exports -export type { VisuallyHiddenOwnProps, VisuallyHiddenProps }; +export type { VisuallyHiddenProps }; export { VisuallyHidden }; export default VisuallyHidden;