add development checks for displayName

.changeset/proud-hornets-itch.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Component `displayName`s have been eliminiated from the prod build.

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

@@ -75,7 +75,9 @@ const AlertComponent = React.forwardRef((props, forwardedRef) => {
     </Alert.Wrapper>
   );
 }) as PolymorphicForwardRefComponent<'div', AlertOwnProps & AlertLegacyProps>;
-AlertComponent.displayName = 'Alert';
+if (process.env.NODE_ENV === 'development') {
+  AlertComponent.displayName = 'Alert';
+}
 
 // ----------------------------------------------------------------------------
 // Alert.Wrapper component
@@ -101,7 +103,9 @@ const AlertWrapper = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', AlertOwnProps>;
-AlertWrapper.displayName = 'Alert.Wrapper';
+if (process.env.NODE_ENV === 'development') {
+  AlertWrapper.displayName = 'Alert.Wrapper';
+}
 
 // ----------------------------------------------------------------------------
 // Alert.Icon component
@@ -119,13 +123,17 @@ const AlertIcon = React.forwardRef((props, ref) => {
     </Icon>
   );
 }) as PolymorphicForwardRefComponent<'span', React.ComponentProps<typeof Icon>>;
-AlertIcon.displayName = 'Alert.Icon';
+if (process.env.NODE_ENV === 'development') {
+  AlertIcon.displayName = 'Alert.Icon';
+}
 
 // ----------------------------------------------------------------------------
 // Alert.Message component
 
 const AlertMessage = polymorphic.span('iui-alert-message');
-AlertMessage.displayName = 'Alert.Message';
+if (process.env.NODE_ENV === 'development') {
+  AlertMessage.displayName = 'Alert.Message';
+}
 
 // ----------------------------------------------------------------------------
 // Alert.Action component
@@ -147,7 +155,9 @@ const AlertAction = React.forwardRef((props, ref) => {
     </Anchor>
   );
 }) as PolymorphicForwardRefComponent<'a'>;
-AlertAction.displayName = 'Alert.Action';
+if (process.env.NODE_ENV === 'development') {
+  AlertAction.displayName = 'Alert.Action';
+}
 
 // ----------------------------------------------------------------------------
 // Alert.CloseButton component
@@ -167,7 +177,9 @@ const AlertCloseButton = React.forwardRef((props, ref) => {
     </IconButton>
   );
 }) as PolymorphicForwardRefComponent<'button'>;
