use displayName in dev only

reach · Jan 27, 2020 · 49455b0 · 49455b0
1 parent b4b6775
commit 49455b0
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 47 deletions.
diff --git a/packages/alert-dialog/src/index.tsx b/packages/alert-dialog/src/index.tsx
@@ -87,8 +87,8 @@ export const AlertDialogOverlay = forwardRef<HTMLDivElement, AlertDialogProps>(
   }
 );
 
-AlertDialogOverlay.displayName = "AlertDialogOverlay";
 if (__DEV__) {
+  AlertDialogOverlay.displayName = "AlertDialogOverlay";
   AlertDialogOverlay.propTypes = {
     isOpen: PropTypes.bool,
     onDismiss: PropTypes.func,
@@ -162,8 +162,8 @@ export type AlertDialogContentProps = {
   children: React.ReactNode;
 } & DialogContentProps;
 
-AlertDialogContent.displayName = "AlertDialogContent";
 if (__DEV__) {
+  AlertDialogContent.displayName = "AlertDialogContent";
   AlertDialogContent.propTypes = {
     children: PropTypes.node
   };
@@ -189,7 +189,9 @@ export const AlertDialogLabel: React.FC<React.HTMLAttributes<
   return <div {...props} id={labelId} data-reach-alert-dialog-label />;
 };
 
-AlertDialogLabel.displayName = "AlertDialogLabel";
+if (__DEV__) {
+  AlertDialogLabel.displayName = "AlertDialogLabel";
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -212,7 +214,9 @@ export const AlertDialogDescription: React.FC<React.HTMLAttributes<
   );
 };
 
-AlertDialogDescription.displayName = "AlertDialogDescription";
+if (__DEV__) {
+  AlertDialogDescription.displayName = "AlertDialogDescription";
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -273,8 +277,8 @@ export type AlertDialogProps = {
   children: React.ReactNode;
 } & DialogProps;
 
-AlertDialog.displayName = "AlertDialog";
 if (__DEV__) {
+  AlertDialog.displayName = "AlertDialog";
   AlertDialog.propTypes = {
     isOpen: PropTypes.bool,
     onDismiss: PropTypes.func,

diff --git a/packages/alert/src/index.tsx b/packages/alert/src/index.tsx
@@ -90,8 +90,8 @@ export type AlertProps = {
   children: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-Alert.displayName = "Alert";
 if (__DEV__) {
+  Alert.displayName = "Alert";
   Alert.propTypes = {
     children: PropTypes.node,
     type: PropTypes.oneOf(["assertive", "polite"])

diff --git a/packages/combobox/src/index.tsx b/packages/combobox/src/index.tsx
@@ -362,8 +362,8 @@ export type ComboboxProps = {
   openOnFocus?: boolean;
 };
 
-Combobox.displayName = "Combobox";
 if (__DEV__) {
+  Combobox.displayName = "Combobox";
   Combobox.propTypes = {
     as: PropTypes.elementType,
     onSelect: PropTypes.func,
@@ -542,7 +542,9 @@ export type ComboboxInputProps = {
   value?: ComboboxValue;
 };
 
-ComboboxInput.displayName = "ComboboxInput";
+if (__DEV__) {
+  ComboboxInput.displayName = "ComboboxInput";
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -597,7 +599,9 @@ export const ComboboxPopover: ComponentWithForwardedRef<
   );
 });
 
-ComboboxPopover.displayName = "ComboboxPopover";
+if (__DEV__) {
+  ComboboxPopover.displayName = "ComboboxPopover";
+}
 
 export type __ComboboxPopoverProps = {
   targetRef?: any;
@@ -681,7 +685,9 @@ export type ComboboxListProps = {
   persistSelection?: boolean;
 };
 
-ComboboxList.displayName = "ComboboxList";
+if (__DEV__) {
+  ComboboxList.displayName = "ComboboxList";
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -772,7 +778,9 @@ export type ComboboxOptionProps = {
   value: string;
 };
 
-ComboboxOption.displayName = "ComboboxOption";
+if (__DEV__) {
+  ComboboxOption.displayName = "ComboboxOption";
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -827,7 +835,9 @@ export function ComboboxOptionText() {
   );
 }
 
-ComboboxOptionText.displayName = "ComboboxOptionText";
+if (__DEV__) {
+  ComboboxOptionText.displayName = "ComboboxOptionText";
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -869,7 +879,9 @@ export const ComboboxButton = forwardRefWithAs<{}, "button">(
   }
 );
 
-ComboboxButton.displayName = "ComboboxButton";
+if (__DEV__) {
+  ComboboxButton.displayName = "ComboboxButton";
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 

diff --git a/packages/dialog/src/index.tsx b/packages/dialog/src/index.tsx
@@ -46,8 +46,8 @@ export const DialogOverlay = forwardRef<HTMLDivElement, DialogProps>(
   }
 );
 
-DialogOverlay.displayName = "DialogOverlay";
 if (__DEV__) {
+  DialogOverlay.displayName = "DialogOverlay";
   DialogOverlay.propTypes = {
     ...overlayPropTypes,
     isOpen: PropTypes.bool
@@ -128,8 +128,8 @@ const DialogInner = forwardRef<HTMLDivElement, DialogProps>(
   }
 );
 
-DialogOverlay.displayName = "DialogOverlay";
 if (__DEV__) {
+  DialogOverlay.displayName = "DialogOverlay";
   DialogOverlay.propTypes = {
     ...overlayPropTypes
   };
@@ -182,8 +182,8 @@ export type DialogContentProps = {
   children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-DialogContent.displayName = "DialogContent";
 if (__DEV__) {
+  DialogContent.displayName = "DialogContent";
   DialogContent.propTypes = {
     "aria-label": ariaLabelType,
     "aria-labelledby": ariaLabelType
@@ -255,8 +255,8 @@ export type DialogProps = {
   initialFocusRef?: React.RefObject<any>;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-Dialog.displayName = "Dialog";
 if (__DEV__) {
+  Dialog.displayName = "Dialog";
   Dialog.propTypes = {
     isOpen: PropTypes.bool,
     onDismiss: PropTypes.func,

diff --git a/packages/menu-button/src/index.tsx b/packages/menu-button/src/index.tsx
@@ -146,8 +146,8 @@ export interface MenuProps {
   id?: string;
 }
 
-Menu.displayName = "Menu";
 if (__DEV__) {
+  Menu.displayName = "Menu";
   Menu.propTypes = {
     children: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
   };
@@ -240,8 +240,8 @@ export type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   children: React.ReactNode;
 };
 
-MenuButton.displayName = "MenuButton";
 if (__DEV__) {
+  MenuButton.displayName = "MenuButton";
   MenuButton.propTypes = {
     children: PropTypes.node
   };
@@ -518,8 +518,8 @@ export const MenuItem = forwardRefWithAs<MenuItemProps, "div">(
  */
 export type MenuItemProps = Omit<MenuItemImplProps, "isLink">;
 
-MenuItem.displayName = "MenuItem";
 if (__DEV__) {
+  MenuItem.displayName = "MenuItem";
   MenuItem.propTypes = {
     as: PropTypes.any,
     onSelect: PropTypes.func.isRequired
@@ -701,8 +701,8 @@ export type MenuItemsProps = {
   children: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-MenuItems.displayName = "MenuItems";
 if (__DEV__) {
+  MenuItems.displayName = "MenuItems";
   MenuItems.propTypes = {
     children: PropTypes.node
   };
@@ -753,8 +753,8 @@ export type MenuLinkProps = Omit<MenuItemImplProps, "isLink" | "onSelect"> & {
   onSelect?: () => any;
 };
 
-MenuLink.displayName = "MenuLink";
 if (__DEV__) {
+  MenuLink.displayName = "MenuLink";
   MenuLink.propTypes = {
     as: PropTypes.any,
     component: PropTypes.any
@@ -793,8 +793,8 @@ export type MenuListProps = React.HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;
 };
 
-MenuList.displayName = "MenuList";
 if (__DEV__) {
+  MenuList.displayName = "MenuList";
   MenuList.propTypes = {
     children: PropTypes.node.isRequired
   };
@@ -873,8 +873,8 @@ export type MenuPopoverProps = React.HTMLAttributes<HTMLDivElement> & {
   position?: Position;
 };
 
-MenuPopover.displayName = "MenuPopover";
 if (__DEV__) {
+  MenuPopover.displayName = "MenuPopover";
   MenuPopover.propTypes = {
     children: PropTypes.node
   };

diff --git a/packages/popover/src/index.tsx b/packages/popover/src/index.tsx
@@ -30,7 +30,9 @@ export type PopoverProps = {
   position?: Position;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-Popover.displayName = "Popover";
+if (__DEV__) {
+  Popover.displayName = "Popover";
+}
 
 export default Popover;
 
@@ -69,7 +71,9 @@ const PopoverImpl = forwardRef<HTMLDivElement, PopoverProps>(
   }
 );
 
-PopoverImpl.displayName = "PopoverImpl";
+if (__DEV__) {
+  PopoverImpl.displayName = "PopoverImpl";
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 

diff --git a/packages/portal/src/index.tsx b/packages/portal/src/index.tsx
@@ -63,6 +63,8 @@ export type PortalProps = {
   type?: string;
 };
 
-Portal.displayName = "Portal";
+if (__DEV__) {
+  Portal.displayName = "Portal";
+}
 
 export default Portal;
diff --git a/packages/rect/src/index.tsx b/packages/rect/src/index.tsx
@@ -67,9 +67,8 @@ export type RectProps = {
   children(args: { rect: PRect | null; ref: React.Ref<any> }): JSX.Element;
 };
 
-Rect.displayName = "Rect";
-
 if (__DEV__) {
+  Rect.displayName = "Rect";
   Rect.propTypes = {
     children: PropTypes.func.isRequired,
     observe: PropTypes.bool,

diff --git a/packages/skip-nav/src/index.tsx b/packages/skip-nav/src/index.tsx
@@ -36,7 +36,9 @@ export type SkipNavLinkProps = {
   children?: string | JSX.Element;
 } & Omit<React.HTMLAttributes<HTMLAnchorElement>, "href">;
 
-SkipNavLink.displayName = "SkipNavLink";
+if (__DEV__) {
+  SkipNavLink.displayName = "SkipNavLink";
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -75,4 +77,6 @@ export type SkipNavContentProps = {
   children?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "id">;
 
-SkipNavContent.displayName = "SkipNavContent";
+if (__DEV__) {
+  SkipNavContent.displayName = "SkipNavContent";
+}
diff --git a/packages/slider/src/index.tsx b/packages/slider/src/index.tsx
@@ -204,8 +204,8 @@ export type SliderProps = Omit<
   step?: number;
 };
 
-Slider.displayName = "Slider";
 if (__DEV__) {
+  Slider.displayName = "Slider";
   Slider.propTypes = {
     ...sliderPropTypes,
     children: PropTypes.node
@@ -529,8 +529,8 @@ export type SliderInputProps = Omit<SliderProps, "children"> & {
   children: React.ReactNode | SliderChildrenRender;
 };
 
-SliderInput.displayName = "SliderInput";
 if (__DEV__) {
+  SliderInput.displayName = "SliderInput";
   SliderInput.propTypes = {
     ...sliderPropTypes,
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired
@@ -581,8 +581,8 @@ export type SliderTrackProps = React.HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;
 };
 
-SliderTrack.displayName = "SliderTrack";
 if (__DEV__) {
+  SliderTrack.displayName = "SliderTrack";
   SliderTrack.propTypes = {
     children: PropTypes.node.isRequired
   };
@@ -628,8 +628,8 @@ export const SliderTrackHighlight = forwardRef<
  */
 export type SliderTrackHighlightProps = React.HTMLAttributes<HTMLDivElement>;
 
-SliderTrackHighlight.displayName = "SliderTrackHighlight";
 if (__DEV__) {
+  SliderTrackHighlight.displayName = "SliderTrackHighlight";
   SliderTrackHighlight.propTypes = {};
 }
 
@@ -716,8 +716,8 @@ export const SliderHandle = forwardRef<HTMLDivElement, SliderHandleProps>(
  */
 export type SliderHandleProps = React.HTMLAttributes<HTMLDivElement>;
 
-SliderHandle.displayName = "SliderHandle";
 if (__DEV__) {
+  SliderHandle.displayName = "SliderHandle";
   SliderHandle.propTypes = {};
 }
 
@@ -789,8 +789,8 @@ export type SliderMarkerProps = React.HTMLAttributes<HTMLDivElement> & {
   value: number;
 };
 
-SliderMarker.displayName = "SliderMarker";
 if (__DEV__) {
+  SliderMarker.displayName = "SliderMarker";
   SliderMarker.propTypes = {
     value: PropTypes.number.isRequired
   };