From 77d0d6cc959bb50c8366cac054aa186c27773f45 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Mon, 15 Jul 2024 12:15:38 -0400 Subject: [PATCH 1/3] add development checks for `displayName` --- .changeset/proud-hornets-itch.md | 5 ++ .../itwinui-react/src/core/Alert/Alert.tsx | 20 ++++-- .../src/core/Breadcrumbs/Breadcrumbs.tsx | 4 +- .../src/core/ButtonGroup/ButtonGroup.tsx | 4 +- .../src/core/ComboBox/ComboBoxEndIcon.tsx | 4 +- .../src/core/ComboBox/ComboBoxInput.tsx | 4 +- .../core/ComboBox/ComboBoxInputContainer.tsx | 4 +- .../src/core/ComboBox/ComboBoxMenu.tsx | 4 +- .../src/core/ComboBox/ComboBoxMenuItem.tsx | 4 +- .../ComboBox/ComboBoxMultipleContainer.tsx | 4 +- .../src/core/ComboBox/helpers.ts | 8 ++- .../core/ExpandableBlock/ExpandableBlock.tsx | 40 ++++++++--- .../src/core/FileUpload/FileUploadCard.tsx | 32 ++++++--- packages/itwinui-react/src/core/Flex/Flex.tsx | 12 +++- .../InputWithDecorations.tsx | 12 +++- .../src/core/LinkAction/LinkAction.tsx | 8 ++- packages/itwinui-react/src/core/List/List.tsx | 4 +- .../itwinui-react/src/core/List/ListItem.tsx | 16 +++-- .../src/core/Overlay/Overlay.tsx | 16 +++-- .../src/core/SearchBox/SearchBox.tsx | 32 ++++++--- packages/itwinui-react/src/core/Tabs/Tabs.tsx | 36 +++++++--- .../src/core/ThemeProvider/ThemeProvider.tsx | 4 +- packages/itwinui-react/src/core/Tile/Tile.tsx | 72 ++++++++++++++----- .../itwinui-react/src/core/Toast/Toaster.tsx | 8 ++- .../src/core/TransferList/TransferList.tsx | 24 +++++-- .../src/utils/components/ButtonBase.tsx | 4 +- .../src/utils/components/InputWithIcon.tsx | 4 +- .../src/utils/functions/polymorphic.tsx | 4 +- .../src/utils/hooks/useSafeContext.ts | 2 +- 29 files changed, 297 insertions(+), 98 deletions(-) create mode 100644 .changeset/proud-hornets-itch.md diff --git a/.changeset/proud-hornets-itch.md b/.changeset/proud-hornets-itch.md new file mode 100644 index 00000000000..d1be903eee7 --- /dev/null +++ b/.changeset/proud-hornets-itch.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-react': patch +--- + +Component `displayName`s have been eliminiated from the prod build. diff --git a/packages/itwinui-react/src/core/Alert/Alert.tsx b/packages/itwinui-react/src/core/Alert/Alert.tsx index 66ff9a87937..d23ac662481 100644 --- a/packages/itwinui-react/src/core/Alert/Alert.tsx +++ b/packages/itwinui-react/src/core/Alert/Alert.tsx @@ -75,7 +75,9 @@ const AlertComponent = React.forwardRef((props, forwardedRef) => { ); }) 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) => { ); }) as PolymorphicForwardRefComponent<'div', AlertOwnProps>; -AlertWrapper.displayName = 'Alert.Wrapper'; +if (process.env.NODE_ENV === 'development') { + AlertWrapper.displayName = 'Alert.Wrapper'; +} // ---------------------------------------------------------------------------- // Alert.Icon component @@ -119,7 +123,9 @@ const AlertIcon = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'span', React.ComponentProps>; -AlertIcon.displayName = 'Alert.Icon'; +if (process.env.NODE_ENV === 'development') { + AlertIcon.displayName = 'Alert.Icon'; +} // ---------------------------------------------------------------------------- // Alert.Message component @@ -147,7 +153,9 @@ const AlertAction = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'a'>; -AlertAction.displayName = 'Alert.Action'; +if (process.env.NODE_ENV === 'development') { + AlertAction.displayName = 'Alert.Action'; +} // ---------------------------------------------------------------------------- // Alert.CloseButton component @@ -167,7 +175,9 @@ const AlertCloseButton = React.forwardRef((props, ref) => { ); }) 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 diff --git a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx index 9f16c08bd24..8d1dc8be6c1 100644 --- a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx +++ b/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'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx b/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx index 9d6eee4a7df..6e4dc7488b8 100644 --- a/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx +++ b/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx @@ -21,7 +21,9 @@ import { export const ButtonGroupContext = React.createContext( undefined, ); -ButtonGroupContext.displayName = 'ButtonGroupContext'; +if (process.env.NODE_ENV === 'development') { + ButtonGroupContext.displayName = 'ButtonGroupContext'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBoxEndIcon.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBoxEndIcon.tsx index 3c2b66e8ff3..61ecce702a4 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBoxEndIcon.tsx +++ b/packages/itwinui-react/src/core/ComboBox/ComboBoxEndIcon.tsx @@ -34,4 +34,6 @@ export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'span', ComboBoxEndIconProps>; -ComboBoxEndIcon.displayName = 'ComboBoxEndIcon'; +if (process.env.NODE_ENV === 'development') { + ComboBoxEndIcon.displayName = 'ComboBoxEndIcon'; +} diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBoxInput.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBoxInput.tsx index f573b64c951..704e7642cc5 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBoxInput.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBoxInputContainer.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBoxInputContainer.tsx index 82012b8e5d9..371874a6a36 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBoxInputContainer.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBoxMenu.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBoxMenu.tsx index a17cb38e69a..f7f40a76281 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBoxMenu.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBoxMenuItem.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBoxMenuItem.tsx index 3cc09d372f5..89689d5bb56 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBoxMenuItem.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBoxMultipleContainer.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBoxMultipleContainer.tsx index 98724315473..27d01017576 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBoxMultipleContainer.tsx +++ b/packages/itwinui-react/src/core/ComboBox/ComboBoxMultipleContainer.tsx @@ -15,4 +15,6 @@ export const ComboBoxMultipleContainer = React.forwardRef((props, ref) => { return ; }) as PolymorphicForwardRefComponent<'div', ComboBoxMultipleContainerProps>; -ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer'; +if (process.env.NODE_ENV === 'development') { + ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer'; +} diff --git a/packages/itwinui-react/src/core/ComboBox/helpers.ts b/packages/itwinui-react/src/core/ComboBox/helpers.ts index 8343a5b1a74..27437f13c1e 100644 --- a/packages/itwinui-react/src/core/ComboBox/helpers.ts +++ b/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 = { isOpen: boolean; @@ -34,4 +36,6 @@ type ComboBoxStateContextProps = { export const ComboBoxStateContext = React.createContext< ComboBoxStateContextProps | undefined >(undefined); -ComboBoxStateContext.displayName = 'ComboBoxStateContext'; +if (process.env.NODE_ENV === 'development') { + ComboBoxStateContext.displayName = 'ComboBoxStateContext'; +} diff --git a/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx b/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx index 5c02385e64c..da7331ac078 100644 --- a/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx +++ b/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) => { ); }) 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) => { ); }) 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) => { ); }) 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) => { ); }) 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 >; -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) => { ); }) 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. diff --git a/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx b/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx index 754fb2cba6a..52e1c9d46e4 100644 --- a/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx +++ b/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: , }); -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) => { ); }) 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) => { ); }) 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) => { ); }) 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< | { diff --git a/packages/itwinui-react/src/core/Flex/Flex.tsx b/packages/itwinui-react/src/core/Flex/Flex.tsx index 95e76b07f79..03811000ff7 100644 --- a/packages/itwinui-react/src/core/Flex/Flex.tsx +++ b/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 = { /** diff --git a/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.tsx b/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.tsx index 4cc8703e224..6a7f5bcd49b 100644 --- a/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.tsx +++ b/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.tsx @@ -55,7 +55,9 @@ const InputWithDecorationsInput = React.forwardRef((props, ref) => { /> ); }) as PolymorphicForwardRefComponent<'input', InputProps>; -InputWithDecorationsInput.displayName = 'InputWithDecorations.Input'; +if (process.env.NODE_ENV === 'development') { + InputWithDecorationsInput.displayName = 'InputWithDecorations.Input'; +} // ---------------------------------------------------------------------------- @@ -79,12 +81,16 @@ const InputWithDecorationsButton = React.forwardRef((props, ref) => { 'button', React.ComponentProps >; -InputWithDecorationsButton.displayName = 'InputWithDecorations.Button'; +if (process.env.NODE_ENV === 'development') { + InputWithDecorationsButton.displayName = 'InputWithDecorations.Button'; +} // ---------------------------------------------------------------------------- const InputWithDecorationsIcon = InputFlexContainerIcon; -InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon'; +if (process.env.NODE_ENV === 'development') { + InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/LinkAction/LinkAction.tsx b/packages/itwinui-react/src/core/LinkAction/LinkAction.tsx index 50c143e6e29..fb1eb5a3226 100644 --- a/packages/itwinui-react/src/core/LinkAction/LinkAction.tsx +++ b/packages/itwinui-react/src/core/LinkAction/LinkAction.tsx @@ -29,7 +29,9 @@ export const LinkAction = React.forwardRef((props, forwardedRef) => { /> ); }) as PolymorphicForwardRefComponent<'a'>; -LinkAction.displayName = 'LinkAction'; +if (process.env.NODE_ENV === 'development') { + LinkAction.displayName = 'LinkAction'; +} /** * Polymorphic link box component. @@ -43,4 +45,6 @@ LinkAction.displayName = 'LinkAction'; * */ export const LinkBox = polymorphic.div('iui-link-box'); -LinkBox.displayName = 'LinkBox'; +if (process.env.NODE_ENV === 'development') { + LinkBox.displayName = 'LinkBox'; +} diff --git a/packages/itwinui-react/src/core/List/List.tsx b/packages/itwinui-react/src/core/List/List.tsx index 629078c6323..e872cdd082e 100644 --- a/packages/itwinui-react/src/core/List/List.tsx +++ b/packages/itwinui-react/src/core/List/List.tsx @@ -5,4 +5,6 @@ import { polymorphic } from '../../utils/index.js'; export const List = polymorphic.ul('iui-list', { role: 'list' }); -List.displayName = 'List'; +if (process.env.NODE_ENV === 'development') { + List.displayName = 'List'; +} diff --git a/packages/itwinui-react/src/core/List/ListItem.tsx b/packages/itwinui-react/src/core/List/ListItem.tsx index 8e85d041ec4..ea4aedc29f7 100644 --- a/packages/itwinui-react/src/core/List/ListItem.tsx +++ b/packages/itwinui-react/src/core/List/ListItem.tsx @@ -33,7 +33,9 @@ const ListItemComponent = React.forwardRef((props, ref) => { /> ); }) as PolymorphicForwardRefComponent<'li', ListItemOwnProps>; -ListItemComponent.displayName = 'ListItem'; +if (process.env.NODE_ENV === 'development') { + ListItemComponent.displayName = 'ListItem'; +} export type ListItemOwnProps = { /** @@ -67,7 +69,9 @@ export type ListItemOwnProps = { // ---------------------------------------------------------------------------- const ListItemIcon = polymorphic('iui-list-item-icon'); -ListItemIcon.displayName = 'ListItem.Icon'; +if (process.env.NODE_ENV === 'development') { + ListItemIcon.displayName = 'ListItem.Icon'; +} // ---------------------------------------------------------------------------- @@ -77,12 +81,16 @@ ListItemContent.displayName = 'ListItem.Content'; // ---------------------------------------------------------------------------- const ListItemDescription = polymorphic('iui-list-item-description'); -ListItemDescription.displayName = 'ListItem.Description'; +if (process.env.NODE_ENV === 'development') { + ListItemDescription.displayName = 'ListItem.Description'; +} // ---------------------------------------------------------------------------- const ListItemAction = LinkAction; -ListItemAction.displayName = 'ListItem.Action'; +if (process.env.NODE_ENV === 'development') { + ListItemAction.displayName = 'ListItem.Action'; +} // ---------------------------------------------------------------------------- // Exported compound component diff --git a/packages/itwinui-react/src/core/Overlay/Overlay.tsx b/packages/itwinui-react/src/core/Overlay/Overlay.tsx index 76cad96e2e1..c8934a6861a 100644 --- a/packages/itwinui-react/src/core/Overlay/Overlay.tsx +++ b/packages/itwinui-react/src/core/Overlay/Overlay.tsx @@ -31,7 +31,9 @@ const OverlayComponent = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', OverlayComponentProps>; -OverlayComponent.displayName = 'Overlay'; +if (process.env.NODE_ENV === 'development') { + OverlayComponent.displayName = 'Overlay'; +} // -------------------------------------------------------------------------------- @@ -44,17 +46,23 @@ const OverlayHiddenContent = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div'>; -OverlayHiddenContent.displayName = 'Overlay.HiddenContent'; +if (process.env.NODE_ENV === 'development') { + OverlayHiddenContent.displayName = 'Overlay.HiddenContent'; +} // -------------------------------------------------------------------------------- const OverlayOverlay = polymorphic('iui-overlay'); -OverlayOverlay.displayName = 'Overlay.Overlay'; +if (process.env.NODE_ENV === 'development') { + OverlayOverlay.displayName = 'Overlay.Overlay'; +} // -------------------------------------------------------------------------------- const OverlayWrapper = polymorphic('iui-overlay-wrapper'); -OverlayWrapper.displayName = 'Overlay.Wrapper'; +if (process.env.NODE_ENV === 'development') { + OverlayWrapper.displayName = 'Overlay.Wrapper'; +} // -------------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx b/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx index 0daab693b84..a31dd33f60c 100644 --- a/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx +++ b/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx @@ -198,7 +198,9 @@ const SearchBoxCollapsedState = ({ return <>{children ?? }; }; -SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState'; +if (process.env.NODE_ENV === 'development') { + SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState'; +} // ---------------------------------------------------------------------------- @@ -215,7 +217,9 @@ const SearchBoxExpandedState = ({ return <>{children}; }; -SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState'; +if (process.env.NODE_ENV === 'development') { + SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState'; +} // ---------------------------------------------------------------------------- @@ -233,7 +237,9 @@ const SearchBoxIcon = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'span', IconProps>; -SearchBoxIcon.displayName = 'SearchBox.Icon'; +if (process.env.NODE_ENV === 'development') { + SearchBoxIcon.displayName = 'SearchBox.Icon'; +} // ---------------------------------------------------------------------------- @@ -262,7 +268,9 @@ const SearchBoxInput = React.forwardRef((props, ref) => { /> ); }) as PolymorphicForwardRefComponent<'input'>; -SearchBoxInput.displayName = 'SearchBox.Input'; +if (process.env.NODE_ENV === 'development') { + SearchBoxInput.displayName = 'SearchBox.Input'; +} // ---------------------------------------------------------------------------- @@ -281,7 +289,9 @@ const SearchBoxButton = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'button', IconButtonProps>; -SearchBoxButton.displayName = 'SearchBox.Button'; +if (process.env.NODE_ENV === 'development') { + SearchBoxButton.displayName = 'SearchBox.Button'; +} // ---------------------------------------------------------------------------- @@ -307,7 +317,9 @@ const SearchBoxCollapseButton = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'button', IconButtonProps>; -SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton'; +if (process.env.NODE_ENV === 'development') { + SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton'; +} // ---------------------------------------------------------------------------- @@ -335,7 +347,9 @@ const SearchBoxExpandButton = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'button', IconButtonProps>; -SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton'; +if (process.env.NODE_ENV === 'development') { + SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton'; +} // ---------------------------------------------------------------------------- @@ -390,4 +404,6 @@ export const SearchBox = Object.assign(SearchBoxComponent, { CollapsedState: SearchBoxCollapsedState, }); -SearchBox.displayName = 'SearchBox'; +if (process.env.NODE_ENV === 'development') { + SearchBox.displayName = 'SearchBox'; +} diff --git a/packages/itwinui-react/src/core/Tabs/Tabs.tsx b/packages/itwinui-react/src/core/Tabs/Tabs.tsx index 23de277d1d9..45d5a737080 100644 --- a/packages/itwinui-react/src/core/Tabs/Tabs.tsx +++ b/packages/itwinui-react/src/core/Tabs/Tabs.tsx @@ -130,7 +130,9 @@ const TabsWrapper = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', TabsWrapperOwnProps>; -TabsWrapper.displayName = 'Tabs.Wrapper'; +if (process.env.NODE_ENV === 'development') { + TabsWrapper.displayName = 'Tabs.Wrapper'; +} // ---------------------------------------------------------------------------- // Tabs.TabList component @@ -185,7 +187,9 @@ const TabList = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', TabListOwnProps>; -TabList.displayName = 'Tabs.TabList'; +if (process.env.NODE_ENV === 'development') { + TabList.displayName = 'Tabs.TabList'; +} // ---------------------------------------------------------------------------- // Tabs.Tab component @@ -367,7 +371,9 @@ const Tab = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'button', TabOwnProps>; -Tab.displayName = 'Tabs.Tab'; +if (process.env.NODE_ENV === 'development') { + Tab.displayName = 'Tabs.Tab'; +} // ---------------------------------------------------------------------------- // Tabs.TabIcon component @@ -381,13 +387,17 @@ const TabIcon = React.forwardRef((props, ref) => { /> ); }) as PolymorphicForwardRefComponent<'span', React.ComponentProps>; -TabIcon.displayName = 'Tabs.TabIcon'; +if (process.env.NODE_ENV === 'development') { + TabIcon.displayName = 'Tabs.TabIcon'; +} // ---------------------------------------------------------------------------- // Tabs.TabLabel component const TabLabel = polymorphic.span('iui-tab-label'); -TabLabel.displayName = 'Tabs.TabLabel'; +if (process.env.NODE_ENV === 'development') { + TabLabel.displayName = 'Tabs.TabLabel'; +} // ---------------------------------------------------------------------------- // Tabs.TabDescription component @@ -413,7 +423,9 @@ const TabDescription = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'span'>; -TabDescription.displayName = 'Tabs.TabDescription'; +if (process.env.NODE_ENV === 'development') { + TabDescription.displayName = 'Tabs.TabDescription'; +} // ---------------------------------------------------------------------------- // Tabs.Actions component @@ -439,7 +451,9 @@ const TabsActions = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', TabsActionsOwnProps>; -TabsActions.displayName = 'Tabs.Actions'; +if (process.env.NODE_ENV === 'development') { + TabsActions.displayName = 'Tabs.Actions'; +} // ---------------------------------------------------------------------------- // Tabs.Panel component @@ -474,7 +488,9 @@ const TabsPanel = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', TabsPanelOwnProps>; -TabsPanel.displayName = 'Tabs.Panel'; +if (process.env.NODE_ENV === 'development') { + TabsPanel.displayName = 'Tabs.Panel'; +} // ---------------------------------------------------------------------------- // Tabs legacy component @@ -600,7 +616,9 @@ const LegacyTabsComponent = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', TabsLegacyProps>; -LegacyTabsComponent.displayName = 'Tabs'; +if (process.env.NODE_ENV === 'development') { + LegacyTabsComponent.displayName = 'Tabs'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx b/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx index 8913c2cf1ab..4bcac443fce 100644 --- a/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx +++ b/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx @@ -205,7 +205,9 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', ThemeProviderOwnProps>; -ThemeProvider.displayName = 'ThemeProvider'; +if (process.env.NODE_ENV === 'development') { + ThemeProvider.displayName = 'ThemeProvider'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/Tile/Tile.tsx b/packages/itwinui-react/src/core/Tile/Tile.tsx index d1142768ce4..fefac749d51 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.tsx @@ -61,7 +61,9 @@ const TileContext = React.createContext< } | undefined >(undefined); -TileContext.displayName = 'TileContext'; +if (process.env.NODE_ENV === 'development') { + TileContext.displayName = 'TileContext'; +} // ---------------------------------------------------------------------------- // Main Tile component @@ -148,7 +150,9 @@ const TileWrapper = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', TileWrapperOwnProps>; -TileWrapper.displayName = 'Tile.Wrapper'; +if (process.env.NODE_ENV === 'development') { + TileWrapper.displayName = 'Tile.Wrapper'; +} // ---------------------------------------------------------------------------- // Tile.Action component @@ -175,13 +179,17 @@ const TileAction = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'a'>; -TileAction.displayName = 'Tile.Action'; +if (process.env.NODE_ENV === 'development') { + TileAction.displayName = 'Tile.Action'; +} // ---------------------------------------------------------------------------- // Tile.ThumbnailArea component const TileThumbnailArea = polymorphic('iui-tile-thumbnail'); -TileThumbnailArea.displayName = 'Tile.ThumbnailArea'; +if (process.env.NODE_ENV === 'development') { + TileThumbnailArea.displayName = 'Tile.ThumbnailArea'; +} // ---------------------------------------------------------------------------- // Tile.ThumbnailPicture component @@ -219,19 +227,25 @@ const TileThumbnailPicture = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', TileThumbnailPictureOwnProps>; -TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture'; +if (process.env.NODE_ENV === 'development') { + TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture'; +} // ---------------------------------------------------------------------------- // Tile.QuickAction component const TileQuickAction = polymorphic('iui-tile-thumbnail-quick-action'); -TileQuickAction.displayName = 'Tile.QuickAction'; +if (process.env.NODE_ENV === 'development') { + TileQuickAction.displayName = 'Tile.QuickAction'; +} // ---------------------------------------------------------------------------- // Tile.TypeIndicator component const TileTypeIndicator = polymorphic('iui-tile-thumbnail-type-indicator'); -TileTypeIndicator.displayName = 'Tile.TypeIndicator'; +if (process.env.NODE_ENV === 'development') { + TileTypeIndicator.displayName = 'Tile.TypeIndicator'; +} // ---------------------------------------------------------------------------- // Tile.IconButton component @@ -253,13 +267,17 @@ const TileIconButton = React.forwardRef((props, forwardedRef) => { 'button', React.ComponentPropsWithoutRef >; -TileIconButton.displayName = 'Tile.IconButton'; +if (process.env.NODE_ENV === 'development') { + TileIconButton.displayName = 'Tile.IconButton'; +} // ---------------------------------------------------------------------------- // Tile.BadgeContainer component const TileBadgeContainer = polymorphic('iui-tile-thumbnail-badge-container'); -TileBadgeContainer.displayName = 'Tile.BadgeContainer'; +if (process.env.NODE_ENV === 'development') { + TileBadgeContainer.displayName = 'Tile.BadgeContainer'; +} // ---------------------------------------------------------------------------- // Tile.Name component @@ -279,7 +297,9 @@ const TileName = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', TileNameOwnProps>; -TileBadgeContainer.displayName = 'Tile.Name'; +if (process.env.NODE_ENV === 'development') { + TileBadgeContainer.displayName = 'Tile.Name'; +} // ---------------------------------------------------------------------------- // Tile.NameIcon component @@ -314,31 +334,41 @@ const TileNameIcon = React.forwardRef((props, forwardedRef) => { ) : null; }) as PolymorphicForwardRefComponent<'div'>; -TileNameIcon.displayName = 'Tile.NameIcon'; +if (process.env.NODE_ENV === 'development') { + TileNameIcon.displayName = 'Tile.NameIcon'; +} // ---------------------------------------------------------------------------- // Tile.NameLabel component const TileNameLabel = polymorphic.span('iui-tile-name-label'); -TileNameLabel.displayName = 'Tile.NameLabel'; +if (process.env.NODE_ENV === 'development') { + TileNameLabel.displayName = 'Tile.NameLabel'; +} // ---------------------------------------------------------------------------- // Tile.ContentArea component const TileContentArea = polymorphic('iui-tile-content'); -TileContentArea.displayName = 'Tile.ContentArea'; +if (process.env.NODE_ENV === 'development') { + TileContentArea.displayName = 'Tile.ContentArea'; +} // ---------------------------------------------------------------------------- // Tile.Description component const TileDescription = polymorphic('iui-tile-description'); -TileDescription.displayName = 'Tile.Description'; +if (process.env.NODE_ENV === 'development') { + TileDescription.displayName = 'Tile.Description'; +} // ---------------------------------------------------------------------------- // Tile.Metadata component const TileMetadata = polymorphic('iui-tile-metadata'); -TileMetadata.displayName = 'Tile.Metadata'; +if (process.env.NODE_ENV === 'development') { + TileMetadata.displayName = 'Tile.Metadata'; +} // ---------------------------------------------------------------------------- // Tile.MoreOptions component @@ -388,13 +418,17 @@ const TileMoreOptions = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', TileMoreOptionsOwnProps>; -TileMoreOptions.displayName = 'Tile.MoreOptions'; +if (process.env.NODE_ENV === 'development') { + TileMoreOptions.displayName = 'Tile.MoreOptions'; +} // ---------------------------------------------------------------------------- // Tile.Buttons component const TileButtons = polymorphic('iui-tile-buttons'); -TileButtons.displayName = 'Tile.Buttons'; +if (process.env.NODE_ENV === 'development') { + TileButtons.displayName = 'Tile.Buttons'; +} // ---------------------------------------------------------------------------- type TileLegacyProps = { @@ -576,7 +610,9 @@ const TileComponent = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', TileLegacyProps>; -TileComponent.displayName = 'Tile'; +if (process.env.NODE_ENV === 'development') { + TileComponent.displayName = 'Tile'; +} /** * Tile with customizable Thumbnail, Name, Content and Buttons subcomponents diff --git a/packages/itwinui-react/src/core/Toast/Toaster.tsx b/packages/itwinui-react/src/core/Toast/Toaster.tsx index 383bcbeaac9..bdc6b2f13c4 100644 --- a/packages/itwinui-react/src/core/Toast/Toaster.tsx +++ b/packages/itwinui-react/src/core/Toast/Toaster.tsx @@ -152,7 +152,9 @@ const toastReducer = (state: ToasterState, action: ToasterAction) => { export const ToasterStateContext = React.createContext< ToasterState | undefined >(undefined); -ToasterStateContext.displayName = 'ToasterStateContext'; +if (process.env.NODE_ENV === 'development') { + ToasterStateContext.displayName = 'ToasterStateContext'; +} type ToasterState = { toasts: ToastProps[]; settings: ToasterSettings }; @@ -161,7 +163,9 @@ type ToasterState = { toasts: ToastProps[]; settings: ToasterSettings }; const ToasterDispatchContext = React.createContext< React.Dispatch | undefined >(undefined); -ToasterDispatchContext.displayName = 'ToasterDispatchContext'; +if (process.env.NODE_ENV === 'development') { + ToasterDispatchContext.displayName = 'ToasterDispatchContext'; +} type ToasterAction = | { type: 'add'; toast: ToastProps } diff --git a/packages/itwinui-react/src/core/TransferList/TransferList.tsx b/packages/itwinui-react/src/core/TransferList/TransferList.tsx index 67e70d52373..b6eb90e80f6 100644 --- a/packages/itwinui-react/src/core/TransferList/TransferList.tsx +++ b/packages/itwinui-react/src/core/TransferList/TransferList.tsx @@ -21,7 +21,9 @@ import { Label } from '../Label/Label.js'; // TransferListComponent const TransferListComponent = polymorphic('iui-transfer-list-wrapper'); -TransferListComponent.displayName = 'TransferList'; +if (process.env.NODE_ENV === 'development') { + TransferListComponent.displayName = 'TransferList'; +} // ---------------------------------------------------------------------------- // TransferList.ListboxWrapper component @@ -47,7 +49,9 @@ const TransferListListboxWrapper = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', TransferListListboxWrapperOwnProps>; -TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper'; +if (process.env.NODE_ENV === 'development') { + TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper'; +} // ---------------------------------------------------------------------------- // TransferList.Listbox component @@ -124,7 +128,9 @@ const TransferListListbox = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'ul', TransferListListboxOwnProps>; -TransferListListbox.displayName = 'TransferList.Listbox'; +if (process.env.NODE_ENV === 'development') { + TransferListListbox.displayName = 'TransferList.Listbox'; +} // ---------------------------------------------------------------------------- // TransferList.Item component @@ -182,7 +188,9 @@ const TransferListItem = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'li', TransferListItemOwnProps>; -TransferListItem.displayName = 'TransferList.Item'; +if (process.env.NODE_ENV === 'development') { + TransferListItem.displayName = 'TransferList.Item'; +} // ---------------------------------------------------------------------------- // TransferList.ListboxLabel component @@ -211,7 +219,9 @@ const TransferListListboxLabel = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', TransferListListboxLabelOwnProps>; -TransferListListboxLabel.displayName = 'TransferList.ListboxLabel'; +if (process.env.NODE_ENV === 'development') { + TransferListListboxLabel.displayName = 'TransferList.ListboxLabel'; +} // ---------------------------------------------------------------------------- // TransferList.Toolbar component @@ -219,7 +229,9 @@ TransferListListboxLabel.displayName = 'TransferList.ListboxLabel'; const TransferListToolbar = polymorphic('iui-transfer-list-toolbar', { role: 'toolbar', }); -TransferListToolbar.displayName = 'TransferList.Toolbar'; +if (process.env.NODE_ENV === 'development') { + TransferListToolbar.displayName = 'TransferList.Toolbar'; +} /** * The TransferList component is used to display a list within a box diff --git a/packages/itwinui-react/src/utils/components/ButtonBase.tsx b/packages/itwinui-react/src/utils/components/ButtonBase.tsx index 13e073d4176..82a8e29f7bc 100644 --- a/packages/itwinui-react/src/utils/components/ButtonBase.tsx +++ b/packages/itwinui-react/src/utils/components/ButtonBase.tsx @@ -49,7 +49,9 @@ export const ButtonBase = React.forwardRef((props, forwardedRef) => { /> ); }) as PolymorphicForwardRefComponent<'button', ButtonBaseProps>; -ButtonBase.displayName = 'ButtonBase'; +if (process.env.NODE_ENV === 'development') { + ButtonBase.displayName = 'ButtonBase'; +} type ButtonBaseProps = { /** diff --git a/packages/itwinui-react/src/utils/components/InputWithIcon.tsx b/packages/itwinui-react/src/utils/components/InputWithIcon.tsx index 496060a2df6..3b9ab8056aa 100644 --- a/packages/itwinui-react/src/utils/components/InputWithIcon.tsx +++ b/packages/itwinui-react/src/utils/components/InputWithIcon.tsx @@ -6,4 +6,6 @@ import { polymorphic } from '../functions/polymorphic.js'; /** @private */ export const InputWithIcon = polymorphic.div('iui-input-with-icon'); -InputWithIcon.displayName = 'InputWithIcon'; +if (process.env.NODE_ENV === 'development') { + InputWithIcon.displayName = 'InputWithIcon'; +} diff --git a/packages/itwinui-react/src/utils/functions/polymorphic.tsx b/packages/itwinui-react/src/utils/functions/polymorphic.tsx index f54c2d39e40..1c78436abfa 100644 --- a/packages/itwinui-react/src/utils/functions/polymorphic.tsx +++ b/packages/itwinui-react/src/utils/functions/polymorphic.tsx @@ -38,7 +38,9 @@ const _base = ( return ; }) as PolymorphicForwardRefComponent>; - Comp.displayName = getDisplayNameFromClass(className); + if (process.env.NODE_ENV === 'development') { + Comp.displayName = getDisplayNameFromClass(className); + } return Comp; }; diff --git a/packages/itwinui-react/src/utils/hooks/useSafeContext.ts b/packages/itwinui-react/src/utils/hooks/useSafeContext.ts index ed86c19c9f3..f3f748b5812 100644 --- a/packages/itwinui-react/src/utils/hooks/useSafeContext.ts +++ b/packages/itwinui-react/src/utils/hooks/useSafeContext.ts @@ -11,7 +11,7 @@ import * as React from 'react'; export const useSafeContext = (context: React.Context) => { const value = React.useContext(context); if (!value) { - throw new Error(`${context.displayName} is undefined`); + throw new Error(`${context.displayName || 'Context'} is undefined`); } return value!; // eslint-disable-line @typescript-eslint/no-non-null-assertion -- we already checked for undefined }; From 514353a34606095d1b9aaff5727b9b99e8c63505 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Mon, 15 Jul 2024 12:58:25 -0400 Subject: [PATCH 2/3] add missing `displayName`s --- .changeset/real-jokes-repair.md | 5 +++++ packages/itwinui-react/src/core/Avatar/Avatar.tsx | 3 +++ .../src/core/AvatarGroup/AvatarGroup.tsx | 3 +++ .../itwinui-react/src/core/Backdrop/Backdrop.tsx | 3 +++ packages/itwinui-react/src/core/Badge/Badge.tsx | 3 +++ .../src/core/Breadcrumbs/Breadcrumbs.tsx | 3 +++ .../src/core/ButtonGroup/ButtonGroup.tsx | 3 +++ packages/itwinui-react/src/core/Buttons/Button.tsx | 3 +++ .../src/core/Buttons/DropdownButton.tsx | 3 +++ .../itwinui-react/src/core/Buttons/IconButton.tsx | 3 +++ .../itwinui-react/src/core/Buttons/IdeasButton.tsx | 3 +++ .../itwinui-react/src/core/Buttons/SplitButton.tsx | 3 +++ .../itwinui-react/src/core/Carousel/Carousel.tsx | 3 +++ .../src/core/Carousel/CarouselContext.tsx | 3 +++ .../itwinui-react/src/core/Carousel/CarouselDot.tsx | 3 +++ .../src/core/Carousel/CarouselDotsList.tsx | 3 +++ .../src/core/Carousel/CarouselNavigation.tsx | 9 +++++++++ .../src/core/Carousel/CarouselSlide.tsx | 3 +++ .../src/core/Carousel/CarouselSlider.tsx | 3 +++ .../itwinui-react/src/core/Checkbox/Checkbox.tsx | 3 +++ .../src/core/ColorPicker/ColorBuilder.tsx | 3 +++ .../src/core/ColorPicker/ColorInputPanel.tsx | 3 +++ .../src/core/ColorPicker/ColorPalette.tsx | 3 +++ .../src/core/ColorPicker/ColorPicker.tsx | 3 +++ .../src/core/ColorPicker/ColorSwatch.tsx | 3 +++ .../itwinui-react/src/core/ComboBox/ComboBox.tsx | 3 +++ .../itwinui-react/src/core/DatePicker/DatePicker.tsx | 3 +++ packages/itwinui-react/src/core/Dialog/Dialog.tsx | 3 +++ .../itwinui-react/src/core/Dialog/DialogBackdrop.tsx | 3 +++ .../src/core/Dialog/DialogButtonBar.tsx | 3 +++ .../itwinui-react/src/core/Dialog/DialogContent.tsx | 3 +++ .../itwinui-react/src/core/Dialog/DialogMain.tsx | 3 +++ .../itwinui-react/src/core/Dialog/DialogTitleBar.tsx | 3 +++ .../src/core/Dialog/DialogTitleBarTitle.tsx | 7 ++++++- packages/itwinui-react/src/core/Divider/Divider.tsx | 3 +++ .../src/core/DropdownMenu/DropdownMenu.tsx | 3 +++ .../itwinui-react/src/core/Fieldset/Fieldset.tsx | 3 +++ .../src/core/FileUpload/FileEmptyCard.tsx | 9 +++++++++ .../itwinui-react/src/core/FileUpload/FileUpload.tsx | 3 +++ .../src/core/FileUpload/FileUploadCard.tsx | 3 +++ .../src/core/FileUpload/FileUploadTemplate.tsx | 3 +++ packages/itwinui-react/src/core/Footer/Footer.tsx | 3 +++ .../itwinui-react/src/core/Footer/FooterItem.tsx | 3 +++ .../itwinui-react/src/core/Footer/FooterList.tsx | 3 +++ .../src/core/Footer/FooterSeparator.tsx | 3 +++ packages/itwinui-react/src/core/Header/Header.tsx | 3 +++ .../src/core/Header/HeaderBreadcrumbs.tsx | 3 +++ .../itwinui-react/src/core/Header/HeaderButton.tsx | 3 +++ .../itwinui-react/src/core/Header/HeaderLogo.tsx | 3 +++ packages/itwinui-react/src/core/Icon/Icon.tsx | 3 +++ .../src/core/InformationPanel/InformationPanel.tsx | 3 +++ .../core/InformationPanel/InformationPanelBody.tsx | 3 +++ .../InformationPanel/InformationPanelContent.tsx | 3 +++ .../core/InformationPanel/InformationPanelHeader.tsx | 3 +++ .../InformationPanel/InformationPanelWrapper.tsx | 3 +++ packages/itwinui-react/src/core/Input/Input.tsx | 3 +++ .../itwinui-react/src/core/InputGrid/InputGrid.tsx | 3 +++ .../itwinui-react/src/core/InputGroup/InputGroup.tsx | 3 +++ .../InputWithDecorations/InputWithDecorations.tsx | 6 ++++++ packages/itwinui-react/src/core/Label/Label.tsx | 3 +++ .../src/core/LabeledInput/LabeledInput.tsx | 3 +++ .../src/core/LabeledSelect/LabeledSelect.tsx | 3 +++ .../src/core/LabeledTextarea/LabeledTextarea.tsx | 3 +++ packages/itwinui-react/src/core/Menu/MenuDivider.tsx | 3 +++ .../itwinui-react/src/core/Menu/MenuExtraContent.tsx | 3 +++ packages/itwinui-react/src/core/Menu/MenuItem.tsx | 3 +++ .../itwinui-react/src/core/Menu/MenuItemSkeleton.tsx | 3 +++ packages/itwinui-react/src/core/Modal/Modal.tsx | 3 +++ .../itwinui-react/src/core/Modal/ModalButtonBar.tsx | 3 +++ .../itwinui-react/src/core/Modal/ModalContent.tsx | 3 +++ .../src/core/NonIdealState/ErrorPage.tsx | 3 +++ .../src/core/NonIdealState/NonIdealState.tsx | 3 +++ .../core/NotificationMarker/NotificationMarker.tsx | 3 +++ packages/itwinui-react/src/core/Popover/Popover.tsx | 3 +++ .../src/core/ProgressIndicators/ProgressLinear.tsx | 3 +++ .../src/core/ProgressIndicators/ProgressRadial.tsx | 3 +++ packages/itwinui-react/src/core/Radio/Radio.tsx | 3 +++ .../itwinui-react/src/core/RadioTiles/RadioTile.tsx | 3 +++ .../src/core/RadioTiles/RadioTileGroup.tsx | 3 +++ packages/itwinui-react/src/core/Select/Select.tsx | 3 +++ .../src/core/SideNavigation/SideNavigation.tsx | 3 +++ .../src/core/SideNavigation/SidenavButton.tsx | 3 +++ .../src/core/SideNavigation/SidenavSubmenu.tsx | 3 +++ .../src/core/SideNavigation/SidenavSubmenuHeader.tsx | 3 +++ .../src/core/SkipToContentLink/SkipToContentLink.tsx | 3 +++ packages/itwinui-react/src/core/Slider/Slider.tsx | 3 +++ .../src/core/StatusMessage/StatusMessage.tsx | 3 +++ packages/itwinui-react/src/core/Stepper/Stepper.tsx | 3 +++ .../src/core/Stepper/WorkflowDiagram.tsx | 3 +++ packages/itwinui-react/src/core/Surface/Surface.tsx | 12 ++++++++++++ packages/itwinui-react/src/core/Table/Table.tsx | 3 +++ .../src/core/Table/cells/DefaultCell.tsx | 3 +++ .../src/core/Table/cells/EditableCell.tsx | 3 +++ packages/itwinui-react/src/core/Tabs/Tabs.tsx | 7 +++++++ packages/itwinui-react/src/core/Tag/Tag.tsx | 3 +++ packages/itwinui-react/src/core/Tag/TagContainer.tsx | 3 +++ .../itwinui-react/src/core/Textarea/Textarea.tsx | 3 +++ .../itwinui-react/src/core/TimePicker/TimePicker.tsx | 3 +++ .../src/core/ToggleSwitch/ToggleSwitch.tsx | 3 +++ packages/itwinui-react/src/core/Tooltip/Tooltip.tsx | 3 +++ .../src/core/TransferList/TransferList.tsx | 3 +++ packages/itwinui-react/src/core/Tree/Tree.tsx | 3 +++ packages/itwinui-react/src/core/Tree/TreeNode.tsx | 3 +++ .../itwinui-react/src/core/Tree/TreeNodeExpander.tsx | 3 +++ .../itwinui-react/src/core/Typography/Anchor.tsx | 3 +++ .../itwinui-react/src/core/Typography/Blockquote.tsx | 3 +++ packages/itwinui-react/src/core/Typography/Code.tsx | 3 +++ packages/itwinui-react/src/core/Typography/Kbd.tsx | 3 +++ packages/itwinui-react/src/core/Typography/Text.tsx | 3 +++ .../src/core/VisuallyHidden/VisuallyHidden.tsx | 3 +++ .../src/utils/components/MiddleTextTruncation.tsx | 3 +++ 111 files changed, 366 insertions(+), 1 deletion(-) create mode 100644 .changeset/real-jokes-repair.md diff --git a/.changeset/real-jokes-repair.md b/.changeset/real-jokes-repair.md new file mode 100644 index 00000000000..0dc2810a010 --- /dev/null +++ b/.changeset/real-jokes-repair.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-react': patch +--- + +Added `displayName`s to all components that were previously missing them. diff --git a/packages/itwinui-react/src/core/Avatar/Avatar.tsx b/packages/itwinui-react/src/core/Avatar/Avatar.tsx index 0e3a6e882f5..7d5093b1766 100644 --- a/packages/itwinui-react/src/core/Avatar/Avatar.tsx +++ b/packages/itwinui-react/src/core/Avatar/Avatar.tsx @@ -113,3 +113,6 @@ export const Avatar = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'span', AvatarProps>; +if (process.env.NODE_ENV === 'development') { + Avatar.displayName = 'Avatar'; +} diff --git a/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx b/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx index 266eec89158..d916720f2ba 100644 --- a/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx +++ b/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx @@ -125,3 +125,6 @@ export const AvatarGroup = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', AvatarGroupProps>; +if (process.env.NODE_ENV === 'development') { + AvatarGroup.displayName = 'AvatarGroup'; +} diff --git a/packages/itwinui-react/src/core/Backdrop/Backdrop.tsx b/packages/itwinui-react/src/core/Backdrop/Backdrop.tsx index fd259d2bc88..82952aa9365 100644 --- a/packages/itwinui-react/src/core/Backdrop/Backdrop.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/Badge/Badge.tsx b/packages/itwinui-react/src/core/Badge/Badge.tsx index e5b49031f96..5daa5e87b66 100644 --- a/packages/itwinui-react/src/core/Badge/Badge.tsx +++ b/packages/itwinui-react/src/core/Badge/Badge.tsx @@ -92,3 +92,6 @@ export const Badge = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'span', BadgeProps>; +if (process.env.NODE_ENV === 'development') { + Badge.displayName = 'Badge'; +} diff --git a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx index 8d1dc8be6c1..6f2c4ab1d52 100644 --- a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx @@ -183,6 +183,9 @@ const BreadcrumbsComponent = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'nav', BreadcrumbsProps>; +if (process.env.NODE_ENV === 'development') { + BreadcrumbsComponent.displayName = 'Breadcrumbs'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx b/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx index 6e4dc7488b8..00739344889 100644 --- a/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx +++ b/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx @@ -146,6 +146,9 @@ export const ButtonGroup = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', ButtonGroupProps>; +if (process.env.NODE_ENV === 'development') { + ButtonGroup.displayName = 'ButtonGroup'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/Buttons/Button.tsx b/packages/itwinui-react/src/core/Buttons/Button.tsx index 31905287d7d..5b344e70afc 100644 --- a/packages/itwinui-react/src/core/Buttons/Button.tsx +++ b/packages/itwinui-react/src/core/Buttons/Button.tsx @@ -140,3 +140,6 @@ export const Button = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'button', ButtonProps>; +if (process.env.NODE_ENV === 'development') { + Button.displayName = 'Button'; +} diff --git a/packages/itwinui-react/src/core/Buttons/DropdownButton.tsx b/packages/itwinui-react/src/core/Buttons/DropdownButton.tsx index 19a5220901e..b9161be78cb 100644 --- a/packages/itwinui-react/src/core/Buttons/DropdownButton.tsx +++ b/packages/itwinui-react/src/core/Buttons/DropdownButton.tsx @@ -82,3 +82,6 @@ export const DropdownButton = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'button', DropdownButtonProps>; +if (process.env.NODE_ENV === 'development') { + DropdownButton.displayName = 'DropdownButton'; +} diff --git a/packages/itwinui-react/src/core/Buttons/IconButton.tsx b/packages/itwinui-react/src/core/Buttons/IconButton.tsx index a530f468615..a20a0f1265d 100644 --- a/packages/itwinui-react/src/core/Buttons/IconButton.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/Buttons/IdeasButton.tsx b/packages/itwinui-react/src/core/Buttons/IdeasButton.tsx index 8db4aea0734..4c1e5a5202a 100644 --- a/packages/itwinui-react/src/core/Buttons/IdeasButton.tsx +++ b/packages/itwinui-react/src/core/Buttons/IdeasButton.tsx @@ -40,3 +40,6 @@ export const IdeasButton = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'button', IdeasButtonProps>; +if (process.env.NODE_ENV === 'development') { + IdeasButton.displayName = 'IdeasButton'; +} diff --git a/packages/itwinui-react/src/core/Buttons/SplitButton.tsx b/packages/itwinui-react/src/core/Buttons/SplitButton.tsx index b5f37b9af29..5dae92c5239 100644 --- a/packages/itwinui-react/src/core/Buttons/SplitButton.tsx +++ b/packages/itwinui-react/src/core/Buttons/SplitButton.tsx @@ -151,3 +151,6 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'button', SplitButtonProps>; +if (process.env.NODE_ENV === 'development') { + SplitButton.displayName = 'SplitButton'; +} diff --git a/packages/itwinui-react/src/core/Carousel/Carousel.tsx b/packages/itwinui-react/src/core/Carousel/Carousel.tsx index 6d66f0e94f3..7a43a4123fd 100644 --- a/packages/itwinui-react/src/core/Carousel/Carousel.tsx +++ b/packages/itwinui-react/src/core/Carousel/Carousel.tsx @@ -88,6 +88,9 @@ const CarouselComponent = React.forwardRef((props, ref) => { ); }) 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 diff --git a/packages/itwinui-react/src/core/Carousel/CarouselContext.tsx b/packages/itwinui-react/src/core/Carousel/CarouselContext.tsx index ce127cf0c27..e56c1d0f436 100644 --- a/packages/itwinui-react/src/core/Carousel/CarouselContext.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/Carousel/CarouselDot.tsx b/packages/itwinui-react/src/core/Carousel/CarouselDot.tsx index 0ef713bc2c0..183adcea1c0 100644 --- a/packages/itwinui-react/src/core/Carousel/CarouselDot.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx b/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx index 58d94ac0f75..72eba108d33 100644 --- a/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/Carousel/CarouselNavigation.tsx b/packages/itwinui-react/src/core/Carousel/CarouselNavigation.tsx index c22230a13bc..63e9af24031 100644 --- a/packages/itwinui-react/src/core/Carousel/CarouselNavigation.tsx +++ b/packages/itwinui-react/src/core/Carousel/CarouselNavigation.tsx @@ -35,6 +35,9 @@ const CarouselNavigationComponent = React.forwardRef((props, ref) => { ); }) 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 >; +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 >; +if (process.env.NODE_ENV === 'development') { + NextButton.displayName = 'Carousel.Navigation.NextButton'; +} /** * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton` diff --git a/packages/itwinui-react/src/core/Carousel/CarouselSlide.tsx b/packages/itwinui-react/src/core/Carousel/CarouselSlide.tsx index 95c2f58b579..8aabcfa26a2 100644 --- a/packages/itwinui-react/src/core/Carousel/CarouselSlide.tsx +++ b/packages/itwinui-react/src/core/Carousel/CarouselSlide.tsx @@ -72,3 +72,6 @@ export const CarouselSlide = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', CarouselSlideProps>; +if (process.env.NODE_ENV === 'development') { + CarouselSlide.displayName = 'Carousel.Slide'; +} diff --git a/packages/itwinui-react/src/core/Carousel/CarouselSlider.tsx b/packages/itwinui-react/src/core/Carousel/CarouselSlider.tsx index 2774139d071..18b7a8bdcef 100644 --- a/packages/itwinui-react/src/core/Carousel/CarouselSlider.tsx +++ b/packages/itwinui-react/src/core/Carousel/CarouselSlider.tsx @@ -97,3 +97,6 @@ export const CarouselSlider = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div'>; +if (process.env.NODE_ENV === 'development') { + CarouselSlider.displayName = 'Carousel.Slider'; +} diff --git a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx index 64e6b8824e2..03d2d5dc0b0 100644 --- a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx +++ b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx @@ -136,3 +136,6 @@ export const Checkbox = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'input', CheckboxProps>; +if (process.env.NODE_ENV === 'development') { + Checkbox.displayName = 'Checkbox'; +} diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx index 77def31bdf2..1caec77b9cf 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx @@ -333,3 +333,6 @@ export const ColorBuilder = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div'>; +if (process.env.NODE_ENV === 'development') { + ColorBuilder.displayName = 'ColorBuilder'; +} diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx index ae6b2d37216..e5f8c42e3ad 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx @@ -488,3 +488,6 @@ export const ColorInputPanel = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', ColorInputPanelProps>; +if (process.env.NODE_ENV === 'development') { + ColorInputPanel.displayName = 'ColorInputPanel'; +} diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx index a69f30223c2..6012db21da7 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx @@ -73,3 +73,6 @@ export const ColorPalette = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', ColorPaletteProps>; +if (process.env.NODE_ENV === 'development') { + ColorPalette.displayName = 'ColorPalette'; +} diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx index 495e3197243..f2f69faff4d 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx @@ -160,3 +160,6 @@ export const ColorPicker = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', ColorPickerProps>; +if (process.env.NODE_ENV === 'development') { + ColorPicker.displayName = 'ColorPicker'; +} diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx index 23a6220063e..fb1f029599b 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx @@ -61,3 +61,6 @@ export const ColorSwatch = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'button', ColorSwatchProps>; +if (process.env.NODE_ENV === 'development') { + ColorSwatch.displayName = 'ColorSwatch'; +} diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx index cb21a7ad498..5bc8672a90a 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx +++ b/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx @@ -644,3 +644,6 @@ export const ComboBox = React.forwardRef( ) as ( props: ComboBoxProps & { ref?: React.ForwardedRef }, ) => JSX.Element; +if (process.env.NODE_ENV === 'development') { + (ComboBox as any).displayName = 'ComboBox'; +} diff --git a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx index 9e2f4fe9e54..17a58da99b2 100644 --- a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx +++ b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx @@ -757,3 +757,6 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', DatePickerProps>; +if (process.env.NODE_ENV === 'development') { + DatePicker.displayName = 'DatePicker'; +} diff --git a/packages/itwinui-react/src/core/Dialog/Dialog.tsx b/packages/itwinui-react/src/core/Dialog/Dialog.tsx index e634bef3f90..2697af6565c 100644 --- a/packages/itwinui-react/src/core/Dialog/Dialog.tsx +++ b/packages/itwinui-react/src/core/Dialog/Dialog.tsx @@ -74,6 +74,9 @@ const DialogComponent = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', DialogProps>; +if (process.env.NODE_ENV === 'development') { + DialogComponent.displayName = 'Dialog'; +} /** * Dialog component. diff --git a/packages/itwinui-react/src/core/Dialog/DialogBackdrop.tsx b/packages/itwinui-react/src/core/Dialog/DialogBackdrop.tsx index 3e63ceef9d0..9c59baeec09 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogBackdrop.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx b/packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx index 8fad39e9ffa..906b9fc7f47 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx @@ -13,3 +13,6 @@ import { polymorphic } from '../../utils/index.js'; * */ export const DialogButtonBar = polymorphic.div('iui-dialog-button-bar'); +if (process.env.NODE_ENV === 'development') { + DialogButtonBar.displayName = 'Dialog.ButtonBar'; +} diff --git a/packages/itwinui-react/src/core/Dialog/DialogContent.tsx b/packages/itwinui-react/src/core/Dialog/DialogContent.tsx index 303a3caa2e3..e5b5597d10b 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogContent.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogContent.tsx @@ -12,3 +12,6 @@ import { polymorphic } from '../../utils/index.js'; * */ export const DialogContent = polymorphic.div('iui-dialog-content'); +if (process.env.NODE_ENV === 'development') { + DialogContent.displayName = 'Dialog.Content'; +} diff --git a/packages/itwinui-react/src/core/Dialog/DialogMain.tsx b/packages/itwinui-react/src/core/Dialog/DialogMain.tsx index e56b92937c2..e8e034dee54 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogMain.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogMain.tsx @@ -234,3 +234,6 @@ export const DialogMain = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', DialogMainProps>; +if (process.env.NODE_ENV === 'development') { + DialogMain.displayName = 'Dialog.Main'; +} diff --git a/packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx b/packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx index db2958509cb..cedf2b49d4d 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx b/packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx index 7e0f974e097..5eef0a34284 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx +++ b/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 - * My dialog title + * + * My dialog title + * */ export const DialogTitleBarTitle = polymorphic.div('iui-dialog-title'); +if (process.env.NODE_ENV === 'development') { + DialogTitleBarTitle.displayName = 'Dialog.TitleBar.Title'; +} diff --git a/packages/itwinui-react/src/core/Divider/Divider.tsx b/packages/itwinui-react/src/core/Divider/Divider.tsx index e8d2891104e..17e31e5662c 100644 --- a/packages/itwinui-react/src/core/Divider/Divider.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.tsx b/packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.tsx index dc5936036f8..d6a69d489f6 100644 --- a/packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.tsx +++ b/packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.tsx @@ -62,6 +62,9 @@ export const DropdownMenu = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', DropdownMenuProps>; +if (process.env.NODE_ENV === 'development') { + DropdownMenu.displayName = 'DropdownMenu'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx b/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx index 830c9df8194..44d967754b3 100644 --- a/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx +++ b/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx @@ -48,3 +48,6 @@ export const Fieldset = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'fieldset', FieldsetProps>; +if (process.env.NODE_ENV === 'development') { + Fieldset.displayName = 'Fieldset'; +} diff --git a/packages/itwinui-react/src/core/FileUpload/FileEmptyCard.tsx b/packages/itwinui-react/src/core/FileUpload/FileEmptyCard.tsx index 55712d96cdf..e64d049019b 100644 --- a/packages/itwinui-react/src/core/FileUpload/FileEmptyCard.tsx +++ b/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: , }); +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) => { ); }) 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. diff --git a/packages/itwinui-react/src/core/FileUpload/FileUpload.tsx b/packages/itwinui-react/src/core/FileUpload/FileUpload.tsx index cea6e0c8d2d..92ff164bf5f 100644 --- a/packages/itwinui-react/src/core/FileUpload/FileUpload.tsx +++ b/packages/itwinui-react/src/core/FileUpload/FileUpload.tsx @@ -114,3 +114,6 @@ export const FileUpload = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', FileUploadProps>; +if (process.env.NODE_ENV === 'development') { + FileUpload.displayName = 'FileUpload'; +} diff --git a/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx b/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx index 52e1c9d46e4..e25b50abf57 100644 --- a/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx b/packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx index 45f734e914d..0a12d9503c4 100644 --- a/packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx +++ b/packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx @@ -85,3 +85,6 @@ export const FileUploadTemplate = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', FileUploadTemplateProps>; +if (process.env.NODE_ENV === 'development') { + FileUploadTemplate.displayName = 'FileUploadTemplate'; +} diff --git a/packages/itwinui-react/src/core/Footer/Footer.tsx b/packages/itwinui-react/src/core/Footer/Footer.tsx index 00a244f3473..53b29c8be08 100644 --- a/packages/itwinui-react/src/core/Footer/Footer.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/Footer/FooterItem.tsx b/packages/itwinui-react/src/core/Footer/FooterItem.tsx index be659391a40..13f35c95b8d 100644 --- a/packages/itwinui-react/src/core/Footer/FooterItem.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/Footer/FooterList.tsx b/packages/itwinui-react/src/core/Footer/FooterList.tsx index d068eccde89..d93856a0c7e 100644 --- a/packages/itwinui-react/src/core/Footer/FooterList.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/Footer/FooterSeparator.tsx b/packages/itwinui-react/src/core/Footer/FooterSeparator.tsx index 8ad9b0ec0b1..afef7bc0eba 100644 --- a/packages/itwinui-react/src/core/Footer/FooterSeparator.tsx +++ b/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'; +} diff --git a/packages/itwinui-react/src/core/Header/Header.tsx b/packages/itwinui-react/src/core/Header/Header.tsx index d40f1040d27..f2eb1c4c59f 100644 --- a/packages/itwinui-react/src/core/Header/Header.tsx +++ b/packages/itwinui-react/src/core/Header/Header.tsx @@ -151,3 +151,6 @@ export const Header = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'header', HeaderProps>; +if (process.env.NODE_ENV === 'development') { + Header.displayName = 'Header'; +} diff --git a/packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx b/packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx index cf737597223..8ce7c7f9e21 100644 --- a/packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx +++ b/packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx @@ -65,3 +65,6 @@ export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'nav', HeaderBreadcrumbsProps>; +if (process.env.NODE_ENV === 'development') { + HeaderBreadcrumbs.displayName = 'HeaderBreadcrumbs'; +} diff --git a/packages/itwinui-react/src/core/Header/HeaderButton.tsx b/packages/itwinui-react/src/core/Header/HeaderButton.tsx index 32280c88502..4dd051b0099 100644 --- a/packages/itwinui-react/src/core/Header/HeaderButton.tsx +++ b/packages/itwinui-react/src/core/Header/HeaderButton.tsx @@ -101,3 +101,6 @@ export const HeaderButton = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'button', HeaderButtonProps>; +if (process.env.NODE_ENV === 'development') { + HeaderButton.displayName = 'HeaderButton'; +} diff --git a/packages/itwinui-react/src/core/Header/HeaderLogo.tsx b/packages/itwinui-react/src/core/Header/HeaderLogo.tsx index 1b80c259c86..92ab5d1140c 100644 --- a/packages/itwinui-react/src/core/Header/HeaderLogo.tsx +++ b/packages/itwinui-react/src/core/Header/HeaderLogo.tsx @@ -61,3 +61,6 @@ export const HeaderLogo = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', HeaderLogoOwnProps>; +if (process.env.NODE_ENV === 'development') { + HeaderLogo.displayName = 'HeaderLogo'; +} diff --git a/packages/itwinui-react/src/core/Icon/Icon.tsx b/packages/itwinui-react/src/core/Icon/Icon.tsx index 1ed09b5372b..1a23b9cf0d8 100644 --- a/packages/itwinui-react/src/core/Icon/Icon.tsx +++ b/packages/itwinui-react/src/core/Icon/Icon.tsx @@ -92,3 +92,6 @@ export const Icon = React.forwardRef((props, ref) => { /> ); }) as PolymorphicForwardRefComponent<'span', IconProps>; +if (process.env.NODE_ENV === 'development') { + Icon.displayName = 'Icon'; +} diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanel.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanel.tsx index 9a017256fdd..9016f0683f0 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanel.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanel.tsx @@ -136,3 +136,6 @@ export const InformationPanel = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', InformationPanelProps>; +if (process.env.NODE_ENV === 'development') { + InformationPanel.displayName = 'InformationPanel'; +} diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanelBody.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanelBody.tsx index 537e0a9e040..9a7edafbe8b 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanelBody.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanelBody.tsx @@ -8,3 +8,6 @@ import { polymorphic } from '../../utils/index.js'; * Body of the `InformationPanel` containing the main content. */ export const InformationPanelBody = polymorphic.div('iui-information-body'); +if (process.env.NODE_ENV === 'development') { + InformationPanelBody.displayName = 'InformationPanel.Body'; +} diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanelContent.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanelContent.tsx index 34fa9d70267..ed94b1a46dd 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanelContent.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanelContent.tsx @@ -64,3 +64,6 @@ export const InformationPanelContent = React.forwardRef( ); }, ) as PolymorphicForwardRefComponent<'div', InformationPanelContentProps>; +if (process.env.NODE_ENV === 'development') { + InformationPanelContent.displayName = 'InformationPanelContent'; +} diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanelHeader.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanelHeader.tsx index cd83991f0da..8f6d1f6ef15 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanelHeader.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanelHeader.tsx @@ -77,3 +77,6 @@ export const InformationPanelHeader = React.forwardRef( ); }, ) as PolymorphicForwardRefComponent<'div', InformationPanelHeaderProps>; +if (process.env.NODE_ENV === 'development') { + InformationPanelHeader.displayName = 'InformationPanelHeader'; +} diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanelWrapper.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanelWrapper.tsx index 7c6c7df3611..6219f88b702 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanelWrapper.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanelWrapper.tsx @@ -16,3 +16,6 @@ import { polymorphic } from '../../utils/index.js'; export const InformationPanelWrapper = polymorphic.div( 'iui-information-panel-wrapper', ); +if (process.env.NODE_ENV === 'development') { + InformationPanelWrapper.displayName = 'InformationPanelWrapper'; +} diff --git a/packages/itwinui-react/src/core/Input/Input.tsx b/packages/itwinui-react/src/core/Input/Input.tsx index 7f19c2a2126..bc1872871a2 100644 --- a/packages/itwinui-react/src/core/Input/Input.tsx +++ b/packages/itwinui-react/src/core/Input/Input.tsx @@ -46,3 +46,6 @@ export const Input = React.forwardRef((props, ref) => { /> ); }) as PolymorphicForwardRefComponent<'input', InputProps>; +if (process.env.NODE_ENV === 'development') { + Input.displayName = 'Input'; +} diff --git a/packages/itwinui-react/src/core/InputGrid/InputGrid.tsx b/packages/itwinui-react/src/core/InputGrid/InputGrid.tsx index bd87d32a48e..f5a66c719e4 100644 --- a/packages/itwinui-react/src/core/InputGrid/InputGrid.tsx +++ b/packages/itwinui-react/src/core/InputGrid/InputGrid.tsx @@ -67,6 +67,9 @@ export const InputGrid = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', InputGridOwnProps>; +if (process.env.NODE_ENV === 'development') { + InputGrid.displayName = 'InputGrid'; +} //------------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx b/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx index 5041022ec8c..fc5f039eda4 100644 --- a/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx +++ b/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx @@ -135,6 +135,9 @@ export const InputGroup = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', InputGroupProps>; +if (process.env.NODE_ENV === 'development') { + InputGroup.displayName = 'InputGroup'; +} // ------------------------------------------------------------------------------------------------ diff --git a/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.tsx b/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.tsx index 6a7f5bcd49b..d74c2dbe577 100644 --- a/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.tsx +++ b/packages/itwinui-react/src/core/InputWithDecorations/InputWithDecorations.tsx @@ -16,6 +16,9 @@ import type { InputProps } from '../Input/Input.js'; const InputWithDecorationsContext = React.createContext< React.ComponentProps | undefined >(undefined); +if (process.env.NODE_ENV === 'development') { + InputWithDecorationsContext.displayName = 'InputWithDecorationsContext'; +} const InputWithDecorationsComponent = React.forwardRef((props, ref) => { const { children, size, isDisabled, ...rest } = props; @@ -35,6 +38,9 @@ const InputWithDecorationsComponent = React.forwardRef((props, ref) => { 'div', React.ComponentProps >; +if (process.env.NODE_ENV === 'development') { + InputWithDecorationsComponent.displayName = 'InputWithDecorations'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/Label/Label.tsx b/packages/itwinui-react/src/core/Label/Label.tsx index b76f7862243..0b93c039f55 100644 --- a/packages/itwinui-react/src/core/Label/Label.tsx +++ b/packages/itwinui-react/src/core/Label/Label.tsx @@ -63,3 +63,6 @@ export const Label = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'label', LabelOwnProps>; +if (process.env.NODE_ENV === 'development') { + Label.displayName = 'Label'; +} diff --git a/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx b/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx index 1d4566a8458..c9b9d7e647f 100644 --- a/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx +++ b/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx @@ -130,3 +130,6 @@ export const LabeledInput = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'input', LabeledInputProps>; +if (process.env.NODE_ENV === 'development') { + LabeledInput.displayName = 'LabeledInput'; +} diff --git a/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx b/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx index eb4bd4dc90e..2b6bf59ea41 100644 --- a/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx +++ b/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx @@ -178,3 +178,6 @@ export const LabeledSelect = React.forwardRef( ) as ( props: LabeledSelectProps & { ref?: React.ForwardedRef }, ) => JSX.Element; +if (process.env.NODE_ENV === 'development') { + (LabeledSelect as any).displayName = 'LabeledSelect'; +} diff --git a/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx b/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx index dbeac17cd29..136708160ba 100644 --- a/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx +++ b/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx @@ -69,3 +69,6 @@ export const LabeledTextarea = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'textarea', LabeledTextareaProps>; +if (process.env.NODE_ENV === 'development') { + LabeledTextarea.displayName = 'LabeledTextarea'; +} diff --git a/packages/itwinui-react/src/core/Menu/MenuDivider.tsx b/packages/itwinui-react/src/core/Menu/MenuDivider.tsx index 2d5071c5877..adf34845a84 100644 --- a/packages/itwinui-react/src/core/Menu/MenuDivider.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuDivider.tsx @@ -22,3 +22,6 @@ import { polymorphic } from '../../utils/index.js'; export const MenuDivider = polymorphic('iui-menu-divider', { role: 'separator', }); +if (process.env.NODE_ENV === 'development') { + MenuDivider.displayName = 'MenuDivider'; +} diff --git a/packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx b/packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx index 839996eb1fa..f5e40f82352 100644 --- a/packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx @@ -27,3 +27,6 @@ import { polymorphic } from '../../utils/index.js'; export const MenuExtraContent = polymorphic.li('iui-menu-content', { role: 'presentation', }); +if (process.env.NODE_ENV === 'development') { + MenuExtraContent.displayName = 'MenuExtraContent'; +} diff --git a/packages/itwinui-react/src/core/Menu/MenuItem.tsx b/packages/itwinui-react/src/core/Menu/MenuItem.tsx index 6a076b78429..a6c51494f04 100644 --- a/packages/itwinui-react/src/core/Menu/MenuItem.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuItem.tsx @@ -202,6 +202,9 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', MenuItemProps>; +if (process.env.NODE_ENV === 'development') { + MenuItem.displayName = 'MenuItem'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx b/packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx index 60e90923331..e067fcfe70d 100644 --- a/packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx @@ -71,3 +71,6 @@ export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', MenuItemSkeletonProps>; +if (process.env.NODE_ENV === 'development') { + MenuItemSkeleton.displayName = 'MenuItemSkeleton'; +} diff --git a/packages/itwinui-react/src/core/Modal/Modal.tsx b/packages/itwinui-react/src/core/Modal/Modal.tsx index d65f4a571b9..bf547b2b36e 100644 --- a/packages/itwinui-react/src/core/Modal/Modal.tsx +++ b/packages/itwinui-react/src/core/Modal/Modal.tsx @@ -124,3 +124,6 @@ export const Modal = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', ModalProps>; +if (process.env.NODE_ENV === 'development') { + Modal.displayName = 'Modal'; +} diff --git a/packages/itwinui-react/src/core/Modal/ModalButtonBar.tsx b/packages/itwinui-react/src/core/Modal/ModalButtonBar.tsx index c3d7f518a9e..d3aa009fb9d 100644 --- a/packages/itwinui-react/src/core/Modal/ModalButtonBar.tsx +++ b/packages/itwinui-react/src/core/Modal/ModalButtonBar.tsx @@ -8,3 +8,6 @@ import { DialogButtonBar } from '../Dialog/DialogButtonBar.js'; * Container for Buttons in modal. */ export const ModalButtonBar = Object.assign({}, DialogButtonBar); +if (process.env.NODE_ENV === 'development') { + ModalButtonBar.displayName = 'ModalButtonBar'; +} diff --git a/packages/itwinui-react/src/core/Modal/ModalContent.tsx b/packages/itwinui-react/src/core/Modal/ModalContent.tsx index 5c5079f13b5..68ca032563b 100644 --- a/packages/itwinui-react/src/core/Modal/ModalContent.tsx +++ b/packages/itwinui-react/src/core/Modal/ModalContent.tsx @@ -8,3 +8,6 @@ import { DialogContent } from '../Dialog/DialogContent.js'; * Container for content in `Modal`. */ export const ModalContent = Object.assign({}, DialogContent); +if (process.env.NODE_ENV === 'development') { + ModalContent.displayName = 'ModalContent'; +} diff --git a/packages/itwinui-react/src/core/NonIdealState/ErrorPage.tsx b/packages/itwinui-react/src/core/NonIdealState/ErrorPage.tsx index 8b8276f6f2e..db1c6e5312f 100644 --- a/packages/itwinui-react/src/core/NonIdealState/ErrorPage.tsx +++ b/packages/itwinui-react/src/core/NonIdealState/ErrorPage.tsx @@ -285,3 +285,6 @@ export const ErrorPage = React.forwardRef((props, forwardedRef) => { /> ); }) as PolymorphicForwardRefComponent<'div', ErrorPageProps>; +if (process.env.NODE_ENV === 'development') { + ErrorPage.displayName = 'ErrorPage'; +} diff --git a/packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx b/packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx index c377375616f..34df79e7152 100644 --- a/packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx +++ b/packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx @@ -132,3 +132,6 @@ export const NonIdealState = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', NonIdealStateProps>; +if (process.env.NODE_ENV === 'development') { + NonIdealState.displayName = 'NonIdealState'; +} diff --git a/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx b/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx index b6b4a6b2ef3..5762dea1451 100644 --- a/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx +++ b/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx @@ -79,3 +79,6 @@ export const NotificationMarker = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'span', NotificationMarkerProps>; +if (process.env.NODE_ENV === 'development') { + NotificationMarker.displayName = 'NotificationMarker'; +} diff --git a/packages/itwinui-react/src/core/Popover/Popover.tsx b/packages/itwinui-react/src/core/Popover/Popover.tsx index 6f9693e7413..75e98cadc13 100644 --- a/packages/itwinui-react/src/core/Popover/Popover.tsx +++ b/packages/itwinui-react/src/core/Popover/Popover.tsx @@ -428,6 +428,9 @@ export const Popover = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', PopoverPublicProps>; +if (process.env.NODE_ENV === 'development') { + Popover.displayName = 'Popover'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx index 6aa031f833f..3994bb43ce7 100644 --- a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx +++ b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx @@ -111,3 +111,6 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', ProgressLinearProps>; +if (process.env.NODE_ENV === 'development') { + ProgressLinear.displayName = 'ProgressLinear'; +} diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.tsx index 587424aca95..337d551d865 100644 --- a/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.tsx +++ b/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.tsx @@ -100,3 +100,6 @@ export const ProgressRadial = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', ProgressRadialProps>; +if (process.env.NODE_ENV === 'development') { + ProgressRadial.displayName = 'ProgressRadial'; +} diff --git a/packages/itwinui-react/src/core/Radio/Radio.tsx b/packages/itwinui-react/src/core/Radio/Radio.tsx index ce3d39cbe24..56c8fde5c8e 100644 --- a/packages/itwinui-react/src/core/Radio/Radio.tsx +++ b/packages/itwinui-react/src/core/Radio/Radio.tsx @@ -89,3 +89,6 @@ export const Radio = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'input', RadioProps>; +if (process.env.NODE_ENV === 'development') { + Radio.displayName = 'Radio'; +} diff --git a/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx b/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx index ff2595d4f51..476dbf4e39a 100644 --- a/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx +++ b/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx @@ -106,3 +106,6 @@ export const RadioTile = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'input', RadioTileProps>; +if (process.env.NODE_ENV === 'development') { + RadioTile.displayName = 'RadioTile'; +} diff --git a/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx b/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx index 304f4d3e430..140e90fed38 100644 --- a/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx +++ b/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx @@ -29,3 +29,6 @@ export const RadioTileGroup = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', RadioTileGroupProps>; +if (process.env.NODE_ENV === 'development') { + RadioTileGroup.displayName = 'RadioTileGroup'; +} diff --git a/packages/itwinui-react/src/core/Select/Select.tsx b/packages/itwinui-react/src/core/Select/Select.tsx index 0dcd957db9e..413851f7c7a 100644 --- a/packages/itwinui-react/src/core/Select/Select.tsx +++ b/packages/itwinui-react/src/core/Select/Select.tsx @@ -107,6 +107,9 @@ export const Select = React.forwardRef((props, forwardedRef) => { }) as ( props: SelectProps & { ref?: React.ForwardedRef }, ) => JSX.Element; +if (process.env.NODE_ENV === 'development') { + (Select as any).displayName = 'Select'; +} export type SelectProps = Omit< React.ComponentPropsWithoutRef<'div'>, diff --git a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx index 665951dd103..8b98509b048 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx @@ -192,3 +192,6 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', SideNavigationProps>; +if (process.env.NODE_ENV === 'development') { + SideNavigation.displayName = 'SideNavigation'; +} diff --git a/packages/itwinui-react/src/core/SideNavigation/SidenavButton.tsx b/packages/itwinui-react/src/core/SideNavigation/SidenavButton.tsx index a08da24500f..f7be9e877b0 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SidenavButton.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SidenavButton.tsx @@ -65,3 +65,6 @@ export const SidenavButton = React.forwardRef((props, ref) => { sidenavButton ); }) as PolymorphicForwardRefComponent<'button', SidenavButtonProps>; +if (process.env.NODE_ENV === 'development') { + SidenavButton.displayName = 'SidenavButton'; +} diff --git a/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx b/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx index 4d3660ab394..e3e9f23b8ac 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx @@ -28,3 +28,6 @@ export const SidenavSubmenu = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div'>; +if (process.env.NODE_ENV === 'development') { + SidenavSubmenu.displayName = 'SidenavSubmenu'; +} diff --git a/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenuHeader.tsx b/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenuHeader.tsx index 40f2cfd2de9..8e983d68608 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenuHeader.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenuHeader.tsx @@ -46,3 +46,6 @@ export const SidenavSubmenuHeader = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', SidenavSubmenuHeaderProps>; +if (process.env.NODE_ENV === 'development') { + SidenavSubmenuHeader.displayName = 'SidenavSubmenuHeader'; +} diff --git a/packages/itwinui-react/src/core/SkipToContentLink/SkipToContentLink.tsx b/packages/itwinui-react/src/core/SkipToContentLink/SkipToContentLink.tsx index 48be8bb1e49..a17b62d448c 100644 --- a/packages/itwinui-react/src/core/SkipToContentLink/SkipToContentLink.tsx +++ b/packages/itwinui-react/src/core/SkipToContentLink/SkipToContentLink.tsx @@ -41,3 +41,6 @@ export const SkipToContentLink = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'a', SkipToContentLinkProps>; +if (process.env.NODE_ENV === 'development') { + SkipToContentLink.displayName = 'SkipToContentLink'; +} diff --git a/packages/itwinui-react/src/core/Slider/Slider.tsx b/packages/itwinui-react/src/core/Slider/Slider.tsx index 6479c7cc8e3..ad8a3cf656b 100644 --- a/packages/itwinui-react/src/core/Slider/Slider.tsx +++ b/packages/itwinui-react/src/core/Slider/Slider.tsx @@ -548,3 +548,6 @@ export const Slider = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', SliderProps>; +if (process.env.NODE_ENV === 'development') { + Slider.displayName = 'Slider'; +} diff --git a/packages/itwinui-react/src/core/StatusMessage/StatusMessage.tsx b/packages/itwinui-react/src/core/StatusMessage/StatusMessage.tsx index 4a3cc83fe24..8331cd6ebb7 100644 --- a/packages/itwinui-react/src/core/StatusMessage/StatusMessage.tsx +++ b/packages/itwinui-react/src/core/StatusMessage/StatusMessage.tsx @@ -72,3 +72,6 @@ export const StatusMessage = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', StatusMessageProps>; +if (process.env.NODE_ENV === 'development') { + StatusMessage.displayName = 'StatusMessage'; +} diff --git a/packages/itwinui-react/src/core/Stepper/Stepper.tsx b/packages/itwinui-react/src/core/Stepper/Stepper.tsx index 12bc4d2ae9a..3a8ecacf702 100644 --- a/packages/itwinui-react/src/core/Stepper/Stepper.tsx +++ b/packages/itwinui-react/src/core/Stepper/Stepper.tsx @@ -145,3 +145,6 @@ export const Stepper = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', StepperProps>; +if (process.env.NODE_ENV === 'development') { + Stepper.displayName = 'Stepper'; +} diff --git a/packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx b/packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx index 27621b314aa..10fb08baacf 100644 --- a/packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx +++ b/packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx @@ -48,3 +48,6 @@ export const WorkflowDiagram = React.forwardRef( ); }, ) as PolymorphicForwardRefComponent<'ol', WorkflowDiagramProps>; +if (process.env.NODE_ENV === 'development') { + WorkflowDiagram.displayName = 'WorkflowDiagram'; +} diff --git a/packages/itwinui-react/src/core/Surface/Surface.tsx b/packages/itwinui-react/src/core/Surface/Surface.tsx index e360fdf570d..376cdaffc70 100644 --- a/packages/itwinui-react/src/core/Surface/Surface.tsx +++ b/packages/itwinui-react/src/core/Surface/Surface.tsx @@ -61,6 +61,9 @@ const SurfaceHeader = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div'>; +if (process.env.NODE_ENV === 'development') { + SurfaceHeader.displayName = 'Surface.Header'; +} // ---------------------------------------------------------------------------- // Surface.Body component @@ -93,6 +96,9 @@ const SurfaceBody = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', SurfaceBodyOwnProps>; +if (process.env.NODE_ENV === 'development') { + SurfaceBody.displayName = 'Surface.Body'; +} type SurfaceProps = { /** @@ -166,6 +172,9 @@ export const Surface = Object.assign( Body: SurfaceBody, }, ); +if (process.env.NODE_ENV === 'development') { + Surface.displayName = 'Surface'; +} const SurfaceContext = React.createContext< | { @@ -177,3 +186,6 @@ const SurfaceContext = React.createContext< } | undefined >(undefined); +if (process.env.NODE_ENV === 'development') { + SurfaceContext.displayName = 'SurfaceContext'; +} diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index e9788e0c8db..1f065c046bf 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -1238,3 +1238,6 @@ export const Table = < ); }; +if (process.env.NODE_ENV === 'development') { + Table.displayName = 'Table'; +} diff --git a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx index b99ad2143a6..493e5acc9e6 100644 --- a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx @@ -108,3 +108,6 @@ export const DefaultCell = >( ); }; +if (process.env.NODE_ENV === 'development') { + DefaultCell.displayName = 'DefaultCell'; +} diff --git a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx index df5a0ba613a..30ff3d1928b 100644 --- a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx +++ b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx @@ -126,3 +126,6 @@ export const EditableCell = >( ); }; +if (process.env.NODE_ENV === 'development') { + EditableCell.displayName = 'EditableCell'; +} diff --git a/packages/itwinui-react/src/core/Tabs/Tabs.tsx b/packages/itwinui-react/src/core/Tabs/Tabs.tsx index 45d5a737080..c736d2b9265 100644 --- a/packages/itwinui-react/src/core/Tabs/Tabs.tsx +++ b/packages/itwinui-react/src/core/Tabs/Tabs.tsx @@ -831,6 +831,9 @@ const TabsContext = React.createContext< } | undefined >(undefined); +if (process.env.NODE_ENV === 'development') { + TabsContext.displayName = 'TabsContext'; +} const TabListContext = React.createContext< | { @@ -839,6 +842,10 @@ const TabListContext = React.createContext< } | undefined >(undefined); +if (process.env.NODE_ENV === 'development') { + TabListContext.displayName = 'TabListContext'; +} + // ---------------------------------------------------------------------------- /** diff --git a/packages/itwinui-react/src/core/Tag/Tag.tsx b/packages/itwinui-react/src/core/Tag/Tag.tsx index d7dcb88d610..864442b0d54 100644 --- a/packages/itwinui-react/src/core/Tag/Tag.tsx +++ b/packages/itwinui-react/src/core/Tag/Tag.tsx @@ -117,3 +117,6 @@ export const Tag = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'span', TagProps>; +if (process.env.NODE_ENV === 'development') { + Tag.displayName = 'Tag'; +} diff --git a/packages/itwinui-react/src/core/Tag/TagContainer.tsx b/packages/itwinui-react/src/core/Tag/TagContainer.tsx index 6974fedae31..b17f6d783b6 100644 --- a/packages/itwinui-react/src/core/Tag/TagContainer.tsx +++ b/packages/itwinui-react/src/core/Tag/TagContainer.tsx @@ -51,3 +51,6 @@ export const TagContainer = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', TagContainerProps>; +if (process.env.NODE_ENV === 'development') { + TagContainer.displayName = 'TagContainer'; +} diff --git a/packages/itwinui-react/src/core/Textarea/Textarea.tsx b/packages/itwinui-react/src/core/Textarea/Textarea.tsx index 43bc3ad2714..57c2639e467 100644 --- a/packages/itwinui-react/src/core/Textarea/Textarea.tsx +++ b/packages/itwinui-react/src/core/Textarea/Textarea.tsx @@ -22,3 +22,6 @@ export type TextareaProps = { export const Textarea = React.forwardRef((props, forwardedRef) => { return ; }) as PolymorphicForwardRefComponent<'textarea', TextareaProps>; +if (process.env.NODE_ENV === 'development') { + Textarea.displayName = 'Textarea'; +} diff --git a/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx b/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx index 7ff70f92d11..1ea6dba6856 100644 --- a/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx +++ b/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx @@ -522,6 +522,9 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', TimePickerProps>; +if (process.env.NODE_ENV === 'development') { + TimePicker.displayName = 'TimePicker'; +} type TimePickerColumnProps = { /** diff --git a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx index 8ce4a4fe170..4268a7c9b4e 100644 --- a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx +++ b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx @@ -117,3 +117,6 @@ export const ToggleSwitch = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'input', ToggleSwitchProps>; +if (process.env.NODE_ENV === 'development') { + ToggleSwitch.displayName = 'ToggleSwitch'; +} diff --git a/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx b/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx index cff39a60686..fcc5f9667f1 100644 --- a/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx +++ b/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx @@ -339,3 +339,6 @@ export const Tooltip = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', TooltipOwnProps & TooltipOptions>; +if (process.env.NODE_ENV === 'development') { + Tooltip.displayName = 'Tooltip'; +} diff --git a/packages/itwinui-react/src/core/TransferList/TransferList.tsx b/packages/itwinui-react/src/core/TransferList/TransferList.tsx index b6eb90e80f6..7e084ac774d 100644 --- a/packages/itwinui-react/src/core/TransferList/TransferList.tsx +++ b/packages/itwinui-react/src/core/TransferList/TransferList.tsx @@ -285,3 +285,6 @@ export const TransferListContext = React.createContext< } | undefined >(undefined); +if (process.env.NODE_ENV === 'development') { + TransferListContext.displayName = 'TransferListContext'; +} diff --git a/packages/itwinui-react/src/core/Tree/Tree.tsx b/packages/itwinui-react/src/core/Tree/Tree.tsx index d860d57f99c..a248c1c7794 100644 --- a/packages/itwinui-react/src/core/Tree/Tree.tsx +++ b/packages/itwinui-react/src/core/Tree/Tree.tsx @@ -373,6 +373,9 @@ export const Tree = (props: TreeProps) => { ); }; +if (process.env.NODE_ENV === 'development') { + Tree.displayName = 'Tree'; +} const TreeElement = polymorphic.div('iui-tree', { role: 'tree', diff --git a/packages/itwinui-react/src/core/Tree/TreeNode.tsx b/packages/itwinui-react/src/core/Tree/TreeNode.tsx index 11d68bf5b28..c16e58058b1 100644 --- a/packages/itwinui-react/src/core/Tree/TreeNode.tsx +++ b/packages/itwinui-react/src/core/Tree/TreeNode.tsx @@ -383,3 +383,6 @@ export const TreeNode = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'div', TreeNodeProps>; +if (process.env.NODE_ENV === 'development') { + TreeNode.displayName = 'TreeNode'; +} diff --git a/packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx b/packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx index f81c5424973..ced19d510b0 100644 --- a/packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx +++ b/packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx @@ -42,3 +42,6 @@ export const TreeNodeExpander = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'button', TreeNodeExpanderProps>; +if (process.env.NODE_ENV === 'development') { + TreeNodeExpander.displayName = 'TreeNode.Expander'; +} diff --git a/packages/itwinui-react/src/core/Typography/Anchor.tsx b/packages/itwinui-react/src/core/Typography/Anchor.tsx index 875422d4aa4..747bd44d576 100644 --- a/packages/itwinui-react/src/core/Typography/Anchor.tsx +++ b/packages/itwinui-react/src/core/Typography/Anchor.tsx @@ -66,3 +66,6 @@ export const Anchor = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'a', AnchorProps>; +if (process.env.NODE_ENV === 'development') { + Anchor.displayName = 'Anchor'; +} diff --git a/packages/itwinui-react/src/core/Typography/Blockquote.tsx b/packages/itwinui-react/src/core/Typography/Blockquote.tsx index c5ae3b7e11f..bb22d5f33f7 100644 --- a/packages/itwinui-react/src/core/Typography/Blockquote.tsx +++ b/packages/itwinui-react/src/core/Typography/Blockquote.tsx @@ -37,3 +37,6 @@ export const Blockquote = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'blockquote', BlockquoteProps>; +if (process.env.NODE_ENV === 'development') { + Blockquote.displayName = 'Blockquote'; +} diff --git a/packages/itwinui-react/src/core/Typography/Code.tsx b/packages/itwinui-react/src/core/Typography/Code.tsx index 448ea51c3a6..95824a340d0 100644 --- a/packages/itwinui-react/src/core/Typography/Code.tsx +++ b/packages/itwinui-react/src/core/Typography/Code.tsx @@ -10,3 +10,6 @@ import { polymorphic } from '../../utils/index.js'; *

Some inline code in a paragraph

*/ export const Code = polymorphic.code('iui-code'); +if (process.env.NODE_ENV === 'development') { + Code.displayName = 'Code'; +} diff --git a/packages/itwinui-react/src/core/Typography/Kbd.tsx b/packages/itwinui-react/src/core/Typography/Kbd.tsx index 5242ba3762a..d5ca975c6e0 100644 --- a/packages/itwinui-react/src/core/Typography/Kbd.tsx +++ b/packages/itwinui-react/src/core/Typography/Kbd.tsx @@ -53,3 +53,6 @@ export const Kbd = React.forwardRef((props, forwardedRef) => { ); }) as PolymorphicForwardRefComponent<'kbd', KbdProps>; +if (process.env.NODE_ENV === 'development') { + Kbd.displayName = 'Kbd'; +} diff --git a/packages/itwinui-react/src/core/Typography/Text.tsx b/packages/itwinui-react/src/core/Typography/Text.tsx index f169eb5d30a..a6abac9dc36 100644 --- a/packages/itwinui-react/src/core/Typography/Text.tsx +++ b/packages/itwinui-react/src/core/Typography/Text.tsx @@ -74,6 +74,9 @@ export const Text = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'div', TextProps>; +if (process.env.NODE_ENV === 'development') { + Text.displayName = 'Text'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx b/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx index 9286c76b6ce..ed81899386d 100644 --- a/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx +++ b/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx @@ -65,6 +65,9 @@ export const VisuallyHidden = React.forwardRef((props, ref) => { ); }) as PolymorphicForwardRefComponent<'span', VisuallyHiddenOwnProps>; +if (process.env.NODE_ENV === 'development') { + VisuallyHidden.displayName = 'VisuallyHidden'; +} // ---------------------------------------------------------------------------- diff --git a/packages/itwinui-react/src/utils/components/MiddleTextTruncation.tsx b/packages/itwinui-react/src/utils/components/MiddleTextTruncation.tsx index 41b18524fb4..e7d81268fb0 100644 --- a/packages/itwinui-react/src/utils/components/MiddleTextTruncation.tsx +++ b/packages/itwinui-react/src/utils/components/MiddleTextTruncation.tsx @@ -75,3 +75,6 @@ export const MiddleTextTruncation = (props: MiddleTextTruncationProps) => { ); }; +if (process.env.NODE_ENV === 'development') { + MiddleTextTruncation.displayName = 'MiddleTextTruncation'; +} From 61bbc8b1b52deda39f1b9148b6460c429f635099 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Mon, 15 Jul 2024 16:17:32 -0400 Subject: [PATCH 3/3] missed a couple --- packages/itwinui-react/src/core/Alert/Alert.tsx | 4 +++- packages/itwinui-react/src/core/List/ListItem.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-react/src/core/Alert/Alert.tsx b/packages/itwinui-react/src/core/Alert/Alert.tsx index d23ac662481..db65cf31d39 100644 --- a/packages/itwinui-react/src/core/Alert/Alert.tsx +++ b/packages/itwinui-react/src/core/Alert/Alert.tsx @@ -131,7 +131,9 @@ if (process.env.NODE_ENV === 'development') { // 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 diff --git a/packages/itwinui-react/src/core/List/ListItem.tsx b/packages/itwinui-react/src/core/List/ListItem.tsx index ea4aedc29f7..2613baea238 100644 --- a/packages/itwinui-react/src/core/List/ListItem.tsx +++ b/packages/itwinui-react/src/core/List/ListItem.tsx @@ -76,7 +76,9 @@ if (process.env.NODE_ENV === 'development') { // ---------------------------------------------------------------------------- const ListItemContent = polymorphic('iui-list-item-content'); -ListItemContent.displayName = 'ListItem.Content'; +if (process.env.NODE_ENV === 'development') { + ListItemContent.displayName = 'ListItem.Content'; +} // ----------------------------------------------------------------------------