@azure/communication-react 1.8.1-alpha-202309300012 → 1.8.1-alpha-202310040013

package/dist/dist-esm/react-components/src/components/styles/v8StyleShim.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IStyle } from '@fluentui/react';
+import { ComponentSlotStyle } from '../../types';
+/**
+ * Function to create a React.CSSProperties object from a v8 style object.
+ * This function is still not ideal
+ * as v8Style can use pseudo-class selectors that style objects can't process correctly.
+ *
+ * @private
+ */
+export declare function createStyleFromV8Style(v8Style: IStyle | ComponentSlotStyle): React.CSSProperties | undefined;
+//# sourceMappingURL=v8StyleShim.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/v8StyleShim.js

@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * Function to create a React.CSSProperties object from a v8 style object.
+ * This function is still not ideal
+ * as v8Style can use pseudo-class selectors that style objects can't process correctly.
+ *
+ * @private
+ */
+export function createStyleFromV8Style(v8Style) {
+    const result = {};
+    if (v8Style === undefined || v8Style === null || typeof v8Style === 'boolean' || typeof v8Style === 'string') {
+        return undefined;
+    }
+    else if (typeof v8Style === 'object') {
+        // v8Style is a style object
+        for (const record in v8Style) {
+            if (typeof v8Style[record] === 'string') {
+                // v8Style[record] is just a simple style
+                const msSuffix = 'MS';
+                if (record.startsWith(msSuffix)) {
+                    // React.CSSProperties uses camelCase for MS properties but v8Style uses PascalCase
+                    const newRecord = record.substring(0, msSuffix.length).toLowerCase + record.substring(msSuffix.length);
+                    result[newRecord] = v8Style[record];
+                }
+                else {
+                    result[record] = v8Style[record];
+                }
+            }
+            else {
+                result[record] = createStyleFromV8Style(v8Style[record]);
+            }
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=v8StyleShim.js.map

package/dist/dist-esm/react-components/src/components/styles/v8StyleShim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"v8StyleShim.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/v8StyleShim.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB,CAAC,OAAoC;IACzE,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,OAAO,KAAK,SAAS,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;QAC5G,OAAO,SAAS,CAAC;KAClB;SAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;QACtC,4BAA4B;QAC5B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;YAC5B,IAAI,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;gBACvC,yCAAyC;gBACzC,MAAM,QAAQ,GAAG,IAAI,CAAC;gBACtB,IAAI,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;oBAC/B,mFAAmF;oBACnF,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;oBACvG,MAAM,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;iBACrC;qBAAM;oBACL,MAAM,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;iBAClC;aACF;iBAAM;gBACL,MAAM,CAAC,MAAM,CAAC,GAAG,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;aAC1D;SACF;KACF;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\nimport { ComponentSlotStyle } from '../../types';\n\n/**\n * Function to create a React.CSSProperties object from a v8 style object.\n * This function is still not ideal\n * as v8Style can use pseudo-class selectors that style objects can't process correctly.\n *\n * @private\n */\nexport function createStyleFromV8Style(v8Style: IStyle | ComponentSlotStyle): React.CSSProperties | undefined {\n  const result = {};\n  if (v8Style === undefined || v8Style === null || typeof v8Style === 'boolean' || typeof v8Style === 'string') {\n    return undefined;\n  } else if (typeof v8Style === 'object') {\n    // v8Style is a style object\n    for (const record in v8Style) {\n      if (typeof v8Style[record] === 'string') {\n        // v8Style[record] is just a simple style\n        const msSuffix = 'MS';\n        if (record.startsWith(msSuffix)) {\n          // React.CSSProperties uses camelCase for MS properties but v8Style uses PascalCase\n          const newRecord = record.substring(0, msSuffix.length).toLowerCase + record.substring(msSuffix.length);\n          result[newRecord] = v8Style[record];\n        } else {\n          result[record] = v8Style[record];\n        }\n      } else {\n        result[record] = createStyleFromV8Style(v8Style[record]);\n      }\n    }\n  }\n\n  return result;\n}\n"]}

package/dist/dist-esm/react-components/src/components/utils/Datetime.d.ts

@@ -8,16 +8,15 @@ export declare const formatTimeForChatMessage: (messageDate: Date) => string;
  */
 export declare const formatDateForChatMessage: (messageDate: Date) => string;
 /**
- * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text like the
- * following:
- *
- * 1:30 p.m.
- * Yesterday 1:30 p.m.
- * Monday 1:30 p.m.
- * 2021-01-10 1:30 p.m.
+ * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text
+ * using the system locale.
+ * <time in locale format>.
+ * Yesterday <time in locale format>.
+ * <dateStrings day of week> <time in locale format>.
+ * <date in locale format> <time in locale format>.
  *
  * If message is after yesterday, then only show the time.
- * If message is before yesteray and after day before yesterday, then show 'Yesterday' plus the time.
+ * If message is before yesterday and after day before yesterday, then show 'Yesterday' plus the time.
  * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.
  *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.
  * If message is in previous or older weeks, then show date string plus the time.

package/dist/dist-esm/react-components/src/components/utils/Datetime.js

@@ -4,46 +4,24 @@
  * @private
  */
 export const formatTimeForChatMessage = (messageDate) => {
-    let hours = messageDate.getHours();
-    let minutes = messageDate.getMinutes().toString();
-    const isAm = hours < 12;
-    if (hours > 12) {
-        hours = hours - 12;
-    }
-    if (hours === 0) {
-        hours = 12;
-    }
-    if (minutes.length < 2) {
-        minutes = '0' + minutes;
-    }
-    return hours.toString() + ':' + minutes + ' ' + (isAm ? 'a.m.' : 'p.m.');
+    return messageDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
 };
 /**
  * @private
  */
 export const formatDateForChatMessage = (messageDate) => {
-    const year = messageDate.getFullYear().toString();
-    let month = (messageDate.getMonth() + 1).toString();
-    let day = messageDate.getDate().toString();
-    if (month.length === 1) {
-        month = '0' + month;
-    }
-    if (day.length === 1) {
-        day = '0' + day;
-    }
-    return year + '-' + month + '-' + day;
+    return messageDate.toLocaleDateString();
 };
 /**
- * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text like the
- * following:
- *
- * 1:30 p.m.
- * Yesterday 1:30 p.m.
- * Monday 1:30 p.m.
- * 2021-01-10 1:30 p.m.
+ * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text
+ * using the system locale.
+ * <time in locale format>.
+ * Yesterday <time in locale format>.
+ * <dateStrings day of week> <time in locale format>.
+ * <date in locale format> <time in locale format>.
  *
  * If message is after yesterday, then only show the time.
- * If message is before yesteray and after day before yesterday, then show 'Yesterday' plus the time.
+ * If message is before yesterday and after day before yesterday, then show 'Yesterday' plus the time.
  * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.
  *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.
  * If message is in previous or older weeks, then show date string plus the time.

package/dist/dist-esm/react-components/src/components/utils/Datetime.js.map

@@ -1 +1 @@
-{"version":3,"file":"Datetime.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/Datetime.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageThreadStrings } from '../MessageThread';\n\n/**\n * @private\n */\nexport const formatTimeForChatMessage = (messageDate: Date): string => {\n  let hours = messageDate.getHours();\n  let minutes = messageDate.getMinutes().toString();\n  const isAm = hours < 12;\n  if (hours > 12) {\n    hours = hours - 12;\n  }\n  if (hours === 0) {\n    hours = 12;\n  }\n  if (minutes.length < 2) {\n    minutes = '0' + minutes;\n  }\n  return hours.toString() + ':' + minutes + ' ' + (isAm ? 'a.m.' : 'p.m.');\n};\n\n/**\n * @private\n */\nexport const formatDateForChatMessage = (messageDate: Date): string => {\n  const year = messageDate.getFullYear().toString();\n  let month = (messageDate.getMonth() + 1).toString();\n  let day = messageDate.getDate().toString();\n\n  if (month.length === 1) {\n    month = '0' + month;\n  }\n  if (day.length === 1) {\n    day = '0' + day;\n  }\n\n  return year + '-' + month + '-' + day;\n};\n\n/**\n * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text like the\n * following:\n *\n * 1:30 p.m.\n * Yesterday 1:30 p.m.\n * Monday 1:30 p.m.\n * 2021-01-10 1:30 p.m.\n *\n * If message is after yesterday, then only show the time.\n * If message is before yesteray and after day before yesterday, then show 'Yesterday' plus the time.\n * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.\n *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.\n * If message is in previous or older weeks, then show date string plus the time.\n *\n * @param messageDate - date of message\n * @param currentDate - date used as offset to create the user friendly timestamp (e.g. to create 'Yesterday' instead of an absolute date)\n *\n * @private\n */\nexport const formatTimestampForChatMessage = (\n  messageDate: Date,\n  todayDate: Date,\n  dateStrings: MessageThreadStrings\n): string => {\n  // If message was in the same day timestamp string is just the time like '1:30 p.m.'.\n  const startOfDay = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());\n  if (messageDate > startOfDay) {\n    return formatTimeForChatMessage(messageDate);\n  }\n\n  // If message was yesterday then timestamp string is like this 'Yesterday 1:30 p.m.'.\n  const yesterdayDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - 1);\n  if (messageDate > yesterdayDate) {\n    return dateStrings.yesterday + ' ' + formatTimeForChatMessage(messageDate);\n  }\n\n  // If message was before Sunday and today is Sunday (start of week) then timestamp string is like\n  // '2021-01-10 1:30 p.m.'.\n  const weekDay = todayDate.getDay();\n  if (weekDay === 0) {\n    return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);\n  }\n\n  // If message was before first day of the week then timestamp string is like Monday 1:30 p.m.\n  const firstDayOfTheWeekDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - weekDay);\n  if (messageDate > firstDayOfTheWeekDate) {\n    return dayToDayName(messageDate.getDay(), dateStrings) + ' ' + formatTimeForChatMessage(messageDate);\n  }\n\n  // If message date is in previous or older weeks then timestamp string is like 2021-01-10 1:30 p.m.\n  return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);\n};\n\nconst dayToDayName = (day: number, dateStrings: MessageThreadStrings): string => {\n  switch (day) {\n    case 0:\n      return dateStrings.sunday;\n    case 1:\n      return dateStrings.monday;\n    case 2:\n      return dateStrings.tuesday;\n    case 3:\n      return dateStrings.wednesday;\n    case 4:\n      return dateStrings.thursday;\n    case 5:\n      return dateStrings.friday;\n    case 6:\n      return dateStrings.saturday;\n    default:\n      throw new Error(`Invalid day [${day}] passed`);\n  }\n};\n"]}
+{"version":3,"file":"Datetime.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/Datetime.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,WAAiB,EAAU,EAAE;IACpE,OAAO,WAAW,CAAC,kBAAkB,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;AACpF,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,WAAiB,EAAU,EAAE;IACpE,OAAO,WAAW,CAAC,kBAAkB,EAAE,CAAC;AAC1C,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,WAAiB,EACjB,SAAe,EACf,WAAiC,EACzB,EAAE;IACV,qFAAqF;IACrF,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC;IAChG,IAAI,WAAW,GAAG,UAAU,EAAE;QAC5B,OAAO,wBAAwB,CAAC,WAAW,CAAC,CAAC;KAC9C;IAED,qFAAqF;IACrF,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IACvG,IAAI,WAAW,GAAG,aAAa,EAAE;QAC/B,OAAO,WAAW,CAAC,SAAS,GAAG,GAAG,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;KAC5E;IAED,iGAAiG;IACjG,0BAA0B;IAC1B,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC;IACnC,IAAI,OAAO,KAAK,CAAC,EAAE;QACjB,OAAO,wBAAwB,CAAC,WAAW,CAAC,GAAG,GAAG,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;KAC5F;IAED,6FAA6F;IAC7F,MAAM,qBAAqB,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,CAAC;IACrH,IAAI,WAAW,GAAG,qBAAqB,EAAE;QACvC,OAAO,YAAY,CAAC,WAAW,CAAC,MAAM,EAAE,EAAE,WAAW,CAAC,GAAG,GAAG,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;KACtG;IAED,mGAAmG;IACnG,OAAO,wBAAwB,CAAC,WAAW,CAAC,GAAG,GAAG,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;AAC7F,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,WAAiC,EAAU,EAAE;IAC9E,QAAQ,GAAG,EAAE;QACX,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,MAAM,CAAC;QAC5B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,MAAM,CAAC;QAC5B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,OAAO,CAAC;QAC7B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,SAAS,CAAC;QAC/B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,QAAQ,CAAC;QAC9B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,MAAM,CAAC;QAC5B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,QAAQ,CAAC;QAC9B;YACE,MAAM,IAAI,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,CAAC;KAClD;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageThreadStrings } from '../MessageThread';\n\n/**\n * @private\n */\nexport const formatTimeForChatMessage = (messageDate: Date): string => {\n  return messageDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });\n};\n\n/**\n * @private\n */\nexport const formatDateForChatMessage = (messageDate: Date): string => {\n  return messageDate.toLocaleDateString();\n};\n\n/**\n * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text\n * using the system locale.\n * <time in locale format>.\n * Yesterday <time in locale format>.\n * <dateStrings day of week> <time in locale format>.\n * <date in locale format> <time in locale format>.\n *\n * If message is after yesterday, then only show the time.\n * If message is before yesterday and after day before yesterday, then show 'Yesterday' plus the time.\n * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.\n *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.\n * If message is in previous or older weeks, then show date string plus the time.\n *\n * @param messageDate - date of message\n * @param currentDate - date used as offset to create the user friendly timestamp (e.g. to create 'Yesterday' instead of an absolute date)\n *\n * @private\n */\nexport const formatTimestampForChatMessage = (\n  messageDate: Date,\n  todayDate: Date,\n  dateStrings: MessageThreadStrings\n): string => {\n  // If message was in the same day timestamp string is just the time like '1:30 p.m.'.\n  const startOfDay = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());\n  if (messageDate > startOfDay) {\n    return formatTimeForChatMessage(messageDate);\n  }\n\n  // If message was yesterday then timestamp string is like this 'Yesterday 1:30 p.m.'.\n  const yesterdayDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - 1);\n  if (messageDate > yesterdayDate) {\n    return dateStrings.yesterday + ' ' + formatTimeForChatMessage(messageDate);\n  }\n\n  // If message was before Sunday and today is Sunday (start of week) then timestamp string is like\n  // '2021-01-10 1:30 p.m.'.\n  const weekDay = todayDate.getDay();\n  if (weekDay === 0) {\n    return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);\n  }\n\n  // If message was before first day of the week then timestamp string is like Monday 1:30 p.m.\n  const firstDayOfTheWeekDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - weekDay);\n  if (messageDate > firstDayOfTheWeekDate) {\n    return dayToDayName(messageDate.getDay(), dateStrings) + ' ' + formatTimeForChatMessage(messageDate);\n  }\n\n  // If message date is in previous or older weeks then timestamp string is like 2021-01-10 1:30 p.m.\n  return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);\n};\n\nconst dayToDayName = (day: number, dateStrings: MessageThreadStrings): string => {\n  switch (day) {\n    case 0:\n      return dateStrings.sunday;\n    case 1:\n      return dateStrings.monday;\n    case 2:\n      return dateStrings.tuesday;\n    case 3:\n      return dateStrings.wednesday;\n    case 4:\n      return dateStrings.thursday;\n    case 5:\n      return dateStrings.friday;\n    case 6:\n      return dateStrings.saturday;\n    default:\n      throw new Error(`Invalid day [${day}] passed`);\n  }\n};\n"]}

package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json

@@ -147,7 +147,7 @@
         "newMessagesIndicator": "New messages",
         "noDisplayNameSub": "No name",
         "editBoxCancelButton": "Cancel",
-        "editBoxSubmitButton": "Submit",
+        "editBoxSubmitButton": "Done",
         "messageReadCount": "Read by {messageReadByCount} of {remoteParticipantsCount}",
         "actionMenuMoreOptions": "More Options",
         "downloadFile": "Download file",

package/dist/dist-esm/react-components/src/theming/FluentThemeProvider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Theme, PartialTheme } from '@fluentui/react';
+import { PartialTheme, Theme } from '@fluentui/react';
 /**
  * Props for {@link FluentThemeProvider}.
  *
@@ -20,9 +20,8 @@ export interface FluentThemeProviderProps {
  * Provider to apply a Fluent theme across this library's react components.
  *
  * @remarks Components in this library are composed primarily from [Fluent UI](https://developer.microsoft.com/fluentui#/controls/web),
- * controls, and also from [Fluent React Northstar](https://fluentsite.z22.web.core.windows.net/0.53.0) controls.
- * This provider handles applying any theme provided to both the underlying Fluent UI controls, as well as the Fluent React Northstar controls.
- *
+ * controls, mixing v8 and v9 controls.
+ * This provider handles applying any theme provided to the underlying Fluent UI controls. *
  * @public
  */
 export declare const FluentThemeProvider: (props: FluentThemeProviderProps) => JSX.Element;

