add missing displayNames (#2142)

.changeset/real-jokes-repair.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Added `displayName`s to all components that were previously missing them.

packages/itwinui-react/src/core/Avatar/Avatar.tsx

@@ -113,3 +113,6 @@ export const Avatar = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'span', AvatarProps>;
+if (process.env.NODE_ENV === 'development') {
+  Avatar.displayName = 'Avatar';
+}

packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx

@@ -125,3 +125,6 @@ export const AvatarGroup = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', AvatarGroupProps>;
+if (process.env.NODE_ENV === 'development') {
+  AvatarGroup.displayName = 'AvatarGroup';
+}

packages/itwinui-react/src/core/Backdrop/Backdrop.tsx

@@ -30,3 +30,6 @@ export const Backdrop = React.forwardRef((props, ref) => {
     />
   );
 }) as PolymorphicForwardRefComponent<'div', BackdropProps>;
+if (process.env.NODE_ENV === 'development') {
+  Backdrop.displayName = 'Backdrop';
+}

packages/itwinui-react/src/core/Badge/Badge.tsx

@@ -92,3 +92,6 @@ export const Badge = React.forwardRef((props, forwardedRef) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'span', BadgeProps>;
+if (process.env.NODE_ENV === 'development') {
+  Badge.displayName = 'Badge';
+}

packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx

@@ -183,6 +183,9 @@ const BreadcrumbsComponent = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'nav', BreadcrumbsProps>;
+if (process.env.NODE_ENV === 'development') {
+  BreadcrumbsComponent.displayName = 'Breadcrumbs';
+}
 
 // ----------------------------------------------------------------------------
 

packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx

@@ -146,6 +146,9 @@ export const ButtonGroup = React.forwardRef((props, forwardedRef) => {
     </FloatingDelayGroup>
   );
 }) as PolymorphicForwardRefComponent<'div', ButtonGroupProps>;
+if (process.env.NODE_ENV === 'development') {
+  ButtonGroup.displayName = 'ButtonGroup';
+}
 
 // ----------------------------------------------------------------------------
 

packages/itwinui-react/src/core/Buttons/Button.tsx

@@ -140,3 +140,6 @@ export const Button = React.forwardRef((props, ref) => {
     </ButtonBase>
   );
 }) as PolymorphicForwardRefComponent<'button', ButtonProps>;
+if (process.env.NODE_ENV === 'development') {
+  Button.displayName = 'Button';
+}

packages/itwinui-react/src/core/Buttons/DropdownButton.tsx

@@ -82,3 +82,6 @@ export const DropdownButton = React.forwardRef((props, forwardedRef) => {
     </DropdownMenu>
   );
 }) as PolymorphicForwardRefComponent<'button', DropdownButtonProps>;
+if (process.env.NODE_ENV === 'development') {
+  DropdownButton.displayName = 'DropdownButton';
+}

packages/itwinui-react/src/core/Buttons/IconButton.tsx

@@ -103,3 +103,6 @@ export const IconButton = React.forwardRef((props, ref) => {
     button
   );
 }) as PolymorphicForwardRefComponent<'button', IconButtonProps>;
+if (process.env.NODE_ENV === 'development') {
+  IconButton.displayName = 'IconButton';
+}

packages/itwinui-react/src/core/Buttons/IdeasButton.tsx

@@ -40,3 +40,6 @@ export const IdeasButton = React.forwardRef((props, ref) => {
     </Button>
   );
 }) as PolymorphicForwardRefComponent<'button', IdeasButtonProps>;
+if (process.env.NODE_ENV === 'development') {
+  IdeasButton.displayName = 'IdeasButton';
+}

packages/itwinui-react/src/core/Buttons/SplitButton.tsx

@@ -151,3 +151,6 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'button', SplitButtonProps>;
+if (process.env.NODE_ENV === 'development') {
+  SplitButton.displayName = 'SplitButton';
+}

packages/itwinui-react/src/core/Carousel/Carousel.tsx

@@ -88,6 +88,9 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'section', CarouselProps>;
+if (process.env.NODE_ENV === 'development') {
+  CarouselComponent.displayName = 'Carousel';
+}
 
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is

packages/itwinui-react/src/core/Carousel/CarouselContext.tsx