-AlertCloseButton.displayName = 'Alert.CloseButton';
+if (process.env.NODE_ENV === 'development') {
+  AlertCloseButton.displayName = 'Alert.CloseButton';
+}
 
 /**
  * A small box to quickly grab user attention and communicate a brief message

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

@@ -257,7 +257,9 @@ const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
     />
   );
 }) as PolymorphicForwardRefComponent<'a'>;
-BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+if (process.env.NODE_ENV === 'development') {
+  BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+}
 
 // ----------------------------------------------------------------------------
 

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

@@ -21,7 +21,9 @@ import {
 export const ButtonGroupContext = React.createContext<string | undefined>(
   undefined,
 );
-ButtonGroupContext.displayName = 'ButtonGroupContext';
+if (process.env.NODE_ENV === 'development') {
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
+}
 
 // ----------------------------------------------------------------------------
 

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

@@ -34,4 +34,6 @@ export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
     </Icon>
   );
 }) as PolymorphicForwardRefComponent<'span', ComboBoxEndIconProps>;
-ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';
+if (process.env.NODE_ENV === 'development') {
+  ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';
+}

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

@@ -241,4 +241,6 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     </>
   );
 }) as PolymorphicForwardRefComponent<'input', ComboBoxInputProps>;
-ComboBoxInput.displayName = 'ComboBoxInput';
+if (process.env.NODE_ENV === 'development') {
+  ComboBoxInput.displayName = 'ComboBoxInput';
+}

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

@@ -47,4 +47,6 @@ export const ComboBoxInputContainer = React.forwardRef(
     );
   },
 ) as PolymorphicForwardRefComponent<'div', ComboBoxInputContainerProps>;
-ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';
+if (process.env.NODE_ENV === 'development') {
+  ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';
+}

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

@@ -156,4 +156,6 @@ export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
     )
   );
 }) as PolymorphicForwardRefComponent<'div', ComboBoxMenuProps>;
-ComboBoxMenu.displayName = 'ComboBoxMenu';
+if (process.env.NODE_ENV === 'development') {
+  ComboBoxMenu.displayName = 'ComboBoxMenu';
+}

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

@@ -79,4 +79,6 @@ export const ComboBoxMenuItem = React.memo(
     );
   }) as PolymorphicForwardRefComponent<'div', ComboBoxMenuItemProps>,
 );
-ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';
+if (process.env.NODE_ENV === 'development') {
+  ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';
+}

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

@@ -15,4 +15,6 @@ export const ComboBoxMultipleContainer = React.forwardRef((props, ref) => {
   return <SelectTagContainer ref={ref} tags={selectedItems} {...rest} />;
 }) as PolymorphicForwardRefComponent<'div', ComboBoxMultipleContainerProps>;
 
-ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';
+if (process.env.NODE_ENV === 'development') {
+  ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';
+}

packages/itwinui-react/src/core/ComboBox/helpers.ts

@@ -14,7 +14,9 @@ export const ComboBoxRefsContext = React.createContext<
     }
   | undefined
 >(undefined);
-ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
+if (process.env.NODE_ENV === 'development') {
+  ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
+}
 
 type ComboBoxStateContextProps<T = unknown> = {
   isOpen: boolean;
@@ -34,4 +36,6 @@ type ComboBoxStateContextProps<T = unknown> = {
 export const ComboBoxStateContext = React.createContext<
   ComboBoxStateContextProps | undefined
 >(undefined);
-ComboBoxStateContext.displayName = 'ComboBoxStateContext';
+if (process.env.NODE_ENV === 'development') {
+  ComboBoxStateContext.displayName = 'ComboBoxStateContext';
+}

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

@@ -28,7 +28,9 @@ const ExpandableBlockContext = React.createContext<
     } & ExpandableBlockOwnProps)
   | undefined
 >(undefined);
-ExpandableBlockContext.displayName = 'ExpandableBlockContext';
+if (process.env.NODE_ENV === 'development') {
+  ExpandableBlockContext.displayName = 'ExpandableBlockContext';
+}
 
 // ----------------------------------------------------------------------------
 // Main ExpandableBlock component
@@ -90,7 +92,9 @@ const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
   'div',
   ExpandableBlockOwnProps & ExpandableBlockLegacyProps
 >;
-ExpandableBlockComponent.displayName = 'ExpandableBlock';
+if (process.env.NODE_ENV === 'development') {
+  ExpandableBlockComponent.displayName = 'ExpandableBlock';
+}
 
 // ----------------------------------------------------------------------------
 
@@ -144,7 +148,9 @@ const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
     </ExpandableBlockContext.Provider>
   );
 }) as PolymorphicForwardRefComponent<'div', ExpandableBlockOwnProps>;
-ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
+if (process.env.NODE_ENV === 'development') {
+  ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
+}
 
 // ----------------------------------------------------------------------------
 // ExpandableBlock.Trigger component
@@ -184,7 +190,9 @@ const ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
     </LinkBox>
   );
 }) as PolymorphicForwardRefComponent<'div', ExpandableBlockTriggerOwnProps>;
-ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
+if (process.env.NODE_ENV === 'development') {
+  ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
+}
 
 // ----------------------------------------------------------------------------
 // ExpandableBlock.ExpandIcon component
@@ -201,13 +209,17 @@ const ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
     </Icon>
   );
 }) as PolymorphicForwardRefComponent<'span'>;
-ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
+if (process.env.NODE_ENV === 'development') {
+  ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
+}
 
 // ----------------------------------------------------------------------------
 // ExpandableBlock.LabelArea component
 
 const ExpandableBlockLabelArea = polymorphic.span('iui-expandable-block-label');
-ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
+if (process.env.NODE_ENV === 'development') {
+  ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
+}
 
 // ----------------------------------------------------------------------------
 // ExpandableBlock.Title component
@@ -238,7 +250,9 @@ const ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
     </ButtonBase>
   );
 }) as PolymorphicForwardRefComponent<'button'>;
-ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
+if (process.env.NODE_ENV === 'development') {
+  ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
+}
 
 // ----------------------------------------------------------------------------
 // ExpandableBlock.Caption component
@@ -262,7 +276,9 @@ const ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
     />
   );
 }) as PolymorphicForwardRefComponent<'div'>;
-ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
+if (process.env.NODE_ENV === 'development') {
+  ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
+}
 
 // ----------------------------------------------------------------------------
 // ExpandableBlock.EndIcon component
@@ -281,7 +297,9 @@ const ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
   'span',
   React.ComponentPropsWithoutRef<typeof Icon>
 >;
-ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
+if (process.env.NODE_ENV === 'development') {
+  ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
+}
 
 // ----------------------------------------------------------------------------
 // ExpandableBlock.Content component
@@ -302,7 +320,9 @@ const ExpandableBlockContent = React.forwardRef((props, forwardedRef) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', ExpandableBlockContentOwnProps>;
-ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
+if (process.env.NODE_ENV === 'development') {
+  ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
+}
 
 /**
  * Expandable block with customizable Title, Caption, Content and EndIcon subcomponents.

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

@@ -41,13 +41,17 @@ const toDate = (dateNumber: number) => {
 const FileUploadCardIcon = polymorphic.span('iui-file-card-icon', {
   children: <SvgDocument />,
 });
-FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
+if (process.env.NODE_ENV === 'development') {
+  FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
+}
 
 // ----------------------------------------------------------------------------
 // FileUploadCard.Info component
 
 const FileUploadCardInfo = polymorphic.span('iui-file-card-text');
-FileUploadCardInfo.displayName = 'FileUploadCard.Info';
+if (process.env.NODE_ENV === 'development') {
+  FileUploadCardInfo.displayName = 'FileUploadCard.Info';
+}
 
 // ----------------------------------------------------------------------------
 // FileUploadCard.Title component
@@ -68,7 +72,9 @@ const FileUploadCardTitle = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'span'>;
-FileUploadCardTitle.displayName = 'FileUploadCard.Title';
+if (process.env.NODE_ENV === 'development') {
+  FileUploadCardTitle.displayName = 'FileUploadCard.Title';
+}
 
 // ----------------------------------------------------------------------------
 // FileUploadCard.Description component
@@ -97,13 +103,17 @@ const FileUploadCardDescription = React.forwardRef((props, ref) => {
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'span'>;
-FileUploadCardDescription.displayName = 'FileUploadCard.Description';
+if (process.env.NODE_ENV === 'development') {
+  FileUploadCardDescription.displayName = 'FileUploadCard.Description';
+}
 
 // ----------------------------------------------------------------------------
 // FileUploadCard.Action component
 
 const FileUploadCardAction = polymorphic.div('iui-file-card-action');
-FileUploadCardAction.displayName = 'FileUploadCard.Action';
+if (process.env.NODE_ENV === 'development') {
+  FileUploadCardAction.displayName = 'FileUploadCard.Action';
+}
 
 // ----------------------------------------------------------------------------
 // FileUploadCard.InputLabel component
@@ -117,7 +127,9 @@ const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
     </Anchor>
   );
 }) as PolymorphicForwardRefComponent<'label'>;
-FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
+if (process.env.NODE_ENV === 'development') {
+  FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
+}
 
 // ----------------------------------------------------------------------------
 // FileUploadCard.Input component
@@ -168,7 +180,9 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
     </>
   );
 }) as PolymorphicForwardRefComponent<'input'>;
-FileUploadCardInput.displayName = 'FileUploadCard.Input';
+if (process.env.NODE_ENV === 'development') {
+  FileUploadCardInput.displayName = 'FileUploadCard.Input';
+}
 
 // ----------------------------------------------------------------------------
 // FileUploadCard component
@@ -277,7 +291,9 @@ export const FileUploadCard = Object.assign(FileUploadCardComponent, {
   InputLabel: FileUploadCardInputLabel,
   Input: FileUploadCardInput,
 });
-FileUploadCard.displayName = 'FileUploadCard';
+if (process.env.NODE_ENV === 'development') {
+  FileUploadCard.displayName = 'FileUploadCard';
+}
 
 export const FileUploadCardContext = React.createContext<
   | {

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

@@ -67,7 +67,9 @@ const FlexComponent = React.forwardRef((props, ref) => {
     />
   );
 }) as PolymorphicForwardRefComponent<'div', FlexOwnProps>;
-FlexComponent.displayName = 'Flex';
+if (process.env.NODE_ENV === 'development') {
+  FlexComponent.displayName = 'Flex';
+}
 
 type FlexOwnProps = {
   /**
@@ -125,7 +127,9 @@ const FlexSpacer = React.forwardRef((props, ref) => {
     />
   );
 }) as PolymorphicForwardRefComponent<'div', FlexSpacerOwnProps>;
-FlexSpacer.displayName = 'Flex.Spacer';
+if (process.env.NODE_ENV === 'development') {
+  FlexSpacer.displayName = 'Flex.Spacer';
+}
 
 type FlexSpacerOwnProps = {
   /**
@@ -169,7 +173,9 @@ const FlexItem = React.forwardRef((props, ref) => {
     />
   );
 }) as PolymorphicForwardRefComponent<'div', FlexItemOwnProps>;
-FlexItem.displayName = 'Flex.Item';
+if (process.env.NODE_ENV === 'development') {
+  FlexItem.displayName = 'Flex.Item';
+}
 
 type FlexItemOwnProps = {
   /**