From b8c991c678304e183840594bc8d197d066b50318 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Charles=20Assun=C3=A7=C3=A3o?=
 <junioassuncaocharles@gmail.com>
Date: Wed, 3 Feb 2021 15:04:48 -0300
Subject: [PATCH 01/17] fix(react-context-selector): fix React warnings about
 setState() (#16714)

* WIP on fixing contextSelector

* fix(ContextSelector): fix

* fix(ContextSelector): selectors

* fix(ContextSelector): selectors tests fix

* fix(ContextSelector): changelog

* fix(ContextSelector): fix rollup

* fix(ContextSelector): flatten context value

* fix(ContextSelector): add comments

* Update packages/fluentui/CHANGELOG.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* fix(ContextSelector): move scheduler to peerDependencies

* Update packages/fluentui/react-context-selector/src/types.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-context-selector/src/types.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-context-selector/src/types.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-context-selector/src/createContext.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-context-selector/src/useContextSelector.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-context-selector/package.json

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
---
 packages/fluentui/CHANGELOG.md                |   1 +
 .../assets/rollup/rollup.config.js            |   3 +-
 .../react-context-selector/package.json       |   7 +-
 .../src/createContext.ts                      |  80 +++++-------
 .../react-context-selector/src/types.ts       |  23 ++--
 .../src/useContextSelector.ts                 |  83 +++++++-----
 .../src/useContextSelectors.ts                | 115 ++++++++++-------
 .../react-context-selector/src/utils.ts       |  13 +-
 .../test/createContext-test.tsx               |  67 +---------
 .../test/useContextSelector-test.tsx          | 102 ++++++++-------
 .../test/useContextSelectors-test.tsx         | 118 +++++++++++++-----
 .../src/components/Chat/chatItemContext.ts    |   2 +-
 .../src/components/List/listContext.ts        |  23 ++--
 .../src/components/Menu/menuContext.ts        |  35 +++---
 .../components/Toolbar/toolbarMenuContext.ts  |  11 +-
 yarn.lock                                     |  13 ++
 16 files changed, 380 insertions(+), 316 deletions(-)

diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
index f9c4da1929fcf9..117d634c979587 100644
--- a/packages/fluentui/CHANGELOG.md
+++ b/packages/fluentui/CHANGELOG.md
@@ -41,6 +41,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Embed` playback control visuals. @TanelVari ([#16611](https://github.com/microsoft/fluentui/pull/16611))
 - Fixes for `Dropdown`. Fix clear indicator visual styles (focus border, using `CloseIcon`). Fix empty search result text style. Fix left/right padding for multiple selection labels. Using `ChevronDownIcon` for toggle indicator. @TanelVari ([#16522](https://github.com/microsoft/fluentui/pull/16522))
 - Fix docsite header colors for all themes. `ExampleSnippet` now honors theme colors for background and foreground. @TanelVari ([#16643](https://github.com/microsoft/fluentui/pull/16643))
+- Refactor `react-context-selector` to avoid React warnings @assuncaocharles ([#16714](https://github.com/microsoft/fluentui/pull/16714))
 
 ## Features
 - Added `disabledFocusable` prop for `Button` component. @jurokapsiar ([#16419](https://github.com/microsoft/fluentui/pull/16419))
diff --git a/packages/fluentui/projects-test/assets/rollup/rollup.config.js b/packages/fluentui/projects-test/assets/rollup/rollup.config.js
index 10d9cb422c4a9b..b76091990dff56 100644
--- a/packages/fluentui/projects-test/assets/rollup/rollup.config.js
+++ b/packages/fluentui/projects-test/assets/rollup/rollup.config.js
@@ -10,7 +10,7 @@ const warningWhitelist = [
 ];
 
 export default {
-  external: ['lodash', 'lodash/fp', 'prop-types', 'react', 'react-dom', 'react-is'],
+  external: ['lodash', 'lodash/fp', 'prop-types', 'react', 'react-dom', 'react-is', 'scheduler'],
   input: 'app.js',
   onwarn: (warning, warn) => {
     if (warningWhitelist.includes(warning.code)) {
@@ -30,6 +30,7 @@ export default {
       react: 'React',
       'react-dom': 'ReactDOM',
       'react-is': 'ReactIs',
+      scheduler: 'Scheduler',
     },
     sourcemap: true,
   },
diff --git a/packages/fluentui/react-context-selector/package.json b/packages/fluentui/react-context-selector/package.json
index 154396254e96db..431151e54c85c1 100644
--- a/packages/fluentui/react-context-selector/package.json
+++ b/packages/fluentui/react-context-selector/package.json
@@ -9,16 +9,19 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^1.0.0-beta",
+    "@fluentui/scripts": "^1.0.0",
     "@types/react": "16.9.42",
     "@types/react-is": "^16.7.1",
-    "@fluentui/scripts": "^1.0.0",
+    "@types/scheduler": "^0.16.1",
     "lerna-alias": "^3.0.3-0",
     "react": "16.8.6",
     "react-is": "^16.6.3",
+    "scheduler": "^0.20.1",
     "typescript": "3.7.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0",
+    "scheduler": ">=0.19.0"
   },
   "files": [
     "dist"
diff --git a/packages/fluentui/react-context-selector/src/createContext.ts b/packages/fluentui/react-context-selector/src/createContext.ts
index b20c332896393f..76e031fcf66cf5 100644
--- a/packages/fluentui/react-context-selector/src/createContext.ts
+++ b/packages/fluentui/react-context-selector/src/createContext.ts
@@ -1,33 +1,38 @@
 import * as React from 'react';
-import { Context, ContextListener, ContextValue, CreateContextOptions } from './types';
 
-// Stops React Context propagation
-// https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-reconciler/src/ReactFiberBeginWork.js#L2656
-const calculateChangedBits = () => 0;
+import { Context, ContextValue } from './types';
+import { runWithNormalPriority, useIsomorphicLayoutEffect } from './utils';
 
 const createProvider = <Value>(Original: React.Provider<ContextValue<Value>>) => {
   const Provider: React.FC<React.ProviderProps<Value>> = props => {
-    const listeners = React.useRef<ContextListener<Value>[]>([]);
-
-    // We call listeners in render intentionally. Listeners are not technically pure, but
-    // otherwise we can't get benefits from concurrent mode.
-    //
-    // We make sure to work with double or more invocation of listeners.
-    listeners.current.forEach(listener => listener(props.value));
-
-    // Disables updates propogation for React Context as `value` is always shallow equal
-    const subscribe = React.useCallback((listener: ContextListener<Value>) => {
-      listeners.current.push(listener);
-
-      const unsubscribe = () => {
-        const index = listeners.current.indexOf(listener);
-        listeners.current.splice(index, 1);
+    // Holds an actual "props.value"
+    const valueRef = React.useRef(props.value);
+    // Used to sync context updates and avoid stale values, can be considered as render/effect counter of Provider.
+    const versionRef = React.useRef(0);
+    
+    // A stable object, is used to avoid context updates via mutation of its values.
+    const contextValue = React.useRef<ContextValue<Value>>();
+
+    if (!contextValue.current) {
+      contextValue.current = {
+        value: valueRef,
+        version: versionRef,
+        listeners: [],
       };
+    }
 
-      return unsubscribe;
-    }, []);
+    useIsomorphicLayoutEffect(() => {
+      valueRef.current = props.value;
+      versionRef.current += 1;
 
-    return React.createElement(Original, { value: { subscribe, value: props.value } }, props.children);
+      runWithNormalPriority(() => {
+        (contextValue.current as ContextValue<Value>).listeners.forEach(listener => {
+          listener([versionRef.current, props.value]);
+        });
+      });
+    }, [props.value]);
+
+    return React.createElement(Original, { value: contextValue.current }, props.children);
   };
 
   /* istanbul ignore else */
@@ -38,31 +43,12 @@ const createProvider = <Value>(Original: React.Provider<ContextValue<Value>>) =>
   return Provider;
 };
 
-export const createContext = <Value>(defaultValue: Value, options: CreateContextOptions = {}): Context<Value> => {
-  const { strict = true } = options;
-
-  const context = ((React.createContext as unknown) as (
-    defaultValue: any,
-    calcChangedBits?: () => number,
-  ) => React.Context<ContextValue<Value>>)(
-    {
-      get subscribe() {
-        if (strict) {
-          /* istanbul ignore next */
-          throw new Error(
-            process.env.NODE_ENV === 'production'
-              ? ''
-              : `Please use <Provider /> component from "@fluentui/react-context-selector"`,
-          );
-        }
-
-        /* istanbul ignore next */
-        return () => () => {};
-      },
-      value: defaultValue,
-    },
-    calculateChangedBits,
-  );
+export const createContext = <Value>(defaultValue: Value): Context<Value> => {
+  const context = React.createContext<ContextValue<Value>>({
+    value: { current: defaultValue },
+    version: { current: -1 },
+    listeners: [],
+  });
 
   context.Provider = createProvider<Value>(context.Provider) as any;
 
diff --git a/packages/fluentui/react-context-selector/src/types.ts b/packages/fluentui/react-context-selector/src/types.ts
index 63d3bdf2ffb9a2..0a70692c56bb2f 100644
--- a/packages/fluentui/react-context-selector/src/types.ts
+++ b/packages/fluentui/react-context-selector/src/types.ts
@@ -5,15 +5,22 @@ export type Context<Value> = React.Context<Value> & {
   Consumer: never;
 };
 
-export type CreateContextOptions = {
-  strict?: boolean;
-};
-
-export type ContextListener<Value> = (value: Value) => void;
-
 export type ContextSelector<Value, SelectedValue> = (value: Value) => SelectedValue;
 
+export type ContextVersion = number;
+
 export type ContextValue<Value> = {
-  subscribe: (listener: ContextListener<Value>) => any;
-  value: Value;
+  /** Holds a set of subscribers from components. */
+  listeners: ((payload: readonly [ContextVersion, Value]) => void)[];
+
+  /** Holds an actual value of React's context that will be propagated down for computations. */
+  value: React.MutableRefObject<Value>;
+
+  /** A version field is used to sync a context value and consumers. */
+  version: React.MutableRefObject<ContextVersion>;
+};
+
+export type ContextValues<Value> = ContextValue<Value> & {
+  /** List of listners to publish changes */
+  listeners: ((payload: readonly [ContextVersion, Record<string, Value>]) => void)[];
 };
diff --git a/packages/fluentui/react-context-selector/src/useContextSelector.ts b/packages/fluentui/react-context-selector/src/useContextSelector.ts
index 927d6c775c56ff..095251523d6aa7 100644
--- a/packages/fluentui/react-context-selector/src/useContextSelector.ts
+++ b/packages/fluentui/react-context-selector/src/useContextSelector.ts
@@ -1,14 +1,8 @@
 import * as React from 'react';
 
-import { Context, ContextSelector, ContextValue } from './types';
+import { Context, ContextSelector, ContextValue, ContextVersion } from './types';
 import { useIsomorphicLayoutEffect } from './utils';
 
-type UseSelectorRef<Value, SelectedValue> = {
-  selector: ContextSelector<Value, SelectedValue>;
-  selected: SelectedValue;
-  value: Value;
-};
-
 /**
  * This hook returns context selected value by selector.
  * It will only accept context created by `createContext`.
@@ -18,39 +12,68 @@ export const useContextSelector = <Value, SelectedValue>(
   context: Context<Value>,
   selector: ContextSelector<Value, SelectedValue>,
 ): SelectedValue => {
-  const { subscribe, value } = React.useContext((context as unknown) as Context<ContextValue<Value>>);
-  const [, forceUpdate] = React.useReducer((c: number) => c + 1, 0) as [never, () => void];
+  const contextValue = React.useContext((context as unknown) as Context<ContextValue<Value>>);
 
-  const ref = React.useRef<UseSelectorRef<Value, SelectedValue>>();
+  const {
+    value: { current: value },
+    version: { current: version },
+    listeners,
+  } = contextValue;
   const selected = selector(value);
 
-  useIsomorphicLayoutEffect(() => {
-    ref.current = {
-      selector,
-      value,
-      selected,
-    };
-  });
-  useIsomorphicLayoutEffect(() => {
-    const callback = (nextState: Value) => {
+  const [state, dispatch] = React.useReducer(
+    (
+      prevState: readonly [Value /* contextValue */, SelectedValue /* selector(value) */],
+      payload:
+        | undefined // undefined from render below
+        | readonly [ContextVersion, Value], // from provider effect
+    ) => {
+      if (!payload) { // early bail out when is dispatched during render
+        return [value, selected] as const;
+      }
+
+      if (payload[0] <= version) {
+        if (Object.is(prevState[1], selected)) {
+          return prevState; // bail out
+        }
+
+        return [value, selected] as const;
+      }
+
       try {
-        const reference: UseSelectorRef<Value, SelectedValue> = ref.current as NonNullable<
-          UseSelectorRef<Value, SelectedValue>
-        >;
+        if (Object.is(prevState[0], payload[1])) {
+          return prevState; // do not update
+        }
 
-        if (reference.value === nextState || Object.is(reference.selected, reference.selector(nextState))) {
-          // not changed
-          return;
+        const nextSelected = selector(payload[1]);
+
+        if (Object.is(prevState[1], nextSelected)) {
+          return prevState; // do not update
         }
+
+        return [payload[1], nextSelected] as const;
       } catch (e) {
         // ignored (stale props or some other reason)
       }
+      return [...prevState] as const; // schedule update
+    },
+    [value, selected] as const,
+  );
 
-      forceUpdate();
-    };
+  if (!Object.is(state[1], selected)) {
+    // schedule re-render
+    // this is safe because it's self contained
+    dispatch(undefined);
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    listeners.push(dispatch);
 
-    return subscribe(callback);
-  }, [subscribe]);
+    return () => {
+      const index = listeners.indexOf(dispatch);
+      listeners.splice(index, 1);
+    };
+  }, [listeners]);
 
-  return selected;
+  return state[1] as SelectedValue;
 };
diff --git a/packages/fluentui/react-context-selector/src/useContextSelectors.ts b/packages/fluentui/react-context-selector/src/useContextSelectors.ts
index 25e9f3b4320863..698917165910c8 100644
--- a/packages/fluentui/react-context-selector/src/useContextSelectors.ts
+++ b/packages/fluentui/react-context-selector/src/useContextSelectors.ts
@@ -1,19 +1,7 @@
 import * as React from 'react';
-
-import { Context, ContextSelector, ContextValue } from './types';
+import { Context, ContextSelector, ContextVersion, ContextValues } from './types';
 import { useIsomorphicLayoutEffect } from './utils';
 
-type UseSelectorsRef<
-  Value,
-  Properties extends string,
-  Selectors extends Record<Properties, ContextSelector<Value, SelectedValue>>,
-  SelectedValue extends any
-> = {
-  selectors: Selectors;
-  value: Value;
-  selected: Record<Properties, SelectedValue>;
-};
-
 /**
  * This hook returns context selected value by selectors.
  * It will only accept context created by `createContext`.
@@ -28,48 +16,89 @@ export const useContextSelectors = <
   context: Context<Value>,
   selectors: Selectors,
 ): Record<Properties, SelectedValue> => {
-  const { subscribe, value } = React.useContext((context as unknown) as Context<ContextValue<Value>>);
-  const [, forceUpdate] = React.useReducer((c: number) => c + 1, 0) as [never, () => void];
+  const contextValue = React.useContext((context as unknown) as Context<ContextValues<Value>>);
 
-  const ref = React.useRef<UseSelectorsRef<Value, Properties, Selectors, SelectedValue>>();
-  const selected = {} as Record<Properties, SelectedValue>;
+  const {
+    value: { current: value },
+    version: { current: version },
+    listeners,
+  } = contextValue;
 
+  const selected = {} as Record<Properties, SelectedValue>;
   Object.keys(selectors).forEach((key: Properties) => {
     selected[key] = selectors[key](value);
   });
 
-  useIsomorphicLayoutEffect(() => {
-    ref.current = {
-      selectors,
-      value,
-      selected,
-    };
-  });
-  useIsomorphicLayoutEffect(() => {
-    const callback = (nextState: Value) => {
+  const [state, dispatch] = React.useReducer(
+    (
+      prevState: readonly [Record<Properties, SelectedValue> /* contextValue */, SelectedValue /* selector(value) */],
+      payload:
+        | undefined // undefined from render below
+        | readonly [ContextVersion, Record<Properties, Value>], // from provider effect
+    ) => {
+      if (!payload) {
+        return [value, selected] as const;
+      }
+
+      if (payload[0] <= version) {
+        const stateHasNotChanged = Object.keys(selectors).every((key: Properties) =>
+          Object.is(prevState[1][key] as SelectedValue, selected[key]),
+        );
+
+        if (stateHasNotChanged) {
+          return prevState; // bail out
+        }
+
+        return [value, selected] as const;
+      }
+
       try {
-        const reference: UseSelectorsRef<Value, Properties, Selectors, SelectedValue> = ref.current as NonNullable<
-          UseSelectorsRef<Value, Properties, Selectors, SelectedValue>
-        >;
-
-        if (
-          reference.value === nextState ||
-          Object.keys(reference.selected).every((key: Properties) =>
-            Object.is(reference.selected[key], reference.selectors[key](nextState)),
-          )
-        ) {
-          // not changed
-          return;
+        const statePayloadHasChanged = Object.keys(prevState[0]).some((key: Properties) => {
+          return !Object.is(prevState[0][key] as SelectedValue, payload[1][key]);
+        });
+
+        if (!statePayloadHasChanged) {
+          return prevState;
+        }
+
+        const nextSelected = {} as Record<Properties, SelectedValue>;
+        Object.keys(selectors).forEach((key: Properties) => {
+          nextSelected[key] = selectors[key](payload[1][key]);
+        });
+
+        const selecteddHasNotChanged = Object.keys(selectors).every((key: Properties) => {
+          return Object.is(prevState[1][key] as SelectedValue, nextSelected[key]);
+        });
+
+        if (selecteddHasNotChanged) {
+          return prevState;
         }
+
+        return [payload[1], nextSelected] as const;
       } catch (e) {
         // ignored (stale props or some other reason)
       }
+      return [...prevState] as const; // schedule update
+    },
+    [value, selected] as const,
+  );
 
-      forceUpdate();
-    };
+  Object.keys(selectors).forEach((key: Properties) => {
+    if (!Object.is(state[1][key], selected[key])) {
+      // schedule re-render
+      // this is safe because it's self contained
+      dispatch(undefined);
+    }
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    listeners.push(dispatch);
 
-    return subscribe(callback);
-  }, [subscribe]);
+    return () => {
+      const index = listeners.indexOf(dispatch);
+      listeners.splice(index, 1);
+    };
+  }, [listeners]);
 
-  return selected;
+  return state[1] as SelectedValue;
 };
diff --git a/packages/fluentui/react-context-selector/src/utils.ts b/packages/fluentui/react-context-selector/src/utils.ts
index b7d2858eaf5eb5..fa626575f63124 100644
--- a/packages/fluentui/react-context-selector/src/utils.ts
+++ b/packages/fluentui/react-context-selector/src/utils.ts
@@ -1,6 +1,11 @@
 import * as React from 'react';
+import { unstable_NormalPriority as NormalPriority, unstable_runWithPriority as runWithPriority } from 'scheduler';
 
-// useLayoutEffect that does not show warning when server-side rendering, see Alex Reardon's article for more info
-// @see https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
-export const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : /* istanbul ignore next */ React.useEffect;
+const isSSR =
+  typeof window === 'undefined' || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
+
+export const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
+
+export function runWithNormalPriority(thunk: () => void) {
+  return runWithPriority(NormalPriority, thunk);
+}
diff --git a/packages/fluentui/react-context-selector/test/createContext-test.tsx b/packages/fluentui/react-context-selector/test/createContext-test.tsx
index 613982013b6099..e3e88da672baa5 100644
--- a/packages/fluentui/react-context-selector/test/createContext-test.tsx
+++ b/packages/fluentui/react-context-selector/test/createContext-test.tsx
@@ -1,74 +1,9 @@
-import { createContext, useContextSelector } from '@fluentui/react-context-selector';
-import { mount } from 'enzyme';
-import * as React from 'react';
+import { createContext } from '@fluentui/react-context-selector';
 import * as ReactIs from 'react-is';
 
-class TestBoundary extends React.Component<{ onError: (e: Error) => void }, { hasError: boolean }> {
-  state = { hasError: false };
-
-  componentDidCatch(error: Error) {
-    this.props.onError(error);
-    this.setState({ hasError: true });
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return null;
-    }
-
-    return this.props.children;
-  }
-}
-
 describe('createContext', () => {
   it('creates a Provider component', () => {
     const Context = createContext(null);
     expect(ReactIs.isValidElementType(Context.Provider)).toBeTruthy();
   });
-
-  describe('options', () => {
-    it('throws on usage outside Provider by default', () => {
-      jest.spyOn(console, 'error').mockImplementation(() => {});
-
-      const TestContext = createContext<string>('');
-      const TestComponent: React.FC = () => {
-        const value = useContextSelector(TestContext, v => v);
-        return <div data-value={value} />;
-      };
-
-      const onError = jest.fn();
-      mount(
-        <TestBoundary onError={onError}>
-          <TestComponent />
-        </TestBoundary>,
-      );
-
-      expect(onError).toBeCalledWith(
-        expect.objectContaining({
-          message: 'Please use <Provider /> component from "@fluentui/react-context-selector"',
-        }),
-      );
-
-      // We need to clean up mocks to avoid errors reported by React
-      // eslint-disable-next-line no-console
-      (console.error as any).mockClear();
-    });
-
-    it('do not throw usage outside Provider when `strict` is `false`', () => {
-      const TestContext = createContext<string>('', { strict: false });
-      const TestComponent: React.FC = () => {
-        const value = useContextSelector(TestContext, v => v);
-        return <div data-value={value} />;
-      };
-
-      const onError = jest.fn();
-      mount(
-        <TestBoundary onError={onError}>
-          <TestComponent />
-        </TestBoundary>,
-      );
-
-      expect(onError).not.toBeCalled();
-    });
-  });
 });
diff --git a/packages/fluentui/react-context-selector/test/useContextSelector-test.tsx b/packages/fluentui/react-context-selector/test/useContextSelector-test.tsx
index 1b498ff3d317cb..eeb940a7a5e518 100644
--- a/packages/fluentui/react-context-selector/test/useContextSelector-test.tsx
+++ b/packages/fluentui/react-context-selector/test/useContextSelector-test.tsx
@@ -1,5 +1,6 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
-import { mount } from 'enzyme';
+import * as ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
 import * as React from 'react';
 
 const TestContext = createContext<{ index: number }>({ index: -1 });
@@ -11,78 +12,89 @@ const TestComponent: React.FC<{ index: number; onUpdate?: () => void }> = props
     props.onUpdate && props.onUpdate();
   });
 
-  return <div data-active={active} />;
+  return <div className="test-component" data-active={active} />;
+};
+
+const TestProvider: React.FC = props => {
+  const [index, setIndex] = React.useState<number>(0);
+
+  return (
+    <div className="test-provider" onClick={() => setIndex(prevIndex => prevIndex + 1)}>
+      <TestContext.Provider value={{ index }}>{props.children}</TestContext.Provider>
+    </div>
+  );
 };
 
 describe('useContextSelector', () => {
-  it('propogates values via Context', () => {
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: 1 }}>
-        <TestComponent index={1} />
-      </TestContext.Provider>,
-    );
+  let container: HTMLElement | null;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
 
-    expect(wrapper.find('div').prop('data-active')).toBe(true);
+  afterEach(() => {
+    document.body.removeChild(container as HTMLElement);
+    container = null;
   });
 
   it('updates only on selector match', () => {
     const onUpdate = jest.fn();
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: 0 }}>
+    ReactDOM.render(
+      <TestProvider>
         <TestComponent index={1} onUpdate={onUpdate} />
-      </TestContext.Provider>,
+      </TestProvider>,
+      container,
     );
 
-    expect(wrapper.find('div').prop('data-active')).toBe(false);
-    expect(onUpdate).toBeCalledTimes(1);
+    act(() => {
+      // no-op to wait for effects
+    });
 
-    // No match, (v.index: 2, p.index: 1)
-    wrapper.setProps({ value: { index: 2 } });
-    expect(wrapper.find('div').prop('data-active')).toBe(false);
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('false');
     expect(onUpdate).toBeCalledTimes(1);
 
     // Match => update, (v.index: 1, p.index: 1)
-    wrapper.setProps({ value: { index: 1 } });
-    expect(wrapper.find('div').prop('data-active')).toBe(true);
+    act(() => {
+      document.querySelector<HTMLElement>('.test-provider')?.click();
+    });
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('true');
     expect(onUpdate).toBeCalledTimes(2);
 
-    // Match previous => no update, (v.index: 1, p.index: 1)
-    wrapper.setProps({ value: { index: 1 } });
-    expect(wrapper.find('div').prop('data-active')).toBe(true);
-    expect(onUpdate).toBeCalledTimes(2);
+    // No match, but update because "active" changed, (v.index: 2, p.index: 1)
+    act(() => {
+      document.querySelector<HTMLElement>('.test-provider')?.click();
+    });
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('false');
+    expect(onUpdate).toBeCalledTimes(3);
+
+    // Match previous => no update, (v.index: 3, p.index: 1)
+    act(() => {
+      document.querySelector<HTMLElement>('.test-provider')?.click();
+    });
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('false');
+    expect(onUpdate).toBeCalledTimes(3);
   });
 
   it('updates are propogated inside React.memo()', () => {
     // https://reactjs.org/docs/react-api.html#reactmemo
     // Will never pass updates
     const MemoComponent = React.memo(TestComponent, () => true);
-
     const onUpdate = jest.fn();
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: 0 }}>
+
+    ReactDOM.render(
+      <TestProvider>
         <MemoComponent index={1} onUpdate={onUpdate} />
-      </TestContext.Provider>,
+      </TestProvider>,
+      container,
     );
 
-    wrapper.setProps({ value: { index: 1 } });
-    expect(wrapper.find('div').prop('data-active')).toBe(true);
-    expect(onUpdate).toBeCalledTimes(2);
-  });
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('false');
 
-  it('handles unsubscribe', () => {
-    const MemoComponent = React.memo(TestComponent);
-    const onUpdate = jest.fn();
-
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: 0 }}>
-        <MemoComponent index={1} />
-        <MemoComponent index={2} key="2" onUpdate={onUpdate} />
-      </TestContext.Provider>,
-    );
-
-    wrapper.setProps({
-      children: [null, <MemoComponent index={2} key={2} onUpdate={onUpdate} />],
+    act(() => {
+      document.querySelector<HTMLElement>('.test-provider')?.click();
     });
-    expect(onUpdate).toBeCalledTimes(1);
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('true');
+    expect(onUpdate).toBeCalledTimes(2);
   });
 });
diff --git a/packages/fluentui/react-context-selector/test/useContextSelectors-test.tsx b/packages/fluentui/react-context-selector/test/useContextSelectors-test.tsx
index 45914a10bd01a2..067b6a44a85ee7 100644
--- a/packages/fluentui/react-context-selector/test/useContextSelectors-test.tsx
+++ b/packages/fluentui/react-context-selector/test/useContextSelectors-test.tsx
@@ -1,6 +1,7 @@
 import { createContext, useContextSelectors } from '@fluentui/react-context-selector';
-import { mount } from 'enzyme';
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
 
 const TestContext = createContext<{ index: number; value: string }>({
   index: -1,
@@ -17,54 +18,105 @@ const TestComponent: React.FC<{ index: number; onUpdate?: () => void }> = props
     props.onUpdate && props.onUpdate();
   });
 
-  return <div data-active={context.active} data-value={context.value} />;
+  return <div className="test-component" data-active={context.active} data-value={context.value} />;
+};
+
+const TestProvider: React.FC<{ value: any; children: any }> = props => {
+  const [index, setIndex] = React.useState<number>(+props.value.index);
+  const [value, setValue] = React.useState<string>(props.value.value);
+
+  return (
+    <div className="test-provider">
+      <button className="set-index" onClick={e => setIndex(+(e.target as HTMLElement)?.dataset.index!)} />
+      <button className="change-value" onClick={e => setValue((e.target as HTMLElement)?.dataset.value!)} />
+      <TestContext.Provider value={{ index, value }}>{props.children}</TestContext.Provider>
+    </div>
+  );
 };
 
 describe('useContextSelectors', () => {
+  let container: HTMLElement | null;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container as HTMLElement);
+    container = null;
+  });
+
   it('propogates values via Context', () => {
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: 1, value: 'foo' }}>
+    ReactDOM.render(
+      <TestProvider value={{ index: 1, value: 'foo' }}>
         <TestComponent index={1} />
-      </TestContext.Provider>,
+      </TestProvider>,
+      container,
     );
 
-    expect(wrapper.find('div').prop('data-active')).toBe(true);
-    expect(wrapper.find('div').prop('data-value')).toBe('foo');
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('true');
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.value).toBe('foo');
   });
 
   it('updates only on selector match', () => {
     const onUpdate = jest.fn();
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: -1, value: 'foo' }}>
+    ReactDOM.render(
+      <TestProvider value={{ index: -1, value: 'foo' }}>
         <TestComponent index={1} onUpdate={onUpdate} />
-      </TestContext.Provider>,
+      </TestProvider>,
+      container,
     );
 
-    expect(wrapper.find('div').prop('data-active')).toBe(false);
-    expect(wrapper.find('div').prop('data-value')).toBe('foo');
+    act(() => {
+      // no-op to wait for effects
+    });
+
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('false');
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.value).toBe('foo');
     expect(onUpdate).toBeCalledTimes(1);
 
     // No match, (v.index: 2, p.index: 1)
-    wrapper.setProps({ value: { index: 2, value: 'foo' } });
-    expect(wrapper.find('div').prop('data-active')).toBe(false);
-    expect(wrapper.find('div').prop('data-value')).toBe('foo');
+    act(() => {
+      document.querySelector<HTMLElement>('.set-index')?.setAttribute('data-index', '2');
+      document.querySelector<HTMLElement>('.change-value')?.setAttribute('data-value', 'foo');
+      document.querySelector<HTMLElement>('.set-index')?.click();
+      document.querySelector<HTMLElement>('.change-value')?.click();
+    });
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('false');
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.value).toBe('foo');
     expect(onUpdate).toBeCalledTimes(1);
 
-    // Match => update, (v.index: 1, p.index: 1)
-    wrapper.setProps({ value: { index: 1, value: 'foo' } });
-    expect(wrapper.find('div').prop('data-active')).toBe(true);
-    expect(wrapper.find('div').prop('data-value')).toBe('foo');
+    // // Match => update, (v.index: 1, p.index: 1)
+    act(() => {
+      document.querySelector<HTMLElement>('.set-index')?.setAttribute('data-index', '1');
+      document.querySelector<HTMLElement>('.change-value')?.setAttribute('data-value', 'foo');
+      document.querySelector<HTMLElement>('.set-index')?.click();
+      document.querySelector<HTMLElement>('.change-value')?.click();
+    });
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('true');
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.value).toBe('foo');
     expect(onUpdate).toBeCalledTimes(2);
 
-    // Match previous => no update, (v.index: 1, p.index: 1)
-    wrapper.setProps({ value: { index: 1, value: 'foo' } });
-    expect(wrapper.find('div').prop('data-active')).toBe(true);
-    expect(wrapper.find('div').prop('data-value')).toBe('foo');
+    // // Match previous => no update, (v.index: 1, p.index: 1)
+    act(() => {
+      document.querySelector<HTMLElement>('.set-index')?.setAttribute('data-index', '1');
+      document.querySelector<HTMLElement>('.change-value')?.setAttribute('data-value', 'foo');
+      document.querySelector<HTMLElement>('.set-index')?.click();
+      document.querySelector<HTMLElement>('.change-value')?.click();
+    });
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('true');
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.value).toBe('foo');
     expect(onUpdate).toBeCalledTimes(2);
 
     // Match => update, (v.value: 'bar')
-    wrapper.setProps({ value: { index: 1, value: 'bar' } });
-    expect(wrapper.find('div').prop('data-value')).toBe('bar');
+    act(() => {
+      document.querySelector<HTMLElement>('.set-index')?.setAttribute('data-index', '1');
+      document.querySelector<HTMLElement>('.change-value')?.setAttribute('data-value', 'bar');
+      document.querySelector<HTMLElement>('.set-index')?.click();
+      document.querySelector<HTMLElement>('.change-value')?.click();
+    });
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.value).toBe('bar');
     expect(onUpdate).toBeCalledTimes(3);
   });
 
@@ -74,14 +126,20 @@ describe('useContextSelectors', () => {
     const MemoComponent = React.memo(TestComponent, () => true);
 
     const onUpdate = jest.fn();
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: 0, value: 'foo' }}>
+    ReactDOM.render(
+      <TestProvider value={{ index: 0, value: 'foo' }}>
         <MemoComponent index={1} onUpdate={onUpdate} />
-      </TestContext.Provider>,
+      </TestProvider>,
+      container,
     );
 
-    wrapper.setProps({ value: { index: 1, value: 'foo' } });
-    expect(wrapper.find('div').prop('data-active')).toBe(true);
+    act(() => {
+      document.querySelector<HTMLElement>('.set-index')?.setAttribute('data-index', '1');
+      document.querySelector<HTMLElement>('.change-value')?.setAttribute('data-value', 'foo');
+      document.querySelector<HTMLElement>('.set-index')?.click();
+      document.querySelector<HTMLElement>('.change-value')?.click();
+    });
+    expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('true');
     expect(onUpdate).toBeCalledTimes(2);
   });
 });
diff --git a/packages/fluentui/react-northstar/src/components/Chat/chatItemContext.ts b/packages/fluentui/react-northstar/src/components/Chat/chatItemContext.ts
index 071aa53b1d6429..12286d118f0dc8 100644
--- a/packages/fluentui/react-northstar/src/components/Chat/chatItemContext.ts
+++ b/packages/fluentui/react-northstar/src/components/Chat/chatItemContext.ts
@@ -4,6 +4,6 @@ export type ChatItemContextValue = {
   attached: boolean | 'top' | 'bottom';
 };
 
-export const ChatItemContext = createContext<ChatItemContextValue>({ attached: false }, { strict: false });
+export const ChatItemContext = createContext<ChatItemContextValue>({ attached: false });
 
 export const ChatItemContextProvider = ChatItemContext.Provider;
diff --git a/packages/fluentui/react-northstar/src/components/List/listContext.ts b/packages/fluentui/react-northstar/src/components/List/listContext.ts
index f8d5663f0b0329..0b4326c0841293 100644
--- a/packages/fluentui/react-northstar/src/components/List/listContext.ts
+++ b/packages/fluentui/react-northstar/src/components/List/listContext.ts
@@ -19,19 +19,16 @@ export type ListContextSubscribedValue = Pick<
   'debug' | 'selectable' | 'navigable' | 'truncateContent' | 'truncateHeader' | 'variables' | 'onItemClick'
 > & { selected: boolean };
 
-export const ListContext = createContext<ListContextValue>(
-  {
-    debug: false,
-    selectable: false,
-    navigable: false,
-    truncateContent: false,
-    truncateHeader: false,
-    variables: {},
+export const ListContext = createContext<ListContextValue>({
+  debug: false,
+  selectable: false,
+  navigable: false,
+  truncateContent: false,
+  truncateHeader: false,
+  variables: {},
 
-    onItemClick: () => {},
-    selectedIndex: -1,
-  },
-  { strict: false },
-);
+  onItemClick: () => {},
+  selectedIndex: -1,
+});
 
 export const ListContextProvider = ListContext.Provider;
diff --git a/packages/fluentui/react-northstar/src/components/Menu/menuContext.ts b/packages/fluentui/react-northstar/src/components/Menu/menuContext.ts
index 961180714fe33f..d515d3620fffe6 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/menuContext.ts
+++ b/packages/fluentui/react-northstar/src/components/Menu/menuContext.ts
@@ -37,25 +37,22 @@ export type MenuDividerSubscribedValue = Pick<MenuContextValue, 'variables'> & {
   accessibility: MenuContextValue['behaviors']['divider'];
 };
 
-export const MenuContext = createContext<MenuContextValue>(
-  {
-    activeIndex: -1,
-    variables: {},
-    onItemClick: null,
-    onItemSelect: null,
-    slotProps: {
-      item: {},
-      divider: {},
-    },
-    behaviors: {
-      item: undefined,
-      divider: undefined,
-    },
-    slots: {
-      menu: null,
-    },
+export const MenuContext = createContext<MenuContextValue>({
+  activeIndex: -1,
+  variables: {},
+  onItemClick: null,
+  onItemSelect: null,
+  slotProps: {
+    item: {},
+    divider: {},
+  },
+  behaviors: {
+    item: undefined,
+    divider: undefined,
+  },
+  slots: {
+    menu: null,
   },
-  { strict: false },
-);
+});
 
 export const MenuContextProvider = MenuContext.Provider;
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/toolbarMenuContext.ts b/packages/fluentui/react-northstar/src/components/Toolbar/toolbarMenuContext.ts
index 6dbe8bb47f2f50..bcdd383b8584df 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/toolbarMenuContext.ts
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/toolbarMenuContext.ts
@@ -11,13 +11,10 @@ export type ToolbarItemSubscribedValue = {
   menuSlot: ToolbarMenuContextValue['slots']['menu'];
 };
 
-export const ToolbarMenuContext = createContext<ToolbarMenuContextValue>(
-  {
-    slots: {
-      menu: null,
-    },
+export const ToolbarMenuContext = createContext<ToolbarMenuContextValue>({
+  slots: {
+    menu: null,
   },
-  { strict: false },
-);
+});
 
 export const ToolbarMenuContextProvider = ToolbarMenuContext.Provider;
diff --git a/yarn.lock b/yarn.lock
index a1d887aac027ed..25ba97a3d67341 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4409,6 +4409,11 @@
   resolved "https://registry.yarnpkg.com/@types/sarif/-/sarif-2.1.1.tgz#d398d201eade0a88958dffdd13ca88f7a37546df"
   integrity sha512-OI9w+yqOhvT3Z9tF/4d+YVFbdYojotHMRfuKrVtAzeKu3L0kBiK6CnHADkNrfSeVOgkIMeg8OqIQFfcsm7HgCg==
 
+"@types/scheduler@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
+  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
+
 "@types/semver@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-5.5.0.tgz#146c2a29ee7d3bae4bf2fcb274636e264c813c45"
@@ -21726,6 +21731,14 @@ scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
+  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"

From b2bc88cbd997bc33110dfce15c357bb31abd42a7 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 3 Feb 2021 13:17:54 -0500
Subject: [PATCH 02/17] Bump websocket-extensions from 0.1.3 to 0.1.4 (#16796)

Bumps [websocket-extensions](https://github.com/faye/websocket-extensions-node) from 0.1.3 to 0.1.4.
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a href="https://github.com/faye/websocket-extensions-node/blob/master/CHANGELOG.md">websocket-extensions's changelog</a>.</em></p>
<blockquote>
<h3>0.1.4 / 2020-06-02</h3>
<ul>
<li>Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by
Robert McLaughlin)</li>
<li>Change license from MIT to Apache 2.0</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a href="https://github.com/faye/websocket-extensions-node/commit/8efd0cd6e35faf9bb9cb08759be1e27082177d43"><code>8efd0cd</code></a> Bump version to 0.1.4</li>
<li><a href="https://github.com/faye/websocket-extensions-node/commit/3dad4ad44a8c5f74d4f8f4efd3f9d6e0b5df3051"><code>3dad4ad</code></a> Remove ReDoS vulnerability in the Sec-WebSocket-Extensions header parser</li>
<li><a href="https://github.com/faye/websocket-extensions-node/commit/4a76c75efb1c5d6a2f60550e9501757458d19533"><code>4a76c75</code></a> Add Node versions 13 and 14 on Travis</li>
<li><a href="https://github.com/faye/websocket-extensions-node/commit/44a677a9c0631daed0b0f4a4b68c095b624183b8"><code>44a677a</code></a> Formatting change: {...} should have spaces inside the braces</li>
<li><a href="https://github.com/faye/websocket-extensions-node/commit/f6c50aba0c20ff45b0f87cea33babec1217ec3f5"><code>f6c50ab</code></a> Let npm reformat package.json</li>
<li><a href="https://github.com/faye/websocket-extensions-node/commit/2d211f3705d52d9efb4f01daf5a253adf828592e"><code>2d211f3</code></a> Change markdown formatting of docs.</li>
<li><a href="https://github.com/faye/websocket-extensions-node/commit/0b620834cc1e1f2eace1d55ab17f71d90d88271d"><code>0b62083</code></a> Update Travis target versions.</li>
<li><a href="https://github.com/faye/websocket-extensions-node/commit/729a4653073fa8dd020561113513bfa2e2119415"><code>729a465</code></a> Switch license to Apache 2.0.</li>
<li>See full diff in <a href="https://github.com/faye/websocket-extensions-node/compare/0.1.3...0.1.4">compare view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=websocket-extensions&package-manager=npm_and_yarn&previous-version=0.1.3&new-version=0.1.4)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- `@dependabot use these labels` will set the current labels as the default for future PRs for this repo and language
- `@dependabot use these reviewers` will set the current reviewers as the default for future PRs for this repo and language
- `@dependabot use these assignees` will set the current assignees as the default for future PRs for this repo and language
- `@dependabot use this milestone` will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the [Security Alerts page](https://github.com/microsoft/fluentui/network/alerts).

</details>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 25ba97a3d67341..3e9c12bde3537f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25311,9 +25311,9 @@ websocket-driver@^0.7.4:
     websocket-extensions ">=0.1.1"
 
 websocket-extensions@>=0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
-  integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
 whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
   version "1.0.5"

From 715f670a62ede40fd0d8cbe4d9d9724133a7c660 Mon Sep 17 00:00:00 2001
From: elisabethcvs <64664025+elisabethcvs@users.noreply.github.com>
Date: Wed, 3 Feb 2021 10:20:07 -0800
Subject: [PATCH 03/17] SelectedItemsList: Editable item picker should have
 first item selected on show (#16777)

* edit picker should have first item selected on show

* Change files
---
 ...-experiments-2021-02-02-16-22-00-editselectionfix.json | 8 ++++++++
 .../Items/subcomponents/DefaultEditingItem.tsx            | 2 ++
 2 files changed, 10 insertions(+)
 create mode 100644 change/@fluentui-react-experiments-2021-02-02-16-22-00-editselectionfix.json

diff --git a/change/@fluentui-react-experiments-2021-02-02-16-22-00-editselectionfix.json b/change/@fluentui-react-experiments-2021-02-02-16-22-00-editselectionfix.json
new file mode 100644
index 00000000000000..cbaf2918759113
--- /dev/null
+++ b/change/@fluentui-react-experiments-2021-02-02-16-22-00-editselectionfix.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "SelectedItemsList EditableItem should have first item selected in picker on show",
+  "packageName": "@fluentui/react-experiments",
+  "email": "elvonspa@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-03T00:22:00.102Z"
+}
diff --git a/packages/react-experiments/src/components/SelectedItemsList/Items/subcomponents/DefaultEditingItem.tsx b/packages/react-experiments/src/components/SelectedItemsList/Items/subcomponents/DefaultEditingItem.tsx
index dc63aa8483f84a..44ed33b1f72563 100644
--- a/packages/react-experiments/src/components/SelectedItemsList/Items/subcomponents/DefaultEditingItem.tsx
+++ b/packages/react-experiments/src/components/SelectedItemsList/Items/subcomponents/DefaultEditingItem.tsx
@@ -102,6 +102,7 @@ export const DefaultEditingItemInner = <TItem extends any>(
 
   const {
     focusItemIndex,
+    setFocusItemIndex,
     suggestionItems,
     footerItemIndex,
     footerItems,
@@ -124,6 +125,7 @@ export const DefaultEditingItemInner = <TItem extends any>(
       setInputValue(itemText);
       editingInput.current.focus();
     }
+    setFocusItemIndex(0);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // We only want to run this once
 

From 4d76439d3ba75be4f9d2b7173adc50f8c05a1603 Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@microsoft.com>
Date: Wed, 3 Feb 2021 20:06:54 +0100
Subject: [PATCH 04/17] fix(dropdownSelectedItem): long item has tiny icon
 (#16795)

* fix(dropdownSelectedItem): long item has tiny icon

* update changelog
---
 packages/fluentui/CHANGELOG.md                                   | 1 +
 .../teams/components/Dropdown/dropdownSelectedItemStyles.ts      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
index 117d634c979587..30922a73d0501d 100644
--- a/packages/fluentui/CHANGELOG.md
+++ b/packages/fluentui/CHANGELOG.md
@@ -41,6 +41,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Embed` playback control visuals. @TanelVari ([#16611](https://github.com/microsoft/fluentui/pull/16611))
 - Fixes for `Dropdown`. Fix clear indicator visual styles (focus border, using `CloseIcon`). Fix empty search result text style. Fix left/right padding for multiple selection labels. Using `ChevronDownIcon` for toggle indicator. @TanelVari ([#16522](https://github.com/microsoft/fluentui/pull/16522))
 - Fix docsite header colors for all themes. `ExampleSnippet` now honors theme colors for background and foreground. @TanelVari ([#16643](https://github.com/microsoft/fluentui/pull/16643))
+- Fix `dropdownSelectedItem` has tiny icon when the content is long @yuanboxue-amber ([#16795](https://github.com/microsoft/fluentui/pull/16795))
 - Refactor `react-context-selector` to avoid React warnings @assuncaocharles ([#16714](https://github.com/microsoft/fluentui/pull/16714))
 
 ## Features
diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts
index 0bab530dd66770..e5880dfb6b4183 100644
--- a/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts
+++ b/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts
@@ -70,6 +70,7 @@ export const dropdownSelectedItemStyles: ComponentSlotStylesPrepared<
     alignItems: 'center',
     justifyContent: 'center',
     width: pxToRem(16),
+    minWidth: pxToRem(16),
     height: pxToRem(16),
     '& > :first-child': {
       width: pxToRem(16),

From 8e10fde129adab1b120efa898f9db47d66ef6841 Mon Sep 17 00:00:00 2001
From: Kenneth Chau <34725+kenotron@users.noreply.github.com>
Date: Wed, 3 Feb 2021 13:07:03 -0800
Subject: [PATCH 05/17] fixes the skip ts condition (#16799)

* fixes the skip ts condition

* fix per suggestions
---
 scripts/webpack/webpack-resources.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/webpack/webpack-resources.js b/scripts/webpack/webpack-resources.js
index 762b802a2256d5..751771040091f2 100644
--- a/scripts/webpack/webpack-resources.js
+++ b/scripts/webpack/webpack-resources.js
@@ -310,7 +310,7 @@ module.exports = {
         },
 
         plugins: [
-          ...(!process.env.TF_BUILD || process.env.SKIP_TYPECHECK ? [new ForkTsCheckerWebpackPlugin()] : []),
+          ...(process.env.TF_BUILD || process.env.SKIP_TYPECHECK ? [] : [new ForkTsCheckerWebpackPlugin()]),
           ...(process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME ? [] : [new webpack.ProgressPlugin({})]),
         ],
       },

From e24c3b46e24f2e7005d2d1cb93f4f8a8843a2070 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Wed, 3 Feb 2021 13:47:50 -0800
Subject: [PATCH 06/17] Make docsite output accessible through NPM (#16737)

* Publishing the website bits as an npm package so that we can experiment with the output bits outside of the repo.

* Adding 4 changefiles, removing 1.

* prerelease.

* Oi. Fixing to remove the betas and such.

* publish config

* adding beachball overrides.
---
 apps/public-docsite-resources/package.json            | 11 ++++++++++-
 apps/public-docsite/package.json                      | 11 ++++++++++-
 ...ntui-api-docs-2021-02-01-12-04-publishdocsite.json |  8 ++++++++
 ...ublic-docsite-2021-02-01-12-04-publishdocsite.json |  8 ++++++++
 ...ite-resources-2021-02-01-12-04-publishdocsite.json |  8 ++++++++
 ...es-2020-10-08-11-30-24-headerfooterselectable.json |  8 --------
 ...eact-examples-2021-02-01-12-04-publishdocsite.json |  8 ++++++++
 packages/api-docs/package.json                        | 11 ++++++++++-
 .../react-context-selector/src/createContext.ts       |  2 +-
 .../react-context-selector/src/useContextSelector.ts  |  3 ++-
 packages/react-examples/package.json                  | 11 ++++++++++-
 11 files changed, 75 insertions(+), 14 deletions(-)
 create mode 100644 change/@fluentui-api-docs-2021-02-01-12-04-publishdocsite.json
 create mode 100644 change/@fluentui-public-docsite-2021-02-01-12-04-publishdocsite.json
 create mode 100644 change/@fluentui-public-docsite-resources-2021-02-01-12-04-publishdocsite.json
 delete mode 100644 change/@fluentui-react-examples-2020-10-08-11-30-24-headerfooterselectable.json
 create mode 100644 change/@fluentui-react-examples-2021-02-01-12-04-publishdocsite.json

diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json
index a567a5823fcb11..9781cf11a74c20 100644
--- a/apps/public-docsite-resources/package.json
+++ b/apps/public-docsite-resources/package.json
@@ -1,10 +1,19 @@
 {
   "name": "@fluentui/public-docsite-resources",
   "version": "1.0.0",
-  "private": true,
   "description": "Fluent UI React local demo app",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "beachball": {
+    "tag": "latest",
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
+  },
   "sideEffects": [
     "*.global.*",
     "*Examples.*",
diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json
index a5b72321ab205e..cd6e4e8f0f1c9c 100644
--- a/apps/public-docsite/package.json
+++ b/apps/public-docsite/package.json
@@ -1,12 +1,21 @@
 {
   "name": "@fluentui/public-docsite",
   "version": "1.0.0",
-  "private": true,
   "description": "The official website for the Fluent UI project.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
   "sideEffects": true,
   "typings": "lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "beachball": {
+    "tag": "latest",
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
diff --git a/change/@fluentui-api-docs-2021-02-01-12-04-publishdocsite.json b/change/@fluentui-api-docs-2021-02-01-12-04-publishdocsite.json
new file mode 100644
index 00000000000000..18b2e125499194
--- /dev/null
+++ b/change/@fluentui-api-docs-2021-02-01-12-04-publishdocsite.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Publishing public docsite output.",
+  "packageName": "@fluentui/api-docs",
+  "email": "dzearing@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2021-02-01T12:04:24.362Z"
+}
diff --git a/change/@fluentui-public-docsite-2021-02-01-12-04-publishdocsite.json b/change/@fluentui-public-docsite-2021-02-01-12-04-publishdocsite.json
new file mode 100644
index 00000000000000..02b07c53ab5f6a
--- /dev/null
+++ b/change/@fluentui-public-docsite-2021-02-01-12-04-publishdocsite.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Publishing public docsite output.",
+  "packageName": "@fluentui/public-docsite",
+  "email": "dzearing@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2021-02-01T12:04:24.362Z"
+}
diff --git a/change/@fluentui-public-docsite-resources-2021-02-01-12-04-publishdocsite.json b/change/@fluentui-public-docsite-resources-2021-02-01-12-04-publishdocsite.json
new file mode 100644
index 00000000000000..2864f4db8f5afe
--- /dev/null
+++ b/change/@fluentui-public-docsite-resources-2021-02-01-12-04-publishdocsite.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Publishing public docsite output.",
+  "packageName": "@fluentui/public-docsite-resources",
+  "email": "dzearing@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2021-02-01T12:04:24.362Z"
+}
diff --git a/change/@fluentui-react-examples-2020-10-08-11-30-24-headerfooterselectable.json b/change/@fluentui-react-examples-2020-10-08-11-30-24-headerfooterselectable.json
deleted file mode 100644
index 1199e9f3b09e52..00000000000000
--- a/change/@fluentui-react-examples-2020-10-08-11-30-24-headerfooterselectable.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "none",
-  "comment": "Add example of selectable headers and footers to FloatingSuggestionsComposite, UPP",
-  "packageName": "@fluentui/react-examples",
-  "email": "elvonspa@microsoft.com",
-  "dependentChangeType": "none",
-  "date": "2020-10-08T18:30:24.362Z"
-}
diff --git a/change/@fluentui-react-examples-2021-02-01-12-04-publishdocsite.json b/change/@fluentui-react-examples-2021-02-01-12-04-publishdocsite.json
new file mode 100644
index 00000000000000..59402e9878f7ab
--- /dev/null
+++ b/change/@fluentui-react-examples-2021-02-01-12-04-publishdocsite.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Publishing public docsite output.",
+  "packageName": "@fluentui/react-examples",
+  "email": "dzearing@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2021-02-01T12:04:24.362Z"
+}
diff --git a/packages/api-docs/package.json b/packages/api-docs/package.json
index a700dc04699da7..23218aa7cf33e2 100644
--- a/packages/api-docs/package.json
+++ b/packages/api-docs/package.json
@@ -1,13 +1,22 @@
 {
   "name": "@fluentui/api-docs",
   "version": "1.0.0",
-  "private": true,
   "description": "A package that transforms api-extractor .api.json files into page.json files",
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "beachball": {
+    "tag": "latest",
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
+  },
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "scripts": {
diff --git a/packages/fluentui/react-context-selector/src/createContext.ts b/packages/fluentui/react-context-selector/src/createContext.ts
index 76e031fcf66cf5..a21c24c20a5639 100644
--- a/packages/fluentui/react-context-selector/src/createContext.ts
+++ b/packages/fluentui/react-context-selector/src/createContext.ts
@@ -9,7 +9,7 @@ const createProvider = <Value>(Original: React.Provider<ContextValue<Value>>) =>
     const valueRef = React.useRef(props.value);
     // Used to sync context updates and avoid stale values, can be considered as render/effect counter of Provider.
     const versionRef = React.useRef(0);
-    
+
     // A stable object, is used to avoid context updates via mutation of its values.
     const contextValue = React.useRef<ContextValue<Value>>();
 
diff --git a/packages/fluentui/react-context-selector/src/useContextSelector.ts b/packages/fluentui/react-context-selector/src/useContextSelector.ts
index 095251523d6aa7..71287535626c2d 100644
--- a/packages/fluentui/react-context-selector/src/useContextSelector.ts
+++ b/packages/fluentui/react-context-selector/src/useContextSelector.ts
@@ -28,7 +28,8 @@ export const useContextSelector = <Value, SelectedValue>(
         | undefined // undefined from render below
         | readonly [ContextVersion, Value], // from provider effect
     ) => {
-      if (!payload) { // early bail out when is dispatched during render
+      if (!payload) {
+        // early bail out when is dispatched during render
         return [value, selected] as const;
       }
 
diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json
index a6f52cba9396a4..7d44a4a40b1811 100644
--- a/packages/react-examples/package.json
+++ b/packages/react-examples/package.json
@@ -1,13 +1,22 @@
 {
   "name": "@fluentui/react-examples",
   "version": "1.0.0",
-  "private": true,
   "description": "Example code and docs for Fluent UI packages.",
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "beachball": {
+    "tag": "latest",
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
+  },
   "scripts": {
     "build": "just-scripts build",
     "clean": "just-scripts clean",

From 31fdccbeb3124494151559826490bc0e0ee5b3e4 Mon Sep 17 00:00:00 2001
From: Elizabeth Craig <elcraig@microsoft.com>
Date: Wed, 3 Feb 2021 14:14:18 -0800
Subject: [PATCH 07/17] Fix publishing, add create-package option to help
 prevent future breaks (#16801)

* Publish react-provider

* Add explicit publishing option
---
 .vscode/settings.json                               |  2 +-
 packages/react-provider/package.json                |  3 +--
 .../plop-templates-node/package.json.hbs            |  7 +++++++
 .../plop-templates-react/package.json.hbs           | 11 ++++++++++-
 scripts/create-package/plopfile.ts                  | 13 ++++++++++++-
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index ed3079ca96d84b..18ab1887fa4ad9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -15,7 +15,6 @@
     "**/.git": true,
     "**/.DS_Store": true,
     "**/coverage": true,
-    "**/*.scss.ts": true,
     "**/.eslintcache": true
   },
   "files.watcherExclude": {
@@ -50,6 +49,7 @@
   "typescript.preferences.quoteStyle": "single",
   "typescript.tsdk": "./node_modules/typescript/lib",
   "files.associations": {
+    "**/package.json.hbs": "json",
     "**/*.json.hbs": "jsonc"
   },
   "[json]": {
diff --git a/packages/react-provider/package.json b/packages/react-provider/package.json
index 000ad55043395c..7d891886eba8bc 100644
--- a/packages/react-provider/package.json
+++ b/packages/react-provider/package.json
@@ -1,8 +1,7 @@
 {
   "name": "@fluentui/react-provider",
   "version": "0.1.0",
-  "description": "A package with Fluent UI React provider component",
-  "private": true,
+  "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
diff --git a/scripts/create-package/plop-templates-node/package.json.hbs b/scripts/create-package/plop-templates-node/package.json.hbs
index d9d55f10e0f0e3..ae0abcfbaf3c48 100644
--- a/scripts/create-package/plop-templates-node/package.json.hbs
+++ b/scripts/create-package/plop-templates-node/package.json.hbs
@@ -28,5 +28,12 @@
   },
   "dependencies": {
     "tslib": ""
+  },
+  "beachball": {
+    "tag": "latest",
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
   }
 }
diff --git a/scripts/create-package/plop-templates-react/package.json.hbs b/scripts/create-package/plop-templates-react/package.json.hbs
index ed58f07bb6f62a..067a502e37e030 100644
--- a/scripts/create-package/plop-templates-react/package.json.hbs
+++ b/scripts/create-package/plop-templates-react/package.json.hbs
@@ -6,7 +6,9 @@
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
-  "sideEffects": ["lib/version.js"],
+  "sideEffects": [
+    "lib/version.js"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
@@ -53,5 +55,12 @@
     "@types/react-dom": "",
     "react": "",
     "react-dom": ""
+  },
+  "beachball": {
+    "tag": "latest",
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
   }
 }
diff --git a/scripts/create-package/plopfile.ts b/scripts/create-package/plopfile.ts
index cf851c0c4156fd..0b4f21e816dfdd 100644
--- a/scripts/create-package/plopfile.ts
+++ b/scripts/create-package/plopfile.ts
@@ -12,6 +12,7 @@ interface Answers {
   packageName: string;
   target: 'react' | 'node';
   description: string;
+  publish: boolean;
   hasTests?: boolean;
   hasExamples?: boolean;
 }
@@ -57,6 +58,12 @@ module.exports = (plop: NodePlopAPI) => {
         default: true,
         when: answers => answers.target === 'react',
       },
+      {
+        type: 'confirm',
+        name: 'publish',
+        message: 'Should the package be published right away?',
+        default: false,
+      },
     ],
 
     actions: (answers: Answers): Actions => {
@@ -157,7 +164,7 @@ module.exports = (plop: NodePlopAPI) => {
 };
 
 function updatePackageJson(packageJsonContents: string, answers: Answers): string {
-  const { target, hasTests } = answers;
+  const { target, hasTests, publish } = answers;
 
   // Copy dep versions in package.json from actual current versions.
   // This is preferable over hardcoding dependency versions to keep things in sync.
@@ -192,6 +199,10 @@ function updatePackageJson(packageJsonContents: string, answers: Answers): strin
     delete newPackageJson.scripts['update-snapshots'];
   }
 
+  if (publish) {
+    delete newPackageJson.private;
+  }
+
   return JSON.stringify(newPackageJson, null, 2);
 }
 

From 7d3e0a13cfa627a35c9c126f16acb6d9a603b3fe Mon Sep 17 00:00:00 2001
From: Elizabeth Craig <elcraig@microsoft.com>
Date: Wed, 3 Feb 2021 14:25:07 -0800
Subject: [PATCH 08/17] Use custom YarnInstaller task (#16803)

* Use custom YarnInstaller task

* update task options
---
 .devops/templates/tools.yml    | 8 ++++----
 azure-pipelines.bundlesize.yml | 5 +----
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/.devops/templates/tools.yml b/.devops/templates/tools.yml
index 9933b6a30d1e91..8ec4a0eaa4f2e8 100644
--- a/.devops/templates/tools.yml
+++ b/.devops/templates/tools.yml
@@ -5,9 +5,9 @@ steps:
       versionSpec: '12.x'
     displayName: 'Install Node.js'
 
-  - task: geeklearningio.gl-vsts-tasks-yarn.yarn-installer-task.YarnInstaller@3
-    displayName: 'Use Yarn 1.19.x'
+  - task: YarnInstaller@0
+    displayName: 'Use Yarn 1.22.x'
     inputs:
-      versionSpec: 1.19.x
-      checkLatest: true
+      versionSpec: 1.22.x
+      checkLatest: false
       includePrerelease: false
diff --git a/azure-pipelines.bundlesize.yml b/azure-pipelines.bundlesize.yml
index 23cd417f97aff4..bb219baf387cc2 100644
--- a/azure-pipelines.bundlesize.yml
+++ b/azure-pipelines.bundlesize.yml
@@ -10,10 +10,7 @@ jobs:
     pool:
       vmImage: 'windows-2019'
     steps:
-      - task: NodeTool@0
-        inputs:
-          versionSpec: '12.x'
-        displayName: 'Install Node.js'
+      - template: .devops/templates/tools.yml
 
       - script: npx midgard-yarn install
         displayName: yarn

From 1118b1f4cdb44aa19c543ee1b57a14a42aeb0f6c Mon Sep 17 00:00:00 2001
From: Fluent UI Build <fluentui-internal@service.microsoft.com>
Date: Wed, 3 Feb 2021 22:54:59 +0000
Subject: [PATCH 09/17] applying package updates

---
 apps/perf-test/package.json                   |  2 +-
 apps/public-docsite-resources/CHANGELOG.json  | 20 +++++++++++++
 apps/public-docsite-resources/CHANGELOG.md    | 13 +++++++++
 apps/public-docsite-resources/package.json    |  6 ++--
 apps/public-docsite/CHANGELOG.json            | 20 +++++++++++++
 apps/public-docsite/CHANGELOG.md              | 13 +++++++++
 apps/public-docsite/package.json              | 10 +++----
 apps/ssr-tests/package.json                   |  2 +-
 apps/vr-tests/package.json                    |  2 +-
 ...-docs-2021-02-01-12-04-publishdocsite.json |  8 ------
 ...02-01-20-10-06-makestyles-keyframes-2.json |  8 ------
 ...-02-02-16-29-16-feat-mk-support-react.json |  8 ------
 ...csite-2021-02-01-12-04-publishdocsite.json |  8 ------
 ...urces-2021-02-01-12-04-publishdocsite.json |  8 ------
 ...mples-2021-02-01-12-04-publishdocsite.json |  8 ------
 ...-2021-02-02-16-22-00-editselectionfix.json |  8 ------
 ...-01-27-16-39-16-feat-mk-support-react.json |  8 ------
 ...tyles-2021-02-03-11-08-54-chore-npmrc.json |  8 ------
 packages/api-docs/CHANGELOG.json              | 20 +++++++++++++
 packages/api-docs/CHANGELOG.md                | 13 +++++++++
 packages/api-docs/package.json                |  2 +-
 packages/make-styles/CHANGELOG.json           | 23 +++++++++++++++
 packages/make-styles/CHANGELOG.md             | 15 +++++++++-
 packages/make-styles/package.json             |  2 +-
 packages/react-examples/CHANGELOG.json        | 20 +++++++++++++
 packages/react-examples/CHANGELOG.md          | 13 +++++++++
 packages/react-examples/package.json          |  6 ++--
 packages/react-experiments/CHANGELOG.json     | 15 ++++++++++
 packages/react-experiments/CHANGELOG.md       | 11 +++++++-
 packages/react-experiments/package.json       |  2 +-
 packages/react-make-styles/CHANGELOG.json     | 28 +++++++++++++++++++
 packages/react-make-styles/CHANGELOG.md       | 13 +++++++++
 packages/react-make-styles/package.json       |  4 +--
 33 files changed, 254 insertions(+), 93 deletions(-)
 create mode 100644 apps/public-docsite-resources/CHANGELOG.json
 create mode 100644 apps/public-docsite-resources/CHANGELOG.md
 create mode 100644 apps/public-docsite/CHANGELOG.json
 create mode 100644 apps/public-docsite/CHANGELOG.md
 delete mode 100644 change/@fluentui-api-docs-2021-02-01-12-04-publishdocsite.json
 delete mode 100644 change/@fluentui-make-styles-2021-02-01-20-10-06-makestyles-keyframes-2.json
 delete mode 100644 change/@fluentui-make-styles-2021-02-02-16-29-16-feat-mk-support-react.json
 delete mode 100644 change/@fluentui-public-docsite-2021-02-01-12-04-publishdocsite.json
 delete mode 100644 change/@fluentui-public-docsite-resources-2021-02-01-12-04-publishdocsite.json
 delete mode 100644 change/@fluentui-react-examples-2021-02-01-12-04-publishdocsite.json
 delete mode 100644 change/@fluentui-react-experiments-2021-02-02-16-22-00-editselectionfix.json
 delete mode 100644 change/@fluentui-react-make-styles-2021-01-27-16-39-16-feat-mk-support-react.json
 delete mode 100644 change/@fluentui-react-make-styles-2021-02-03-11-08-54-chore-npmrc.json
 create mode 100644 packages/api-docs/CHANGELOG.json
 create mode 100644 packages/api-docs/CHANGELOG.md
 create mode 100644 packages/react-examples/CHANGELOG.json
 create mode 100644 packages/react-examples/CHANGELOG.md
 create mode 100644 packages/react-make-styles/CHANGELOG.json
 create mode 100644 packages/react-make-styles/CHANGELOG.md

diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json
index a5ca1696feed28..fa408778090eeb 100644
--- a/apps/perf-test/package.json
+++ b/apps/perf-test/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@fluentui/eslint-plugin": "^1.0.0-beta.1",
-    "@fluentui/make-styles": "^0.4.0",
+    "@fluentui/make-styles": "^0.5.0",
     "@fluentui/react": "^8.0.0-beta.48",
     "@fluentui/react-avatar": "^0.9.0",
     "@fluentui/react-button": "^1.0.0-beta.27",
diff --git a/apps/public-docsite-resources/CHANGELOG.json b/apps/public-docsite-resources/CHANGELOG.json
new file mode 100644
index 00000000000000..ae5b7b3dba40dc
--- /dev/null
+++ b/apps/public-docsite-resources/CHANGELOG.json
@@ -0,0 +1,20 @@
+{
+  "name": "@fluentui/public-docsite-resources",
+  "entries": [
+    {
+      "date": "Wed, 03 Feb 2021 22:54:59 GMT",
+      "tag": "@fluentui/public-docsite-resources_v1.0.1",
+      "version": "1.0.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Publishing public docsite output.",
+            "author": "dzearing@microsoft.com",
+            "commit": "e24c3b46e24f2e7005d2d1cb93f4f8a8843a2070",
+            "package": "@fluentui/public-docsite-resources"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/apps/public-docsite-resources/CHANGELOG.md b/apps/public-docsite-resources/CHANGELOG.md
new file mode 100644
index 00000000000000..2a2f8447db537c
--- /dev/null
+++ b/apps/public-docsite-resources/CHANGELOG.md
@@ -0,0 +1,13 @@
+# Change Log - @fluentui/public-docsite-resources
+
+This log was last generated on Wed, 03 Feb 2021 22:54:59 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [1.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-resources_v1.0.1)
+
+Wed, 03 Feb 2021 22:54:59 GMT
+
+### Patches
+
+- Publishing public docsite output. ([PR #16737](https://github.com/microsoft/fluentui/pull/16737) by dzearing@microsoft.com)
diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json
index 9781cf11a74c20..4f2a55e3eb45d5 100644
--- a/apps/public-docsite-resources/package.json
+++ b/apps/public-docsite-resources/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/public-docsite-resources",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Fluent UI React local demo app",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@fluentui/react": "^8.0.0-beta.48",
-    "@fluentui/react-examples": "^1.0.0",
+    "@fluentui/react-examples": "^1.0.1",
     "@fluentui/react-internal": "^8.0.0-beta.42",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/api-docs": "^1.0.0",
+    "@fluentui/api-docs": "^1.0.1",
     "@fluentui/azure-themes": "^8.0.0-beta.46",
     "@fluentui/react-docsite-components": "^8.0.0-beta.47",
     "@fluentui/font-icons-mdl2": "^8.0.0-beta.13",
diff --git a/apps/public-docsite/CHANGELOG.json b/apps/public-docsite/CHANGELOG.json
new file mode 100644
index 00000000000000..621e0c8c40165a
--- /dev/null
+++ b/apps/public-docsite/CHANGELOG.json
@@ -0,0 +1,20 @@
+{
+  "name": "@fluentui/public-docsite",
+  "entries": [
+    {
+      "date": "Wed, 03 Feb 2021 22:54:59 GMT",
+      "tag": "@fluentui/public-docsite_v1.0.1",
+      "version": "1.0.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Publishing public docsite output.",
+            "author": "dzearing@microsoft.com",
+            "commit": "e24c3b46e24f2e7005d2d1cb93f4f8a8843a2070",
+            "package": "@fluentui/public-docsite"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/apps/public-docsite/CHANGELOG.md b/apps/public-docsite/CHANGELOG.md
new file mode 100644
index 00000000000000..db3cbac91fedab
--- /dev/null
+++ b/apps/public-docsite/CHANGELOG.md
@@ -0,0 +1,13 @@
+# Change Log - @fluentui/public-docsite
+
+This log was last generated on Wed, 03 Feb 2021 22:54:59 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [1.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite_v1.0.1)
+
+Wed, 03 Feb 2021 22:54:59 GMT
+
+### Patches
+
+- Publishing public docsite output. ([PR #16737](https://github.com/microsoft/fluentui/pull/16737) by dzearing@microsoft.com)
diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json
index cd6e4e8f0f1c9c..cb212542ac7d94 100644
--- a/apps/public-docsite/package.json
+++ b/apps/public-docsite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/public-docsite",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "The official website for the Fluent UI project.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -48,13 +48,13 @@
   "dependencies": {
     "@fluentui/react": "^8.0.0-beta.48",
     "@fluentui/react-internal": "^8.0.0-beta.42",
-    "@fluentui/react-examples": "^1.0.0",
+    "@fluentui/react-examples": "^1.0.1",
     "@fluentui/theme": "^2.0.0-beta.13",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/api-docs": "^1.0.0",
+    "@fluentui/api-docs": "^1.0.1",
     "@fluentui/react-docsite-components": "^8.0.0-beta.47",
-    "@fluentui/react-experiments": "^8.0.0-beta.50",
-    "@fluentui/public-docsite-resources": "1.0.0",
+    "@fluentui/react-experiments": "^8.0.0-beta.51",
+    "@fluentui/public-docsite-resources": "1.0.1",
     "@fluentui/react-file-type-icons": "^8.0.0-beta.15",
     "@fluentui/font-icons-mdl2": "^8.0.0-beta.13",
     "@fluentui/set-version": "^8.0.0-beta.1",
diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json
index b8e7590d89817f..b42a9d51105b5d 100644
--- a/apps/ssr-tests/package.json
+++ b/apps/ssr-tests/package.json
@@ -18,7 +18,7 @@
     "@types/mocha": "^7.0.2",
     "@types/webpack-env": "1.16.0",
     "@fluentui/scripts": "^1.0.0",
-    "@fluentui/public-docsite-resources": "1.0.0",
+    "@fluentui/public-docsite-resources": "1.0.1",
     "just-scripts-utils": "^1.1.1",
     "mocha": "^3.3.0",
     "raw-loader": "^4.0.2",
diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
index b621ddb33622fb..021c9dda0d148f 100644
--- a/apps/vr-tests/package.json
+++ b/apps/vr-tests/package.json
@@ -22,7 +22,7 @@
     "@fluentui/react-avatar": "^0.9.0",
     "@fluentui/react-button": "^1.0.0-beta.27",
     "@fluentui/react-cards": "^1.0.0-beta.46",
-    "@fluentui/react-experiments": "^8.0.0-beta.50",
+    "@fluentui/react-experiments": "^8.0.0-beta.51",
     "@fluentui/react-hooks": "^8.0.0-beta.10",
     "@fluentui/react-icons-mdl2": "^1.0.0-beta.12",
     "@fluentui/react-tabs": "^1.0.0-beta.40",
diff --git a/change/@fluentui-api-docs-2021-02-01-12-04-publishdocsite.json b/change/@fluentui-api-docs-2021-02-01-12-04-publishdocsite.json
deleted file mode 100644
index 18b2e125499194..00000000000000
--- a/change/@fluentui-api-docs-2021-02-01-12-04-publishdocsite.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Publishing public docsite output.",
-  "packageName": "@fluentui/api-docs",
-  "email": "dzearing@microsoft.com",
-  "dependentChangeType": "none",
-  "date": "2021-02-01T12:04:24.362Z"
-}
diff --git a/change/@fluentui-make-styles-2021-02-01-20-10-06-makestyles-keyframes-2.json b/change/@fluentui-make-styles-2021-02-01-20-10-06-makestyles-keyframes-2.json
deleted file mode 100644
index 1933e22ce27e61..00000000000000
--- a/change/@fluentui-make-styles-2021-02-01-20-10-06-makestyles-keyframes-2.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "minor",
-  "comment": "makeStyles: finish up keyframes implementation",
-  "packageName": "@fluentui/make-styles",
-  "email": "xgao@microsoft.com",
-  "dependentChangeType": "patch",
-  "date": "2021-02-02T04:10:06.714Z"
-}
diff --git a/change/@fluentui-make-styles-2021-02-02-16-29-16-feat-mk-support-react.json b/change/@fluentui-make-styles-2021-02-02-16-29-16-feat-mk-support-react.json
deleted file mode 100644
index 6827d8040d45e7..00000000000000
--- a/change/@fluentui-make-styles-2021-02-02-16-29-16-feat-mk-support-react.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "patch",
-  "comment": "update proxy implementation to correspond to Provider CSS variables",
-  "packageName": "@fluentui/make-styles",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "patch",
-  "date": "2021-02-02T15:29:16.424Z"
-}
diff --git a/change/@fluentui-public-docsite-2021-02-01-12-04-publishdocsite.json b/change/@fluentui-public-docsite-2021-02-01-12-04-publishdocsite.json
deleted file mode 100644
index 02b07c53ab5f6a..00000000000000
--- a/change/@fluentui-public-docsite-2021-02-01-12-04-publishdocsite.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Publishing public docsite output.",
-  "packageName": "@fluentui/public-docsite",
-  "email": "dzearing@microsoft.com",
-  "dependentChangeType": "none",
-  "date": "2021-02-01T12:04:24.362Z"
-}
diff --git a/change/@fluentui-public-docsite-resources-2021-02-01-12-04-publishdocsite.json b/change/@fluentui-public-docsite-resources-2021-02-01-12-04-publishdocsite.json
deleted file mode 100644
index 2864f4db8f5afe..00000000000000
--- a/change/@fluentui-public-docsite-resources-2021-02-01-12-04-publishdocsite.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Publishing public docsite output.",
-  "packageName": "@fluentui/public-docsite-resources",
-  "email": "dzearing@microsoft.com",
-  "dependentChangeType": "none",
-  "date": "2021-02-01T12:04:24.362Z"
-}
diff --git a/change/@fluentui-react-examples-2021-02-01-12-04-publishdocsite.json b/change/@fluentui-react-examples-2021-02-01-12-04-publishdocsite.json
deleted file mode 100644
index 59402e9878f7ab..00000000000000
--- a/change/@fluentui-react-examples-2021-02-01-12-04-publishdocsite.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Publishing public docsite output.",
-  "packageName": "@fluentui/react-examples",
-  "email": "dzearing@microsoft.com",
-  "dependentChangeType": "none",
-  "date": "2021-02-01T12:04:24.362Z"
-}
diff --git a/change/@fluentui-react-experiments-2021-02-02-16-22-00-editselectionfix.json b/change/@fluentui-react-experiments-2021-02-02-16-22-00-editselectionfix.json
deleted file mode 100644
index cbaf2918759113..00000000000000
--- a/change/@fluentui-react-experiments-2021-02-02-16-22-00-editselectionfix.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "SelectedItemsList EditableItem should have first item selected in picker on show",
-  "packageName": "@fluentui/react-experiments",
-  "email": "elvonspa@microsoft.com",
-  "dependentChangeType": "patch",
-  "date": "2021-02-03T00:22:00.102Z"
-}
diff --git a/change/@fluentui-react-make-styles-2021-01-27-16-39-16-feat-mk-support-react.json b/change/@fluentui-react-make-styles-2021-01-27-16-39-16-feat-mk-support-react.json
deleted file mode 100644
index 7593f2f1e446ee..00000000000000
--- a/change/@fluentui-react-make-styles-2021-01-27-16-39-16-feat-mk-support-react.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: add makeStyles() bindings for React",
-  "packageName": "@fluentui/react-make-styles",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "patch",
-  "date": "2021-01-27T15:39:16.807Z"
-}
diff --git a/change/@fluentui-react-make-styles-2021-02-03-11-08-54-chore-npmrc.json b/change/@fluentui-react-make-styles-2021-02-03-11-08-54-chore-npmrc.json
deleted file mode 100644
index 57381f41e0c9e3..00000000000000
--- a/change/@fluentui-react-make-styles-2021-02-03-11-08-54-chore-npmrc.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "none",
-  "comment": "refactor: remove unused .npmrc in packages",
-  "packageName": "@fluentui/react-make-styles",
-  "email": "olfedias@microsoft.com",
-  "dependentChangeType": "none",
-  "date": "2021-02-03T10:08:54.140Z"
-}
diff --git a/packages/api-docs/CHANGELOG.json b/packages/api-docs/CHANGELOG.json
new file mode 100644
index 00000000000000..cdf298a8b9d97a
--- /dev/null
+++ b/packages/api-docs/CHANGELOG.json
@@ -0,0 +1,20 @@
+{
+  "name": "@fluentui/api-docs",
+  "entries": [
+    {
+      "date": "Wed, 03 Feb 2021 22:54:59 GMT",
+      "tag": "@fluentui/api-docs_v1.0.1",
+      "version": "1.0.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Publishing public docsite output.",
+            "author": "dzearing@microsoft.com",
+            "commit": "e24c3b46e24f2e7005d2d1cb93f4f8a8843a2070",
+            "package": "@fluentui/api-docs"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/packages/api-docs/CHANGELOG.md b/packages/api-docs/CHANGELOG.md
new file mode 100644
index 00000000000000..3586ca7bb6af51
--- /dev/null
+++ b/packages/api-docs/CHANGELOG.md
@@ -0,0 +1,13 @@
+# Change Log - @fluentui/api-docs
+
+This log was last generated on Wed, 03 Feb 2021 22:54:59 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [1.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/api-docs_v1.0.1)
+
+Wed, 03 Feb 2021 22:54:59 GMT
+
+### Patches
+
+- Publishing public docsite output. ([PR #16737](https://github.com/microsoft/fluentui/pull/16737) by dzearing@microsoft.com)
diff --git a/packages/api-docs/package.json b/packages/api-docs/package.json
index 23218aa7cf33e2..a00ebd716164aa 100644
--- a/packages/api-docs/package.json
+++ b/packages/api-docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/api-docs",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A package that transforms api-extractor .api.json files into page.json files",
   "repository": {
     "type": "git",
diff --git a/packages/make-styles/CHANGELOG.json b/packages/make-styles/CHANGELOG.json
index 5fa921eed04f44..49a58152f7937e 100644
--- a/packages/make-styles/CHANGELOG.json
+++ b/packages/make-styles/CHANGELOG.json
@@ -1,6 +1,29 @@
 {
   "name": "@fluentui/make-styles",
   "entries": [
+    {
+      "date": "Wed, 03 Feb 2021 22:54:59 GMT",
+      "tag": "@fluentui/make-styles_v0.5.0",
+      "version": "0.5.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "makeStyles: finish up keyframes implementation",
+            "author": "xgao@microsoft.com",
+            "commit": "42df0bee0fa79499115ea1940cafc580f66c53ca",
+            "package": "@fluentui/make-styles"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "update proxy implementation to correspond to Provider CSS variables",
+            "author": "olfedias@microsoft.com",
+            "commit": "f5af8fdff38fc931c49b7cb6c03559f93e5135b5",
+            "package": "@fluentui/make-styles"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 03 Feb 2021 05:51:40 GMT",
       "tag": "@fluentui/make-styles_v0.4.0",
diff --git a/packages/make-styles/CHANGELOG.md b/packages/make-styles/CHANGELOG.md
index 1c37b2685cb796..98fd2723bfcf71 100644
--- a/packages/make-styles/CHANGELOG.md
+++ b/packages/make-styles/CHANGELOG.md
@@ -1,9 +1,22 @@
 # Change Log - @fluentui/make-styles
 
-This log was last generated on Mon, 01 Feb 2021 12:23:48 GMT and should not be manually modified.
+This log was last generated on Wed, 03 Feb 2021 22:54:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.5.0)
+
+Wed, 03 Feb 2021 22:54:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/make-styles_v0.4.0..@fluentui/make-styles_v0.5.0)
+
+### Minor changes
+
+- makeStyles: finish up keyframes implementation ([PR #16757](https://github.com/microsoft/fluentui/pull/16757) by xgao@microsoft.com)
+
+### Patches
+
+- update proxy implementation to correspond to Provider CSS variables ([PR #16664](https://github.com/microsoft/fluentui/pull/16664) by olfedias@microsoft.com)
+
 ## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/make-styles_v0.4.0)
 
 Mon, 01 Feb 2021 12:23:48 GMT 
diff --git a/packages/make-styles/package.json b/packages/make-styles/package.json
index fa96524523e0e2..5905de62f980b5 100644
--- a/packages/make-styles/package.json
+++ b/packages/make-styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/make-styles",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Experimental utility for creating css styles/classes.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react-examples/CHANGELOG.json b/packages/react-examples/CHANGELOG.json
new file mode 100644
index 00000000000000..3b0c9157897134
--- /dev/null
+++ b/packages/react-examples/CHANGELOG.json
@@ -0,0 +1,20 @@
+{
+  "name": "@fluentui/react-examples",
+  "entries": [
+    {
+      "date": "Wed, 03 Feb 2021 22:54:59 GMT",
+      "tag": "@fluentui/react-examples_v1.0.1",
+      "version": "1.0.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Publishing public docsite output.",
+            "author": "dzearing@microsoft.com",
+            "commit": "e24c3b46e24f2e7005d2d1cb93f4f8a8843a2070",
+            "package": "@fluentui/react-examples"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/packages/react-examples/CHANGELOG.md b/packages/react-examples/CHANGELOG.md
new file mode 100644
index 00000000000000..49a47871be6352
--- /dev/null
+++ b/packages/react-examples/CHANGELOG.md
@@ -0,0 +1,13 @@
+# Change Log - @fluentui/react-examples
+
+This log was last generated on Wed, 03 Feb 2021 22:54:59 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [1.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-examples_v1.0.1)
+
+Wed, 03 Feb 2021 22:54:59 GMT
+
+### Patches
+
+- Publishing public docsite output. ([PR #16737](https://github.com/microsoft/fluentui/pull/16737) by dzearing@microsoft.com)
diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json
index 7d44a4a40b1811..9d9826d18a93c8 100644
--- a/packages/react-examples/package.json
+++ b/packages/react-examples/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-examples",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Example code and docs for Fluent UI packages.",
   "repository": {
     "type": "git",
@@ -68,7 +68,7 @@
     "@fluentui/react-checkbox": "^1.0.0-beta.39",
     "@fluentui/react-date-time": "^8.0.0-beta.39",
     "@fluentui/react-docsite-components": "^8.0.0-beta.47",
-    "@fluentui/react-experiments": "^8.0.0-beta.50",
+    "@fluentui/react-experiments": "^8.0.0-beta.51",
     "@fluentui/react-flex": "^0.2.3",
     "@fluentui/react-focus": "^8.0.0-beta.18",
     "@fluentui/react-hooks": "^8.0.0-beta.10",
@@ -76,7 +76,7 @@
     "@fluentui/react-image": "^0.6.20",
     "@fluentui/react-internal": "^8.0.0-beta.42",
     "@fluentui/react-link": "^1.0.0-beta.38",
-    "@fluentui/react-make-styles": "^0.1.0",
+    "@fluentui/react-make-styles": "^0.2.0",
     "@fluentui/react-shared-contexts": "^1.0.0-beta.5",
     "@fluentui/react-slider": "^1.0.0-beta.39",
     "@fluentui/react-tabs": "^1.0.0-beta.40",
diff --git a/packages/react-experiments/CHANGELOG.json b/packages/react-experiments/CHANGELOG.json
index 8629b499bf5e95..7ed26b13ddb6b6 100644
--- a/packages/react-experiments/CHANGELOG.json
+++ b/packages/react-experiments/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-experiments",
   "entries": [
+    {
+      "date": "Wed, 03 Feb 2021 22:54:59 GMT",
+      "tag": "@fluentui/react-experiments_v8.0.0-beta.51",
+      "version": "8.0.0-beta.51",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "SelectedItemsList EditableItem should have first item selected in picker on show",
+            "author": "elvonspa@microsoft.com",
+            "commit": "715f670a62ede40fd0d8cbe4d9d9724133a7c660",
+            "package": "@fluentui/react-experiments"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 03 Feb 2021 05:51:40 GMT",
       "tag": "@fluentui/react-experiments_v8.0.0-beta.50",
diff --git a/packages/react-experiments/CHANGELOG.md b/packages/react-experiments/CHANGELOG.md
index b4823c16b55b9b..8c5649fed156d8 100644
--- a/packages/react-experiments/CHANGELOG.md
+++ b/packages/react-experiments/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-experiments
 
-This log was last generated on Tue, 02 Feb 2021 12:21:54 GMT and should not be manually modified.
+This log was last generated on Wed, 03 Feb 2021 22:54:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.0.0-beta.51](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.0.0-beta.51)
+
+Wed, 03 Feb 2021 22:54:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-experiments_v8.0.0-beta.50..@fluentui/react-experiments_v8.0.0-beta.51)
+
+### Changes
+
+- SelectedItemsList EditableItem should have first item selected in picker on show ([PR #16777](https://github.com/microsoft/fluentui/pull/16777) by elvonspa@microsoft.com)
+
 ## [8.0.0-beta.50](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.0.0-beta.50)
 
 Tue, 02 Feb 2021 12:21:54 GMT 
diff --git a/packages/react-experiments/package.json b/packages/react-experiments/package.json
index eed2ad648a44ac..a4ce7239d854be 100644
--- a/packages/react-experiments/package.json
+++ b/packages/react-experiments/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-experiments",
-  "version": "8.0.0-beta.50",
+  "version": "8.0.0-beta.51",
   "description": "Experimental React components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/react-make-styles/CHANGELOG.json b/packages/react-make-styles/CHANGELOG.json
new file mode 100644
index 00000000000000..2634be3fc2970a
--- /dev/null
+++ b/packages/react-make-styles/CHANGELOG.json
@@ -0,0 +1,28 @@
+{
+  "name": "@fluentui/react-make-styles",
+  "entries": [
+    {
+      "date": "Wed, 03 Feb 2021 22:54:59 GMT",
+      "tag": "@fluentui/react-make-styles_v0.2.0",
+      "version": "0.2.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "feat: add makeStyles() bindings for React",
+            "author": "olfedias@microsoft.com",
+            "commit": "f5af8fdff38fc931c49b7cb6c03559f93e5135b5",
+            "package": "@fluentui/react-make-styles"
+          }
+        ],
+        "none": [
+          {
+            "comment": "refactor: remove unused .npmrc in packages",
+            "author": "olfedias@microsoft.com",
+            "commit": "8e6c3bb6e2b3de72ad5fa5c423ec4091391e24d5",
+            "package": "@fluentui/react-make-styles"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/packages/react-make-styles/CHANGELOG.md b/packages/react-make-styles/CHANGELOG.md
new file mode 100644
index 00000000000000..f13a1fe0d8110c
--- /dev/null
+++ b/packages/react-make-styles/CHANGELOG.md
@@ -0,0 +1,13 @@
+# Change Log - @fluentui/react-make-styles
+
+This log was last generated on Wed, 03 Feb 2021 22:54:59 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-make-styles_v0.2.0)
+
+Wed, 03 Feb 2021 22:54:59 GMT
+
+### Minor changes
+
+- feat: add makeStyles() bindings for React ([PR #16664](https://github.com/microsoft/fluentui/pull/16664) by olfedias@microsoft.com)
diff --git a/packages/react-make-styles/package.json b/packages/react-make-styles/package.json
index e73aa9b4fb1aaa..62d2b009615245 100644
--- a/packages/react-make-styles/package.json
+++ b/packages/react-make-styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-make-styles",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React bindings for @fluentui/make-styles",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/make-styles": "^0.4.0",
+    "@fluentui/make-styles": "^0.5.0",
     "@fluentui/set-version": "^8.0.0-beta.1",
     "@fluentui/react-provider": "^0.1.0",
     "@fluentui/react-theme": "^0.2.0",

From aede2e41a6c803a46bd9eb7538542ee6b86ccd8f Mon Sep 17 00:00:00 2001
From: Elizabeth Craig <elcraig@microsoft.com>
Date: Wed, 3 Feb 2021 17:10:12 -0800
Subject: [PATCH 10/17] Actually publish react-provider (#16807)

---
 ...eact-provider-a0c15744-d05c-4002-8c3b-b137795132c0.json | 7 +++++++
 packages/react-provider/package.json                       | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-provider-a0c15744-d05c-4002-8c3b-b137795132c0.json

diff --git a/change/@fluentui-react-provider-a0c15744-d05c-4002-8c3b-b137795132c0.json b/change/@fluentui-react-provider-a0c15744-d05c-4002-8c3b-b137795132c0.json
new file mode 100644
index 00000000000000..fc7252b1690aa0
--- /dev/null
+++ b/change/@fluentui-react-provider-a0c15744-d05c-4002-8c3b-b137795132c0.json
@@ -0,0 +1,7 @@
+{
+  "comment": "Publish react-provider",
+  "type": "patch",
+  "packageName": "@fluentui/react-provider",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-provider/package.json b/packages/react-provider/package.json
index 7d891886eba8bc..312d67066763f5 100644
--- a/packages/react-provider/package.json
+++ b/packages/react-provider/package.json
@@ -46,5 +46,12 @@
     "@types/react-dom": ">=16.8.0 <17.0.0",
     "react": ">=16.8.0 <17.0.0",
     "react-dom": ">=16.8.0 <17.0.0"
+  },
+  "beachball": {
+    "tag": "latest",
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
   }
 }

From 3e5a734eb1250ef820ce60b59e7e03420abeeab4 Mon Sep 17 00:00:00 2001
From: Fluent UI Build <fluentui-internal@service.microsoft.com>
Date: Thu, 4 Feb 2021 01:27:42 +0000
Subject: [PATCH 11/17] applying package updates

---
 apps/public-docsite-resources/package.json    |  4 ++--
 apps/public-docsite/package.json              |  6 +++---
 apps/ssr-tests/package.json                   |  2 +-
 ...-a0c15744-d05c-4002-8c3b-b137795132c0.json |  7 -------
 packages/react-examples/package.json          |  6 +++---
 packages/react-make-styles/package.json       |  4 ++--
 packages/react-provider/CHANGELOG.json        | 20 +++++++++++++++++++
 packages/react-provider/CHANGELOG.md          | 13 ++++++++++++
 packages/react-provider/package.json          |  2 +-
 9 files changed, 45 insertions(+), 19 deletions(-)
 delete mode 100644 change/@fluentui-react-provider-a0c15744-d05c-4002-8c3b-b137795132c0.json
 create mode 100644 packages/react-provider/CHANGELOG.json
 create mode 100644 packages/react-provider/CHANGELOG.md

diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json
index 4f2a55e3eb45d5..8b931b04398915 100644
--- a/apps/public-docsite-resources/package.json
+++ b/apps/public-docsite-resources/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/public-docsite-resources",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Fluent UI React local demo app",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@fluentui/react": "^8.0.0-beta.48",
-    "@fluentui/react-examples": "^1.0.1",
+    "@fluentui/react-examples": "^1.0.2",
     "@fluentui/react-internal": "^8.0.0-beta.42",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/api-docs": "^1.0.1",
diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json
index cb212542ac7d94..267ba69320eec1 100644
--- a/apps/public-docsite/package.json
+++ b/apps/public-docsite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/public-docsite",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "The official website for the Fluent UI project.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -48,13 +48,13 @@
   "dependencies": {
     "@fluentui/react": "^8.0.0-beta.48",
     "@fluentui/react-internal": "^8.0.0-beta.42",
-    "@fluentui/react-examples": "^1.0.1",
+    "@fluentui/react-examples": "^1.0.2",
     "@fluentui/theme": "^2.0.0-beta.13",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/api-docs": "^1.0.1",
     "@fluentui/react-docsite-components": "^8.0.0-beta.47",
     "@fluentui/react-experiments": "^8.0.0-beta.51",
-    "@fluentui/public-docsite-resources": "1.0.1",
+    "@fluentui/public-docsite-resources": "1.0.2",
     "@fluentui/react-file-type-icons": "^8.0.0-beta.15",
     "@fluentui/font-icons-mdl2": "^8.0.0-beta.13",
     "@fluentui/set-version": "^8.0.0-beta.1",
diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json
index b42a9d51105b5d..b0bc2e762b7c2b 100644
--- a/apps/ssr-tests/package.json
+++ b/apps/ssr-tests/package.json
@@ -18,7 +18,7 @@
     "@types/mocha": "^7.0.2",
     "@types/webpack-env": "1.16.0",
     "@fluentui/scripts": "^1.0.0",
-    "@fluentui/public-docsite-resources": "1.0.1",
+    "@fluentui/public-docsite-resources": "1.0.2",
     "just-scripts-utils": "^1.1.1",
     "mocha": "^3.3.0",
     "raw-loader": "^4.0.2",
diff --git a/change/@fluentui-react-provider-a0c15744-d05c-4002-8c3b-b137795132c0.json b/change/@fluentui-react-provider-a0c15744-d05c-4002-8c3b-b137795132c0.json
deleted file mode 100644
index fc7252b1690aa0..00000000000000
--- a/change/@fluentui-react-provider-a0c15744-d05c-4002-8c3b-b137795132c0.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "comment": "Publish react-provider",
-  "type": "patch",
-  "packageName": "@fluentui/react-provider",
-  "email": "elcraig@microsoft.com",
-  "dependentChangeType": "patch"
-}
diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json
index 9d9826d18a93c8..54629f9db24916 100644
--- a/packages/react-examples/package.json
+++ b/packages/react-examples/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-examples",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Example code and docs for Fluent UI packages.",
   "repository": {
     "type": "git",
@@ -59,7 +59,7 @@
     "@fluentui/foundation-legacy": "^8.0.0-beta.13",
     "@fluentui/ie11-polyfills": "^0.1.4",
     "@fluentui/merge-styles": "^8.0.0-beta.4",
-    "@fluentui/react-provider": "^0.1.0",
+    "@fluentui/react-provider": "^0.1.1",
     "@fluentui/react": "^8.0.0-beta.48",
     "@fluentui/react-avatar": "^0.9.0",
     "@fluentui/react-button": "^1.0.0-beta.27",
@@ -76,7 +76,7 @@
     "@fluentui/react-image": "^0.6.20",
     "@fluentui/react-internal": "^8.0.0-beta.42",
     "@fluentui/react-link": "^1.0.0-beta.38",
-    "@fluentui/react-make-styles": "^0.2.0",
+    "@fluentui/react-make-styles": "^0.2.1",
     "@fluentui/react-shared-contexts": "^1.0.0-beta.5",
     "@fluentui/react-slider": "^1.0.0-beta.39",
     "@fluentui/react-tabs": "^1.0.0-beta.40",
diff --git a/packages/react-make-styles/package.json b/packages/react-make-styles/package.json
index 62d2b009615245..44437da7170735 100644
--- a/packages/react-make-styles/package.json
+++ b/packages/react-make-styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-make-styles",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React bindings for @fluentui/make-styles",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@fluentui/make-styles": "^0.5.0",
     "@fluentui/set-version": "^8.0.0-beta.1",
-    "@fluentui/react-provider": "^0.1.0",
+    "@fluentui/react-provider": "^0.1.1",
     "@fluentui/react-theme": "^0.2.0",
     "@fluentui/react-theme-provider": "^1.0.0-beta.19",
     "tslib": "^1.10.0"
diff --git a/packages/react-provider/CHANGELOG.json b/packages/react-provider/CHANGELOG.json
new file mode 100644
index 00000000000000..2d958f3fef9a5a
--- /dev/null
+++ b/packages/react-provider/CHANGELOG.json
@@ -0,0 +1,20 @@
+{
+  "name": "@fluentui/react-provider",
+  "entries": [
+    {
+      "date": "Thu, 04 Feb 2021 01:27:42 GMT",
+      "tag": "@fluentui/react-provider_v0.1.1",
+      "version": "0.1.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Publish react-provider",
+            "author": "elcraig@microsoft.com",
+            "commit": "aede2e41a6c803a46bd9eb7538542ee6b86ccd8f",
+            "package": "@fluentui/react-provider"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/packages/react-provider/CHANGELOG.md b/packages/react-provider/CHANGELOG.md
new file mode 100644
index 00000000000000..3de07949fb5396
--- /dev/null
+++ b/packages/react-provider/CHANGELOG.md
@@ -0,0 +1,13 @@
+# Change Log - @fluentui/react-provider
+
+This log was last generated on Thu, 04 Feb 2021 01:27:42 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v0.1.1)
+
+Thu, 04 Feb 2021 01:27:42 GMT
+
+### Patches
+
+- Publish react-provider ([PR #16807](https://github.com/microsoft/fluentui/pull/16807) by elcraig@microsoft.com)
diff --git a/packages/react-provider/package.json b/packages/react-provider/package.json
index 312d67066763f5..ff23eddea4c564 100644
--- a/packages/react-provider/package.json
+++ b/packages/react-provider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

From a0fe6eeaa4b9cc12e5130dafa16b3c494a2802b6 Mon Sep 17 00:00:00 2001
From: Xu Gao <xugao0131@hotmail.com>
Date: Wed, 3 Feb 2021 18:34:33 -0800
Subject: [PATCH 12/17] Update content in Themes doc page (#15846)

---
 .../docs/web/TypographyCustomization.md       |  4 +-
 ...csite-2021-02-03-15-40-08-theming-doc.json |  8 +++
 ...mples-2021-02-03-15-40-08-theming-doc.json |  8 +++
 .../src/react/Theme/docs/ThemesOverview.md    | 70 +------------------
 4 files changed, 19 insertions(+), 71 deletions(-)
 create mode 100644 change/@fluentui-public-docsite-2021-02-03-15-40-08-theming-doc.json
 create mode 100644 change/@fluentui-react-examples-2021-02-03-15-40-08-theming-doc.json

diff --git a/apps/public-docsite/src/pages/Styles/TypographyPage/docs/web/TypographyCustomization.md b/apps/public-docsite/src/pages/Styles/TypographyPage/docs/web/TypographyCustomization.md
index 59307bd3b4954d..2349c2d9264c68 100644
--- a/apps/public-docsite/src/pages/Styles/TypographyPage/docs/web/TypographyCustomization.md
+++ b/apps/public-docsite/src/pages/Styles/TypographyPage/docs/web/TypographyCustomization.md
@@ -5,9 +5,9 @@ These can be used separately, or together, as shown in the example below.
 The overrides can include any property from [`IRawStyle`](#/controls/web/references/irawstyle).
 
 ```tsx
-import { loadTheme } from '@fluentui/react';
+import { createTheme } from '@fluentui/react';
 
-loadTheme({
+const appTheme = createTheme({
   defaultFontStyle: { fontFamily: 'Monaco, Menlo, Consolas', fontWeight: 'regular' },
   fonts: {
     small: {
diff --git a/change/@fluentui-public-docsite-2021-02-03-15-40-08-theming-doc.json b/change/@fluentui-public-docsite-2021-02-03-15-40-08-theming-doc.json
new file mode 100644
index 00000000000000..4a8a24f3b24068
--- /dev/null
+++ b/change/@fluentui-public-docsite-2021-02-03-15-40-08-theming-doc.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update content in Themes doc page.",
+  "packageName": "@fluentui/public-docsite",
+  "email": "xgao@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-03T23:39:43.990Z"
+}
diff --git a/change/@fluentui-react-examples-2021-02-03-15-40-08-theming-doc.json b/change/@fluentui-react-examples-2021-02-03-15-40-08-theming-doc.json
new file mode 100644
index 00000000000000..b737ddaf4723e3
--- /dev/null
+++ b/change/@fluentui-react-examples-2021-02-03-15-40-08-theming-doc.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update content in Themes doc page.",
+  "packageName": "@fluentui/react-examples",
+  "email": "xgao@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-03T23:40:08.905Z"
+}
diff --git a/packages/react-examples/src/react/Theme/docs/ThemesOverview.md b/packages/react-examples/src/react/Theme/docs/ThemesOverview.md
index 5203b97f3df110..5da4eda4d5d3ec 100644
--- a/packages/react-examples/src/react/Theme/docs/ThemesOverview.md
+++ b/packages/react-examples/src/react/Theme/docs/ThemesOverview.md
@@ -1,69 +1 @@
-The entire color palette of the controls is themeable. We provide a set of sensible defaults, but you can override all colors individually. To do this, you must call `loadTheme()` with a custom theme object at app startup.
-
-### Using themes
-
-To use themes, an application must call `loadTheme()` immediately at app startup before any app code executes.
-Here is an example:
-
-```tsx
-import { loadTheme } from '@fluentui/react';
-
-loadTheme({
-  palette: {
-    themePrimary: '#0078d4',
-    themeLighterAlt: '#eff6fc',
-    themeLighter: '#deecf9',
-    themeLight: '#c7e0f4',
-    themeTertiary: '#71afe5',
-    themeSecondary: '#2b88d8',
-    themeDarkAlt: '#106ebe',
-    themeDark: '#005a9e',
-    themeDarker: '#004578',
-    neutralLighterAlt: '#f8f8f8',
-    neutralLighter: '#f4f4f4',
-    neutralLight: '#eaeaea',
-    neutralQuaternaryAlt: '#dadada',
-    neutralQuaternary: '#d0d0d0',
-    neutralTertiaryAlt: '#c8c8c8',
-    neutralTertiary: '#c2c2c2',
-    neutralSecondary: '#858585',
-    neutralPrimaryAlt: '#4b4b4b',
-    neutralPrimary: '#333333',
-    neutralDark: '#272727',
-    black: '#1d1d1d',
-    white: '#ffffff',
-  },
-});
-```
-
-### Customization
-
-You can also add some of your own customizations to the default theme.
-For example, you can set the `defaultFontStyle` property to modify every font variant
-(small, medium, large, etc.), or you can target specific variants through the `fonts` property.
-These can be used separately, or together, as shown in the example below.
-The overrides can include any property from [`IRawStyle`](#/controls/web/references/irawstyle).
-
-```tsx
-import { loadTheme } from '@fluentui/react';
-
-loadTheme({
-  defaultFontStyle: { fontFamily: 'Monaco, Menlo, Consolas', fontWeight: 'regular' },
-  fonts: {
-    small: {
-      fontSize: '11px',
-    },
-    medium: {
-      fontSize: '13px',
-    },
-    large: {
-      fontSize: '20px',
-      fontWeight: 'semibold',
-    },
-    xLarge: {
-      fontSize: '22px',
-      fontWeight: 'semibold',
-    },
-  },
-});
-```
+Fluent UI React components are themeable. We provide a set of sensible defaults, but you can override [colors](https://developer.microsoft.com/en-us/fluentui#/styles/web/colors/theme-slots) or [fonts](https://developer.microsoft.com/en-us/fluentui#/styles/web/typography) individually. See [this wiki](https://github.com/microsoft/fluentui/wiki/How-to-apply-theme-to-Fluent-UI-React-components) for more details.

From 34f46ff4958fb82ad80071389c8b899803826e45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Dias?= <andredias@microsoft.com>
Date: Thu, 4 Feb 2021 05:41:28 +0100
Subject: [PATCH 13/17] Add additional prop support to IBreadcrumbItems
 (#16765)

* Cherry-pick #16532

* Change files
---
 ...tui-react-2021-02-03-12-45-40-m-10631.json |  8 +++++
 packages/react/etc/react.api.md               |  2 +-
 .../components/Breadcrumb/Breadcrumb.base.tsx | 24 +++++++-------
 .../components/Breadcrumb/Breadcrumb.test.tsx | 33 +++++++++++++++++++
 .../components/Breadcrumb/Breadcrumb.types.ts |  2 +-
 5 files changed, 56 insertions(+), 13 deletions(-)
 create mode 100644 change/@fluentui-react-2021-02-03-12-45-40-m-10631.json

diff --git a/change/@fluentui-react-2021-02-03-12-45-40-m-10631.json b/change/@fluentui-react-2021-02-03-12-45-40-m-10631.json
new file mode 100644
index 00000000000000..e1fba1da4c01c3
--- /dev/null
+++ b/change/@fluentui-react-2021-02-03-12-45-40-m-10631.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Add additional prop support to IBreadcrumbItems",
+  "packageName": "@fluentui/react",
+  "email": "andredias@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-03T11:45:40.245Z"
+}
diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
index 3de291dcdfe31f..b41fdd00d784cd 100644
--- a/packages/react/etc/react.api.md
+++ b/packages/react/etc/react.api.md
@@ -359,7 +359,7 @@ export interface IBreadcrumbData {
 }
 
 // @public (undocumented)
-export interface IBreadcrumbItem {
+export interface IBreadcrumbItem extends React.AllHTMLAttributes<HTMLElement> {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'a';
     href?: string;
     isCurrentItem?: boolean;
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx
index 3d66f7ffdf469d..45f30e71ae8b7d 100644
--- a/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx
+++ b/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx
@@ -249,28 +249,30 @@ export class BreadcrumbBase extends React.Component<IBreadcrumbProps, any> {
   };
 
   private _onRenderItem = (item: IBreadcrumbItem) => {
-    if (item.onClick || item.href) {
+    const { as, href, onClick, isCurrentItem, text, ...additionalProps } = item;
+
+    if (onClick || href) {
       return (
         <Link
-          as={item.as}
+          {...additionalProps}
+          as={as}
           className={this._classNames.itemLink}
-          href={item.href}
-          aria-current={item.isCurrentItem ? 'page' : undefined}
+          href={href}
+          aria-current={isCurrentItem ? 'page' : undefined}
           // eslint-disable-next-line react/jsx-no-bind
           onClick={this._onBreadcrumbClicked.bind(this, item)}
-          role={item.role}
         >
-          <TooltipHost content={item.text} overflowMode={TooltipOverflowMode.Parent} {...this.props.tooltipHostProps}>
-            {item.text}
+          <TooltipHost content={text} overflowMode={TooltipOverflowMode.Parent} {...this.props.tooltipHostProps}>
+            {text}
           </TooltipHost>
         </Link>
       );
     } else {
-      const Tag = item.as || 'span';
+      const Tag = as || 'span';
       return (
-        <Tag className={this._classNames.item}>
-          <TooltipHost content={item.text} overflowMode={TooltipOverflowMode.Parent} {...this.props.tooltipHostProps}>
-            {item.text}
+        <Tag {...additionalProps} className={this._classNames.item}>
+          <TooltipHost content={text} overflowMode={TooltipOverflowMode.Parent} {...this.props.tooltipHostProps}>
+            {text}
           </TooltipHost>
         </Tag>
       );
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx
index a1abbc39d56c1a..13cf8d076e0fcb 100644
--- a/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx
+++ b/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -171,4 +171,37 @@ describe('Breadcrumb', () => {
     expect(overfowItems[0].textContent).toEqual('TestText1');
     expect(overfowItems[1].textContent).toEqual('TestText2');
   });
+
+  describe('ARIA prop propagation to breadcrumb items', () => {
+    it('for Link', () => {
+      const itemsWithAdditionalProps: IBreadcrumbItem[] = [
+        {
+          key: 'ItemKey1',
+          text: 'Item 1',
+          href: '#',
+          'aria-label': "I'm an aria prop",
+        },
+      ];
+
+      wrapper = mount(<Breadcrumb items={itemsWithAdditionalProps} />);
+
+      const item = wrapper.find('LinkBase');
+      expect(item.prop('aria-label')).toEqual("I'm an aria prop");
+    });
+
+    it('for Tag', () => {
+      const itemsWithAdditionalProps: IBreadcrumbItem[] = [
+        {
+          key: 'ItemKey1',
+          text: 'Item 1',
+          'aria-label': "I'm an aria prop",
+        },
+      ];
+
+      wrapper = mount(<Breadcrumb items={itemsWithAdditionalProps} />);
+
+      const item = wrapper.find('.ms-Breadcrumb-item');
+      expect(item.prop('aria-label')).toEqual("I'm an aria prop");
+    });
+  });
 });
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.types.ts b/packages/react/src/components/Breadcrumb/Breadcrumb.types.ts
index d238b52c9fd83b..a99d0bcac76708 100644
--- a/packages/react/src/components/Breadcrumb/Breadcrumb.types.ts
+++ b/packages/react/src/components/Breadcrumb/Breadcrumb.types.ts
@@ -114,7 +114,7 @@ export interface IBreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * {@docCategory Breadcrumb}
  */
-export interface IBreadcrumbItem {
+export interface IBreadcrumbItem extends React.AllHTMLAttributes<HTMLElement> {
   /**
    * Text to display in the breadcrumb item.
    */

From 7e91d654173b2e1d965f5bbe5437a973d542aec6 Mon Sep 17 00:00:00 2001
From: Fluent UI Build <fluentui-internal@service.microsoft.com>
Date: Thu, 4 Feb 2021 12:22:24 +0000
Subject: [PATCH 14/17] applying package updates

---
 apps/a11y-tests/package.json                     |  2 +-
 apps/codesandbox-react-template/package.json     |  2 +-
 apps/perf-test/package.json                      |  2 +-
 apps/public-docsite-resources/package.json       | 12 ++++++------
 apps/public-docsite/CHANGELOG.json               | 15 +++++++++++++++
 apps/public-docsite/CHANGELOG.md                 | 11 ++++++++++-
 apps/public-docsite/package.json                 | 14 +++++++-------
 apps/server-rendered-app/package.json            |  2 +-
 apps/ssr-tests/package.json                      |  2 +-
 apps/test-bundles/package.json                   |  2 +-
 apps/theming-designer/package.json               |  4 ++--
 apps/todo-app/package.json                       |  2 +-
 apps/vr-tests/package.json                       |  6 +++---
 ...-docsite-2021-02-03-15-40-08-theming-doc.json |  8 --------
 ...uentui-react-2021-02-03-12-45-40-m-10631.json |  8 --------
 ...examples-2021-02-03-15-40-08-theming-doc.json |  8 --------
 packages/api-docs/package.json                   |  4 ++--
 packages/azure-themes/package.json               |  4 ++--
 packages/react-cards/package.json                |  4 ++--
 packages/react-charting/package.json             |  6 +++---
 packages/react-docsite-components/package.json   |  6 +++---
 packages/react-examples/CHANGELOG.json           | 15 +++++++++++++++
 packages/react-examples/CHANGELOG.md             | 11 ++++++++++-
 packages/react-examples/package.json             | 16 ++++++++--------
 packages/react-experiments/package.json          |  4 ++--
 packages/react-monaco-editor/package.json        |  4 ++--
 packages/react/CHANGELOG.json                    | 15 +++++++++++++++
 packages/react/CHANGELOG.md                      | 11 ++++++++++-
 packages/react/package.json                      |  2 +-
 packages/storybook/package.json                  |  6 +++---
 packages/theme-samples/package.json              |  4 ++--
 31 files changed, 130 insertions(+), 82 deletions(-)
 delete mode 100644 change/@fluentui-public-docsite-2021-02-03-15-40-08-theming-doc.json
 delete mode 100644 change/@fluentui-react-2021-02-03-12-45-40-m-10631.json
 delete mode 100644 change/@fluentui-react-examples-2021-02-03-15-40-08-theming-doc.json

diff --git a/apps/a11y-tests/package.json b/apps/a11y-tests/package.json
index a2aaabd2fd73de..102585d69e2f29 100644
--- a/apps/a11y-tests/package.json
+++ b/apps/a11y-tests/package.json
@@ -13,7 +13,7 @@
     "update-snapshots": "just-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "axe-core": "3.5.0",
     "axe-puppeteer": "^1.0.0",
     "axe-sarif-converter": "^2.0.1",
diff --git a/apps/codesandbox-react-template/package.json b/apps/codesandbox-react-template/package.json
index bbf4b192d7a3ef..31a960a2c3c1fc 100644
--- a/apps/codesandbox-react-template/package.json
+++ b/apps/codesandbox-react-template/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "tslib": "^1.10.0"
diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json
index fa408778090eeb..fc1f840dd0d4d4 100644
--- a/apps/perf-test/package.json
+++ b/apps/perf-test/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@fluentui/eslint-plugin": "^1.0.0-beta.1",
     "@fluentui/make-styles": "^0.5.0",
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/react-avatar": "^0.9.0",
     "@fluentui/react-button": "^1.0.0-beta.27",
     "@fluentui/react-tabs": "^1.0.0-beta.40",
diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json
index 8b931b04398915..fd0b12450ec5b7 100644
--- a/apps/public-docsite-resources/package.json
+++ b/apps/public-docsite-resources/package.json
@@ -43,17 +43,17 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
-    "@fluentui/react-examples": "^1.0.2",
+    "@fluentui/react": "^8.0.0-beta.49",
+    "@fluentui/react-examples": "^1.0.3",
     "@fluentui/react-internal": "^8.0.0-beta.42",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/api-docs": "^1.0.1",
-    "@fluentui/azure-themes": "^8.0.0-beta.46",
-    "@fluentui/react-docsite-components": "^8.0.0-beta.47",
+    "@fluentui/azure-themes": "^8.0.0-beta.47",
+    "@fluentui/react-docsite-components": "^8.0.0-beta.48",
     "@fluentui/font-icons-mdl2": "^8.0.0-beta.13",
     "@fluentui/set-version": "^8.0.0-beta.1",
-    "@fluentui/theme-samples": "^8.0.0-beta.46",
-    "@fluentui/react-monaco-editor": "^1.0.0-beta.46",
+    "@fluentui/theme-samples": "^8.0.0-beta.47",
+    "@fluentui/react-monaco-editor": "^1.0.0-beta.47",
     "@types/react": "16.9.42",
     "office-ui-fabric-core": "^11.0.0",
     "react": "16.8.6",
diff --git a/apps/public-docsite/CHANGELOG.json b/apps/public-docsite/CHANGELOG.json
index 621e0c8c40165a..a88d83513892a6 100644
--- a/apps/public-docsite/CHANGELOG.json
+++ b/apps/public-docsite/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/public-docsite",
   "entries": [
+    {
+      "date": "Thu, 04 Feb 2021 12:22:24 GMT",
+      "tag": "@fluentui/public-docsite_v1.0.3",
+      "version": "1.0.3",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Update content in Themes doc page.",
+            "author": "xgao@microsoft.com",
+            "commit": "a0fe6eeaa4b9cc12e5130dafa16b3c494a2802b6",
+            "package": "@fluentui/public-docsite"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 03 Feb 2021 22:54:59 GMT",
       "tag": "@fluentui/public-docsite_v1.0.1",
diff --git a/apps/public-docsite/CHANGELOG.md b/apps/public-docsite/CHANGELOG.md
index db3cbac91fedab..dbd66c1d881eee 100644
--- a/apps/public-docsite/CHANGELOG.md
+++ b/apps/public-docsite/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/public-docsite
 
-This log was last generated on Wed, 03 Feb 2021 22:54:59 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Feb 2021 12:22:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite_v1.0.3)
+
+Thu, 04 Feb 2021 12:22:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite_v1.0.1..@fluentui/public-docsite_v1.0.3)
+
+### Patches
+
+- Update content in Themes doc page. ([PR #15846](https://github.com/microsoft/fluentui/pull/15846) by xgao@microsoft.com)
+
 ## [1.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite_v1.0.1)
 
 Wed, 03 Feb 2021 22:54:59 GMT
diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json
index 267ba69320eec1..72abbef0bef5c4 100644
--- a/apps/public-docsite/package.json
+++ b/apps/public-docsite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/public-docsite",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "The official website for the Fluent UI project.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -41,24 +41,24 @@
     "@types/node": "^10.3.2",
     "@types/webpack-env": "1.16.0",
     "@fluentui/scripts": "^1.0.0",
-    "@fluentui/react-monaco-editor": "^1.0.0-beta.46",
+    "@fluentui/react-monaco-editor": "^1.0.0-beta.47",
     "react-app-polyfill": "~1.0.1",
     "write-file-webpack-plugin": "^4.1.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/react-internal": "^8.0.0-beta.42",
-    "@fluentui/react-examples": "^1.0.2",
+    "@fluentui/react-examples": "^1.0.3",
     "@fluentui/theme": "^2.0.0-beta.13",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/api-docs": "^1.0.1",
-    "@fluentui/react-docsite-components": "^8.0.0-beta.47",
-    "@fluentui/react-experiments": "^8.0.0-beta.51",
+    "@fluentui/react-docsite-components": "^8.0.0-beta.48",
+    "@fluentui/react-experiments": "^8.0.0-beta.52",
     "@fluentui/public-docsite-resources": "1.0.2",
     "@fluentui/react-file-type-icons": "^8.0.0-beta.15",
     "@fluentui/font-icons-mdl2": "^8.0.0-beta.13",
     "@fluentui/set-version": "^8.0.0-beta.1",
-    "@fluentui/theme-samples": "^8.0.0-beta.46",
+    "@fluentui/theme-samples": "^8.0.0-beta.47",
     "@fluentui/utilities": "^8.0.0-beta.10",
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
diff --git a/apps/server-rendered-app/package.json b/apps/server-rendered-app/package.json
index 4f600b756bbd50..287ceb540b28a3 100644
--- a/apps/server-rendered-app/package.json
+++ b/apps/server-rendered-app/package.json
@@ -30,7 +30,7 @@
     "@fluentui/font-icons-mdl2": "^8.0.0-beta.13",
     "@fluentui/merge-styles": "^8.0.0-beta.4",
     "@fluentui/set-version": "^8.0.0-beta.1",
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "react": "16.8.6",
     "react-app-polyfill": "~1.0.1",
     "react-dom": "16.8.6",
diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json
index b0bc2e762b7c2b..c97848ab289aad 100644
--- a/apps/ssr-tests/package.json
+++ b/apps/ssr-tests/package.json
@@ -13,7 +13,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/mocha": "^7.0.2",
     "@types/webpack-env": "1.16.0",
diff --git a/apps/test-bundles/package.json b/apps/test-bundles/package.json
index d0c777650ffe8a..efd86c32475aea 100644
--- a/apps/test-bundles/package.json
+++ b/apps/test-bundles/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "@fluentui/eslint-plugin": "^1.0.0-beta.1",
     "@fluentui/keyboard-key": "^0.2.13",
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/react-button": "^1.0.0-beta.27",
     "@fluentui/react-compose": "^1.0.0-beta.11",
     "@fluentui/scripts": "^1.0.0",
diff --git a/apps/theming-designer/package.json b/apps/theming-designer/package.json
index 2810ccd52ac211..3399e72291bd96 100644
--- a/apps/theming-designer/package.json
+++ b/apps/theming-designer/package.json
@@ -21,9 +21,9 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/merge-styles": "^8.0.0-beta.4",
-    "@fluentui/react-docsite-components": "^8.0.0-beta.47",
+    "@fluentui/react-docsite-components": "^8.0.0-beta.48",
     "@fluentui/foundation-legacy": "^8.0.0-beta.13",
     "@fluentui/scheme-utilities": "^8.0.0-beta.13",
     "@fluentui/set-version": "^8.0.0-beta.1",
diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json
index 39adfb643ebacf..b3c8dfe7229d81 100644
--- a/apps/todo-app/package.json
+++ b/apps/todo-app/package.json
@@ -20,7 +20,7 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/set-version": "^8.0.0-beta.1",
     "@microsoft/load-themed-styles": "^1.10.26",
     "es6-promise": "^4.1.0",
diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
index 021c9dda0d148f..9f7c5e66af8038 100644
--- a/apps/vr-tests/package.json
+++ b/apps/vr-tests/package.json
@@ -18,11 +18,11 @@
     "@fluentui/eslint-plugin": "^1.0.0-beta.1",
     "@fluentui/example-data": "^8.0.0-beta.3",
     "@fluentui/font-icons-mdl2": "^8.0.0-beta.13",
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/react-avatar": "^0.9.0",
     "@fluentui/react-button": "^1.0.0-beta.27",
-    "@fluentui/react-cards": "^1.0.0-beta.46",
-    "@fluentui/react-experiments": "^8.0.0-beta.51",
+    "@fluentui/react-cards": "^1.0.0-beta.47",
+    "@fluentui/react-experiments": "^8.0.0-beta.52",
     "@fluentui/react-hooks": "^8.0.0-beta.10",
     "@fluentui/react-icons-mdl2": "^1.0.0-beta.12",
     "@fluentui/react-tabs": "^1.0.0-beta.40",
diff --git a/change/@fluentui-public-docsite-2021-02-03-15-40-08-theming-doc.json b/change/@fluentui-public-docsite-2021-02-03-15-40-08-theming-doc.json
deleted file mode 100644
index 4a8a24f3b24068..00000000000000
--- a/change/@fluentui-public-docsite-2021-02-03-15-40-08-theming-doc.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Update content in Themes doc page.",
-  "packageName": "@fluentui/public-docsite",
-  "email": "xgao@microsoft.com",
-  "dependentChangeType": "patch",
-  "date": "2021-02-03T23:39:43.990Z"
-}
diff --git a/change/@fluentui-react-2021-02-03-12-45-40-m-10631.json b/change/@fluentui-react-2021-02-03-12-45-40-m-10631.json
deleted file mode 100644
index e1fba1da4c01c3..00000000000000
--- a/change/@fluentui-react-2021-02-03-12-45-40-m-10631.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "prerelease",
-  "comment": "Add additional prop support to IBreadcrumbItems",
-  "packageName": "@fluentui/react",
-  "email": "andredias@microsoft.com",
-  "dependentChangeType": "patch",
-  "date": "2021-02-03T11:45:40.245Z"
-}
diff --git a/change/@fluentui-react-examples-2021-02-03-15-40-08-theming-doc.json b/change/@fluentui-react-examples-2021-02-03-15-40-08-theming-doc.json
deleted file mode 100644
index b737ddaf4723e3..00000000000000
--- a/change/@fluentui-react-examples-2021-02-03-15-40-08-theming-doc.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Update content in Themes doc page.",
-  "packageName": "@fluentui/react-examples",
-  "email": "xgao@microsoft.com",
-  "dependentChangeType": "patch",
-  "date": "2021-02-03T23:40:08.905Z"
-}
diff --git a/packages/api-docs/package.json b/packages/api-docs/package.json
index a00ebd716164aa..a65120533b5b6e 100644
--- a/packages/api-docs/package.json
+++ b/packages/api-docs/package.json
@@ -36,9 +36,9 @@
   "dependencies": {
     "@fluentui/date-time-utilities": "^8.0.0-beta.2",
     "@fluentui/merge-styles": "^8.0.0-beta.4",
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/react-button": "^1.0.0-beta.27",
-    "@fluentui/react-cards": "^1.0.0-beta.46",
+    "@fluentui/react-cards": "^1.0.0-beta.47",
     "@fluentui/react-checkbox": "^1.0.0-beta.39",
     "@fluentui/react-date-time": "^8.0.0-beta.39",
     "@fluentui/react-focus": "^8.0.0-beta.18",
diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json
index c9583580bb4b12..9642c2843da86b 100644
--- a/packages/azure-themes/package.json
+++ b/packages/azure-themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/azure-themes",
-  "version": "8.0.0-beta.46",
+  "version": "8.0.0-beta.47",
   "description": "Azure themes for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,7 +28,7 @@
     "react": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/set-version": "^8.0.0-beta.1",
     "tslib": "^1.10.0"
   }
diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json
index 9a4ba3e9c9b6a4..48844b8960330d 100644
--- a/packages/react-cards/package.json
+++ b/packages/react-cards/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-cards",
-  "version": "1.0.0-beta.46",
+  "version": "1.0.0-beta.47",
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@fluentui/keyboard-key": "^0.2.13",
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/react-compose": "^1.0.0-beta.11",
     "@fluentui/react-theme-provider": "^1.0.0-beta.19",
     "@fluentui/theme": "^2.0.0-beta.13",
diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json
index 9e0521fed92ead..b4ea83bc19b3fe 100644
--- a/packages/react-charting/package.json
+++ b/packages/react-charting/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.0.0-beta.47",
+  "version": "5.0.0-beta.48",
   "description": "Experimental React charting components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^1.0.0-beta.1",
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
     "@types/jest": "~24.9.0",
@@ -67,7 +67,7 @@
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@types/react": ">=16.8.0 <17.0.0",
     "@types/react-dom": ">=16.8.0 <17.0.0",
     "react": ">=16.8.0 <17.0.0",
diff --git a/packages/react-docsite-components/package.json b/packages/react-docsite-components/package.json
index cac05fc53537bb..bfae762e243fa2 100644
--- a/packages/react-docsite-components/package.json
+++ b/packages/react-docsite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-docsite-components",
-  "version": "8.0.0-beta.47",
+  "version": "8.0.0-beta.48",
   "description": "Fluent UI React components for building documentation sites.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -41,14 +41,14 @@
     "react-dom": ">=16.8.0 <17.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/react-internal": "^8.0.0-beta.42",
     "@fluentui/theme": "^2.0.0-beta.13",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/example-data": "^8.0.0-beta.3",
     "@fluentui/react-hooks": "^8.0.0-beta.10",
     "@fluentui/set-version": "^8.0.0-beta.1",
-    "@fluentui/react-monaco-editor": "^1.0.0-beta.46",
+    "@fluentui/react-monaco-editor": "^1.0.0-beta.47",
     "color-check": "0.0.2",
     "markdown-to-jsx": "6.11.4",
     "office-ui-fabric-core": "^11.0.0",
diff --git a/packages/react-examples/CHANGELOG.json b/packages/react-examples/CHANGELOG.json
index 3b0c9157897134..febf71d49cb524 100644
--- a/packages/react-examples/CHANGELOG.json
+++ b/packages/react-examples/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-examples",
   "entries": [
+    {
+      "date": "Thu, 04 Feb 2021 12:22:24 GMT",
+      "tag": "@fluentui/react-examples_v1.0.3",
+      "version": "1.0.3",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Update content in Themes doc page.",
+            "author": "xgao@microsoft.com",
+            "commit": "a0fe6eeaa4b9cc12e5130dafa16b3c494a2802b6",
+            "package": "@fluentui/react-examples"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 03 Feb 2021 22:54:59 GMT",
       "tag": "@fluentui/react-examples_v1.0.1",
diff --git a/packages/react-examples/CHANGELOG.md b/packages/react-examples/CHANGELOG.md
index 49a47871be6352..f1245591f0c1fa 100644
--- a/packages/react-examples/CHANGELOG.md
+++ b/packages/react-examples/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-examples
 
-This log was last generated on Wed, 03 Feb 2021 22:54:59 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Feb 2021 12:22:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-examples_v1.0.3)
+
+Thu, 04 Feb 2021 12:22:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-examples_v1.0.1..@fluentui/react-examples_v1.0.3)
+
+### Patches
+
+- Update content in Themes doc page. ([PR #15846](https://github.com/microsoft/fluentui/pull/15846) by xgao@microsoft.com)
+
 ## [1.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-examples_v1.0.1)
 
 Wed, 03 Feb 2021 22:54:59 GMT
diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json
index 54629f9db24916..609c1500233c60 100644
--- a/packages/react-examples/package.json
+++ b/packages/react-examples/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-examples",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Example code and docs for Fluent UI packages.",
   "repository": {
     "type": "git",
@@ -51,7 +51,7 @@
     "storybook-addon-performance": "^0.9.0"
   },
   "dependencies": {
-    "@fluentui/azure-themes": "^8.0.0-beta.46",
+    "@fluentui/azure-themes": "^8.0.0-beta.47",
     "@fluentui/date-time-utilities": "^8.0.0-beta.2",
     "@fluentui/example-data": "^8.0.0-beta.3",
     "@fluentui/react-file-type-icons": "^8.0.0-beta.15",
@@ -60,15 +60,15 @@
     "@fluentui/ie11-polyfills": "^0.1.4",
     "@fluentui/merge-styles": "^8.0.0-beta.4",
     "@fluentui/react-provider": "^0.1.1",
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/react-avatar": "^0.9.0",
     "@fluentui/react-button": "^1.0.0-beta.27",
-    "@fluentui/react-cards": "^1.0.0-beta.46",
-    "@fluentui/react-charting": "^5.0.0-beta.47",
+    "@fluentui/react-cards": "^1.0.0-beta.47",
+    "@fluentui/react-charting": "^5.0.0-beta.48",
     "@fluentui/react-checkbox": "^1.0.0-beta.39",
     "@fluentui/react-date-time": "^8.0.0-beta.39",
-    "@fluentui/react-docsite-components": "^8.0.0-beta.47",
-    "@fluentui/react-experiments": "^8.0.0-beta.51",
+    "@fluentui/react-docsite-components": "^8.0.0-beta.48",
+    "@fluentui/react-experiments": "^8.0.0-beta.52",
     "@fluentui/react-flex": "^0.2.3",
     "@fluentui/react-focus": "^8.0.0-beta.18",
     "@fluentui/react-hooks": "^8.0.0-beta.10",
@@ -86,7 +86,7 @@
     "@fluentui/react-toggle": "^1.0.0-beta.39",
     "@fluentui/scheme-utilities": "^8.0.0-beta.13",
     "@fluentui/style-utilities": "^8.0.0-beta.13",
-    "@fluentui/theme-samples": "^8.0.0-beta.46",
+    "@fluentui/theme-samples": "^8.0.0-beta.47",
     "@fluentui/theme": "^2.0.0-beta.13",
     "@fluentui/utilities": "^8.0.0-beta.10",
     "@microsoft/load-themed-styles": "^1.10.26",
diff --git a/packages/react-experiments/package.json b/packages/react-experiments/package.json
index a4ce7239d854be..a731703b1f92e1 100644
--- a/packages/react-experiments/package.json
+++ b/packages/react-experiments/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-experiments",
-  "version": "8.0.0-beta.51",
+  "version": "8.0.0-beta.52",
   "description": "Experimental React components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -50,7 +50,7 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/react-internal": "^8.0.0-beta.42",
     "@fluentui/theme": "^2.0.0-beta.13",
     "@microsoft/load-themed-styles": "^1.10.26",
diff --git a/packages/react-monaco-editor/package.json b/packages/react-monaco-editor/package.json
index f8b1c9fe9d542c..cc82f60d9c69e5 100644
--- a/packages/react-monaco-editor/package.json
+++ b/packages/react-monaco-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-monaco-editor",
-  "version": "1.0.0-beta.46",
+  "version": "1.0.0-beta.47",
   "description": "Live tsx editor for Fabric website.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,7 +37,7 @@
     "webpack-bundle-analyzer": "^4.4.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/example-data": "^8.0.0-beta.3",
     "@fluentui/monaco-editor": "^1.0.0-beta.2",
diff --git a/packages/react/CHANGELOG.json b/packages/react/CHANGELOG.json
index a226e7219c0f3f..335eaa0020e3c5 100644
--- a/packages/react/CHANGELOG.json
+++ b/packages/react/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react",
   "entries": [
+    {
+      "date": "Thu, 04 Feb 2021 12:22:24 GMT",
+      "tag": "@fluentui/react_v8.0.0-beta.49",
+      "version": "8.0.0-beta.49",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Add additional prop support to IBreadcrumbItems",
+            "author": "andredias@microsoft.com",
+            "commit": "34f46ff4958fb82ad80071389c8b899803826e45",
+            "package": "@fluentui/react"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 03 Feb 2021 05:51:40 GMT",
       "tag": "@fluentui/react_v8.0.0-beta.48",
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 4066d2ae3f3a3d..e80b48a084353c 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react
 
-This log was last generated on Wed, 03 Feb 2021 05:51:40 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Feb 2021 12:22:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.0.0-beta.49](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.0.0-beta.49)
+
+Thu, 04 Feb 2021 12:22:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react_v8.0.0-beta.48..@fluentui/react_v8.0.0-beta.49)
+
+### Changes
+
+- Add additional prop support to IBreadcrumbItems ([PR #16765](https://github.com/microsoft/fluentui/pull/16765) by andredias@microsoft.com)
+
 ## [8.0.0-beta.48](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.0.0-beta.48)
 
 Wed, 03 Feb 2021 05:51:40 GMT 
diff --git a/packages/react/package.json b/packages/react/package.json
index 2a7779f5e04188..ba16d6dbd9358b 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react",
-  "version": "8.0.0-beta.48",
+  "version": "8.0.0-beta.49",
   "description": "Reusable React components for building web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 56d93b9385ddc7..807c122d3c72a6 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -24,13 +24,13 @@
     "react": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/react-theme-provider": "^1.0.0-beta.19",
     "@fluentui/theme": "^2.0.0-beta.13",
     "@storybook/addon-knobs": "^5.3.8",
     "@storybook/addons": "^5.3.8",
-    "@fluentui/azure-themes": "^8.0.0-beta.46",
-    "@fluentui/theme-samples": "^8.0.0-beta.46",
+    "@fluentui/azure-themes": "^8.0.0-beta.47",
+    "@fluentui/theme-samples": "^8.0.0-beta.47",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/theme-samples/package.json b/packages/theme-samples/package.json
index c5ee4be7ac2eb9..0f9912263ede39 100644
--- a/packages/theme-samples/package.json
+++ b/packages/theme-samples/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/theme-samples",
-  "version": "8.0.0-beta.46",
+  "version": "8.0.0-beta.47",
   "description": "Sample themes for use with Fabric components.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -26,7 +26,7 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react": "^8.0.0-beta.48",
+    "@fluentui/react": "^8.0.0-beta.49",
     "@fluentui/set-version": "^8.0.0-beta.1",
     "@fluentui/scheme-utilities": "^8.0.0-beta.13",
     "tslib": "^1.10.0"

From d27a96caa5a5cabb9ad2ed8d3bf4a466ad383d5b Mon Sep 17 00:00:00 2001
From: ling1726 <lingfangao@hotmail.com>
Date: Thu, 4 Feb 2021 18:17:59 +0000
Subject: [PATCH 15/17] Do not throw makestyles in tests (#16817)

* Do not throw makestyles in tests

* Change files

* Update packages/react-make-styles/src/makeStyles.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
---
 ...e-styles-2021-02-04-16-26-17-fix-make-styles-test.json | 8 ++++++++
 packages/react-make-styles/src/makeStyles.ts              | 4 ++++
 2 files changed, 12 insertions(+)
 create mode 100644 change/@fluentui-react-make-styles-2021-02-04-16-26-17-fix-make-styles-test.json

diff --git a/change/@fluentui-react-make-styles-2021-02-04-16-26-17-fix-make-styles-test.json b/change/@fluentui-react-make-styles-2021-02-04-16-26-17-fix-make-styles-test.json
new file mode 100644
index 00000000000000..79be4468a40e76
--- /dev/null
+++ b/change/@fluentui-react-make-styles-2021-02-04-16-26-17-fix-make-styles-test.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Do not throw makestyles in tests",
+  "packageName": "@fluentui/react-make-styles",
+  "email": "lingfan.gao@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-04T16:26:17.255Z"
+}
diff --git a/packages/react-make-styles/src/makeStyles.ts b/packages/react-make-styles/src/makeStyles.ts
index a4632fffacd5c7..05273169cc74b0 100644
--- a/packages/react-make-styles/src/makeStyles.ts
+++ b/packages/react-make-styles/src/makeStyles.ts
@@ -19,6 +19,10 @@ function useRenderer(document: Document | undefined): MakeStylesRenderer {
 export function makeStyles<Selectors>(definitions: MakeStylesDefinition<Selectors, Theme>[]) {
   const getStyles = vanillaMakeStyles(definitions);
 
+  if (process.env.NODE_ENV === 'test') {
+    return () => '';
+  }
+
   return function useClasses(selectors: Selectors) {
     const { dir, document } = useFluent();
     const theme = useTheme();

From 5ca85bfce84919532a9d6c9ba21469da64952ae3 Mon Sep 17 00:00:00 2001
From: Kham Udom <khamu@microsoft.com>
Date: Thu, 4 Feb 2021 11:26:16 -0800
Subject: [PATCH 16/17] add neutral-contrast-fill recipe

---
 packages/web-components/docs/api-report.md    | 51 +++++++++++++++
 packages/web-components/src/color/index.ts    |  7 ++
 .../src/color/neutral-contrast-fill.ts        | 56 ++++++++++++++++
 .../src/design-system-provider/index.ts       | 64 +++++++++++++++++++
 .../src/fluent-design-system.ts               | 26 ++++++++
 .../web-components/src/styles/behaviors.ts    | 49 +++++++++++++-
 6 files changed, 252 insertions(+), 1 deletion(-)
 create mode 100644 packages/web-components/src/color/neutral-contrast-fill.ts

diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index f5e36c37bdbf4b..5ebf7c5ced4e5e 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -13,6 +13,7 @@ import { Breadcrumb } from '@microsoft/fast-foundation';
 import { BreadcrumbItem } from '@microsoft/fast-foundation';
 import { Button } from '@microsoft/fast-foundation';
 import { Checkbox } from '@microsoft/fast-foundation';
+import { ColorRGBA64 } from '@microsoft/fast-colors';
 import { CSSCustomPropertyBehavior } from '@microsoft/fast-foundation';
 import { DesignSystemProvider } from '@microsoft/fast-foundation';
 import { Dialog } from '@microsoft/fast-foundation';
@@ -284,6 +285,14 @@ export interface DesignSystem {
     disabledOpacity: number;
     elevatedCornerRadius?: number;
     focusOutlineWidth: number;
+    // (undocumented)
+    neutralContrastFillActiveDelta: number;
+    // (undocumented)
+    neutralContrastFillFocusDelta: number;
+    // (undocumented)
+    neutralContrastFillHoverDelta: number;
+    // (undocumented)
+    neutralContrastFillRestDelta: number;
     neutralDividerRestDelta: number;
     // (undocumented)
     neutralFillActiveDelta: number;
@@ -502,6 +511,10 @@ export class FluentDesignSystemProvider extends DesignSystemProvider implements
     elevatedCornerRadius: number;
     // (undocumented)
     focusOutlineWidth: number;
+    neutralContrastFillActiveDelta: number;
+    neutralContrastFillFocusDelta: number;
+    neutralContrastFillHoverDelta: number;
+    neutralContrastFillRestDelta: number;
     // (undocumented)
     neutralDividerRestDelta: number;
     // (undocumented)
@@ -732,6 +745,41 @@ export const MenuItemStyles: import("@microsoft/fast-element").ElementStyles;
 // @public
 export const MenuStyles: import("@microsoft/fast-element").ElementStyles;
 
+// Warning: (ae-internal-missing-underscore) The name "neutralContrastFill" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const neutralContrastFill: SwatchFamilyResolver;
+
+// Warning: (ae-internal-missing-underscore) The name "neutralContrastFillActive" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const neutralContrastFillActive: SwatchRecipe;
+
+// @public
+export const neutralContrastFillActiveBehavior: CSSCustomPropertyBehavior;
+
+// @public
+export const neutralContrastFillFocusBehavior: CSSCustomPropertyBehavior;
+
+// Warning: (ae-internal-missing-underscore) The name "neutralContrastFillHover" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const neutralContrastFillHover: SwatchRecipe;
+
+// @public
+export const neutralContrastFillHoverBehavior: CSSCustomPropertyBehavior;
+
+// Warning: (ae-internal-missing-underscore) The name "neutralContrastFillRest" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const neutralContrastFillRest: SwatchRecipe;
+
+// @public
+export const neutralContrastFillRestBehavior: CSSCustomPropertyBehavior;
+
+// @public
+export const neutralContrastForegroundRestBehavior: CSSCustomPropertyBehavior;
+
 // Warning: (ae-internal-missing-underscore) The name "neutralDividerRest" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
@@ -1126,6 +1174,9 @@ export enum PaletteType {
     neutral = "neutral"
 }
 
+// @public
+export function parseColorString(color: string): ColorRGBA64;
+
 // @public
 export const ProgressRingStyles: import("@microsoft/fast-element").ElementStyles;
 
diff --git a/packages/web-components/src/color/index.ts b/packages/web-components/src/color/index.ts
index d9eac0e6cd8ca5..738c3f0e26d106 100644
--- a/packages/web-components/src/color/index.ts
+++ b/packages/web-components/src/color/index.ts
@@ -66,6 +66,13 @@ export {
   accentFillLargeSelected,
 } from './accent-fill';
 
+export {
+  neutralContrastFill,
+  neutralContrastFillRest,
+  neutralContrastFillHover,
+  neutralContrastFillActive,
+} from './neutral-contrast-fill';
+
 export { neutralFillCard } from './neutral-fill-card';
 
 /**
diff --git a/packages/web-components/src/color/neutral-contrast-fill.ts b/packages/web-components/src/color/neutral-contrast-fill.ts
new file mode 100644
index 00000000000000..eab977e96a3b75
--- /dev/null
+++ b/packages/web-components/src/color/neutral-contrast-fill.ts
@@ -0,0 +1,56 @@
+import {
+  neutralContrastFillActiveDelta,
+  neutralContrastFillFocusDelta,
+  neutralContrastFillHoverDelta,
+  neutralPalette,
+} from '../fluent-design-system';
+import {
+  colorRecipeFactory,
+  SwatchFamilyResolver,
+  swatchFamilyToSwatchRecipeFactory,
+  SwatchFamilyType,
+  SwatchRecipe,
+} from './common';
+import { accessibleAlgorithm } from './accessible-recipe';
+
+/**
+ * @internal
+ */
+export const neutralContrastFill: SwatchFamilyResolver = colorRecipeFactory(
+  accessibleAlgorithm(
+    neutralPalette,
+    14,
+    0,
+    neutralContrastFillHoverDelta,
+    neutralContrastFillActiveDelta,
+    neutralContrastFillFocusDelta,
+  ),
+);
+/**
+ * @internal
+ */
+export const neutralContrastFillRest: SwatchRecipe = swatchFamilyToSwatchRecipeFactory(
+  SwatchFamilyType.rest,
+  neutralContrastFill,
+);
+/**
+ * @internal
+ */
+export const neutralContrastFillHover: SwatchRecipe = swatchFamilyToSwatchRecipeFactory(
+  SwatchFamilyType.hover,
+  neutralContrastFill,
+);
+/**
+ * @internal
+ */
+export const neutralContrastFillActive: SwatchRecipe = swatchFamilyToSwatchRecipeFactory(
+  SwatchFamilyType.active,
+  neutralContrastFill,
+);
+/**
+ * @internal
+ */
+export const neutralContrastFillFocus: SwatchRecipe = swatchFamilyToSwatchRecipeFactory(
+  SwatchFamilyType.focus,
+  neutralContrastFill,
+);
diff --git a/packages/web-components/src/design-system-provider/index.ts b/packages/web-components/src/design-system-provider/index.ts
index 813025b33e8a59..cc6ffa42f58f71 100644
--- a/packages/web-components/src/design-system-provider/index.ts
+++ b/packages/web-components/src/design-system-provider/index.ts
@@ -569,6 +569,70 @@ export class FluentDesignSystemProvider extends DesignSystemProvider
     default: DesignSystemDefaults.neutralOutlineFocusDelta,
   })
   public neutralOutlineFocusDelta: number;
+
+  /**
+   * The distance from the resolved neutral contrast fill color for the rest state of the neutral-contrast-fill recipe. See {@link @microsoft/fast-components#neutralContrastFillRestBehavior} for usage in CSS.
+   *
+   * @remarks
+   * HTML attribute: neutral-contrast-fill-rest-delta
+   *
+   * CSS custom property: N/A
+   */
+  @designSystemProperty({
+    attribute: 'neutral-contrast-fill-rest-delta',
+    converter: nullableNumberConverter,
+    cssCustomProperty: false,
+    default: DesignSystemDefaults.neutralContrastFillRestDelta,
+  })
+  public neutralContrastFillRestDelta: number;
+
+  /**
+   * The distance from the resolved neutral contrast fill color for the rest state of the neutral-contrast-fillrecipe. See {@link @microsoft/fast-components#neutralContrastFillHoverBehavior} for usage in CSS.
+   *
+   * @remarks
+   * HTML attribute: neutral-contrast-fill-hover-delta
+   *
+   * CSS custom property: N/A
+   */
+  @designSystemProperty({
+    attribute: 'neutral-contrast-fill-hover-delta',
+    converter: nullableNumberConverter,
+    cssCustomProperty: false,
+    default: DesignSystemDefaults.neutralContrastFillHoverDelta,
+  })
+  public neutralContrastFillHoverDelta: number;
+
+  /**
+   * The distance from the resolved neutral contrast fill color for the rest state of the neutral-contrast-fill recipe. See {@link @microsoft/fast-components#neutralContrastFillActiveBehavior} for usage in CSS.
+   *
+   * @remarks
+   * HTML attribute: neutral-contrast-fill-active-delta
+   *
+   * CSS custom property: N/A
+   */
+  @designSystemProperty({
+    attribute: 'neutral-contrast-fill-active-delta',
+    converter: nullableNumberConverter,
+    cssCustomProperty: false,
+    default: DesignSystemDefaults.neutralContrastFillActiveDelta,
+  })
+  public neutralContrastFillActiveDelta: number;
+
+  /**
+   * The distance from the resolved neutral contrast fill color for the rest state of the neutral-contrast-fill recipe. See {@link @microsoft/fast-components#neutralContrastFillFocusBehavior} for usage in CSS.
+   *
+   * @remarks
+   * HTML attribute: neutral-contrast-fill-focus-delta
+   *
+   * CSS custom property: N/A
+   */
+  @designSystemProperty({
+    attribute: 'neutral-contrast-fill-focus-delta',
+    converter: nullableNumberConverter,
+    cssCustomProperty: false,
+    default: DesignSystemDefaults.neutralContrastFillFocusDelta,
+  })
+  public neutralContrastFillFocusDelta: number;
 }
 
 /**
diff --git a/packages/web-components/src/fluent-design-system.ts b/packages/web-components/src/fluent-design-system.ts
index d411356321d7c3..bf60c71433b7b7 100644
--- a/packages/web-components/src/fluent-design-system.ts
+++ b/packages/web-components/src/fluent-design-system.ts
@@ -190,6 +190,14 @@ export interface DesignSystem {
   neutralOutlineHoverDelta: number;
   neutralOutlineActiveDelta: number;
   neutralOutlineFocusDelta: number;
+
+  /*
+   * Color swatch deltas for the neutral-contrast-fill recipe.
+   */
+  neutralContrastFillRestDelta: number;
+  neutralContrastFillHoverDelta: number;
+  neutralContrastFillActiveDelta: number;
+  neutralContrastFillFocusDelta: number;
 }
 
 /**
@@ -280,6 +288,11 @@ export const DesignSystemDefaults: DesignSystem = {
   neutralOutlineHoverDelta: 40,
   neutralOutlineActiveDelta: 16,
   neutralOutlineFocusDelta: 25,
+
+  neutralContrastFillRestDelta: 0,
+  neutralContrastFillHoverDelta: -3,
+  neutralContrastFillActiveDelta: 7,
+  neutralContrastFillFocusDelta: 0,
 };
 
 /**
@@ -451,3 +464,16 @@ export const neutralOutlineActiveDelta: DesignSystemResolver<number> = getDesign
 );
 
 export const neutralOutlineFocusDelta: DesignSystemResolver<number> = getDesignSystemValue('neutralOutlineFocusDelta');
+
+export const neutralContrastFillRestDelta: DesignSystemResolver<number> = getDesignSystemValue(
+  'neutralContrastFillRestDelta',
+);
+export const neutralContrastFillHoverDelta: DesignSystemResolver<number> = getDesignSystemValue(
+  'neutralContrastFillHoverDelta',
+);
+export const neutralContrastFillActiveDelta: DesignSystemResolver<number> = getDesignSystemValue(
+  'neutralContrastFillActiveDelta',
+);
+export const neutralContrastFillFocusDelta: DesignSystemResolver<number> = getDesignSystemValue(
+  'neutralContrastFillFocusDelta',
+);
diff --git a/packages/web-components/src/styles/behaviors.ts b/packages/web-components/src/styles/behaviors.ts
index 0bc56e7d19c0a6..043f1a26af294e 100644
--- a/packages/web-components/src/styles/behaviors.ts
+++ b/packages/web-components/src/styles/behaviors.ts
@@ -7,6 +7,8 @@ import {
   accentForegroundCut,
   accentForegroundLarge,
   neutralDividerRest,
+  neutralContrastFill,
+  neutralContrastFillRest,
   neutralFill,
   neutralFillCard,
   neutralFillInput,
@@ -17,6 +19,7 @@ import {
   neutralForeground,
   neutralForegroundHint,
   neutralForegroundHintLarge,
+  neutralForegroundRest,
   neutralForegroundToggle,
   neutralForegroundToggleLarge,
   neutralLayerCard,
@@ -581,7 +584,51 @@ export const neutralFocusInnerAccentBehavior: CSSCustomPropertyBehavior = cssCus
   neutralFocusInnerAccent(accentBaseColor),
   FluentDesignSystemProvider.findProvider,
 );
-
+/**
+ * Behavior to resolve and make available the neutral-contrast-foreground-rest CSS custom property.
+ * @public
+ */
+export const neutralContrastForegroundRestBehavior = cssCustomPropertyBehaviorFactory(
+  'neutral-contrast-foreground-rest',
+  x => neutralForegroundRest(neutralContrastFillRest)(x),
+  FluentDesignSystemProvider.findProvider,
+);
+/**
+ * Behavior to resolve and make available the neutral-contrast-fill-rest CSS custom property.
+ * @public
+ */
+export const neutralContrastFillRestBehavior = cssCustomPropertyBehaviorFactory(
+  'neutral-contrast-fill-rest',
+  x => neutralContrastFill(x).rest,
+  FluentDesignSystemProvider.findProvider,
+);
+/**
+ * Behavior to resolve and make available the neutral-contrast-fill-hover CSS custom property.
+ * @public
+ */
+export const neutralContrastFillHoverBehavior = cssCustomPropertyBehaviorFactory(
+  'neutral-contrast-fill-hover',
+  x => neutralContrastFill(x).hover,
+  FluentDesignSystemProvider.findProvider,
+);
+/**
+ * Behavior to resolve and make available the neutral-contrast-fill-active CSS custom property.
+ * @public
+ */
+export const neutralContrastFillActiveBehavior = cssCustomPropertyBehaviorFactory(
+  'neutral-contrast-fill-active',
+  x => neutralContrastFill(x).active,
+  FluentDesignSystemProvider.findProvider,
+);
+/**
+ * Behavior to resolve and make available the neutral-contrast-fill-focus CSS custom property.
+ * @public
+ */
+export const neutralContrastFillFocusBehavior = cssCustomPropertyBehaviorFactory(
+  'neutral-contrast-fill-focus',
+  x => neutralContrastFill(x).focus,
+  FluentDesignSystemProvider.findProvider,
+);
 /**
  * Behavior to resolve and make available the inline-start CSS custom property.
  *

From 8fad46b442b05131bbf6d19a1adb6bb9438a2763 Mon Sep 17 00:00:00 2001
From: Kham Udom <khamu@microsoft.com>
Date: Thu, 4 Feb 2021 11:30:33 -0800
Subject: [PATCH 17/17] Change files

---
 ...0-33-users-khamu-add-neutral-contrast-fill-recipe.json | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 change/@fluentui-web-components-2021-02-04-11-30-33-users-khamu-add-neutral-contrast-fill-recipe.json

diff --git a/change/@fluentui-web-components-2021-02-04-11-30-33-users-khamu-add-neutral-contrast-fill-recipe.json b/change/@fluentui-web-components-2021-02-04-11-30-33-users-khamu-add-neutral-contrast-fill-recipe.json
new file mode 100644
index 00000000000000..50fe1d0703311e
--- /dev/null
+++ b/change/@fluentui-web-components-2021-02-04-11-30-33-users-khamu-add-neutral-contrast-fill-recipe.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "add neutral-contrast-fill recipe",
+  "packageName": "@fluentui/web-components",
+  "email": "khamu@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-04T19:30:33.719Z"
+}