@@ -41,3 +41,6 @@ export const CarouselContext = React.createContext<
     }
   | undefined
 >(undefined);
+if (process.env.NODE_ENV === 'development') {
+  CarouselContext.displayName = 'CarouselContext';
+}

packages/itwinui-react/src/core/Carousel/CarouselDot.tsx

@@ -42,3 +42,6 @@ export const CarouselDot = React.forwardRef((props, ref) => {
     />
   );
 }) as PolymorphicForwardRefComponent<'button', CarouselDotProps>;
+if (process.env.NODE_ENV === 'development') {
+  CarouselDot.displayName = 'Carousel.Dot';
+}

packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx

@@ -209,3 +209,6 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
     </>
   );
 }) as PolymorphicForwardRefComponent<'div', CarouselDotsListProps>;
+if (process.env.NODE_ENV === 'development') {
+  CarouselDotsList.displayName = 'Carousel.DotsList';
+}

packages/itwinui-react/src/core/Carousel/CarouselNavigation.tsx

@@ -35,6 +35,9 @@ const CarouselNavigationComponent = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div'>;
+if (process.env.NODE_ENV === 'development') {
+  CarouselNavigationComponent.displayName = 'Carousel.Navigation';
+}
 
 /** Button for switching to previous slide */
 const PreviousButton = React.forwardRef((props, ref) => {
@@ -67,6 +70,9 @@ const PreviousButton = React.forwardRef((props, ref) => {
   'button',
   React.ComponentProps<typeof IconButton>
 >;
+if (process.env.NODE_ENV === 'development') {
+  PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
+}
 
 /** Button for switching to next slide */
 const NextButton = React.forwardRef((props, ref) => {
@@ -99,6 +105,9 @@ const NextButton = React.forwardRef((props, ref) => {
   'button',
   React.ComponentProps<typeof IconButton>
 >;
+if (process.env.NODE_ENV === 'development') {
+  NextButton.displayName = 'Carousel.Navigation.NextButton';
+}
 
 /**
  * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`

packages/itwinui-react/src/core/Carousel/CarouselSlide.tsx

@@ -72,3 +72,6 @@ export const CarouselSlide = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', CarouselSlideProps>;
+if (process.env.NODE_ENV === 'development') {
+  CarouselSlide.displayName = 'Carousel.Slide';
+}

packages/itwinui-react/src/core/Carousel/CarouselSlider.tsx

@@ -97,3 +97,6 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div'>;
+if (process.env.NODE_ENV === 'development') {
+  CarouselSlider.displayName = 'Carousel.Slider';
+}

packages/itwinui-react/src/core/Checkbox/Checkbox.tsx

@@ -136,3 +136,6 @@ export const Checkbox = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'input', CheckboxProps>;
+if (process.env.NODE_ENV === 'development') {
+  Checkbox.displayName = 'Checkbox';
+}

packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx

@@ -333,3 +333,6 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div'>;
+if (process.env.NODE_ENV === 'development') {
+  ColorBuilder.displayName = 'ColorBuilder';
+}

packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx

@@ -488,3 +488,6 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', ColorInputPanelProps>;
+if (process.env.NODE_ENV === 'development') {
+  ColorInputPanel.displayName = 'ColorInputPanel';
+}

packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx

@@ -73,3 +73,6 @@ export const ColorPalette = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', ColorPaletteProps>;
+if (process.env.NODE_ENV === 'development') {
+  ColorPalette.displayName = 'ColorPalette';
+}

packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx

@@ -160,3 +160,6 @@ export const ColorPicker = React.forwardRef((props, forwardedRef) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', ColorPickerProps>;
+if (process.env.NODE_ENV === 'development') {
+  ColorPicker.displayName = 'ColorPicker';
+}

packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx

@@ -61,3 +61,6 @@ export const ColorSwatch = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'button', ColorSwatchProps>;
+if (process.env.NODE_ENV === 'development') {
+  ColorSwatch.displayName = 'ColorSwatch';
+}

packages/itwinui-react/src/core/ComboBox/ComboBox.tsx

@@ -644,3 +644,6 @@ export const ComboBox = React.forwardRef(
 ) as <T>(
   props: ComboBoxProps<T> & { ref?: React.ForwardedRef<HTMLElement> },
 ) => JSX.Element;
+if (process.env.NODE_ENV === 'development') {
+  (ComboBox as any).displayName = 'ComboBox';
+}

packages/itwinui-react/src/core/DatePicker/DatePicker.tsx

@@ -757,3 +757,6 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', DatePickerProps>;
+if (process.env.NODE_ENV === 'development') {
+  DatePicker.displayName = 'DatePicker';
+}

packages/itwinui-react/src/core/Dialog/Dialog.tsx

@@ -74,6 +74,9 @@ const DialogComponent = React.forwardRef((props, ref) => {
     </Transition>
   );
 }) as PolymorphicForwardRefComponent<'div', DialogProps>;
+if (process.env.NODE_ENV === 'development') {
+  DialogComponent.displayName = 'Dialog';
+}
 
 /**
  * Dialog component.

packages/itwinui-react/src/core/Dialog/DialogBackdrop.tsx

@@ -69,3 +69,6 @@ export const DialogBackdrop = React.forwardRef((props, ref) => {
     />
   );
 }) as PolymorphicForwardRefComponent<'div', DialogBackdropProps>;
+if (process.env.NODE_ENV === 'development') {
+  DialogBackdrop.displayName = 'Dialog.Backdrop';
+}

packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx

@@ -13,3 +13,6 @@ import { polymorphic } from '../../utils/index.js';
  * </Dialog.ButtonBar>
  */
 export const DialogButtonBar = polymorphic.div('iui-dialog-button-bar');
+if (process.env.NODE_ENV === 'development') {
+  DialogButtonBar.displayName = 'Dialog.ButtonBar';
+}

packages/itwinui-react/src/core/Dialog/DialogContent.tsx

@@ -12,3 +12,6 @@ import { polymorphic } from '../../utils/index.js';
  * </Dialog.Content>
  */
 export const DialogContent = polymorphic.div('iui-dialog-content');
+if (process.env.NODE_ENV === 'development') {
+  DialogContent.displayName = 'Dialog.Content';
+}

packages/itwinui-react/src/core/Dialog/DialogMain.tsx

@@ -234,3 +234,6 @@ export const DialogMain = React.forwardRef((props, ref) => {
     </Transition>
   );
 }) as PolymorphicForwardRefComponent<'div', DialogMainProps>;
+if (process.env.NODE_ENV === 'development') {
+  DialogMain.displayName = 'Dialog.Main';
+}

packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx

@@ -90,3 +90,6 @@ export const DialogTitleBar = Object.assign(
     Title: DialogTitleBarTitle,
   },
 );
+if (process.env.NODE_ENV === 'development') {
+  DialogTitleBar.displayName = 'Dialog.TitleBar';
+}

packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx

@@ -7,6 +7,11 @@ import { polymorphic } from '../../utils/index.js';
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example
- * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
+ * <Dialog.TitleBar>
+ *   <Dialog.TitleBar.Title>My dialog title</Dialog.TitleBar.Title>
+ * </Dialog.TitleBar>
  */
 export const DialogTitleBarTitle = polymorphic.div('iui-dialog-title');
+if (process.env.NODE_ENV === 'development') {
+  DialogTitleBarTitle.displayName = 'Dialog.TitleBar.Title';
+}

packages/itwinui-react/src/core/Divider/Divider.tsx

@@ -31,3 +31,6 @@ export const Divider = React.forwardRef((props, ref) => {
     />
   );
 }) as PolymorphicForwardRefComponent<'hr', DividerProps>;
+if (process.env.NODE_ENV === 'development') {
+  Divider.displayName = 'Divider';
+}

packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.tsx

@@ -62,6 +62,9 @@ export const DropdownMenu = React.forwardRef((props, forwardedRef) => {
     </FloatingTree>
   );
 }) as PolymorphicForwardRefComponent<'div', DropdownMenuProps>;
+if (process.env.NODE_ENV === 'development') {
+  DropdownMenu.displayName = 'DropdownMenu';
+}
 
 // ----------------------------------------------------------------------------
 

packages/itwinui-react/src/core/Fieldset/Fieldset.tsx

@@ -48,3 +48,6 @@ export const Fieldset = React.forwardRef((props, ref) => {
     </FieldsetBase>
   );
 }) as PolymorphicForwardRefComponent<'fieldset', FieldsetProps>;
+if (process.env.NODE_ENV === 'development') {
+  Fieldset.displayName = 'Fieldset';
+}

packages/itwinui-react/src/core/FileUpload/FileEmptyCard.tsx

@@ -14,11 +14,17 @@ import { FileUploadCard } from './FileUploadCard.js';
 const FileEmptyCardIcon = polymorphic.span('iui-file-card-empty-icon', {
   children: <SvgUpload />,
 });
+if (process.env.NODE_ENV === 'development') {
+  FileEmptyCardIcon.displayName = 'FileEmptyCard.Icon';
+}
 
 // ----------------------------------------------------------------------------
 // FileEmptyCard.Text component
 
 const FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
+if (process.env.NODE_ENV === 'development') {
+  FileEmptyCardText.displayName = 'FileEmptyCard.Text';
+}
 
 // ----------------------------------------------------------------------------
 // FileEmptyCard component
@@ -40,6 +46,9 @@ const FileEmptyCardComponent = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div'>;
+if (process.env.NODE_ENV === 'development') {
+  FileEmptyCardComponent.displayName = 'FileEmptyCard';
+}
 
 /**
  * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.

packages/itwinui-react/src/core/FileUpload/FileUpload.tsx

@@ -114,3 +114,6 @@ export const FileUpload = React.forwardRef((props, forwardedRef) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', FileUploadProps>;
+if (process.env.NODE_ENV === 'development') {
+  FileUpload.displayName = 'FileUpload';
+}

packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx

@@ -318,3 +318,6 @@ export const FileUploadCardContext = React.createContext<
     }
   | undefined
 >(undefined);
+if (process.env.NODE_ENV === 'development') {
+  FileUploadCardContext.displayName = 'FileUploadCardContext';
+}

packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx

@@ -85,3 +85,6 @@ export const FileUploadTemplate = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', FileUploadTemplateProps>;
+if (process.env.NODE_ENV === 'development') {
+  FileUploadTemplate.displayName = 'FileUploadTemplate';
+}

packages/itwinui-react/src/core/Footer/Footer.tsx

@@ -172,3 +172,6 @@ export const Footer = Object.assign(
     Separator: FooterSeparator,
   },
 );
+if (process.env.NODE_ENV === 'development') {
+  (Footer as any).displayName = 'Footer';
+}

packages/itwinui-react/src/core/Footer/FooterItem.tsx

@@ -8,3 +8,6 @@ import { polymorphic } from '../../utils/index.js';
  * Footer item. Recommended to use inside `Footer.List`.
  */
 export const FooterItem = polymorphic.li('iui-legal-footer-item');
+if (process.env.NODE_ENV === 'development') {
+  FooterItem.displayName = 'Footer.Item';
+}

packages/itwinui-react/src/core/Footer/FooterList.tsx

@@ -8,3 +8,6 @@ import { polymorphic } from '../../utils/index.js';
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */
 export const FooterList = polymorphic.ul('iui-legal-footer-list');
+if (process.env.NODE_ENV === 'development') {
+  FooterList.displayName = 'Footer.List';
+}

packages/itwinui-react/src/core/Footer/FooterSeparator.tsx

@@ -10,3 +10,6 @@ import { polymorphic } from '../../utils/index.js';
 export const FooterSeparator = polymorphic.li('iui-legal-footer-separator', {
   'aria-hidden': true,
 });
+if (process.env.NODE_ENV === 'development') {
+  FooterSeparator.displayName = 'Footer.Separator';
+}

packages/itwinui-react/src/core/Header/Header.tsx

@@ -151,3 +151,6 @@ export const Header = React.forwardRef((props, forwardedRef) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'header', HeaderProps>;
+if (process.env.NODE_ENV === 'development') {
+  Header.displayName = 'Header';
+}

packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx

@@ -65,3 +65,6 @@ export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'nav', HeaderBreadcrumbsProps>;
+if (process.env.NODE_ENV === 'development') {
+  HeaderBreadcrumbs.displayName = 'HeaderBreadcrumbs';
+}

packages/itwinui-react/src/core/Header/HeaderButton.tsx

@@ -101,3 +101,6 @@ export const HeaderButton = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'button', HeaderButtonProps>;
+if (process.env.NODE_ENV === 'development') {
+  HeaderButton.displayName = 'HeaderButton';
+}