merging with latest master

Author: mituron

.circleci/config.yml

@@ -77,7 +77,12 @@ jobs:
           command: yarn test:circulars
       - run:
           name: Flamegrill
-          command: yarn perf:test
+          command: |
+            if [ $CIRCLE_BRANCH == 'master' ]; then
+              yarn perf:test:base
+            else
+              yarn perf:test
+            fi
       - run:
           name: Bundle Statistics (master only)
           command: |

CHANGELOG.md

@@ -17,6 +17,44 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Restricted prop sets in the `Checkbox`, `Icon`, `Label`, `Slider`, `Status`, `Text` components which are passed to styles functions @layershifter ([#2307](https://github.com/microsoft/fluent-ui-react/pull/2307))
+- Styles caching when no inline overrides are defined is enabled by default; use the `performance` prop on the `Provider` to opt out of this if needed @mnajdova ([#2309](https://github.com/microsoft/fluent-ui-react/pull/2309))
+- Styles for the `Animation` component are removed from Teams theme @layershifter ([#2258](https://github.com/microsoft/fluent-ui-react/pull/2258))
+- Styles from `Popup` were moved `PopupContent` component @layershifter ([#2333](https://github.com/microsoft/fluent-ui-react/pull/2333))
+- Styles from `Tooltip` were moved `TooltipContent` component @layershifter ([#2333](https://github.com/microsoft/fluent-ui-react/pull/2333))
+- `ProviderBox` component was removed @layershifter ([#2192](https://github.com/microsoft/fluent-ui-react/pull/2192))
+- Styles and variables from `ProviderBox` are moved to `Provider` @layershifter ([#2192](https://github.com/microsoft/fluent-ui-react/pull/2192))
+- Fix an issue with `offset` and `pointing` in `Popup` @layershifter ([#2361](https://github.com/microsoft/fluent-ui-react/pull/2361))
+- Restricted prop set in the `TooltipContent` component which is passed to styles functions @layershifter ([#2357](https://github.com/microsoft/fluent-ui-react/pull/2357))
+- Restricted prop sets in the `Chat`, `ChatItem`, `ChatMessage` components which are passed to styles functions @layershifter ([#2366](https://github.com/microsoft/fluent-ui-react/pull/2366))
+
+### Fixes
+- Remove dependency on Lodash in TypeScript typings @layershifter ([#2323](https://github.com/microsoft/fluent-ui-react/pull/2323))
+- Fix missing aria-describedby in AlertBehavior @delprzemo ([#2208](https://github.com/microsoft/fluent-ui-react/pull/2208))
+- Fix page crash when `Tooltip` content is null @delprzemo ([#2332](https://github.com/microsoft/fluent-ui-react/pull/2332))
+- Fix `document` usage in `mergeProviderContexts` to get SSR working @layershifter ([#2330](https://github.com/microsoft/fluent-ui-react/pull/2330))
+- Fix `input` descenders being cropped in the Teams theme @bcalvery ([#2335](https://github.com/microsoft/fluent-ui-react/pull/2335))
+- Use referentially equal objects for `actions` in `useStateManager` @layershifter ([#2347](https://github.com/microsoft/fluent-ui-react/pull/2347))
+- Fix `Animation` component not to throw when `children` is not provided @mnajdova ([#2345](https://github.com/microsoft/fluent-ui-react/pull/2345))
+- Fix `loader` - adding labeling when loader get focus @kolaps33 ([#2352](https://github.com/microsoft/fluent-ui-react/pull/2352))
+- `setWhatInputSource()` changes DOM attribute in `whatInput` @layershifter ([#2359](https://github.com/microsoft/fluent-ui-react/pull/2359))
+- Styles from `Provider` are applied to components that rendered out of it in DOM @layershifter ([#2192](https://github.com/microsoft/fluent-ui-react/pull/2192))
+- Fix `Carousel` remove `CarouselItem` elements which are not visible @mnajdova ([#2356](https://github.com/microsoft/fluent-ui-react/pull/2356))
+
+### Features
+- Added sourcemaps to the dist output to simplify debugging @miroslavstastny ([#2329](https://github.com/microsoft/fluent-ui-react/pull/2329))
+- Adding 'expand', 'collapse', 'companion', 'share-to' and 'settings-audio' icons @TanelVari ([#2343](https://github.com/microsoft/fluent-ui-react/pull/2343))
+- Add support for Children API in `List` component @layershifter ([#2207](https://github.com/microsoft/fluent-ui-react/pull/2207))
+
+### Performance
+- Add styles caching when there aren't inline overrides defined @mnajdova ([#2309](https://github.com/microsoft/fluent-ui-react/pull/2309))
+- Styles for `Animation` component are computed again only on prop changes @layershifter ([#2258](https://github.com/microsoft/fluent-ui-react/pull/2258))
+
+<!--------------------------------[ v0.44.0 ]------------------------------- -->
+## [v0.44.0](https://github.com/microsoft/fluent-ui-react/tree/v0.44.0) (2020-02-05)
+[Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.43.2..v0.44.0)
+
 ### BREAKING CHANGES
 - Add `@fluentui/styles` package for all styles' related utilities and TS types @layershifter, @mnajdova ([#2222](https://github.com/microsoft/fluent-ui-react/pull/2222))
 - Remove `animation` prop from all components @joschect ([#2239](https://github.com/microsoft/fluent-ui-react/pull/2239))
@@ -27,25 +65,52 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Restricted prop set in the `Button`, `Avatar`, `Box` and `Image` styles; changed `avatarBorderWidth` and `statusBorderWidth` avatar variables types from number to string and updated styles in Teams theme @mnajdova ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
 - Restricted prop set in the `List` & `ListItem` @layershifter ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
 - Remove `mountDocument` prop in `Popup` & `MenuButton` components @layershifter ([#2286](https://github.com/microsoft/fluent-ui-react/pull/2286))
+- Add typing `ComponentSlotStylesResolved`, that replaces the incorrect `ComponentSlotStylesPrepared` in the return value of `useStyles`, `renderComponent`, `createComponent` @mnajdova ([#2312](https://github.com/microsoft/fluent-ui-react/pull/2312))
 
 ### Fixes
-- Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))
 - Fix styleParam to always be required in the styles functions @layershifter, @mnajdova ([#2235](https://github.com/microsoft/fluent-ui-react/pull/2235))
 - Check input and button refs exist before focus in `Dropdown` @silviuavram ([#2248](https://github.com/microsoft/fluent-ui-react/pull/2248))
 - Update iconOnly button hover, focus styles and add new `background5` and `backgroundHover2` design tokens in Teams theme @codepretty ([#2211](https://github.com/microsoft/fluent-ui-react/pull/2211))
 - Fix `forceUpdate` to get synced updates in React's Concurrent mode @layershifter ([#2268](https://github.com/microsoft/fluent-ui-react/pull/2268))
-- Fix element reference memory leaks @jurokapsiar ([#2270](https://github.com/microsoft/fluent-ui-react/pull/2270))
 - Adding actionable items into `Carousel` @kolaps33 ([#2271](https://github.com/microsoft/fluent-ui-react/pull/2271))
 
 ### Features
 - Allow `useRef` hook used for storing debugging data to be defined in any order with other hooks in functional components @layershifter, @mnajdova ([#2236](https://github.com/microsoft/fluent-ui-react/pull/2236))
 - Add `useStyles()` hook to use theming capabilities in custom components @layershifter, @mnajdova ([#2217](https://github.com/microsoft/fluent-ui-react/pull/2217))
 - Add optional wrapper function to `List` which can be used to inject custom scrollbars to `Dropdown` @jurokapsiar ([#2092](https://github.com/microsoft/fluent-ui-react/pull/2092))
 - Add `useTelemetry()` hook for adding telemetry information for the Fluent components and improve return types for the `useStyles` and `useStateManager` hooks @mnajdova ([#2257](https://github.com/microsoft/fluent-ui-react/pull/2257))
+- Add new `backgroundHover1` Red design tokens in Teams theme @codepretty ([#2297](https://github.com/microsoft/fluent-ui-react/pull/2297))
+- Add `target` prop to `EventListener` component and `useEventListener()` hook @layershifter ([#2287](https://github.com/microsoft/fluent-ui-react/pull/2287))
+- Add `disabled` prop accordion title @jurokapsiar ([#2290](https://github.com/microsoft/fluent-ui-react/pull/2290))
+- Allow custom values for `size` in `FlexItem` @silviuavram ([#2313](https://github.com/microsoft/fluent-ui-react/pull/2313))
+- Move `zIndex` values from default variable values and styles to siteVariables object in Teams theme @pompomon ([#2311](https://github.com/microsoft/fluent-ui-react/pull/2311)) 
 
 ### Documentation
 - Add per-component performance charts @miroslavstastny ([#2240](https://github.com/microsoft/fluent-ui-react/pull/2240))
 
+<!--------------------------------[ v0.43.2 ]------------------------------- -->
+## [v0.43.2](https://github.com/microsoft/fluent-ui-react/tree/v0.43.2) (2020-02-05)
+[Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.43.1..v0.43.2)
+
+### BREAKING CHANGES
+- Remove `toRefObject` function @layershifter ([#2287](https://github.com/microsoft/fluent-ui-react/pull/2287))
+
+### Fixes
+- Fix positioning fixes for `actions` in `ChatMessage` @layershifter ([#2300](https://github.com/microsoft/fluent-ui-react/pull/2300))
+- `FocusZone`: Cleanup DOM element references when the component is unmounted @johannao76 ([#2306](https://github.com/microsoft/fluent-ui-react/pull/2306))
+
+### Documentation
+- Fix dependencies in project exported to codesandbox @miroslavstastny ([#2314](https://github.com/microsoft/fluent-ui-react/pull/2314))
+
+<!--------------------------------[ v0.43.1 ]------------------------------- -->
+## [v0.43.1](https://github.com/microsoft/fluent-ui-react/tree/v0.43.1) (2020-01-30)
+[Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.43.0..v0.43.1)
+
+### Fixes
+- Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))
+- Fix element reference memory leaks @jurokapsiar ([#2270](https://github.com/microsoft/fluent-ui-react/pull/2270))
+- Fix element leak in `refFindNode` @miroslavstastny ([#2288](https://github.com/microsoft/fluent-ui-react/pull/2288))
+
 <!--------------------------------[ v0.43.0 ]------------------------------- -->
 ## [v0.43.0](https://github.com/microsoft/fluent-ui-react/tree/v0.43.0) (2020-01-08)
 [Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.42.0..v0.43.0)

build/babel/index.js

@@ -31,7 +31,9 @@ module.exports = api => {
   ]
   const plugins = [
     '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
     ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
+    '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-syntax-dynamic-import',
     ['@babel/plugin-transform-runtime', { useESModules }],
 

build/dangerjs/checkPerfRegressions.ts

@@ -18,14 +18,7 @@ function linkToFlamegraph(value, filename) {
   )})`
 }
 
-function fluentFabricComparision(danger, markdown, warn) {
-  let perfCounts
-  try {
-    perfCounts = require(config.paths.packageDist('perf-test', 'perfCounts.json'))
-  } catch {
-    warn('No perf measurements available')
-    return
-  }
+function fluentFabricComparison(perfCounts, danger, markdown, warn) {
   const results = _.mapValues(
     _.pickBy(perfCounts, (value, key) => key.endsWith('.Fluent')),
     stats => {
@@ -66,7 +59,85 @@ function fluentFabricComparision(danger, markdown, warn) {
     ].join('\n'),
   )
 }
+function currentToMasterComparison(perfCounts, danger, markdown, warn) {
+  const results = _.map(
+    _.pickBy(perfCounts, value => _.has(value, 'analysis.regression')),
+    (stats, name) => {
+      const currentTicks = _.get(stats, 'analysis.numTicks')
+      const baselineTicks = _.get(stats, 'analysis.baseline.numTicks')
+
+      return {
+        name,
+        numTicks: currentTicks,
+        flamegraphFile: _.get(stats, 'processed.output.flamegraphFile'),
+        baseline: {
+          numTicks: baselineTicks,
+          flamegraphFile: _.get(stats, 'processed.baseline.output.flamegraphFile'),
+        },
+        isRegression: _.get(stats, 'analysis.regression.isRegression'),
+        currentToBaseline: Math.round((currentTicks / baselineTicks) * 100) / 100,
+      }
+    },
+  )
+
+  const regressions = _.sortBy(
+    _.filter(results, 'isRegression'),
+    stats => stats.currentToBaseline * -1,
+  )
+
+  if (regressions.length > 0) {
+    warn(`${regressions.length} perf regressions detected`)
+    markdown(
+      [
+        '## Potential regressions comparing to master',
+        '',
+        'Scenario | Current PR Ticks | Baseline Ticks | Ratio',
+        ':--- | ---:| ---:| ---:',
+        ..._.map(regressions, (value, key) =>
+          [
+            value.name,
+            linkToFlamegraph(value.numTicks, value.flamegraphFile),
+            linkToFlamegraph(value.baseline.numTicks, value.baseline.flamegraphFile),
+            `${value.currentToBaseline}:1`,
+          ].join(' | '),
+        ),
+      ].join('\n'),
+    )
+  }
+
+  const noRegressions = _.sortBy(
+    _.filter(results, stats => !stats.isRegression),
+    stats => stats.currentToBaseline * -1,
+  )
+  markdown(
+    [
+      '<details><summary>Perf tests with no regressions</summary>',
+      '',
+      'Scenario | Current PR Ticks | Baseline Ticks | Ratio',
+      ':--- | ---:| ---:| ---:',
+      ..._.map(noRegressions, (value, key) =>
+        [
+          value.name,
+          linkToFlamegraph(value.numTicks, value.flamegraphFile),
+          linkToFlamegraph(value.baseline.numTicks, value.baseline.flamegraphFile),
+          `${value.currentToBaseline}:1`,
+        ].join(' | '),
+      ),
+      '',
+      '</details>',
+    ].join('\n'),
+  )
+}
 
 export default ({ danger, markdown, warn }: DangerJS) => {
-  fluentFabricComparision(danger, markdown, warn)
+  let perfCounts
+  try {
+    perfCounts = require(config.paths.packageDist('perf-test', 'perfCounts.json'))
+  } catch {
+    warn('No perf measurements available')
+    return
+  }
+
+  fluentFabricComparison(perfCounts, danger, markdown, warn)
+  currentToMasterComparison(perfCounts, danger, markdown, warn)
 }

build/gulp/tasks/bundle.ts

@@ -1,5 +1,6 @@
 import { task, series, parallel, src, dest } from 'gulp'
 import babel from 'gulp-babel'
+import sourcemaps from 'gulp-sourcemaps'
 import { log, PluginError } from 'gulp-util'
 import del from 'del'
 import webpack from 'webpack'
@@ -34,13 +35,17 @@ const componentsSrc = [
 
 task('bundle:package:commonjs', () =>
   src(componentsSrc)
+    .pipe(sourcemaps.init())
     .pipe(babel())
+    .pipe(sourcemaps.write('.'))
     .pipe(dest(paths.packageDist(packageName, 'commonjs'))),
 )
 
 task('bundle:package:es', () =>
   src(componentsSrc)
+    .pipe(sourcemaps.init())
     .pipe(babel({ caller: { useESModules: true } } as any))
+    .pipe(sourcemaps.write('.'))
     .pipe(dest(paths.packageDist(packageName, 'es'))),
 )
 

build/gulp/tasks/test-projects.ts

@@ -205,6 +205,35 @@ task('test:projects:rollup', async () => {
   logger(`✔️Browser test was passed`)
 })
 
+task('test:projects:nextjs', async () => {
+  const logger = log('test:projects:nextjs')
+
+  const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/nextjs')
+  const tmpDirectory = tmp.dirSync({ prefix: 'project-' }).name
+
+  logger(`✔️Temporary directory was created: ${tmpDirectory}`)
+
+  const dependencies = ['next', 'react', 'react-dom'].join(' ')
+  await runIn(tmpDirectory)(`yarn add ${dependencies}`)
+  logger(`✔️Dependencies were installed`)
+
+  const packedPackages = await packProjectPackages(logger)
+  await addResolutionPathsForProjectPackages(tmpDirectory, packedPackages)
+  await runIn(tmpDirectory)(`yarn add ${packedPackages['@fluentui/react']}`)
+  logger(`✔️Fluent UI packages were added to dependencies`)
+
+  fs.mkdirSync(path.resolve(tmpDirectory, 'pages'))
+  fs.copyFileSync(scaffoldPath('index.js'), path.resolve(tmpDirectory, 'pages', 'index.js'))
+  logger(`✔️Source and bundler's config were created`)
+
+  await runIn(tmpDirectory)(`yarn next build`)
+  await runIn(tmpDirectory)(`yarn next export`)
+  logger(`✔️Example project was successfully built: ${tmpDirectory}`)
+
+  await performBrowserTest(path.resolve(tmpDirectory, 'out'), await portfinder.getPortPromise())
+  logger(`✔️Browser test was passed`)
+})
+
 task('test:projects:typings', async () => {
   const logger = log('test:projects:typings')
 
@@ -242,6 +271,7 @@ task(
   series(
     'bundle:all-packages',
     'test:projects:cra-ts',
+    'test:projects:nextjs',
     'test:projects:rollup',
     'test:projects:typings',
   ),

build/gulp/tasks/test-projects/nextjs/index.js

@@ -0,0 +1,11 @@
+import { Button, Dropdown, Provider, themes } from '@fluentui/react'
+import React from 'react'
+
+const Page = () => (
+  <Provider theme={themes.teams}>
+    <Dropdown items={['Foo', 'Bar', 'Baz', 'Qux']} />
+    <Button>Welcome to Next.js!</Button>
+  </Provider>
+)
+
+export default Page

build/gulp/tasks/test-projects/typings/tsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "jsx": "react",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "target": "es5"
+    "target": "es5",
+    "strict": true
   },
   "include": ["src"]
 }

build/package.json

@@ -1,29 +1,31 @@
 {
   "name": "@fluentui/internal-tooling",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/preset-react": "^7.6.3",
-    "@babel/preset-typescript": "^7.6.0",
-    "@babel/register": "^7.4.4",
-    "@babel/standalone": "^7.3.2",
-    "@fluentui/eslint-plugin": "^0.43.0",
+    "@babel/core": "^7.7.7",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.7.6",
+    "@babel/preset-env": "^7.7.6",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/preset-typescript": "^7.7.7",
+    "@babel/register": "^7.7.7",
+    "@babel/standalone": "^7.7.7",
+    "@fluentui/eslint-plugin": "^0.44.0",
     "@mdx-js/loader": "^1.0.21",
     "@types/babel__traverse": "^7.0.4",
     "@types/express": "^4.16.1",
     "@types/gulp": "^4.0.6",
     "@types/gulp-babel": "6.1.29",
     "@types/gulp-cache": "^0.4.4",
-    "@types/gulp-util": "^3.0.34",
     "@types/gulp-remember": "^0.0.31",
-    "@types/jest-axe": "^3.2.1",
+    "@types/gulp-util": "^3.0.34",
     "@types/jest": "^24.0.19",
+    "@types/jest-axe": "^3.2.1",
     "@types/lerna-alias": "^3.0.0",
     "@types/node": "^10.3.2",
     "@types/puppeteer": "^1.11.1",
@@ -47,8 +49,8 @@
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^22.4.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react-hooks": "^2.1.2",
     "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^2.1.2",
     "express": "^4.15.4",
     "extract-comments": "^1.0.0",
     "fork-ts-checker-webpack-plugin": "^1.3.3",
@@ -57,6 +59,7 @@
     "gulp-babel": "^8.0.0",
     "gulp-cache": "^1.0.2",
     "gulp-remember": "^1.0.1",
+    "gulp-sourcemaps": "^2.6.5",
     "gulp-util": "^3.0.8",
     "html-webpack-plugin": "^4.0.0-beta.5",
     "jest": "^24.9.0",
@@ -78,7 +81,7 @@
     "tmp": "^0.0.33",
     "tsconfig-paths": "^3.7.0",
     "webpack": "^4.35.0",
-    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-dev-middleware": "^3.6.2",
     "webpack-hot-middleware": "^2.24.3"
   },

build/webpack.config.ts

@@ -141,7 +141,7 @@ const webpackConfig: webpack.Configuration = {
 // Environment Configuration
 // ------------------------------------
 if (__DEV__) {
-  const webpackHotPath = `${config.compiler_public_path}__compiler_hmr`
+  const webpackHotPath = `${config.compiler_public_path}__webpack_hmr`
   const webpackHotMiddlewareEntry = `webpack-hot-middleware/client?${_.map(
     {
       path: webpackHotPath, // The path which the middleware is serving the event stream on