botframework-webchat-fluent-theme 4.18.1-main.20240917.4b9342a → 4.18.1-main.20240927.ea7a875

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20240917.4b9342a",
+  "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",
@@ -38,22 +38,24 @@
     "src/**/*"
   ],
   "scripts": {
-    "auditfix": "npm audit fix --legacy-peer-deps || exit 0",
     "build": "tsup",
-    "bump": "npm run bump:prod && npm run bump:dev && npm run bump:auditfix",
-    "bump:auditfix": "npm audit fix --legacy-peer-deps || exit 0",
-    "bump:dev": "if [ `cat package.json | jq -r '.devDependencies | length'` -ne 0 ]; then npm install --legacy-peer-deps $(cat package.json | jq -r '(.pinDependencies // {}) as $p | ((.devDependencies // {}) | keys) | map(. + \"@\" + ($p[.] // [\"latest\"])[0]) | .[]'); fi",
-    "bump:prod": "if [ `cat package.json | jq -r '.dependencies | length'` -ne 0 ]; then npm install --legacy-peer-deps --save-exact $(cat package.json | jq -r '(.pinDependencies // {}) as $p | ((.dependencies // {}) | keys) | map(. + \"@\" + ($p[.] // [\"latest\"])[0]) | .[]'); fi",
+    "bump": "npm run bump:prod && npm run bump:dev && (npm audit fix || exit 0)",
+    "bump:dev": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.devDependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install $PACKAGES_TO_BUMP || true",
+    "bump:prod": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.dependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install --save-exact $PACKAGES_TO_BUMP || true",
     "eslint": "npm run precommit",
-    "postauditfix": "npm run postbump",
-    "postbump": "cat package.json | jq '. + (.dependencies = ((.dependencies + (.localPeerDependencies // {})) | to_entries | sort_by(.key) | from_entries)) | (.devDependencies = ((.devDependencies + (.localPeerDevDependencies // {})) | to_entries | sort_by(.key) | from_entries))' > package-temp.json && mv package-temp.json package.json",
-    "preauditfix": "npm run prebump",
-    "prebump": "cat package.json | jq '(((.localPeerDependencies // {}) | keys | map([\"dependencies\", .])) + ((.localPeerDevDependencies // {}) | keys | map([\"devDependencies\", .]))) as $localPeerPaths | delpaths($localPeerPaths)' > package-temp.json && mv package-temp.json package.json",
+    "postversion": "cat package.json | jq '.version as $V | (.localDependencies // {} | with_entries(select(.value == \"production\") | { key: .key, value: $V })) as $L1 | (.localDependencies // {} | with_entries(select(.value == \"development\") | { key: .key, value: $V })) as $L2 | ((.dependencies // {}) + $L1 | to_entries | sort_by(.key) | from_entries) as $D1 | ((.devDependencies // {}) + $L2 | to_entries | sort_by(.key) | from_entries) as $D2 | . + { dependencies: $D1, devDependencies: $D2 }' > package-temp.json && mv package-temp.json package.json",
     "precommit": "npm run precommit:eslint -- src && npm run precommit:typecheck",
     "precommit:eslint": "../../node_modules/.bin/eslint --report-unused-disable-directives --max-warnings 0",
     "precommit:typecheck": "tsc --project ./src --emitDeclarationOnly false --esModuleInterop true --noEmit --pretty false",
+    "preversion": "cat package.json | jq '(.localDependencies // {} | to_entries | map([if .value == \"production\" then \"dependencies\" else \"devDependencies\" end, .key])) as $P | delpaths($P)' > package-temp.json && mv package-temp.json package.json",
     "start": "npm run build -- --watch"
   },
+  "localDependencies": {
+    "botframework-webchat-api": "production",
+    "botframework-webchat-component": "production",
+    "botframework-webchat-core": "production",
+    "botframework-webchat-styles": "production"
+  },
   "pinDependencies": {
     "@types/react": [
       "16",
@@ -69,9 +71,10 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20240917.4b9342a",
-    "botframework-webchat-component": "4.18.1-main.20240917.4b9342a",
-    "botframework-webchat-core": "4.18.1-main.20240917.4b9342a",
+    "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",
@@ -80,10 +83,5 @@
   },
   "peerDependencies": {
     "react": ">= 16.8.6"
-  },
-  "localPeerDependencies": {
-    "botframework-webchat-api": "0.0.0-0",
-    "botframework-webchat-component": "0.0.0-0",
-    "botframework-webchat-core": "0.0.0-0"
   }
 }

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';