Fix demo site icons

microsoft · Jan 8, 2025 · 1033ae6 · 1033ae6
1 parent 93b0cb2
commit 1033ae6
Show file tree

Hide file tree

Showing 12 changed files with 287 additions and 252 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -20,7 +20,7 @@
         <div id="mainPane"></div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.122.3/fluentui-react.min.js"></script>
         <script src="rooster-min.js"></script>
         <script src="rooster-react-min.js"></script>
         <script src="demo.js"></script>

diff --git a/demo/scripts/utils/cssMonitor.ts b/demo/scripts/utils/cssMonitor.ts
@@ -1,4 +1,4 @@
-import { Stylesheet } from '@fluentui/merge-styles/lib/Stylesheet';
+import { Stylesheet } from '@fluentui/merge-styles';
 
 let isCssMonitorStarted: boolean = false;
 const activeWindows: Window[] = [];

diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
         <div id="mainPane"></div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.122.3/fluentui-react.min.js"></script>
         <script src="scripts/demo.js"></script>
     </body>
 </html>
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
         "publish": "node tools/build.js clean normalize buildcommonjs buildamd buildmjs dts pack packprod builddemo builddoc publish"
     },
     "devDependencies": {
-        "@fluentui/react": "^8.0.0",
+        "@fluentui/react": "8.122.3",
         "@microsoft/loader-load-themed-styles": "1.8.11",
         "@types/color": "3.0.0",
         "@types/dompurify": "2.2.3",

diff --git a/packages/roosterjs-react/lib/emoji/components/EmojiIcon.tsx b/packages/roosterjs-react/lib/emoji/components/EmojiIcon.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@fluentui/react/lib/Utilities';
 import type { Emoji } from '../type/Emoji';
 import type { EmojiPaneStyle } from '../type/EmojiPaneStyles';
-import type { IProcessedStyleSet, IStyleSet } from '@fluentui/react/lib/Styling';
+import type { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 /**
  * @internal
  * Emoji icon data
@@ -11,7 +11,7 @@ export interface EmojiIconProps {
     id: string;
     emoji: Emoji;
     strings: Record<string, string>;
-    classNames: IProcessedStyleSet<IStyleSet<EmojiPaneStyle>>;
+    classNames: IProcessedStyleSet<EmojiPaneStyle>;
     onClick?: (e: React.MouseEvent<EventTarget>) => void;
     onMouseOver?: (e: React.MouseEvent<EventTarget>) => void;
     onFocus?: React.FocusEventHandler<HTMLButtonElement>;

diff --git a/packages/roosterjs-react/lib/emoji/components/EmojiNavBar.tsx b/packages/roosterjs-react/lib/emoji/components/EmojiNavBar.tsx
@@ -7,7 +7,7 @@ import { Icon } from '@fluentui/react/lib/Icon';
 import { TooltipHost } from '@fluentui/react/lib/Tooltip';
 import type { EmojiFamilyKeys } from '../utils/emojiList';
 import type { EmojiPaneStyle } from '../type/EmojiPaneStyles';
-import type { IProcessedStyleSet, IStyleSet } from '@fluentui/react/lib/Styling';
+import type { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 
 /**
  * @internal
@@ -18,7 +18,7 @@ export interface EmojiNavBarProps {
     currentSelected?: string;
     getTabId?: (selected: EmojiFamilyKeys) => string;
     strings: Record<string, string>;
-    classNames: IProcessedStyleSet<IStyleSet<EmojiPaneStyle>>;
+    classNames: IProcessedStyleSet<EmojiPaneStyle>;
 }
 
 /**

diff --git a/packages/roosterjs-react/lib/emoji/components/EmojiPane.tsx b/packages/roosterjs-react/lib/emoji/components/EmojiPane.tsx
@@ -11,6 +11,8 @@ import { mergeStyleSets } from '@fluentui/react/lib/Styling';
 import { searchEmojis } from '../utils/searchEmojis';
 import { TextField } from '@fluentui/react/lib/TextField';
 import { useTheme } from '@fluentui/react/lib/Theme';
+import type { EmojiPaneStyle } from '../type/EmojiPaneStyles';
+import type { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 import type { EmojiFamilyKeys } from '../utils/emojiList';
 import type { EmojiIconProps } from './EmojiIcon';
 import type { EmojiNavBarProps } from './EmojiNavBar';
@@ -607,149 +609,152 @@ const calcPaneWidth = () => {
     return paneWidth.toString() + 'px';
 };
 
-const getEmojiPaneClassName = memoizeFunction((theme: Theme) => {
-    const palette = theme.palette;
-    return mergeStyleSets({
-        quickPicker: {
-            overflowY: 'hidden',
-            ':after': {
-                content: '',
-                position: 'absolute',
-                left: '0px',
-                top: '0px',
-                bottom: '0px',
-                right: '0px',
-                zIndex: 1,
-                borderWidth: '1px',
-                borderStyle: 'solid',
-                borderColor: 'rgb(255, 255, 255)',
-                borderImage: 'initial',
-                outline: 'rgb(102, 102, 102) solid 1px',
+const getEmojiPaneClassName = memoizeFunction(
+    (theme: Theme): IProcessedStyleSet<EmojiPaneStyle> => {
+        const palette = theme.palette;
+        const styles: EmojiPaneStyle = {
+            quickPicker: {
+                overflowY: 'hidden',
+                ':after': {
+                    content: '',
+                    position: 'absolute',
+                    left: '0px',
+                    top: '0px',
+                    bottom: '0px',
+                    right: '0px',
+                    zIndex: 1,
+                    borderWidth: '1px',
+                    borderStyle: 'solid',
+                    borderColor: 'rgb(255, 255, 255)',
+                    borderImage: 'initial',
+                    outline: 'rgb(102, 102, 102) solid 1px',
+                },
             },
-        },
 
-        tooltip: {
-            padding: '8px',
-        },
+            tooltip: {
+                padding: '8px',
+            },
 
-        emojiTextInput: {
-            padding: '6px',
-        },
+            emojiTextInput: {
+                padding: '6px',
+            },
 
-        partialList: {
-            maxHeight: calcMaxHeight(),
-            overflow: 'hidden',
-            overflowY: 'scroll',
-        },
+            partialList: {
+                maxHeight: calcMaxHeight(),
+                overflow: 'hidden',
+                overflowY: 'scroll',
+            },
 
-        fullListContent: {
-            width: calcPaneWidth(),
-        },
+            fullListContent: {
+                width: calcPaneWidth(),
+            },
 
-        fullListBody: {
-            maxHeight: calcMaxHeight(),
-            overflow: 'hidden',
-            overflowY: 'scroll',
-            height: calcMaxHeight(),
-        },
+            fullListBody: {
+                maxHeight: calcMaxHeight(),
+                overflow: 'hidden',
+                overflowY: 'scroll',
+                height: calcMaxHeight(),
+            },
 
-        fullList: {
-            position: 'relative',
-        },
+            fullList: {
+                position: 'relative',
+            },
 
-        roosterEmojiPane: {
-            padding: '1px',
-            background: palette.white,
-        },
+            roosterEmojiPane: {
+                padding: '1px',
+                background: palette.white,
+            },
 
-        emoji: {
-            fontSize: '18px',
-            width: '40px',
-            height: '40px',
-            border: '0',
-            position: 'relative',
-            background: palette.white,
-            transition: 'backgorund 0.5s ease-in-out',
-        },
+            emoji: {
+                fontSize: '18px',
+                width: '40px',
+                height: '40px',
+                border: '0',
+                position: 'relative',
+                background: palette.white,
+                transition: 'backgorund 0.5s ease-in-out',
+            },
 
-        emojiSelected: {
-            background: palette.neutralLight,
-        },
+            emojiSelected: {
+                background: palette.neutralLight,
+            },
 
-        navBar: {
-            top: '-1px',
-            zIndex: 10,
-            position: 'sticky',
-        },
+            navBar: {
+                top: '-1px',
+                zIndex: 10,
+                position: 'sticky',
+            },
 
-        navBarTooltip: {
-            display: 'inline-block',
-        },
+            navBarTooltip: {
+                display: 'inline-block',
+            },
 
-        navBarButton: {
-            height: '40px',
-            width: '40px',
-            border: '0',
-            borderBottom: 'solid 1px',
-            padding: 0,
-            marginBottom: 0,
-            display: 'inline-block',
-            color: palette.themeDark,
-            background: palette.white,
-            '&:hover': {
-                cursor: 'default',
+            navBarButton: {
+                height: '40px',
+                width: '40px',
+                border: '0',
+                borderBottom: 'solid 1px',
+                padding: 0,
+                marginBottom: 0,
+                display: 'inline-block',
+                color: palette.themeDark,
+                background: palette.white,
+                '&:hover': {
+                    cursor: 'default',
+                },
             },
-        },
 
-        selected: {
-            borderBottom: '2px solid',
-            borderBottomColor: palette.themeDark,
-        },
+            selected: {
+                borderBottom: '2px solid',
+                borderBottomColor: palette.themeDark,
+            },
 
-        statusBar: {
-            borderTop: 'solid 1px',
-            height: '50px',
-            overflow: 'hidden',
-            position: 'relative',
-            background: palette.white,
-        },
+            statusBar: {
+                borderTop: 'solid 1px',
+                height: '50px',
+                overflow: 'hidden',
+                position: 'relative',
+                background: palette.white,
+            },
 
-        statusBarIcon: {
-            padding: '4px',
-            fontSize: '25px',
-            display: 'inline-block',
-            fontStyle: 'normal',
-            fontWeight: 'normal',
-            lineHeight: '40px',
-        },
+            statusBarIcon: {
+                padding: '4px',
+                fontSize: '25px',
+                display: 'inline-block',
+                fontStyle: 'normal',
+                fontWeight: 'normal',
+                lineHeight: '40px',
+            },
 
-        statusBarDetailsContainer: {
-            padding: '0 4px',
-            lineHeight: '50px',
-            position: 'absolute',
-            display: 'inline-block',
-            left: '40px',
-            right: '0',
-            top: '0',
-        },
+            statusBarDetailsContainer: {
+                padding: '0 4px',
+                lineHeight: '50px',
+                position: 'absolute',
+                display: 'inline-block',
+                left: '40px',
+                right: '0',
+                top: '0',
+            },
 
-        statusBarDetails: {
-            fontWeight: 'bold',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-        },
+            statusBarDetails: {
+                fontWeight: 'bold',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+            },
 
-        statusBarNoResultDetailsContainer: {
-            lineHeight: '50px',
-            position: 'absolute',
-            display: 'inline-block',
-            top: '0',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            left: '0',
-            padding: '0 8px',
-        },
-    });
-});
+            statusBarNoResultDetailsContainer: {
+                lineHeight: '50px',
+                position: 'absolute',
+                display: 'inline-block',
+                top: '0',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                left: '0',
+                padding: '0 8px',
+            },
+        };
+        return mergeStyleSets(styles);
+    }
+);
diff --git a/packages/roosterjs-react/lib/emoji/components/EmojiStatusBar.tsx b/packages/roosterjs-react/lib/emoji/components/EmojiStatusBar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TooltipHost, TooltipOverflowMode } from '@fluentui/react/lib/Tooltip';
 import type { Emoji } from '../type/Emoji';
 import type { EmojiPaneStyle } from '../type/EmojiPaneStyles';
-import type { IProcessedStyleSet, IStyleSet } from '@fluentui/react/lib/Styling';
+import type { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 /**
  * @internal
  * Emoji Status Bar data
@@ -11,7 +11,7 @@ export interface EmojiStatusBarProps {
     emoji: Emoji;
     strings: Record<string, string>;
     hasResult: boolean;
-    classNames: IProcessedStyleSet<IStyleSet<EmojiPaneStyle>>;
+    classNames: IProcessedStyleSet<EmojiPaneStyle>;
 }
 
 const NO_SUGGESTIONS = 'emjDNoSuggetions';