Remove public API usage of ComponentSlotStyle and redefine type inter…

…nally (#2996)
Azure · Apr 28, 2023 · f3d7805 · f3d7805
1 parent 4cc7fdc
commit f3d7805
Show file tree

Hide file tree

Showing 15 changed files with 51 additions and 9 deletions.
diff --git a/change-beta/@azure-communication-react-b307e3ba-14eb-486a-91d1-ba42b8ea2eb0.json b/change-beta/@azure-communication-react-b307e3ba-14eb-486a-91d1-ba42b8ea2eb0.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Remove public API usage of ComponentSlotStyle and redefine type internally",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-b307e3ba-14eb-486a-91d1-ba42b8ea2eb0.json b/change/@azure-communication-react-b307e3ba-14eb-486a-91d1-ba42b8ea2eb0.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Remove public API usage of ComponentSlotStyle and redefine type internally",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/communication-react/review/beta/communication-react.api.md b/packages/communication-react/review/beta/communication-react.api.md
@@ -31,7 +31,6 @@ import { CommunicationIdentifierKind } from '@azure/communication-common';
 import { CommunicationTokenCredential } from '@azure/communication-common';
 import { CommunicationUserIdentifier } from '@azure/communication-common';
 import { CommunicationUserKind } from '@azure/communication-common';
-import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { CreateViewOptions } from '@azure/communication-calling';
 import { DeviceAccess } from '@azure/communication-calling';
 import { DeviceManager } from '@azure/communication-calling';
@@ -50,6 +49,7 @@ import { IMessageBarProps } from '@fluentui/react';
 import { IncomingCall } from '@azure/communication-calling';
 import { IPersonaStyleProps } from '@fluentui/react';
 import { IPersonaStyles } from '@fluentui/react';
+import { IRawStyle } from '@fluentui/react';
 import { IRenderFunction } from '@fluentui/react';
 import { IStyle } from '@fluentui/react';
 import { IStyleFunctionOrObject } from '@fluentui/react';
@@ -1765,6 +1765,9 @@ export interface ComponentLocale {
 // @public
 export type ComponentProps<Component extends (props: any) => JSX.Element> = ChatReturnProps<Component> extends never ? CallingReturnProps<Component> extends never ? undefined : CallingReturnProps<Component> : ChatReturnProps<Component>;
 
+// @public
+export type ComponentSlotStyle = Omit<IRawStyle, 'animation'>;
+
 // @public
 export interface ComponentStrings {
     BrowserPermissionDenied: BrowserPermissionDeniedStrings;

diff --git a/packages/communication-react/review/stable/communication-react.api.md b/packages/communication-react/review/stable/communication-react.api.md
@@ -26,7 +26,6 @@ import { CommunicationIdentifierKind } from '@azure/communication-common';
 import { CommunicationTokenCredential } from '@azure/communication-common';
 import { CommunicationUserIdentifier } from '@azure/communication-common';
 import { CommunicationUserKind } from '@azure/communication-common';
-import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { CreateViewOptions } from '@azure/communication-calling';
 import { DeviceAccess } from '@azure/communication-calling';
 import { DeviceManager } from '@azure/communication-calling';
@@ -40,6 +39,7 @@ import { IContextualMenuStyles } from '@fluentui/react';
 import { IMessageBarProps } from '@fluentui/react';
 import { IPersonaStyleProps } from '@fluentui/react';
 import { IPersonaStyles } from '@fluentui/react';
+import { IRawStyle } from '@fluentui/react';
 import { IRenderFunction } from '@fluentui/react';
 import { IStyle } from '@fluentui/react';
 import { IStyleFunctionOrObject } from '@fluentui/react';
@@ -1204,6 +1204,9 @@ export interface ComponentLocale {
 // @public
 export type ComponentProps<Component extends (props: any) => JSX.Element> = ChatReturnProps<Component> extends never ? CallingReturnProps<Component> extends never ? undefined : CallingReturnProps<Component> : ChatReturnProps<Component>;
 
+// @public
+export type ComponentSlotStyle = Omit<IRawStyle, 'animation'>;
+
 // @public
 export interface ComponentStrings {
     cameraButton: CameraButtonStrings;

diff --git a/packages/communication-react/src/index.ts b/packages/communication-react/src/index.ts
@@ -172,6 +172,7 @@ export type {
   ChatMessage,
   CommunicationParticipant,
   ComponentLocale,
+  ComponentSlotStyle,
   ComponentStrings,
   ContentSystemMessage,
   ControlBarButtonProps,

diff --git a/packages/react-components/review/beta/react-components.api.md b/packages/react-components/review/beta/react-components.api.md
@@ -6,7 +6,6 @@
 
 /// <reference types="react" />
 
-import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { IButtonProps } from '@fluentui/react';
 import { IButtonStyles } from '@fluentui/react';
 import { IContextualMenuItem } from '@fluentui/react';
@@ -21,6 +20,7 @@ import { IMessageBarProps } from '@fluentui/react';
 import { IModalProps } from '@fluentui/react';
 import { IPersonaStyleProps } from '@fluentui/react';
 import { IPersonaStyles } from '@fluentui/react';
+import { IRawStyle } from '@fluentui/react';
 import { IRenderFunction } from '@fluentui/react';
 import { IStyle } from '@fluentui/react';
 import { IStyleFunctionOrObject } from '@fluentui/react';
@@ -585,6 +585,9 @@ export interface ComponentLocale {
     strings: ComponentStrings;
 }
 
+// @public
+export type ComponentSlotStyle = Omit<IRawStyle, 'animation'>;
+
 // @public
 export interface ComponentStrings {
     BrowserPermissionDenied: BrowserPermissionDeniedStrings;

diff --git a/packages/react-components/review/stable/react-components.api.md b/packages/react-components/review/stable/react-components.api.md
@@ -6,7 +6,6 @@
 
 /// <reference types="react" />
 
-import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { IButtonProps } from '@fluentui/react';
 import { IButtonStyles } from '@fluentui/react';
 import { IContextualMenuItem } from '@fluentui/react';
@@ -19,6 +18,7 @@ import { IMessageBarProps } from '@fluentui/react';
 import { IModalProps } from '@fluentui/react';
 import { IPersonaStyleProps } from '@fluentui/react';
 import { IPersonaStyles } from '@fluentui/react';
+import { IRawStyle } from '@fluentui/react';
 import { IRenderFunction } from '@fluentui/react';
 import { IStyle } from '@fluentui/react';
 import { IStyleFunctionOrObject } from '@fluentui/react';
@@ -254,6 +254,9 @@ export interface ComponentLocale {
     strings: ComponentStrings;
 }
 
+// @public
+export type ComponentSlotStyle = Omit<IRawStyle, 'animation'>;
+
 // @public
 export interface ComponentStrings {
     cameraButton: CameraButtonStrings;

diff --git a/packages/react-components/src/components/ChatMessage/ChatMessageComponent.tsx b/packages/react-components/src/components/ChatMessage/ChatMessageComponent.tsx
@@ -1,7 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { _formatString } from '@internal/acs-ui-common';
 import React, { useCallback, useState } from 'react';
 import { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';
@@ -13,6 +12,7 @@ import { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMes
 import { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';
 /* @conditional-compile-remove(at-mention) */
 import { AtMentionDisplayOptions } from '../AtMentionFlyout';
+import { ComponentSlotStyle } from '../../types/ComponentSlotStyle';
 
 type ChatMessageComponentProps = {
   message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;

diff --git a/packages/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx b/packages/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 import { IStyle, mergeStyles } from '@fluentui/react';
-import { Chat, Text, ComponentSlotStyle } from '@fluentui/react-northstar';
+import { Chat, Text } from '@fluentui/react-northstar';
 import { _formatString } from '@internal/acs-ui-common';
 import React, { useCallback, useRef, useState } from 'react';
 import {
@@ -29,6 +29,7 @@ import { _FileDownloadCards, FileDownloadHandler } from '../FileDownloadCards';
 import { ComponentLocale, useLocale } from '../../localization';
 /* @conditional-compile-remove(at-mention) */
 import { AtMentionDisplayOptions } from '../AtMentionFlyout';
+import { ComponentSlotStyle } from '../../types/ComponentSlotStyle';
 
 type ChatMessageComponentAsMessageBubbleProps = {
   message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;

diff --git a/packages/react-components/src/components/MessageThread.tsx b/packages/react-components/src/components/MessageThread.tsx
@@ -39,7 +39,6 @@ import {
   IPersona,
   Theme
 } from '@fluentui/react';
-import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { LiveAnnouncer } from 'react-aria-live';
 import { delay } from './utils/delay';
 import {
@@ -72,6 +71,7 @@ import { AttachmentDownloadResult } from './FileDownloadCards';
 import { useTheme } from '../theming';
 /* @conditional-compile-remove(at-mention) */
 import { AtMentionOptions } from './AtMentionFlyout';
+import { ComponentSlotStyle } from '../types/ComponentSlotStyle';
 
 const isMessageSame = (first: ChatMessage, second: ChatMessage): boolean => {
   return (

diff --git a/packages/react-components/src/components/SystemMessage.tsx b/packages/react-components/src/components/SystemMessage.tsx
@@ -2,9 +2,9 @@
 // Licensed under the MIT license.
 
 import { IStyle, FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';
-import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import React from 'react';
 import { systemMessageIconStyle } from './styles/SystemMessage.styles';
+import { ComponentSlotStyle } from '../types/ComponentSlotStyle';
 
 /**
  * Todo: We need to add more types of system messages that we support.

diff --git a/packages/react-components/src/components/styles/MessageThread.styles.ts b/packages/react-components/src/components/styles/MessageThread.styles.ts
@@ -2,9 +2,9 @@
 // Licensed under the MIT license.
 
 import { IButtonStyles, mergeStyles, Theme } from '@fluentui/react';
-import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { CSSProperties } from 'react';
 import { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';
+import { ComponentSlotStyle } from '../../types/ComponentSlotStyle';
 
 // Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI
 // that can contain a message and a timestamp.

diff --git a/packages/react-components/src/index.ts b/packages/react-components/src/index.ts
@@ -25,6 +25,7 @@ export type {
   CallParticipantListParticipant,
   ChatMessage,
   CommunicationParticipant,
+  ComponentSlotStyle,
   ContentSystemMessage,
   CreateVideoStreamViewResult,
   CustomAvatarOptions,

diff --git a/packages/react-components/src/types/ComponentSlotStyle.ts b/packages/react-components/src/types/ComponentSlotStyle.ts
@@ -0,0 +1,12 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { IRawStyle } from '@fluentui/react';
+
+/**
+ * ComponentSlotStyle is a \@fluentui/react-northstar type.
+ * As we have moved away from this package we have used the more generic IRawStyle type from fluent for interoperability.
+ *
+ * @public
+ */
+export type ComponentSlotStyle = Omit<IRawStyle, 'animation'>;
diff --git a/packages/react-components/src/types/index.ts b/packages/react-components/src/types/index.ts
@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 
 export * from './ChatMessage';
+export * from './ComponentSlotStyle';
 export * from './CustomStylesProps';
 export * from './VideoGalleryParticipant';
 export * from './CommunicationParticipant';