Rename *CSS -> *Stylesheet

Author: compulim

packages/component/src/Composer.tsx

@@ -50,7 +50,7 @@ import createDefaultSendBoxMiddleware from './SendBox/createMiddleware';
 import createDefaultSendBoxToolbarMiddleware from './SendBoxToolbar/createMiddleware';
 import createStyleSet from './Styles/createStyleSet';
 import CustomPropertiesContainer from './Styles/CustomPropertiesContainer';
-import ComponentCSS from './stylesheet/ComponentCSS';
+import ComponentStylesheet from './stylesheet/ComponentStylesheet';
 import { type ContextOf } from './types/ContextOf';
 import { type FocusTranscriptInit } from './types/internal/FocusTranscriptInit';
 import addTargetBlankToHyperlinksMarkdown from './Utils/addTargetBlankToHyperlinksMarkdown';
@@ -459,7 +459,7 @@ const Composer = ({
       typingIndicatorMiddleware={patchedTypingIndicatorMiddleware}
       {...composerProps}
     >
-      <ComponentCSS nonce={nonce} />
+      <ComponentStylesheet nonce={nonce} />
       <StyleToEmotionObjectComposer nonce={nonce}>
         <HTMLContentTransformComposer middleware={htmlContentTransformMiddleware}>
           <ReducedMotionComposer>

packages/component/src/decorator/private/WebChatDecorator.tsx

@@ -8,7 +8,7 @@ import {
 import React, { Fragment, memo } from 'react';
 import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
-import DecoratorCSS from '../stylesheet/DecoratorCSS';
+import DecoratorStylesheet from '../stylesheet/DecoratorStylesheet';
 import BorderFlair from './BorderFlair';
 import BorderLoader from './BorderLoader';
 
@@ -44,7 +44,7 @@ function WebChatDecorator(props: WebChatDecoratorProps) {
 
   return (
     <Fragment>
-      <DecoratorCSS nonce={nonce} />
+      <DecoratorStylesheet nonce={nonce} />
       <DecoratorComposer middleware={middleware}>{children}</DecoratorComposer>
     </Fragment>
   );

…rc/decorator/stylesheet/DecoratorCSS.tsx …rator/stylesheet/DecoratorStylesheet.tsxpackages/component/src/decorator/stylesheet/DecoratorCSS.tsx renamed to packages/component/src/decorator/stylesheet/DecoratorStylesheet.tsx packages/component/src/decorator/stylesheet/DecoratorCSS.tsx renamed to packages/component/src/decorator/stylesheet/DecoratorStylesheet.tsx

@@ -1,4 +1,4 @@
-// TODO: [P2] This component can be replaced by `bindProps(InjectCSS)({ cssContent, identifier })`.
+// TODO: [P2] This component can be replaced by `bindProps`.
 import { InjectStyleElements } from '@msinternal/botframework-webchat-component-inject-style-elements';
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { useStyleOptions } from 'botframework-webchat-api/hook';
@@ -7,27 +7,27 @@ import { never, object, optional, pipe, readonly, string, undefinedable, type In
 
 import createDecoratorStyleElements from './createDecoratorStyleElements';
 
-const decoratorCSSPropsSchema = pipe(
+const decoratorStylesheetPropsSchema = pipe(
   object({
     children: optional(never()),
     nonce: undefinedable(string())
   }),
   readonly()
 );
 
-type DecoratorCSSProps = InferInput<typeof decoratorCSSPropsSchema>;
+type DecoratorStylesheetProps = InferInput<typeof decoratorStylesheetPropsSchema>;
 
 const styleElements = createDecoratorStyleElements('component/decorator');
 
-function DecoratorCSS(props: DecoratorCSSProps) {
-  const { nonce } = validateProps(decoratorCSSPropsSchema, props);
+function DecoratorStylesheet(props: DecoratorStylesheetProps) {
+  const { nonce } = validateProps(decoratorStylesheetPropsSchema, props);
 
   const [{ stylesRoot }] = useStyleOptions();
 
   return <InjectStyleElements at={stylesRoot} nonce={nonce} styleElements={styleElements} />;
 }
 
-DecoratorCSS.displayName = 'DecoratorCSS';
+DecoratorStylesheet.displayName = 'DecoratorStylesheet';
 
-export default memo(DecoratorCSS as FunctionComponent<DecoratorCSSProps>);
-export { decoratorCSSPropsSchema, type DecoratorCSSProps };
+export default memo(DecoratorStylesheet as FunctionComponent<DecoratorStylesheetProps>);
+export { decoratorStylesheetPropsSchema, type DecoratorStylesheetProps };

…omponent/src/stylesheet/ComponentCSS.tsx …t/src/stylesheet/ComponentStylesheet.tsxpackages/component/src/stylesheet/ComponentCSS.tsx renamed to packages/component/src/stylesheet/ComponentStylesheet.tsx packages/component/src/stylesheet/ComponentCSS.tsx renamed to packages/component/src/stylesheet/ComponentStylesheet.tsx

@@ -1,4 +1,4 @@
-// TODO: [P2] This component can be replaced by `bindProps(InjectCSS)({ cssContent, identifier })`.
+// TODO: [P2] This component can be replaced by `bindProps`.
 import { InjectStyleElements } from '@msinternal/botframework-webchat-component-inject-style-elements';
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { useStyleOptions } from 'botframework-webchat-api/hook';
@@ -7,27 +7,27 @@ import { never, object, optional, pipe, readonly, string, undefinedable, type In
 
 import createComponentStyleElements from './createComponentStyleElements';
 
-const componentCSSPropsSchema = pipe(
+const componentStylesheetPropsSchema = pipe(
   object({
     children: optional(never()),
     nonce: undefinedable(string())
   }),
   readonly()
 );
 
-type ComponentCSSProps = InferInput<typeof componentCSSPropsSchema>;
+type ComponentStylesheetProps = InferInput<typeof componentStylesheetPropsSchema>;
 
 const styleElements = createComponentStyleElements('component');
 
-function ComponentCSS(props: ComponentCSSProps) {
-  const { nonce } = validateProps(componentCSSPropsSchema, props);
+function ComponentStylesheet(props: ComponentStylesheetProps) {
+  const { nonce } = validateProps(componentStylesheetPropsSchema, props);
 
   const [{ stylesRoot }] = useStyleOptions();
 
   return <InjectStyleElements at={stylesRoot} nonce={nonce} styleElements={styleElements} />;
 }
 
-ComponentCSS.displayName = 'ComponentCSS';
+ComponentStylesheet.displayName = 'ComponentStylesheet';
 
-export default memo(ComponentCSS as FunctionComponent<ComponentCSSProps>);
-export { componentCSSPropsSchema, type ComponentCSSProps };
+export default memo(ComponentStylesheet as FunctionComponent<ComponentStylesheetProps>);
+export { componentStylesheetPropsSchema, type ComponentStylesheetProps };