From 68fffc2aadfbcbf09fbcac09b51926af124f6f2e Mon Sep 17 00:00:00 2001
From: "REDMOND\\jspurlin" <jspurlin@microsoft.com>
Date: Wed, 4 Sep 2019 18:16:50 -0700
Subject: [PATCH 1/6] Make callouts aware of the WindowSegments

---
 .../Callout/CalloutContent.base.tsx           | 67 ++++++++++++++++---
 packages/utilities/etc/utilities.api.md       |  7 ++
 packages/utilities/src/dom.ts                 |  1 +
 .../utilities/src/dom/getRenderedContainer.ts | 37 ++++++++++
 4 files changed, 103 insertions(+), 9 deletions(-)
 create mode 100644 packages/utilities/src/dom/getRenderedContainer.ts

diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
index 0b7eb882741b4..8c94ba04cd45c 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
@@ -14,7 +14,8 @@ import {
   getNativeProps,
   getWindow,
   on,
-  shallowCompare
+  shallowCompare,
+  getRenderedContainer
 } from '../../Utilities';
 import {
   positionCallout,
@@ -28,6 +29,10 @@ import { Popup } from '../../Popup';
 import { classNamesFunction } from '../../Utilities';
 import { AnimationClassNames } from '../../Styling';
 
+interface IWindow extends Window {
+  getBoundingWindowRects?: Function;
+}
+
 const ANIMATIONS: { [key: number]: string | undefined } = {
   [RectangleEdge.top]: AnimationClassNames.slideUpIn10,
   [RectangleEdge.bottom]: AnimationClassNames.slideDownIn10,
@@ -71,8 +76,11 @@ export class CalloutContentBase extends React.Component<ICalloutProps, ICalloutS
   private _didSetInitialFocus: boolean;
   private _hostElement = React.createRef<HTMLDivElement>();
   private _calloutElement = React.createRef<HTMLDivElement>();
-  private _targetWindow: Window;
+  private _targetWindow: IWindow;
+  private _targetWindowSegmentRect?: DOMRect | ClientRect;
   private _bounds: IRectangle | undefined;
+  private _targetWindowSegmentBounds?: IRectangle | undefined;
+  private _windowRects?: DOMRect[] | ClientRect[];
   private _positionAttempts: number;
   private _target: Element | MouseEvent | IPoint | null;
   private _setHeightOffsetTimer: number;
@@ -153,6 +161,9 @@ export class CalloutContentBase extends React.Component<ICalloutProps, ICalloutS
     // Ensure positioning is recalculated when we are about to show a persisted menu.
     if (this._didPositionPropsChange(newProps, this.props)) {
       this._maxHeight = undefined;
+      this._windowRects = undefined;
+      this._targetWindowSegmentRect = undefined;
+      this._targetWindowSegmentBounds = undefined;
       // Target might have been updated while hidden.
       this._setTargetWindowAndElement(newTarget);
       this.setState({
@@ -342,6 +353,12 @@ export class CalloutContentBase extends React.Component<ICalloutProps, ICalloutS
     }, 0);
   }
 
+  private _updateWindowRects = () => {
+    if (this._targetWindow.getBoundingWindowRects) {
+      this._windowRects = this._targetWindow.getBoundingWindowRects();
+    }
+  };
+
   private _removeListeners() {
     this._disposables.forEach((dispose: () => void) => dispose());
     this._disposables = [];
@@ -408,20 +425,46 @@ export class CalloutContentBase extends React.Component<ICalloutProps, ICalloutS
   }
 
   private _getBounds(): IRectangle {
-    if (!this._bounds) {
+    const useTargetWindowSegment = this._targetWindowSegmentRect && this._windowRects && this._windowRects.length > 1;
+
+    // If we have not have yet taken the bounds or have a targetWindowSegment
+    // and the bounds have not yet taken it into account, update the bounds
+    if (!this._bounds || (useTargetWindowSegment && this._targetWindowSegmentBounds !== this._bounds)) {
       let currentBounds = this.props.bounds;
 
       if (!currentBounds) {
+        let top: number;
+        let left: number;
+        let width: number;
+        let height: number;
+
+        if (useTargetWindowSegment) {
+          top = this._targetWindowSegmentRect!.top;
+          left = this._targetWindowSegmentRect!.left;
+          width = left + this._targetWindowSegmentRect!.width;
+          height = top + this._targetWindowSegmentRect!.height;
+        } else {
+          top = 0;
+          left = 0;
+          width = this._targetWindow.innerWidth;
+          height = this._targetWindow.innerHeight;
+        }
+
         currentBounds = {
-          top: 0 + this.props.minPagePadding!,
-          left: 0 + this.props.minPagePadding!,
-          right: this._targetWindow.innerWidth - this.props.minPagePadding!,
-          bottom: this._targetWindow.innerHeight - this.props.minPagePadding!,
-          width: this._targetWindow.innerWidth - this.props.minPagePadding! * 2,
-          height: this._targetWindow.innerHeight - this.props.minPagePadding! * 2
+          top: top + this.props.minPagePadding!,
+          left: left + this.props.minPagePadding!,
+          right: width - this.props.minPagePadding!,
+          bottom: height - this.props.minPagePadding!,
+          width: width - this.props.minPagePadding! * 2,
+          height: height - this.props.minPagePadding! * 2
         };
       }
       this._bounds = currentBounds;
+
+      // Remember the bounds so that we only measure once
+      if (useTargetWindowSegment) {
+        this._targetWindowSegmentBounds = this._bounds;
+      }
     }
     return this._bounds;
   }
@@ -497,6 +540,12 @@ export class CalloutContentBase extends React.Component<ICalloutProps, ICalloutS
         this._targetWindow = getWindow()!;
         this._target = target as IPoint;
       }
+
+      // Take note of the windowRects if we have not already
+      if (!this._windowRects || this._windowRects.length <= 0) {
+        this._updateWindowRects();
+        this._targetWindowSegmentRect = getRenderedContainer(this._target, this._windowRects);
+      }
     } else {
       this._targetWindow = getWindow()!;
     }
diff --git a/packages/utilities/etc/utilities.api.md b/packages/utilities/etc/utilities.api.md
index 18db05bfefce0..0198f4bf16faf 100644
--- a/packages/utilities/etc/utilities.api.md
+++ b/packages/utilities/etc/utilities.api.md
@@ -4,11 +4,13 @@
 
 ```ts
 
+import * as CSS from 'csstype';
 import { IProcessedStyleSet } from '@uifabric/merge-styles';
 import { IStyleFunction } from '@uifabric/merge-styles';
 import { IStyleFunctionOrObject } from '@uifabric/merge-styles';
 import { IStyleSet } from '@uifabric/merge-styles';
 import { Omit } from '@uifabric/merge-styles';
+import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
 // @public
@@ -328,6 +330,11 @@ export function getPreviousElement(rootElement: HTMLElement, currentElement: HTM
 // @public
 export function getRect(element: HTMLElement | Window | null): IRectangle | undefined;
 
+// Warning: (ae-forgotten-export) The symbol "React" needs to be exported by the entry point index.d.ts
+// 
+// @public (undocumented)
+export function getRenderedContainer(content?: Element | string | MouseEvent | IPoint | null | React_2.RefObject<Element>, possibleContainers?: DOMRect[] | ClientRect[]): DOMRect | ClientRect | undefined;
+
 // @public
 export function getResourceUrl(url: string): string;
 
diff --git a/packages/utilities/src/dom.ts b/packages/utilities/src/dom.ts
index 2f71e50367b86..5ea975c02cd35 100644
--- a/packages/utilities/src/dom.ts
+++ b/packages/utilities/src/dom.ts
@@ -6,6 +6,7 @@ export * from './dom/getChildren';
 export * from './dom/getDocument';
 export * from './dom/getParent';
 export * from './dom/getRect';
+export * from './dom/getRenderedContainer';
 export * from './dom/getVirtualParent';
 export * from './dom/getWindow';
 export * from './dom/isVirtualElement';
diff --git a/packages/utilities/src/dom/getRenderedContainer.ts b/packages/utilities/src/dom/getRenderedContainer.ts
new file mode 100644
index 0000000000000..b350dded76614
--- /dev/null
+++ b/packages/utilities/src/dom/getRenderedContainer.ts
@@ -0,0 +1,37 @@
+import { IPoint } from '../IPoint';
+import { Rectangle } from '../Rectangle';
+
+export function getRenderedContainer(
+  content?: Element | string | MouseEvent | IPoint | null | React.RefObject<Element>,
+  possibleContainers?: DOMRect[] | ClientRect[]
+): DOMRect | ClientRect | undefined {
+  if (!content || !possibleContainers || possibleContainers.length <= 0) {
+    return undefined;
+  }
+
+  let contentRect: DOMRect | ClientRect | Rectangle;
+
+  if ((content as MouseEvent).preventDefault) {
+    const ev = content as MouseEvent;
+    contentRect = new Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY);
+  } else if ((content as Element).getBoundingClientRect) {
+    contentRect = (content as Element).getBoundingClientRect();
+  } else if (content as IPoint) {
+    const point: IPoint = content as IPoint;
+    contentRect = new Rectangle(point.x, point.x, point.y, point.y);
+  } else {
+    return undefined;
+  }
+
+  return (
+    possibleContainers &&
+    possibleContainers.find((possibleContainerRect: DOMRect | ClientRect) => {
+      return (
+        contentRect.left >= possibleContainerRect.left &&
+        contentRect.top >= possibleContainerRect.top &&
+        contentRect.right <= possibleContainerRect.left + possibleContainerRect.width &&
+        contentRect.bottom <= possibleContainerRect.top + possibleContainerRect.height
+      );
+    })
+  );
+}

From bfd68c1b58a8ae77f43d33419a990df952b7c0b3 Mon Sep 17 00:00:00 2001
From: "REDMOND\\jspurlin" <jspurlin@microsoft.com>
Date: Wed, 4 Sep 2019 18:20:09 -0700
Subject: [PATCH 2/6] Revert "Make callouts aware of the WindowSegments"

This reverts commit 68fffc2aadfbcbf09fbcac09b51926af124f6f2e.
---
 .../Callout/CalloutContent.base.tsx           | 67 +++----------------
 packages/utilities/etc/utilities.api.md       |  7 --
 packages/utilities/src/dom.ts                 |  1 -
 .../utilities/src/dom/getRenderedContainer.ts | 37 ----------
 4 files changed, 9 insertions(+), 103 deletions(-)
 delete mode 100644 packages/utilities/src/dom/getRenderedContainer.ts

diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
index 8c94ba04cd45c..0b7eb882741b4 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
@@ -14,8 +14,7 @@ import {
   getNativeProps,
   getWindow,
   on,
-  shallowCompare,
-  getRenderedContainer
+  shallowCompare
 } from '../../Utilities';
 import {
   positionCallout,
@@ -29,10 +28,6 @@ import { Popup } from '../../Popup';
 import { classNamesFunction } from '../../Utilities';
 import { AnimationClassNames } from '../../Styling';
 
-interface IWindow extends Window {
-  getBoundingWindowRects?: Function;
-}
-
 const ANIMATIONS: { [key: number]: string | undefined } = {
   [RectangleEdge.top]: AnimationClassNames.slideUpIn10,
   [RectangleEdge.bottom]: AnimationClassNames.slideDownIn10,
@@ -76,11 +71,8 @@ export class CalloutContentBase extends React.Component<ICalloutProps, ICalloutS
   private _didSetInitialFocus: boolean;
   private _hostElement = React.createRef<HTMLDivElement>();
   private _calloutElement = React.createRef<HTMLDivElement>();
-  private _targetWindow: IWindow;
-  private _targetWindowSegmentRect?: DOMRect | ClientRect;
+  private _targetWindow: Window;
   private _bounds: IRectangle | undefined;
-  private _targetWindowSegmentBounds?: IRectangle | undefined;
-  private _windowRects?: DOMRect[] | ClientRect[];
   private _positionAttempts: number;
   private _target: Element | MouseEvent | IPoint | null;
   private _setHeightOffsetTimer: number;
@@ -161,9 +153,6 @@ export class CalloutContentBase extends React.Component<ICalloutProps, ICalloutS
     // Ensure positioning is recalculated when we are about to show a persisted menu.
     if (this._didPositionPropsChange(newProps, this.props)) {
       this._maxHeight = undefined;
-      this._windowRects = undefined;
-      this._targetWindowSegmentRect = undefined;
-      this._targetWindowSegmentBounds = undefined;
       // Target might have been updated while hidden.
       this._setTargetWindowAndElement(newTarget);
       this.setState({
@@ -353,12 +342,6 @@ export class CalloutContentBase extends React.Component<ICalloutProps, ICalloutS
     }, 0);
   }
 
-  private _updateWindowRects = () => {
-    if (this._targetWindow.getBoundingWindowRects) {
-      this._windowRects = this._targetWindow.getBoundingWindowRects();
-    }
-  };
-
   private _removeListeners() {
     this._disposables.forEach((dispose: () => void) => dispose());
     this._disposables = [];
@@ -425,46 +408,20 @@ export class CalloutContentBase extends React.Component<ICalloutProps, ICalloutS
   }
 
   private _getBounds(): IRectangle {
-    const useTargetWindowSegment = this._targetWindowSegmentRect && this._windowRects && this._windowRects.length > 1;
-
-    // If we have not have yet taken the bounds or have a targetWindowSegment
-    // and the bounds have not yet taken it into account, update the bounds
-    if (!this._bounds || (useTargetWindowSegment && this._targetWindowSegmentBounds !== this._bounds)) {
+    if (!this._bounds) {
       let currentBounds = this.props.bounds;
 
       if (!currentBounds) {
-        let top: number;
-        let left: number;
-        let width: number;
-        let height: number;
-
-        if (useTargetWindowSegment) {
-          top = this._targetWindowSegmentRect!.top;
-          left = this._targetWindowSegmentRect!.left;
-          width = left + this._targetWindowSegmentRect!.width;
-          height = top + this._targetWindowSegmentRect!.height;
-        } else {
-          top = 0;
-          left = 0;
-          width = this._targetWindow.innerWidth;
-          height = this._targetWindow.innerHeight;
-        }
-
         currentBounds = {
-          top: top + this.props.minPagePadding!,
-          left: left + this.props.minPagePadding!,
-          right: width - this.props.minPagePadding!,
-          bottom: height - this.props.minPagePadding!,
-          width: width - this.props.minPagePadding! * 2,
-          height: height - this.props.minPagePadding! * 2
+          top: 0 + this.props.minPagePadding!,
+          left: 0 + this.props.minPagePadding!,
+          right: this._targetWindow.innerWidth - this.props.minPagePadding!,
+          bottom: this._targetWindow.innerHeight - this.props.minPagePadding!,
+          width: this._targetWindow.innerWidth - this.props.minPagePadding! * 2,
+          height: this._targetWindow.innerHeight - this.props.minPagePadding! * 2
         };
       }
       this._bounds = currentBounds;
-
-      // Remember the bounds so that we only measure once
-      if (useTargetWindowSegment) {
-        this._targetWindowSegmentBounds = this._bounds;
-      }
     }
     return this._bounds;
   }
@@ -540,12 +497,6 @@ export class CalloutContentBase extends React.Component<ICalloutProps, ICalloutS
         this._targetWindow = getWindow()!;
         this._target = target as IPoint;
       }
-
-      // Take note of the windowRects if we have not already
-      if (!this._windowRects || this._windowRects.length <= 0) {
-        this._updateWindowRects();
-        this._targetWindowSegmentRect = getRenderedContainer(this._target, this._windowRects);
-      }
     } else {
       this._targetWindow = getWindow()!;
     }
diff --git a/packages/utilities/etc/utilities.api.md b/packages/utilities/etc/utilities.api.md
index 0198f4bf16faf..18db05bfefce0 100644
--- a/packages/utilities/etc/utilities.api.md
+++ b/packages/utilities/etc/utilities.api.md
@@ -4,13 +4,11 @@
 
 ```ts
 
-import * as CSS from 'csstype';
 import { IProcessedStyleSet } from '@uifabric/merge-styles';
 import { IStyleFunction } from '@uifabric/merge-styles';
 import { IStyleFunctionOrObject } from '@uifabric/merge-styles';
 import { IStyleSet } from '@uifabric/merge-styles';
 import { Omit } from '@uifabric/merge-styles';
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
 // @public
@@ -330,11 +328,6 @@ export function getPreviousElement(rootElement: HTMLElement, currentElement: HTM
 // @public
 export function getRect(element: HTMLElement | Window | null): IRectangle | undefined;
 
-// Warning: (ae-forgotten-export) The symbol "React" needs to be exported by the entry point index.d.ts
-// 
-// @public (undocumented)
-export function getRenderedContainer(content?: Element | string | MouseEvent | IPoint | null | React_2.RefObject<Element>, possibleContainers?: DOMRect[] | ClientRect[]): DOMRect | ClientRect | undefined;
-
 // @public
 export function getResourceUrl(url: string): string;
 
diff --git a/packages/utilities/src/dom.ts b/packages/utilities/src/dom.ts
index 5ea975c02cd35..2f71e50367b86 100644
--- a/packages/utilities/src/dom.ts
+++ b/packages/utilities/src/dom.ts
@@ -6,7 +6,6 @@ export * from './dom/getChildren';
 export * from './dom/getDocument';
 export * from './dom/getParent';
 export * from './dom/getRect';
-export * from './dom/getRenderedContainer';
 export * from './dom/getVirtualParent';
 export * from './dom/getWindow';
 export * from './dom/isVirtualElement';
diff --git a/packages/utilities/src/dom/getRenderedContainer.ts b/packages/utilities/src/dom/getRenderedContainer.ts
deleted file mode 100644
index b350dded76614..0000000000000
--- a/packages/utilities/src/dom/getRenderedContainer.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { IPoint } from '../IPoint';
-import { Rectangle } from '../Rectangle';
-
-export function getRenderedContainer(
-  content?: Element | string | MouseEvent | IPoint | null | React.RefObject<Element>,
-  possibleContainers?: DOMRect[] | ClientRect[]
-): DOMRect | ClientRect | undefined {
-  if (!content || !possibleContainers || possibleContainers.length <= 0) {
-    return undefined;
-  }
-
-  let contentRect: DOMRect | ClientRect | Rectangle;
-
-  if ((content as MouseEvent).preventDefault) {
-    const ev = content as MouseEvent;
-    contentRect = new Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY);
-  } else if ((content as Element).getBoundingClientRect) {
-    contentRect = (content as Element).getBoundingClientRect();
-  } else if (content as IPoint) {
-    const point: IPoint = content as IPoint;
-    contentRect = new Rectangle(point.x, point.x, point.y, point.y);
-  } else {
-    return undefined;
-  }
-
-  return (
-    possibleContainers &&
-    possibleContainers.find((possibleContainerRect: DOMRect | ClientRect) => {
-      return (
-        contentRect.left >= possibleContainerRect.left &&
-        contentRect.top >= possibleContainerRect.top &&
-        contentRect.right <= possibleContainerRect.left + possibleContainerRect.width &&
-        contentRect.bottom <= possibleContainerRect.top + possibleContainerRect.height
-      );
-    })
-  );
-}

From 59f4cd116b5bf8e84a6b4809503a9fb6240eb5c2 Mon Sep 17 00:00:00 2001
From: "REDMOND\\jspurlin" <jspurlin@microsoft.com>
Date: Thu, 5 Aug 2021 11:58:07 -0700
Subject: [PATCH 3/6] Make-styles: Types.ts was updated in a way that's not
 compatible with typescript < v4 (named touples)

---
 packages/make-styles/src/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/make-styles/src/types.ts b/packages/make-styles/src/types.ts
index 0f9d9d79228aa..1d038d42c3ba2 100644
--- a/packages/make-styles/src/types.ts
+++ b/packages/make-styles/src/types.ts
@@ -88,7 +88,7 @@ export type StyleBucketName =
 export type SequenceHash = string;
 export type PropertyHash = string;
 
-export type CSSClasses = /* ltrClassName */ string | [ltrClassName: string, rtlClassName: string];
+export type CSSClasses = /* ltrClassName */ string | [/* ltrClassName */ string, /* rtlClassName */ string];
 
 export type CSSClassesMap = Record<PropertyHash, CSSClasses>;
 export type CSSClassesMapBySlot<Slots extends string | number> = Record<Slots, CSSClassesMap>;
@@ -97,4 +97,4 @@ export type CSSRulesByBucket = Partial<Record<StyleBucketName, string[]>>;
 
 export type StylesBySlots<Slots extends string | number, Tokens> = Record<Slots, MakeStylesStyleRule<Tokens>>;
 
-export type LookupItem = [definitions: CSSClassesMap, dir: 'rtl' | 'ltr'];
+export type LookupItem = [/* definitions */ CSSClassesMap, /* dir */ 'rtl' | 'ltr'];

From 95c85b4ae59a133f252b7e0a71b625f15ae64ed1 Mon Sep 17 00:00:00 2001
From: "REDMOND\\jspurlin" <jspurlin@microsoft.com>
Date: Thu, 5 Aug 2021 12:00:32 -0700
Subject: [PATCH 4/6] Change files

---
 ...i-make-styles-221c14b4-6ba3-4256-833e-ababcabba480.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-make-styles-221c14b4-6ba3-4256-833e-ababcabba480.json

diff --git a/change/@fluentui-make-styles-221c14b4-6ba3-4256-833e-ababcabba480.json b/change/@fluentui-make-styles-221c14b4-6ba3-4256-833e-ababcabba480.json
new file mode 100644
index 0000000000000..ad06be8239aec
--- /dev/null
+++ b/change/@fluentui-make-styles-221c14b4-6ba3-4256-833e-ababcabba480.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Make-styles: Types.ts was updated in a way that's not compatible with typescript < v4 (named touples)",
+  "packageName": "@fluentui/make-styles",
+  "email": "jspurlin@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 3841f1cda2e8289c6ab73e71f6e898dfb740f73f Mon Sep 17 00:00:00 2001
From: "REDMOND\\jspurlin" <jspurlin@microsoft.com>
Date: Thu, 5 Aug 2021 12:42:31 -0700
Subject: [PATCH 5/6] yarn update-api

---
 packages/make-styles/etc/make-styles.api.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/make-styles/etc/make-styles.api.md b/packages/make-styles/etc/make-styles.api.md
index 995c48ce222a5..9cbb065a11259 100644
--- a/packages/make-styles/etc/make-styles.api.md
+++ b/packages/make-styles/etc/make-styles.api.md
@@ -18,7 +18,7 @@ export function createCSSVariablesProxy(prefix?: string): unknown;
 export function createDOMRenderer(target?: Document | undefined): MakeStylesRenderer;
 
 // @public (undocumented)
-export type CSSClasses = /* ltrClassName */ string | [ltrClassName: string, rtlClassName: string];
+export type CSSClasses = /* ltrClassName */ string | [/* ltrClassName */ string, /* rtlClassName */ string];
 
 // @public (undocumented)
 export type CSSClassesMap = Record<PropertyHash, CSSClasses>;
@@ -50,7 +50,7 @@ export const LOOKUP_DEFINITIONS_INDEX = 0;
 export const LOOKUP_DIR_INDEX = 1;
 
 // @public (undocumented)
-export type LookupItem = [definitions: CSSClassesMap, dir: 'rtl' | 'ltr'];
+export type LookupItem = [/* definitions */ CSSClassesMap, /* dir */ /* dir */ 'rtl' | 'ltr'];
 
 // @public (undocumented)
 export type MakeStaticStyles = ({
@@ -159,7 +159,6 @@ export const styleBucketOrdering: StyleBucketName[];
 // @public (undocumented)
 export type StylesBySlots<Slots extends string | number, Tokens> = Record<Slots, MakeStylesStyleRule<Tokens>>;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```

From aa8308693cf417f4f46cd1d436a73102ac66e2d5 Mon Sep 17 00:00:00 2001
From: Ben Howell <48106640+behowell@users.noreply.github.com>
Date: Thu, 5 Aug 2021 17:47:27 -0700
Subject: [PATCH 6/6] Update
 change/@fluentui-make-styles-221c14b4-6ba3-4256-833e-ababcabba480.json

---
 ...uentui-make-styles-221c14b4-6ba3-4256-833e-ababcabba480.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-make-styles-221c14b4-6ba3-4256-833e-ababcabba480.json b/change/@fluentui-make-styles-221c14b4-6ba3-4256-833e-ababcabba480.json
index ad06be8239aec..384db330f99c3 100644
--- a/change/@fluentui-make-styles-221c14b4-6ba3-4256-833e-ababcabba480.json
+++ b/change/@fluentui-make-styles-221c14b4-6ba3-4256-833e-ababcabba480.json
@@ -1,6 +1,6 @@
 {
   "type": "prerelease",
-  "comment": "Make-styles: Types.ts was updated in a way that's not compatible with typescript < v4 (named touples)",
+  "comment": "Make-styles: Types.ts was updated in a way that's not compatible with typescript < v4 (named tuples)",
   "packageName": "@fluentui/make-styles",
   "email": "jspurlin@microsoft.com",
   "dependentChangeType": "patch"