fix(factories): enforce generateKey property

docs/src/prototypes/CopyToClipboard/CopyToClipboard.tsx

@@ -54,6 +54,7 @@ const CopyToClipboard: React.FC<CopyToClipboardProps> = props => {
   }
 
   return Tooltip.create(tooltip, {
+    generateKey: false,
     overrideProps: {
       trigger: renderedTrigger,
       children: undefined, // force-reset `children` defined for `Tooltip` as it collides with the `trigger

docs/src/prototypes/employeeCard/AvatarEmployeeCard.tsx

@@ -64,6 +64,7 @@ class AvatarEmployeeCard extends React.Component<
               this.setPopupOpen(false)
             },
           }),
+          generateKey: false,
         })}
         content={{
           styles: { marginLeft: '10px' },

docs/src/prototypes/employeeCard/EmployeeCard.tsx

@@ -74,6 +74,7 @@ class EmployeeCard extends React.Component<Extendable<EmployeeCardProps>, any> {
             size: 'largest',
             name: `${firstName} ${lastName}`,
           }),
+          generateKey: false,
         })}
       </Grid>
     )

docs/src/prototypes/meetingOptions/components/MSTeamsLogo.tsx

@@ -23,6 +23,7 @@ class MSTeamsLogo extends React.Component<LogoProps, any> {
                   xSpacing: 'after',
                   styles: { verticalAlign: 'middle' },
                 }),
+                generateKey: false,
               })}
               <Text
                 styles={{

docs/src/prototypes/meetingOptions/components/TransparentDivider.tsx

@@ -5,5 +5,6 @@ export default props => {
     defaultProps: () => ({
       variables: { dividerColor: 'transparent' },
     }),
+    generateKey: false,
   })
 }

packages/react/src/components/Accordion/Accordion.tsx

@@ -267,6 +267,7 @@ class Accordion extends AutoControlledComponent<WithAsProp<AccordionProps>, Acco
             id: titleId,
             accordionContentId: contentId,
           }),
+          generateKey: true,
           overrideProps: this.handleTitleOverrides,
           render: renderPanelTitle,
         }),
@@ -279,6 +280,7 @@ class Accordion extends AutoControlledComponent<WithAsProp<AccordionProps>, Acco
             id: contentId,
             accordionTitleId: titleId,
           }),
+          generateKey: true,
           render: renderPanelContent,
         }),
       )

packages/react/src/components/Accordion/AccordionTitle.tsx

@@ -122,6 +122,7 @@ class AccordionTitle extends UIComponent<WithAsProp<AccordionTitleProps>, any> {
             defaultProps: () => ({
               styles: styles.indicator,
             }),
+            generateKey: false,
           })}
           main={rtlTextContainer.createFor({ element: content })}
         />

packages/react/src/components/Alert/Alert.tsx

@@ -185,13 +185,15 @@ class Alert extends AutoControlledComponent<WithAsProp<AlertProps>, AlertState>
             styles: styles.header,
             ...accessibility.attributes.header,
           }),
+          generateKey: false,
         })}
         {Box.create(content, {
           defaultProps: () => ({
             className: Alert.slotClassNames.content,
             styles: styles.content,
             ...accessibility.attributes.content,
           }),
+          generateKey: false,
         })}
       </>
     )
@@ -203,6 +205,7 @@ class Alert extends AutoControlledComponent<WithAsProp<AlertProps>, AlertState>
             className: Alert.slotClassNames.icon,
             styles: styles.icon,
           }),
+          generateKey: false,
         })}
         {Box.create(body, {
           defaultProps: () => ({
@@ -211,6 +214,7 @@ class Alert extends AutoControlledComponent<WithAsProp<AlertProps>, AlertState>
             ...accessibility.attributes.body,
             styles: styles.body,
           }),
+          generateKey: false,
           overrideProps: {
             children: bodyContent,
           },
@@ -221,6 +225,7 @@ class Alert extends AutoControlledComponent<WithAsProp<AlertProps>, AlertState>
             className: Alert.slotClassNames.actions,
             styles: styles.actions,
           }),
+          generateKey: false,
         })}
         {dismissible &&
           Button.create(dismissAction, {
@@ -231,6 +236,7 @@ class Alert extends AutoControlledComponent<WithAsProp<AlertProps>, AlertState>
               styles: styles.dismissAction,
               ...accessibility.attributes.dismissAction,
             }),
+            generateKey: false,
             overrideProps: this.handleDismissOverrides,
           })}
       </>

packages/react/src/components/Attachment/Attachment.tsx