package/dist/dist-esm/react-components/src/theming/FluentThemeProvider.js

@@ -2,73 +2,55 @@
 // Licensed under the MIT License.
 import React, { createContext, useContext } from 'react';
 import { ThemeProvider, getTheme, mergeThemes, mergeStyles } from '@fluentui/react';
-import { mergeThemes as mergeNorthstarThemes, Provider, teamsTheme } from "../../../northstar-wrapper/src";
 import { lightTheme } from './themes';
 const wrapper = mergeStyles({
     height: '100%',
     width: '100%',
-    overflow: 'auto'
-});
-const defaultTheme = mergeThemes(getTheme(), lightTheme);
-/** Theme context for library's react components */
-const ThemeContext = createContext(defaultTheme);
-const initialFluentNorthstarTheme = mergeNorthstarThemes(teamsTheme, {
-    componentStyles: {
-        ChatMessage: {
-            root: {
-                lineHeight: '1.4286'
-            }
-        }
+    overflow: 'auto',
+    // Add NorthStar styling used previously in the library
+    '*': {
+        boxSizing: 'border-box'
     },
-    fontFaces: [],
-    siteVariables: {
-        // suppressing body styles from teamsTheme to avoid inherited styling to other elements
-        bodyPadding: undefined,
-        bodyFontSize: undefined,
-        bodyFontFamily: undefined,
-        bodyBackground: undefined,
-        bodyColor: undefined,
-        bodyLineHeight: undefined
+    '*:before': {
+        boxSizing: 'border-box'
+    },
+    '*:after': {
+        boxSizing: 'border-box'
+    },
+    /* Adding priority for HTML `hidden` attribute to be applied correctly */
+    '[hidden]': {
+        display: 'none!important'
     }
 });
+const defaultTheme = Object.assign({}, mergeThemes(getTheme(), lightTheme));
+/** Theme context for library's react components */
+const ThemeContext = createContext(defaultTheme);
+const SingleUsageCheckContext = createContext(false);
 /**
  * Provider to apply a Fluent theme across this library's react components.
  *
  * @remarks Components in this library are composed primarily from [Fluent UI](https://developer.microsoft.com/fluentui#/controls/web),
- * controls, and also from [Fluent React Northstar](https://fluentsite.z22.web.core.windows.net/0.53.0) controls.
- * This provider handles applying any theme provided to both the underlying Fluent UI controls, as well as the Fluent React Northstar controls.
- *
+ * controls, mixing v8 and v9 controls.
+ * This provider handles applying any theme provided to the underlying Fluent UI controls. *
  * @public
  */
 export const FluentThemeProvider = (props) => {
     const { fluentTheme, rtl, children } = props;
-    let fluentUITheme = mergeThemes(defaultTheme, fluentTheme);
-    // merge in rtl from FluentThemeProviderProps
-    fluentUITheme = mergeThemes(fluentUITheme, { rtl });
-    const fluentNorthstarTheme = mergeNorthstarThemes(initialFluentNorthstarTheme, {
-        componentVariables: {
-            Chat: {
-                backgroundColor: fluentUITheme.palette.white
-            },
-            ChatMessage: {
-                authorColor: fluentUITheme.palette.neutralPrimary,
-                contentColor: fluentUITheme.palette.neutralPrimary,
-                backgroundColor: fluentUITheme.palette.neutralLighter,
-                backgroundColorMine: fluentUITheme.palette.themeLight
-            }
-        },
-        componentStyles: {
-            ChatMessage: {
-                timestamp: {
-                    WebkitTextFillColor: fluentUITheme.palette.neutralSecondary
-                }
-            }
-        }
-        // add more northstar components to align with Fluent UI theme
-    });
-    return (React.createElement(ThemeContext.Provider, { value: fluentUITheme },
-        React.createElement(ThemeProvider, { theme: fluentUITheme, className: wrapper },
-            React.createElement(Provider, { theme: fluentNorthstarTheme, className: wrapper, rtl: rtl }, children))));
+    /**
+     * Pass only the children if we previously wrapped.
+     * This is to prevent the provider from being applied
+     * multiple times and wiping out configuration like RTL
+     * FluentThemeProvider
+     */
+    const alreadyWrapped = useSingleUsageCheck();
+    if (alreadyWrapped) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    let fluentV8Theme = mergeThemes(defaultTheme, fluentTheme);
+    fluentV8Theme = mergeThemes(fluentV8Theme, { rtl });
+    return (React.createElement(SingleUsageCheckContext.Provider, { value: true },
+        React.createElement(ThemeContext.Provider, { value: fluentV8Theme },
+            React.createElement(ThemeProvider, { theme: fluentV8Theme, className: wrapper }, children))));
 };
 /**
  * React hook to access theme
@@ -76,4 +58,10 @@ export const FluentThemeProvider = (props) => {
  * @public
  */
 export const useTheme = () => useContext(ThemeContext);
+/**
+ * This is used to prevent the provider from being applied multiple times.
+ *
+ * @private
+ */
+const useSingleUsageCheck = () => useContext(SingleUsageCheckContext);
 //# sourceMappingURL=FluentThemeProvider.js.map

package/dist/dist-esm/react-components/src/theming/FluentThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FluentThemeProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/FluentThemeProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,aAAa,EAAuB,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzG,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,QAAQ,EAAE,UAAU,EAAE,uCAAoC;AACxG,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAmBtC,MAAM,OAAO,GAAG,WAAW,CAAC;IAC1B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CAAC;AAEzD,mDAAmD;AACnD,MAAM,YAAY,GAAG,aAAa,CAAQ,YAAY,CAAC,CAAC;AAExD,MAAM,2BAA2B,GAAG,oBAAoB,CAAC,UAAU,EAAE;IACnE,eAAe,EAAE;QACf,WAAW,EAAE;YACX,IAAI,EAAE;gBACJ,UAAU,EAAE,QAAQ;aACrB;SACF;KACF;IACD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE;QACb,uFAAuF;QACvF,WAAW,EAAE,SAAS;QACtB,YAAY,EAAE,SAAS;QACvB,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,SAAS;QACzB,SAAS,EAAE,SAAS;QACpB,cAAc,EAAE,SAAS;KAC1B;CACF,CAAC,CAAC;AAEH;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE7C,IAAI,aAAa,GAAU,WAAW,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAClE,6CAA6C;IAC7C,aAAa,GAAG,WAAW,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpD,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,2BAA2B,EAAE;QAC7E,kBAAkB,EAAE;YAClB,IAAI,EAAE;gBACJ,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK;aAC7C;YACD,WAAW,EAAE;gBACX,WAAW,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc;gBACjD,YAAY,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc;gBAClD,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc;gBACrD,mBAAmB,EAAE,aAAa,CAAC,OAAO,CAAC,UAAU;aACtD;SACF;QACD,eAAe,EAAE;YACf,WAAW,EAAE;gBACX,SAAS,EAAE;oBACT,mBAAmB,EAAE,aAAa,CAAC,OAAO,CAAC,gBAAgB;iBAC5D;aACF;SACF;QACD,8DAA8D;KAC/D,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa;QACzC,oBAAC,aAAa,IAAC,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,OAAO;YACrD,oBAAC,QAAQ,IAAC,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAChE,QAAQ,CACA,CACG,CACM,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAU,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { createContext, useContext } from 'react';\nimport { ThemeProvider, Theme, PartialTheme, getTheme, mergeThemes, mergeStyles } from '@fluentui/react';\nimport { mergeThemes as mergeNorthstarThemes, Provider, teamsTheme } from '@internal/northstar-wrapper';\nimport { lightTheme } from './themes';\n\n/**\n * Props for {@link FluentThemeProvider}.\n *\n * @public\n */\nexport interface FluentThemeProviderProps {\n  /** Children to be themed. */\n  children: React.ReactNode;\n  /** Theme for components. Defaults to a light theme if not provided. */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Whether components are displayed right-to-left\n   * @defaultValue `false`\n   */\n  rtl?: boolean;\n}\n\nconst wrapper = mergeStyles({\n  height: '100%',\n  width: '100%',\n  overflow: 'auto'\n});\n\nconst defaultTheme = mergeThemes(getTheme(), lightTheme);\n\n/** Theme context for library's react components */\nconst ThemeContext = createContext<Theme>(defaultTheme);\n\nconst initialFluentNorthstarTheme = mergeNorthstarThemes(teamsTheme, {\n  componentStyles: {\n    ChatMessage: {\n      root: {\n        lineHeight: '1.4286'\n      }\n    }\n  },\n  fontFaces: [], // suppressing font faces from teamsTheme as recommended by FluentUI N* to avoid font styling to other elements\n  siteVariables: {\n    // suppressing body styles from teamsTheme to avoid inherited styling to other elements\n    bodyPadding: undefined,\n    bodyFontSize: undefined,\n    bodyFontFamily: undefined,\n    bodyBackground: undefined,\n    bodyColor: undefined,\n    bodyLineHeight: undefined\n  }\n});\n\n/**\n * Provider to apply a Fluent theme across this library's react components.\n *\n * @remarks Components in this library are composed primarily from [Fluent UI](https://developer.microsoft.com/fluentui#/controls/web),\n * controls, and also from [Fluent React Northstar](https://fluentsite.z22.web.core.windows.net/0.53.0) controls.\n * This provider handles applying any theme provided to both the underlying Fluent UI controls, as well as the Fluent React Northstar controls.\n *\n * @public\n */\nexport const FluentThemeProvider = (props: FluentThemeProviderProps): JSX.Element => {\n  const { fluentTheme, rtl, children } = props;\n\n  let fluentUITheme: Theme = mergeThemes(defaultTheme, fluentTheme);\n  // merge in rtl from FluentThemeProviderProps\n  fluentUITheme = mergeThemes(fluentUITheme, { rtl });\n\n  const fluentNorthstarTheme = mergeNorthstarThemes(initialFluentNorthstarTheme, {\n    componentVariables: {\n      Chat: {\n        backgroundColor: fluentUITheme.palette.white\n      },\n      ChatMessage: {\n        authorColor: fluentUITheme.palette.neutralPrimary,\n        contentColor: fluentUITheme.palette.neutralPrimary,\n        backgroundColor: fluentUITheme.palette.neutralLighter,\n        backgroundColorMine: fluentUITheme.palette.themeLight\n      }\n    },\n    componentStyles: {\n      ChatMessage: {\n        timestamp: {\n          WebkitTextFillColor: fluentUITheme.palette.neutralSecondary\n        }\n      }\n    }\n    // add more northstar components to align with Fluent UI theme\n  });\n\n  return (\n    <ThemeContext.Provider value={fluentUITheme}>\n      <ThemeProvider theme={fluentUITheme} className={wrapper}>\n        <Provider theme={fluentNorthstarTheme} className={wrapper} rtl={rtl}>\n          {children}\n        </Provider>\n      </ThemeProvider>\n    </ThemeContext.Provider>\n  );\n};\n\n/**\n * React hook to access theme\n *\n * @public\n */\nexport const useTheme = (): Theme => useContext(ThemeContext);\n\"../../../northstar-wrapper/src\""]}
+{"version":3,"file":"FluentThemeProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/FluentThemeProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,aAAa,EAAuB,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzG,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAmBtC,MAAM,OAAO,GAAG,WAAW,CAAC;IAC1B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;IAChB,uDAAuD;IACvD,GAAG,EAAE;QACH,SAAS,EAAE,YAAY;KACxB;IACD,UAAU,EAAE;QACV,SAAS,EAAE,YAAY;KACxB;IACD,SAAS,EAAE;QACT,SAAS,EAAE,YAAY;KACxB;IACD,yEAAyE;IACzE,UAAU,EAAE;QACV,OAAO,EAAE,gBAAgB;KAC1B;CACF,CAAC,CAAC;AAEH,MAAM,YAAY,qBACb,WAAW,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CACvC,CAAC;AAEF,mDAAmD;AACnD,MAAM,YAAY,GAAG,aAAa,CAAQ,YAAY,CAAC,CAAC;AACxD,MAAM,uBAAuB,GAAG,aAAa,CAAU,KAAK,CAAC,CAAC;AAE9D;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE7C;;;;;OAKG;IACH,MAAM,cAAc,GAAG,mBAAmB,EAAE,CAAC;IAC7C,IAAI,cAAc,EAAE;QAClB,OAAO,0CAAG,QAAQ,CAAI,CAAC;KACxB;IAED,IAAI,aAAa,GAAU,WAAW,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAClE,aAAa,GAAG,WAAW,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpD,OAAO,CACL,oBAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI;QAC3C,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa;YACzC,oBAAC,aAAa,IAAC,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,OAAO,IACpD,QAAQ,CACK,CACM,CACS,CACpC,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAU,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;AAE9D;;;;GAIG;AACH,MAAM,mBAAmB,GAAG,GAAY,EAAE,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { createContext, useContext } from 'react';\nimport { ThemeProvider, PartialTheme, Theme, getTheme, mergeThemes, mergeStyles } from '@fluentui/react';\nimport { lightTheme } from './themes';\n\n/**\n * Props for {@link FluentThemeProvider}.\n *\n * @public\n */\nexport interface FluentThemeProviderProps {\n  /** Children to be themed. */\n  children: React.ReactNode;\n  /** Theme for components. Defaults to a light theme if not provided. */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Whether components are displayed right-to-left\n   * @defaultValue `false`\n   */\n  rtl?: boolean;\n}\n\nconst wrapper = mergeStyles({\n  height: '100%',\n  width: '100%',\n  overflow: 'auto',\n  // Add NorthStar styling used previously in the library\n  '*': {\n    boxSizing: 'border-box'\n  },\n  '*:before': {\n    boxSizing: 'border-box'\n  },\n  '*:after': {\n    boxSizing: 'border-box'\n  },\n  /* Adding priority for HTML `hidden` attribute to be applied correctly */\n  '[hidden]': {\n    display: 'none!important'\n  }\n});\n\nconst defaultTheme: Theme = {\n  ...mergeThemes(getTheme(), lightTheme)\n};\n\n/** Theme context for library's react components */\nconst ThemeContext = createContext<Theme>(defaultTheme);\nconst SingleUsageCheckContext = createContext<boolean>(false);\n\n/**\n * Provider to apply a Fluent theme across this library's react components.\n *\n * @remarks Components in this library are composed primarily from [Fluent UI](https://developer.microsoft.com/fluentui#/controls/web),\n * controls, mixing v8 and v9 controls.\n * This provider handles applying any theme provided to the underlying Fluent UI controls. *\n * @public\n */\nexport const FluentThemeProvider = (props: FluentThemeProviderProps): JSX.Element => {\n  const { fluentTheme, rtl, children } = props;\n\n  /**\n   * Pass only the children if we previously wrapped.\n   * This is to prevent the provider from being applied\n   * multiple times and wiping out configuration like RTL\n   * FluentThemeProvider\n   */\n  const alreadyWrapped = useSingleUsageCheck();\n  if (alreadyWrapped) {\n    return <>{children}</>;\n  }\n\n  let fluentV8Theme: Theme = mergeThemes(defaultTheme, fluentTheme);\n  fluentV8Theme = mergeThemes(fluentV8Theme, { rtl });\n\n  return (\n    <SingleUsageCheckContext.Provider value={true}>\n      <ThemeContext.Provider value={fluentV8Theme}>\n        <ThemeProvider theme={fluentV8Theme} className={wrapper}>\n          {children}\n        </ThemeProvider>\n      </ThemeContext.Provider>\n    </SingleUsageCheckContext.Provider>\n  );\n};\n\n/**\n * React hook to access theme\n *\n * @public\n */\nexport const useTheme = (): Theme => useContext(ThemeContext);\n\n/**\n * This is used to prevent the provider from being applied multiple times.\n *\n * @private\n */\nconst useSingleUsageCheck = (): boolean => useContext(SingleUsageCheckContext);\n"]}

package/dist/dist-esm/react-components/src/theming/FluentV9ThemeProvider.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Theme as ThemeV8 } from '@fluentui/react';
+/**
+ * Props for {@link FluentThemeProvider}.
+ *
+ * @private
+ */
+export interface FluentV9ThemeProviderProps {
+    /** Children to be themed. */
+    children: React.ReactNode;
+    /** FluentUI v8 theme to be mapped to FluentUI v9 theme */
+    v8Theme: ThemeV8;
+}
+/**
+ * @private
+ */
+export declare const useFluentV9Wrapper: () => Record<"body", string>;
+/**
+ * @private
+ */
+export declare const FluentV9ThemeProvider: (props: FluentV9ThemeProviderProps) => JSX.Element;
+//# sourceMappingURL=FluentV9ThemeProvider.d.ts.map

package/dist/dist-esm/react-components/src/theming/FluentV9ThemeProvider.js

@@ -0,0 +1,29 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { makeStyles, shorthands, FluentProvider } from '@fluentui/react-components';
+import { createV9Theme } from './v9ThemeShim';
+import { TextDirectionProvider } from '@griffel/react';
+/**
+ * @private
+ */
+export const useFluentV9Wrapper = makeStyles({
+    body: Object.assign(Object.assign(Object.assign(Object.assign({ height: '100%' }, shorthands.margin(0)), shorthands.overflow('hidden')), shorthands.padding(0)), { width: '100%' })
+});
+/**
+ * @private
+ */
+export const FluentV9ThemeProvider = (props) => {
+    const { v8Theme, children } = props;
+    const v9Theme = createV9Theme(v8Theme);
+    const dir = v8Theme.rtl ? 'rtl' : 'ltr';
+    return (
+    // TextDirectionProvider is needed to fix issue with direction value update in FluentProvider
+    React.createElement(TextDirectionProvider, { dir: dir },
+        React.createElement(FluentProviderWithStylesOverrides, { theme: v9Theme, dir: dir }, children)));
+};
+const FluentProviderWithStylesOverrides = (props) => {
+    const classes = useFluentV9Wrapper();
+    return React.createElement(FluentProvider, Object.assign({}, props, { className: classes.body }));
+};
+//# sourceMappingURL=FluentV9ThemeProvider.js.map

package/dist/dist-esm/react-components/src/theming/FluentV9ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentV9ThemeProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/FluentV9ThemeProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAuB,MAAM,4BAA4B,CAAC;AAEzG,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAcvD;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAAC;IAC3C,IAAI,4DACF,MAAM,EAAE,MAAM,IACX,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,GACpB,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAC7B,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,KACxB,KAAK,EAAE,MAAM,GACd;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAiC,EAAe,EAAE;IACtF,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAExC,OAAO;IACL,6FAA6F;IAC7F,oBAAC,qBAAqB,IAAC,GAAG,EAAE,GAAG;QAE7B,oBAAC,iCAAiC,IAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IACxD,QAAQ,CACyB,CACd,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iCAAiC,GAAkC,CAAC,KAAK,EAAE,EAAE;IACjF,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,OAAO,oBAAC,cAAc,oBAAK,KAAK,IAAE,SAAS,EAAE,OAAO,CAAC,IAAI,IAAI,CAAC;AAChE,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { makeStyles, shorthands, FluentProvider, FluentProviderProps } from '@fluentui/react-components';\nimport { Theme as ThemeV8 } from '@fluentui/react';\nimport { createV9Theme } from './v9ThemeShim';\nimport { TextDirectionProvider } from '@griffel/react';\n\n/**\n * Props for {@link FluentThemeProvider}.\n *\n * @private\n */\nexport interface FluentV9ThemeProviderProps {\n  /** Children to be themed. */\n  children: React.ReactNode;\n  /** FluentUI v8 theme to be mapped to FluentUI v9 theme */\n  v8Theme: ThemeV8;\n}\n\n/**\n * @private\n */\nexport const useFluentV9Wrapper = makeStyles({\n  body: {\n    height: '100%',\n    ...shorthands.margin(0),\n    ...shorthands.overflow('hidden'),\n    ...shorthands.padding(0),\n    width: '100%'\n  }\n});\n\n/**\n * @private\n */\nexport const FluentV9ThemeProvider = (props: FluentV9ThemeProviderProps): JSX.Element => {\n  const { v8Theme, children } = props;\n  const v9Theme = createV9Theme(v8Theme);\n  const dir = v8Theme.rtl ? 'rtl' : 'ltr';\n\n  return (\n    // TextDirectionProvider is needed to fix issue with direction value update in FluentProvider\n    <TextDirectionProvider dir={dir}>\n      {/* Wrapper is required to call \"useClasses\" hook with proper context values */}\n      <FluentProviderWithStylesOverrides theme={v9Theme} dir={dir}>\n        {children}\n      </FluentProviderWithStylesOverrides>\n    </TextDirectionProvider>\n  );\n};\n\nconst FluentProviderWithStylesOverrides: React.FC<FluentProviderProps> = (props) => {\n  const classes = useFluentV9Wrapper();\n\n  return <FluentProvider {...props} className={classes.body} />;\n};\n"]}

package/dist/dist-esm/react-components/src/theming/themeDuplicates.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @private
+ */
+export declare const grey: Record<Greys, string>;
+/**
+ * @private
+ */
+export declare const whiteAlpha: Record<AlphaColors, string>;
+/**
+ * @private
+ */
+export declare const blackAlpha: Record<AlphaColors, string>;
+/**
+ * @private
+ */
+export declare const grey10Alpha: Record<AlphaColors, string>;
+/**
+ * @private
+ */
+export declare const grey12Alpha: Record<AlphaColors, string>;
+/**
+ * @private
+ */
+export declare type Greys = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100;
+/**
+ * @private
+ */
+export declare type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
+//# sourceMappingURL=themeDuplicates.d.ts.map

package/dist/dist-esm/react-components/src/theming/themeDuplicates.js

@@ -0,0 +1,121 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+// These color records are required for createV9Theme
+// For more info, check https://react.fluentui.dev/iframe.html?viewMode=docs&id=concepts-migration-from-v8-components-theme-migration--page#compatible-themes
+/**
+ * @private
+ */
+export const grey = {
+    '0': '#000000',
+    '2': '#050505',
+    '4': '#0a0a0a',
+    '6': '#0f0f0f',
+    '8': '#141414',
+    '10': '#1a1a1a',
+    '12': '#1f1f1f',
+    '14': '#242424',
+    '16': '#292929',
+    '18': '#2e2e2e',
+    '20': '#333333',
+    '22': '#383838',
+    '24': '#3d3d3d',
+    '26': '#424242',
+    '28': '#474747',
+    '30': '#4d4d4d',
+    '32': '#525252',
+    '34': '#575757',
+    '36': '#5c5c5c',
+    '38': '#616161',
+    '40': '#666666',
+    '42': '#6b6b6b',
+    '44': '#707070',
+    '46': '#757575',
+    '48': '#7a7a7a',
+    '50': '#808080',
+    '52': '#858585',
+    '54': '#8a8a8a',
+    '56': '#8f8f8f',
+    '58': '#949494',
+    '60': '#999999',
+    '62': '#9e9e9e',
+    '64': '#a3a3a3',
+    '66': '#a8a8a8',
+    '68': '#adadad',
+    '70': '#b3b3b3',
+    '72': '#b8b8b8',
+    '74': '#bdbdbd',
+    '76': '#c2c2c2',
+    '78': '#c7c7c7',
+    '80': '#cccccc',
+    '82': '#d1d1d1',
+    '84': '#d6d6d6',
+    '86': '#dbdbdb',
+    '88': '#e0e0e0',
+    '90': '#e6e6e6',
+    '92': '#ebebeb',
+    '94': '#f0f0f0',
+    '96': '#f5f5f5',
+    '98': '#fafafa',
+    '100': '#ffffff'
+};
+/**
+ * @private
+ */
+export const whiteAlpha = {
+    '5': 'rgba(255, 255, 255, 0.05)',
+    '10': 'rgba(255, 255, 255, 0.1)',
+    '20': 'rgba(255, 255, 255, 0.2)',
+    '30': 'rgba(255, 255, 255, 0.3)',
+    '40': 'rgba(255, 255, 255, 0.4)',
+    '50': 'rgba(255, 255, 255, 0.5)',
+    '60': 'rgba(255, 255, 255, 0.6)',
+    '70': 'rgba(255, 255, 255, 0.7)',
+    '80': 'rgba(255, 255, 255, 0.8)',
+    '90': 'rgba(255, 255, 255, 0.9)'
+};
+/**
+ * @private
+ */
+export const blackAlpha = {
+    '5': 'rgba(0, 0, 0, 0.05)',
+    '10': 'rgba(0, 0, 0, 0.1)',
+    '20': 'rgba(0, 0, 0, 0.2)',
+    '30': 'rgba(0, 0, 0, 0.3)',
+    '40': 'rgba(0, 0, 0, 0.4)',
+    '50': 'rgba(0, 0, 0, 0.5)',
+    '60': 'rgba(0, 0, 0, 0.6)',
+    '70': 'rgba(0, 0, 0, 0.7)',
+    '80': 'rgba(0, 0, 0, 0.8)',
+    '90': 'rgba(0, 0, 0, 0.9)'
+};
+/**
+ * @private
+ */
+export const grey10Alpha = {
+    '5': 'rgba(26, 26, 26, 0.05)',
+    '10': 'rgba(26, 26, 26, 0.1)',
+    '20': 'rgba(26, 26, 26, 0.2)',
+    '30': 'rgba(26, 26, 26, 0.3)',
+    '40': 'rgba(26, 26, 26, 0.4)',
+    '50': 'rgba(26, 26, 26, 0.5)',
+    '60': 'rgba(26, 26, 26, 0.6)',
+    '70': 'rgba(26, 26, 26, 0.7)',
+    '80': 'rgba(26, 26, 26, 0.8)',
+    '90': 'rgba(26, 26, 26, 0.9)'
+};
+/**
+ * @private
+ */
+export const grey12Alpha = {
+    '5': 'rgba(31, 31, 31, 0.05)',
+    '10': 'rgba(31, 31, 31, 0.1)',
+    '20': 'rgba(31, 31, 31, 0.2)',
+    '30': 'rgba(31, 31, 31, 0.3)',
+    '40': 'rgba(31, 31, 31, 0.4)',
+    '50': 'rgba(31, 31, 31, 0.5)',
+    '60': 'rgba(31, 31, 31, 0.6)',
+    '70': 'rgba(31, 31, 31, 0.7)',
+    '80': 'rgba(31, 31, 31, 0.8)',
+    '90': 'rgba(31, 31, 31, 0.9)'
+};
+//# sourceMappingURL=themeDuplicates.js.map

package/dist/dist-esm/react-components/src/theming/themeDuplicates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeDuplicates.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/themeDuplicates.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// These color records are required for createV9Theme\n// For more info, check https://react.fluentui.dev/iframe.html?viewMode=docs&id=concepts-migration-from-v8-components-theme-migration--page#compatible-themes\n\n/**\n * @private\n */\nexport const grey: Record<Greys, string> = {\n  '0': '#000000',\n  '2': '#050505',\n  '4': '#0a0a0a',\n  '6': '#0f0f0f',\n  '8': '#141414',\n  '10': '#1a1a1a',\n  '12': '#1f1f1f',\n  '14': '#242424',\n  '16': '#292929',\n  '18': '#2e2e2e',\n  '20': '#333333',\n  '22': '#383838',\n  '24': '#3d3d3d',\n  '26': '#424242',\n  '28': '#474747',\n  '30': '#4d4d4d',\n  '32': '#525252',\n  '34': '#575757',\n  '36': '#5c5c5c',\n  '38': '#616161',\n  '40': '#666666',\n  '42': '#6b6b6b',\n  '44': '#707070',\n  '46': '#757575',\n  '48': '#7a7a7a',\n  '50': '#808080',\n  '52': '#858585',\n  '54': '#8a8a8a',\n  '56': '#8f8f8f',\n  '58': '#949494',\n  '60': '#999999',\n  '62': '#9e9e9e',\n  '64': '#a3a3a3',\n  '66': '#a8a8a8',\n  '68': '#adadad',\n  '70': '#b3b3b3',\n  '72': '#b8b8b8',\n  '74': '#bdbdbd',\n  '76': '#c2c2c2',\n  '78': '#c7c7c7',\n  '80': '#cccccc',\n  '82': '#d1d1d1',\n  '84': '#d6d6d6',\n  '86': '#dbdbdb',\n  '88': '#e0e0e0',\n  '90': '#e6e6e6',\n  '92': '#ebebeb',\n  '94': '#f0f0f0',\n  '96': '#f5f5f5',\n  '98': '#fafafa',\n  '100': '#ffffff'\n};\n\n/**\n * @private\n */\nexport const whiteAlpha: Record<AlphaColors, string> = {\n  '5': 'rgba(255, 255, 255, 0.05)',\n  '10': 'rgba(255, 255, 255, 0.1)',\n  '20': 'rgba(255, 255, 255, 0.2)',\n  '30': 'rgba(255, 255, 255, 0.3)',\n  '40': 'rgba(255, 255, 255, 0.4)',\n  '50': 'rgba(255, 255, 255, 0.5)',\n  '60': 'rgba(255, 255, 255, 0.6)',\n  '70': 'rgba(255, 255, 255, 0.7)',\n  '80': 'rgba(255, 255, 255, 0.8)',\n  '90': 'rgba(255, 255, 255, 0.9)'\n};\n\n/**\n * @private\n */\nexport const blackAlpha: Record<AlphaColors, string> = {\n  '5': 'rgba(0, 0, 0, 0.05)',\n  '10': 'rgba(0, 0, 0, 0.1)',\n  '20': 'rgba(0, 0, 0, 0.2)',\n  '30': 'rgba(0, 0, 0, 0.3)',\n  '40': 'rgba(0, 0, 0, 0.4)',\n  '50': 'rgba(0, 0, 0, 0.5)',\n  '60': 'rgba(0, 0, 0, 0.6)',\n  '70': 'rgba(0, 0, 0, 0.7)',\n  '80': 'rgba(0, 0, 0, 0.8)',\n  '90': 'rgba(0, 0, 0, 0.9)'\n};\n\n/**\n * @private\n */\nexport const grey10Alpha: Record<AlphaColors, string> = {\n  '5': 'rgba(26, 26, 26, 0.05)',\n  '10': 'rgba(26, 26, 26, 0.1)',\n  '20': 'rgba(26, 26, 26, 0.2)',\n  '30': 'rgba(26, 26, 26, 0.3)',\n  '40': 'rgba(26, 26, 26, 0.4)',\n  '50': 'rgba(26, 26, 26, 0.5)',\n  '60': 'rgba(26, 26, 26, 0.6)',\n  '70': 'rgba(26, 26, 26, 0.7)',\n  '80': 'rgba(26, 26, 26, 0.8)',\n  '90': 'rgba(26, 26, 26, 0.9)'\n};\n\n/**\n * @private\n */\nexport const grey12Alpha: Record<AlphaColors, string> = {\n  '5': 'rgba(31, 31, 31, 0.05)',\n  '10': 'rgba(31, 31, 31, 0.1)',\n  '20': 'rgba(31, 31, 31, 0.2)',\n  '30': 'rgba(31, 31, 31, 0.3)',\n  '40': 'rgba(31, 31, 31, 0.4)',\n  '50': 'rgba(31, 31, 31, 0.5)',\n  '60': 'rgba(31, 31, 31, 0.6)',\n  '70': 'rgba(31, 31, 31, 0.7)',\n  '80': 'rgba(31, 31, 31, 0.8)',\n  '90': 'rgba(31, 31, 31, 0.9)'\n};\n\n/**\n * @private\n */\nexport type Greys =\n  | 0\n  | 2\n  | 4\n  | 6\n  | 8\n  | 10\n  | 12\n  | 14\n  | 16\n  | 18\n  | 20\n  | 22\n  | 24\n  | 26\n  | 28\n  | 30\n  | 32\n  | 34\n  | 36\n  | 38\n  | 40\n  | 42\n  | 44\n  | 46\n  | 48\n  | 50\n  | 52\n  | 54\n  | 56\n  | 58\n  | 60\n  | 62\n  | 64\n  | 66\n  | 68\n  | 70\n  | 72\n  | 74\n  | 76\n  | 78\n  | 80\n  | 82\n  | 84\n  | 86\n  | 88\n  | 90\n  | 92\n  | 94\n  | 96\n  | 98\n  | 100;\n\n/**\n * @private\n */\nexport type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;\n"]}

package/dist/dist-esm/react-components/src/theming/v9ThemeShim.d.ts

@@ -0,0 +1,12 @@
+import { Theme as ThemeV8 } from '@fluentui/react';
+import { Theme as ThemeV9 } from '@fluentui/react-components';
+/**
+ * Creates a v9 theme from a v8 theme and base v9 theme.
+ * FluentUI webLightTheme is used in case if no baseThemeV9 is provided.
+ *
+ * @private
+ */
+export declare const createV9Theme: (themeV8: ThemeV8, baseThemeV9?: ThemeV9 | undefined) => ThemeV9 & {
+    errorText: string;
+};
+//# sourceMappingURL=v9ThemeShim.d.ts.map