chore: release 0.40.4

CHANGELOG.md

@@ -17,6 +17,25 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+<!--------------------------------[ v0.40.4 ]------------------------------- -->
+## [v0.40.4](https://github.com/stardust-ui/react/tree/v0.40.4) (2019-11-26)
+[Compare changes](https://github.com/stardust-ui/react/compare/v0.40.3...v0.40.4)
+
+### Fixes
+- Trigger `whatInput` cleanup when last `Provider` with custom `target` gets removed @silviuavram ([#2127](https://github.com/microsoft/fluent-ui-react/pull/2127))
+
+### Performance
+- Allow suppression of action menu positioning in `ChatMessage` @jurokapsiar ([#2126](https://github.com/microsoft/fluent-ui-react/pull/2126))
+
+<!--------------------------------[ v0.40.3 ]------------------------------- -->
+## [v0.40.3](https://github.com/stardust-ui/react/tree/v0.40.3) (2019-11-08)
+[Compare changes](https://github.com/stardust-ui/react/compare/v0.40.2...v0.40.3)
+
+### Performance
+- Add rendering performance telemetry @miroslavstastny ([#2079](https://github.com/microsoft/fluent-ui-react/pull/2079))
+- Skip empty frames in mergeThemes @levithomason @miroslavstastny ([#2095](https://github.com/microsoft/fluent-ui-react/pull/2095))
+- Lazily evaluate styles and classes @levithomason @miroslavstastny ([#2097](https://github.com/microsoft/fluent-ui-react/pull/2097))
+
 <!--------------------------------[ v0.40.2 ]------------------------------- -->
 ## [v0.40.2](https://github.com/stardust-ui/react/tree/v0.40.2) (2019-10-30)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.40.1...v0.40.2)

docs/src/prototypes/customToolbar/index.tsx

@@ -7,7 +7,7 @@ import {
   useSelectKnob,
   KnobInspector,
 } from '@stardust-ui/docs-components'
-import { Provider, Flex, themes, mergeThemes } from '@stardust-ui/react'
+import { Provider, Flex, themes, mergeThemes, Telemetry } from '@stardust-ui/react'
 
 import { darkThemeOverrides } from './darkThemeOverrides'
 import { highContrastThemeOverrides } from './highContrastThemeOverrides'
@@ -58,21 +58,53 @@ const CustomToolbarPrototype: React.FunctionComponent = () => {
   const [currentSlide, setCurrentSlide] = React.useState(23)
   const totalSlides = 34
 
+  const [telemetryEnabled] = useBooleanKnob({ name: 'telemetryEnabled', initialValue: true })
+  const telemetryRef = React.useRef<Telemetry>()
+
   let theme = {}
   if (themeName === 'teamsDark') {
     theme = mergeThemes(themes.teamsDark, darkThemeOverrides)
   } else if (themeName === 'teamsHighContrast') {
     theme = mergeThemes(themes.teamsHighContrast, darkThemeOverrides, highContrastThemeOverrides)
   }
 
+  React.useEffect(() => {
+    performance.measure('render-custom-toolbar', 'render-custom-toolbar')
+    const telemetry = telemetryRef.current
+    if (!telemetryEnabled || !telemetry) {
+      return
+    }
+
+    telemetry.enabled = false
+
+    const totals = _.reduce(
+      telemetry.performance,
+      (acc, next) => {
+        acc.count += next.count
+        acc.msTotal += next.msTotal
+        return acc
+      },
+      { count: 0, msTotal: 0 },
+    )
+
+    console.log(`Rendered ${totals.count} Stardust components in ${totals.msTotal} ms`)
+    console.table(telemetry.performance)
+  })
+
+  if (telemetryRef.current) {
+    telemetryRef.current.enabled = telemetryEnabled
+    telemetryRef.current.reset()
+  }
+  performance.mark('render-custom-toolbar')
+
   return (
     <div style={{ height: '100vh' }}>
       <Flex column fill>
         <KnobsSnippet>
           <KnobInspector />
         </KnobsSnippet>
 
-        <Provider theme={theme} rtl={rtl}>
+        <Provider theme={theme} rtl={rtl} {...(telemetryEnabled ? { telemetryRef } : undefined)}>
           <Flex
             hAlign="center"
             styles={{

docs/src/prototypes/employeeCard/AvatarEmployeeCard.tsx

@@ -55,15 +55,15 @@ class AvatarEmployeeCard extends React.Component<
           this.setState({ popupOpen: newProps.open })
         }}
         trigger={Avatar.create(avatar, {
-          defaultProps: {
+          defaultProps: () => ({
             name: `${firstName} ${lastName}`,
             onMouseEnter: () => {
               this.setPopupOpen(true)
             },
             onMouseLeave: () => {
               this.setPopupOpen(false)
             },
-          },
+          }),
         })}
         content={{
           styles: { marginLeft: '10px' },

docs/src/prototypes/employeeCard/EmployeeCard.tsx

@@ -70,10 +70,10 @@ class EmployeeCard extends React.Component<Extendable<EmployeeCardProps>, any> {
           )}
         </div>
         {Avatar.create(avatar, {
-          defaultProps: {
+          defaultProps: () => ({
             size: 'largest',
             name: `${firstName} ${lastName}`,
-          },
+          }),
         })}
       </Grid>
     )

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

@@ -17,12 +17,12 @@ class MSTeamsLogo extends React.Component<LogoProps, any> {
           return (
             <div style={style}>
               {Icon.create(icon, {
-                defaultProps: {
+                defaultProps: () => ({
                   variables: { color: siteVariables.colors.brand[600] },
                   size: 'largest',
                   xSpacing: 'after',
                   styles: { verticalAlign: 'middle' },
-                },
+                }),
               })}
               <Text
                 styles={{

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

@@ -2,8 +2,8 @@ import { Divider as StardustUIDivider } from '@stardust-ui/react'
 
 export default props => {
   return StardustUIDivider.create(props, {
-    defaultProps: {
+    defaultProps: () => ({
       variables: { dividerColor: 'transparent' },
-    },
+    }),
   })
 }

lerna.json

@@ -1,6 +1,6 @@
 {
   "packages": ["packages/*"],
-  "version": "0.40.2",
+  "version": "0.40.4",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/code-sandbox/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@stardust-ui/code-sandbox",
   "description": "Stardust UI tools for CodeSandbox.",
-  "version": "0.40.2",
+  "version": "0.40.4",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/stardust-ui/react/issues",
   "dependencies": {
-    "@stardust-ui/react": "^0.40.2"
+    "@stardust-ui/react": "^0.40.4"
   },
   "files": [
     "dist"

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stardust-ui/react",
   "description": "A themable React component library.",
-  "version": "0.40.2",
+  "version": "0.40.4",
   "author": "Levi Thomason <me@levithomason.com>",
   "bugs": "https://github.com/stardust-ui/react/issues",
   "dependencies": {

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

@@ -258,27 +258,27 @@ class Accordion extends AutoControlledComponent<WithAsProp<AccordionProps>, Acco
 
       children.push(
         AccordionTitle.create(title, {
-          defaultProps: {
+          defaultProps: () => ({
             className: Accordion.slotClassNames.title,
             active,
             index,
             contentRef,
             canBeCollapsed,
             id: titleId,
             accordionContentId: contentId,
-          },
+          }),
           overrideProps: this.handleTitleOverrides,
           render: renderPanelTitle,
         }),
       )
       children.push(
         AccordionContent.create(content, {
-          defaultProps: {
+          defaultProps: () => ({
             className: Accordion.slotClassNames.content,
             active,
             id: contentId,
             accordionTitleId: titleId,
-          },
+          }),
           render: renderPanelContent,
         }),
       )

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

@@ -119,9 +119,9 @@ class AccordionTitle extends UIComponent<WithAsProp<AccordionTitleProps>, any> {
           {...accessibility.attributes.content}
           {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.content, unhandledProps)}
           start={Icon.create(indicatorWithDefaults, {
-            defaultProps: {
+            defaultProps: () => ({
               styles: styles.indicator,
-            },
+            }),
           })}
           main={rtlTextContainer.createFor({ element: content })}
         />

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

@@ -180,57 +180,57 @@ class Alert extends AutoControlledComponent<WithAsProp<AlertProps>, AlertState>
     const bodyContent = (
       <>
         {Text.create(header, {
-          defaultProps: {
+          defaultProps: () => ({
             className: Alert.slotClassNames.header,
             styles: styles.header,
             ...accessibility.attributes.header,
-          },
+          }),
         })}
         {Box.create(content, {
-          defaultProps: {
+          defaultProps: () => ({
             className: Alert.slotClassNames.content,
             styles: styles.content,
             ...accessibility.attributes.content,
-          },
+          }),
         })}
       </>
     )
 
     return (
       <>
         {Icon.create(icon, {
-          defaultProps: {
+          defaultProps: () => ({
             className: Alert.slotClassNames.icon,
             styles: styles.icon,
-          },
+          }),
         })}
         {Box.create(body, {
-          defaultProps: {
+          defaultProps: () => ({
             id: this.state.bodyId,
             className: Alert.slotClassNames.body,
             ...accessibility.attributes.body,
             styles: styles.body,
-          },
+          }),
           overrideProps: {
             children: bodyContent,
           },
         })}
 
         {ButtonGroup.create(actions, {
-          defaultProps: {
+          defaultProps: () => ({
             className: Alert.slotClassNames.actions,
             styles: styles.actions,
-          },
+          }),
         })}
         {dismissible &&
           Button.create(dismissAction, {
-            defaultProps: {
+            defaultProps: () => ({
               iconOnly: true,
               text: true,
               className: Alert.slotClassNames.dismissAction,
               styles: styles.dismissAction,
               ...accessibility.attributes.dismissAction,
-            },
+            }),
             overrideProps: this.handleDismissOverrides,
           })}
       </>

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

@@ -91,27 +91,27 @@ class Attachment extends UIComponent<WithAsProp<AttachmentProps>> {
       >
         {icon &&
           Icon.create(icon, {
-            defaultProps: { size: 'larger', styles: styles.icon },
+            defaultProps: () => ({ size: 'larger', styles: styles.icon }),
           })}
         {(header || description) && (
           <div className={classes.content}>
             {Text.create(header, {
-              defaultProps: { styles: styles.header },
+              defaultProps: () => ({ styles: styles.header }),
             })}
 
             {Text.create(description, {
-              defaultProps: { styles: styles.description },
+              defaultProps: () => ({ styles: styles.description }),
             })}
           </div>
         )}
         {action &&
           Button.create(action, {
-            defaultProps: {
+            defaultProps: () => ({
               iconOnly: true,
               text: true,
               styles: styles.action,
               className: Attachment.slotClassNames.action,
-            },
+            }),
           })}
         {!_.isNil(progress) && <div className={classes.progress} />}
       </ElementType>

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

@@ -91,31 +91,31 @@ class Avatar extends UIComponent<WithAsProp<AvatarProps>, any> {
     return (
       <ElementType {...accessibility.attributes.root} {...unhandledProps} className={classes.root}>
         {Image.create(image, {
-          defaultProps: {
+          defaultProps: () => ({
             fluid: true,
             avatar: true,
             title: name,
             styles: styles.image,
-          },
+          }),
         })}
         {!image &&
           Label.create(label || {}, {
-            defaultProps: {
+            defaultProps: () => ({
               content: getInitials(name),
               circular: true,
               title: name,
               styles: styles.label,
-            },
+            }),
           })}
         {Status.create(status, {
-          defaultProps: {
+          defaultProps: () => ({
             size,
             styles: styles.status,
             variables: {
               borderColor: variables.statusBorderColor,
               borderWidth: variables.statusBorderWidth,
             },
-          },
+          }),
         })}
       </ElementType>
     )

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

@@ -149,7 +149,7 @@ class Button extends UIComponent<WithAsProp<ButtonProps>> {
         {!hasChildren && loading && this.renderLoader(variables, styles)}
         {!hasChildren && iconPosition !== 'after' && this.renderIcon(variables, styles)}
         {Box.create(!hasChildren && content, {
-          defaultProps: { as: 'span', styles: styles.content },
+          defaultProps: () => ({ as: 'span', styles: styles.content }),
         })}
         {!hasChildren && iconPosition === 'after' && this.renderIcon(variables, styles)}
       </ElementType>
@@ -160,22 +160,22 @@ class Button extends UIComponent<WithAsProp<ButtonProps>> {
     const { icon, iconPosition, content } = this.props
 
     return Icon.create(icon, {
-      defaultProps: {
+      defaultProps: () => ({
         styles: styles.icon,
         xSpacing: !content ? 'none' : iconPosition === 'after' ? 'before' : 'after',
         variables: variables.icon,
-      },
+      }),
     })
   }
 
   renderLoader = (variables, styles) => {
     const { loader } = this.props
 
     return Loader.create(loader || {}, {
-      defaultProps: {
+      defaultProps: () => ({
         role: undefined,
         styles: styles.loader,
-      },
+      }),
     })
   }