@@ -92,15 +92,18 @@ class Attachment extends UIComponent<WithAsProp<AttachmentProps>> {
         {icon &&
           Icon.create(icon, {
             defaultProps: () => ({ size: 'larger', styles: styles.icon }),
+            generateKey: false,
           })}
         {(header || description) && (
           <div className={classes.content}>
             {Text.create(header, {
               defaultProps: () => ({ styles: styles.header }),
+              generateKey: false,
             })}
 
             {Text.create(description, {
               defaultProps: () => ({ styles: styles.description }),
+              generateKey: false,
             })}
           </div>
         )}
@@ -112,6 +115,7 @@ class Attachment extends UIComponent<WithAsProp<AttachmentProps>> {
               styles: styles.action,
               className: Attachment.slotClassNames.action,
             }),
+            generateKey: false,
           })}
         {!_.isNil(progress) && <div className={classes.progress} />}
       </ElementType>

packages/react/src/components/Avatar/Avatar.tsx

@@ -97,6 +97,7 @@ class Avatar extends UIComponent<WithAsProp<AvatarProps>, any> {
             title: name,
             styles: styles.image,
           }),
+          generateKey: false,
         })}
         {!image &&
           Label.create(label || {}, {
@@ -106,6 +107,7 @@ class Avatar extends UIComponent<WithAsProp<AvatarProps>, any> {
               title: name,
               styles: styles.label,
             }),
+            generateKey: false,
           })}
         {Status.create(status, {
           defaultProps: () => ({
@@ -116,6 +118,7 @@ class Avatar extends UIComponent<WithAsProp<AvatarProps>, any> {
               borderWidth: variables.statusBorderWidth,
             },
           }),
+          generateKey: false,
         })}
       </ElementType>
     )

packages/react/src/components/Button/Button.tsx

@@ -153,6 +153,7 @@ class Button extends UIComponent<WithAsProp<ButtonProps>> {
         {!hasChildren && iconPosition !== 'after' && this.renderIcon(variables, styles)}
         {Box.create(!hasChildren && content, {
           defaultProps: () => ({ as: 'span', styles: styles.content }),
+          generateKey: false,
         })}
         {!hasChildren && iconPosition === 'after' && this.renderIcon(variables, styles)}
       </ElementType>
@@ -168,6 +169,7 @@ class Button extends UIComponent<WithAsProp<ButtonProps>> {
         xSpacing: !content ? 'none' : iconPosition === 'after' ? 'before' : 'after',
         variables: variables.icon,
       }),
+      generateKey: false,
     })
   }
 
@@ -179,6 +181,7 @@ class Button extends UIComponent<WithAsProp<ButtonProps>> {
         role: undefined,
         styles: styles.loader,
       }),
+      generateKey: false,
     })
   }
 

packages/react/src/components/Button/ButtonGroup.tsx

@@ -80,6 +80,7 @@ class ButtonGroup extends UIComponent<WithAsProp<ButtonGroupProps>, any> {
               circular,
               styles: this.getStyleForButtonIndex(styles, idx === 0, idx === buttons.length - 1),
             }),
+            generateKey: true,
           }),
         )}
       </ElementType>

packages/react/src/components/Carousel/Carousel.tsx

@@ -280,6 +280,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
                         itemPositionText: getItemPositionText(index, items.length),
                       }),
                     }),
+                    generateKey: false,
                   })}
                 </Ref>
               )
@@ -337,6 +338,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
                 paddlePrevious,
               ),
             }),
+            generateKey: false,
             overrideProps: (predefinedProps: ButtonProps) =>
               this.handlePaddleOverrides(predefinedProps, 'paddlePrevious'),
           })}
@@ -351,6 +353,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
               ...accessibility.attributes.paddleNext,
               ...applyAccessibilityKeyHandlers(accessibility.keyHandlers.paddleNext, paddleNext),
             }),
+            generateKey: false,
             overrideProps: (predefinedProps: ButtonProps) =>
               this.handlePaddleOverrides(predefinedProps, 'paddleNext'),
           })}
@@ -375,6 +378,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
           iconOnly: true,
           activeIndex,
         }),
+        generateKey: false,
         overrideProps: (predefinedProps: CarouselNavigationItemProps) => ({
           onItemClick: (e: React.SyntheticEvent, itemProps: CarouselNavigationItemProps) => {
             const { index } = itemProps

packages/react/src/components/Carousel/CarouselNavigation.tsx

@@ -105,6 +105,7 @@ class CarouselNavigation extends UIComponent<WithAsProp<CarouselNavigationProps>
             ? accessibility.childBehaviors.item
             : undefined,
         }),
+        generateKey: false,
         overrideProps: this.handleItemOverrides(variables),
       }),
     )

packages/react/src/components/Carousel/CarouselNavigationItem.tsx

@@ -105,9 +105,11 @@ class CarouselNavigationItem extends UIComponent<WithAsProp<CarouselNavigationIt
             xSpacing: !!content ? 'after' : 'none',
             styles: styles.icon,
           }),
