botframework-webchat-fluent-theme 4.18.1-main.20240924.f09c8c5 → 4.18.1-main.20240927.ea7a875

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20240924.f09c8c5",
+  "version": "4.18.1-main.20240927.ea7a875",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -53,7 +53,8 @@
   "localDependencies": {
     "botframework-webchat-api": "production",
     "botframework-webchat-component": "production",
-    "botframework-webchat-core": "production"
+    "botframework-webchat-core": "production",
+    "botframework-webchat-styles": "production"
   },
   "pinDependencies": {
     "@types/react": [
@@ -70,9 +71,10 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20240924.f09c8c5",
-    "botframework-webchat-component": "4.18.1-main.20240924.f09c8c5",
-    "botframework-webchat-core": "4.18.1-main.20240924.f09c8c5",
+    "botframework-webchat-api": "4.18.1-main.20240927.ea7a875",
+    "botframework-webchat-component": "4.18.1-main.20240927.ea7a875",
+    "botframework-webchat-core": "4.18.1-main.20240927.ea7a875",
+    "botframework-webchat-styles": "4.18.1-main.20240927.ea7a875",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/components/dropZone/DropZone.tsx

@@ -17,7 +17,7 @@ const handleDragOver: DragEventHandler<HTMLDivElement> = event => {
 
 // Notes: For files dragging from outside of browser, it only tell us if it is a "File" instead of "text/plain" or "text/uri-list".
 //        For images dragging inside of browser, it only tell us that it is "text/plain", "text/uri-list" and "text/html". But not "image/*".
-//        So we cannot whitelist what is droppable.
+//        So we cannot allowlist what is droppable.
 //        We are using case-insensitive of type "files" so we can drag in WebDriver.
 const isFilesTransferEvent = (event: DragEvent) =>
   !!event.dataTransfer?.types?.some(type => type.toLowerCase() === 'files');

package/src/components/preChatActivity/PreChatMessageActivity.module.css

@@ -42,11 +42,13 @@
   font-weight: var(--webchat-fontWeightSemibold);
   line-height: var(--webchat-lineHeightHero700);
   margin: 0;
+  overflow-wrap: anywhere;
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__body-subtitle {
   font-size: var(--webchat-fontSizeBase300);
   line-height: var(--webchat-lineHeightBase300);
+  overflow-wrap: anywhere;
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__toolbar {

package/src/env.d.ts

@@ -1,7 +1 @@
-// CSS modules
-type CSSModuleClasses = { readonly [key: string]: any };
-
-declare module '*.module.css' {
-  const classes: CSSModuleClasses;
-  export default classes;
-}
+/// <reference types="botframework-webchat-styles/env" />

package/src/external.umd/botframework-webchat-component/decorator.ts

@@ -0,0 +1 @@
+module.exports = (globalThis as any).WebChat.decorator;

package/src/index.ts

@@ -1,7 +1,6 @@
 import { injectMetaTag } from 'inject-meta-tag';
 
 import FluentThemeProvider from './private/FluentThemeProvider';
-import { injectStyle } from './styles';
 import testIds from './testIds';
 
 const buildTool = process.env['build_tool'];
@@ -15,6 +14,4 @@ injectMetaTag(
   `version=${process.env['npm_package_version']}; build-tool=${process.env['build_tool']}; module-format=${process.env['module_format']}`
 );
 
-injectStyle();
-
 export { FluentThemeProvider, buildInfo, testIds };

package/src/private/FluentThemeProvider.tsx

@@ -1,5 +1,6 @@
 import type { ActivityMiddleware } from 'botframework-webchat-api';
 import { Components } from 'botframework-webchat-component';
+import { WebChatDecorator } from 'botframework-webchat-component/decorator';
 import React, { memo, type ReactNode } from 'react';
 
 import { ActivityDecorator } from '../components/activity';
@@ -7,8 +8,8 @@ import { isPreChatMessageActivity, PreChatMessageActivity } from '../components/
 import { PrimarySendBox } from '../components/sendBox';
 import { TelephoneKeypadProvider } from '../components/telephoneKeypad';
 import { WebChatTheme } from '../components/theme';
+import { createStyles } from '../styles';
 import VariantComposer, { VariantList } from './VariantComposer';
-import { FluentThemeDecorator } from '../components/decorator';
 import { isLinerMessageActivity, LinerMessageActivity } from '../components/linerActivity';
 
 const { ThemeProvider } = Components;
@@ -40,12 +41,14 @@ const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
 
 const sendBoxMiddleware = [() => () => () => PrimarySendBox];
 
+const styles = createStyles();
+
 const FluentThemeProvider = ({ children, variant = 'fluent' }: Props) => (
   <VariantComposer variant={variant}>
     <WebChatTheme>
       <TelephoneKeypadProvider>
-        <ThemeProvider activityMiddleware={activityMiddleware} sendBoxMiddleware={sendBoxMiddleware}>
-          <FluentThemeDecorator>{children}</FluentThemeDecorator>
+        <ThemeProvider activityMiddleware={activityMiddleware} sendBoxMiddleware={sendBoxMiddleware} styles={styles}>
+          <WebChatDecorator>{children}</WebChatDecorator>
         </ThemeProvider>
       </TelephoneKeypadProvider>
     </WebChatTheme>

package/src/styles/createStyles.ts

@@ -0,0 +1,5 @@
+import { makeCreateStyles } from 'botframework-webchat-styles';
+
+export const fluentStyleContent = '@--FLUENT-STYLES-CONTENT--@';
+
+export default makeCreateStyles(fluentStyleContent);

package/src/styles/index.ts

@@ -1,5 +1,5 @@
-import injectStyle from './injectStyle';
+import createStyles from './createStyles';
 import useStyles from './useStyles';
 import useVariantClassName from './useVariantClassName';
 
-export { injectStyle, useStyles, useVariantClassName };
+export { createStyles, useStyles, useVariantClassName };

package/src/styles/useStyles.ts

@@ -1,19 +1,2 @@
-import { useMemo } from 'react';
-
-function useStyles<T extends CSSModuleClasses>(styles: T): T {
-  // @ts-expect-error: entries/fromEntries don't allow to specify keys type
-  return useMemo(
-    () =>
-      Object.freeze(
-        Object.fromEntries(
-          Object.entries(styles).map(([baseClassName, resultClassName]) => [
-            baseClassName,
-            `${baseClassName} ${resultClassName}`
-          ])
-        )
-      ),
-    [styles]
-  );
-}
-
-export default useStyles;
+// TODO: refactor after initial approval gained
+export { useStyles as default } from 'botframework-webchat-styles/react';

package/src/tsconfig.json

@@ -1,12 +1,14 @@
 {
-  "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "checkJs": false,
-    "jsx": "react",
-    "moduleResolution": "Bundler",
-    "skipLibCheck": true,
-    "target": "ESNext",
-    "plugins": [{ "name": "typescript-plugin-css-modules" }]
-  },
-  "extends": "@tsconfig/strictest/tsconfig.json"
+	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
+		"checkJs": false,
+		"jsx": "react",
+		"moduleResolution": "Bundler",
+		"skipLibCheck": true,
+		"target": "ESNext"
+	},
+	"extends": [
+		"@tsconfig/strictest/tsconfig.json",
+		"botframework-webchat-styles/tsconfig.json"
+	]
 }

package/src/components/decorator/index.ts

@@ -1 +0,0 @@
-export { default as FluentThemeDecorator } from './private/Decorator';