+          generateKey: false,
         })}
         {Box.create(content, {
           defaultProps: () => ({ as: 'span', styles: styles.content }),
+          generateKey: false,
         })}
       </ElementType>
     )

packages/react/src/components/Chat/Chat.tsx

@@ -68,6 +68,7 @@ class Chat extends UIComponent<WithAsProp<ChatProps>, any> {
           : _.map(items, item =>
               ChatItem.create(item, {
                 defaultProps: () => ({ className: Chat.slotClassNames.item }),
+                generateKey: true,
               }),
             )}
       </ElementType>

packages/react/src/components/Chat/ChatItem.tsx

@@ -92,6 +92,7 @@ class ChatItem extends UIComponent<WithAsProp<ChatItemProps>, any> {
       gutter &&
       Box.create(gutter, {
         defaultProps: () => ({ className: ChatItem.slotClassNames.gutter, styles: styles.gutter }),
+        generateKey: false,
       })
 
     const messageElement = this.setAttachedPropValueForChatMessage(styles)
@@ -112,6 +113,7 @@ class ChatItem extends UIComponent<WithAsProp<ChatItemProps>, any> {
         className: ChatItem.slotClassNames.message,
         styles: styles.message,
       }),
+      generateKey: false,
     })
 
     // the element is ChatMessage

packages/react/src/components/Chat/ChatMessage.tsx

@@ -224,6 +224,7 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
         className: ChatMessage.slotClassNames.actionMenu,
         styles: styles.actionMenu,
       }),
+      generateKey: false,
     })
 
     if (!actionMenuElement) {
@@ -299,13 +300,15 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
         className: ChatMessage.slotClassNames.badge,
         styles: styles.badge,
       }),
+      generateKey: false,
     })
 
     const reactionGroupElement = Reaction.Group.create(reactionGroup, {
       defaultProps: () => ({
         className: ChatMessage.slotClassNames.reactionGroup,
         styles: styles.reactionGroup,
       }),
+      generateKey: false,
     })
 
     const actionMenuElement = this.renderActionMenu(actionMenu, styles)
@@ -316,6 +319,7 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
         styles: styles.author,
         className: ChatMessage.slotClassNames.author,
       }),
+      generateKey: false,
     })
 
     const timestampElement = Text.create(timestamp, {
@@ -325,13 +329,15 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
         timestamp: true,
         className: ChatMessage.slotClassNames.timestamp,
       }),
+      generateKey: false,
     })
 
     const messageContent = Box.create(content, {
       defaultProps: () => ({
         className: ChatMessage.slotClassNames.content,
         styles: styles.content,
       }),
+      generateKey: false,
     })
 
     return (

packages/react/src/components/Checkbox/Checkbox.tsx

@@ -146,6 +146,7 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
         styles: styles.label,
         className: Checkbox.slotClassNames.label,
       }),
+      generateKey: false,
     })
 
     return (
@@ -167,6 +168,7 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
             name: toggle ? 'icon-circle' : 'icon-checkmark',
             styles: toggle ? styles.toggle : styles.checkbox,
           }),
+          generateKey: false,
         })}
         {labelPosition === 'end' && labelElement}
       </ElementType>

packages/react/src/components/Dialog/Dialog.tsx

@@ -258,12 +258,14 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
     const { open } = this.state
 
     const cancelElement = Button.create(cancelButton, {
+      generateKey: false,
       overrideProps: this.handleCancelButtonOverrides,
     })
     const confirmElement = Button.create(confirmButton, {
       defaultProps: () => ({
         primary: true,
       }),
+      generateKey: false,
       overrideProps: this.handleConfirmButtonOverrides,
     })
 
@@ -273,6 +275,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
         defaultProps: () => ({
           styles: styles.actions,
         }),
+        generateKey: false,
         overrideProps: {
           content: (
             <Flex gap="gap.smaller">
@@ -300,6 +303,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
               styles: styles.header,
               ...accessibility.attributes.header,
             }),
+            generateKey: false,
           })}
           {Button.create(headerAction, {
             defaultProps: () => ({
@@ -309,6 +313,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
               iconOnly: true,
               ...accessibility.attributes.headerAction,
             }),
+            generateKey: false,
           })}
 
           {Box.create(content, {
@@ -317,6 +322,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
               className: Dialog.slotClassNames.content,
               ...accessibility.attributes.content,
             }),
+            generateKey: false,
           })}
 
           {DialogFooter.create(footer, {
@@ -325,6 +331,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
               className: Dialog.slotClassNames.footer,
               styles: styles.footer,
             },
+            generateKey: false,
           })}
         </ElementType>
       </Ref>
@@ -359,6 +366,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
                     className: Dialog.slotClassNames.overlay,
                     styles: styles.overlay,
                   }),
+                  generateKey: false,
                   overrideProps: { content: dialogContent },
                 })}
               </Ref>