Merge pull request pnp#1857 from pnp/spfx-1-19

Spfx 1 19
IRRDC · Aug 1, 2024 · 3ab7f5e · 3ab7f5e
2 parents 0bd23c1 + 3cc5d98
commit 3ab7f5e
Show file tree

Hide file tree

Showing 10 changed files with 4,567 additions and 2,399 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -10,6 +10,7 @@ root = true
 # change these settings to your own preference
 indent_style = space
 indent_size = 2
+quote_type = single
 
 # we recommend you to keep these unchanged
 end_of_line = lf

diff --git a/.yo-rc.json b/.yo-rc.json
@@ -1,6 +1,6 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.18.2",
+    "version": "1.19.0",
     "libraryName": "sp-dev-fx-controls-react",
     "libraryId": "92b1e52c-a5fa-490a-bcf4-76080f39442c",
     "environment": "spo",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,23 +35,22 @@
     "@fluentui/styles": "0.66.5",
     "@fluentui/theme": "^2.6.6",
     "@iconify/react": "^4.1.1",
-    "@microsoft/decorators": "1.18.2",
+    "@microsoft/decorators": "1.19.0",
     "@microsoft/mgt-react": "3.1.3",
     "@microsoft/mgt-spfx": "3.1.3",
-    "@microsoft/sp-adaptive-card-extension-base": "1.18.2",
-    "@microsoft/sp-application-base": "1.18.2",
-    "@microsoft/sp-component-base": "1.18.2",
-    "@microsoft/sp-core-library": "1.18.2",
-    "@microsoft/sp-dialog": "1.18.2",
-    "@microsoft/sp-extension-base": "1.18.2",
-    "@microsoft/sp-http": "1.18.2",
-    "@microsoft/sp-listview-extensibility": "1.18.2",
-    "@microsoft/sp-loader": "1.18.2",
-    "@microsoft/sp-lodash-subset": "1.18.2",
-    "@microsoft/sp-office-ui-fabric-core": "1.18.2",
-    "@microsoft/sp-page-context": "1.18.2",
-    "@microsoft/sp-property-pane": "1.18.2",
-    "@microsoft/sp-webpart-base": "1.18.2",
+    "@microsoft/sp-application-base": "1.19.0",
+    "@microsoft/sp-component-base": "1.19.0",
+    "@microsoft/sp-core-library": "1.19.0",
+    "@microsoft/sp-dialog": "1.19.0",
+    "@microsoft/sp-extension-base": "1.19.0",
+    "@microsoft/sp-http": "1.19.0",
+    "@microsoft/sp-listview-extensibility": "1.19.0",
+    "@microsoft/sp-loader": "1.19.0",
+    "@microsoft/sp-lodash-subset": "1.19.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.19.0",
+    "@microsoft/sp-page-context": "1.19.0",
+    "@microsoft/sp-property-pane": "1.19.0",
+    "@microsoft/sp-webpart-base": "1.19.0",
     "@monaco-editor/loader": "^1.3.1",
     "@pnp/common": "2.5.0",
     "@pnp/odata": "2.5.0",
@@ -86,12 +85,12 @@
     "swiper": "^8.2.6"
   },
   "devDependencies": {
-    "@microsoft/eslint-config-spfx": "1.18.2",
-    "@microsoft/eslint-plugin-spfx": "1.18.2",
+    "@microsoft/eslint-config-spfx": "1.20.1",
+    "@microsoft/eslint-plugin-spfx": "1.20.1",
     "@microsoft/microsoft-graph-types": "^2.1.0",
     "@microsoft/rush-stack-compiler-4.7": "0.1.0",
-    "@microsoft/sp-build-web": "1.18.2",
-    "@microsoft/sp-module-interfaces": "1.18.2",
+    "@microsoft/sp-build-web": "1.20.1",
+    "@microsoft/sp-module-interfaces": "1.20.1",
     "@rushstack/eslint-config": "2.5.1",
     "@types/chart.js": "2.7.40",
     "@types/enzyme": "^2.8.12",

diff --git a/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx b/src/controls/adaptiveCardHost/AdaptiveCardHost.tsx
@@ -1,30 +1,45 @@
-import { ThemeProvider } from '@fluentui/react-theme-provider';
-import { mergeThemes } from '@fluentui/theme/lib/mergeThemes';
-import { Action, AdaptiveCard, CardElement, CardObjectRegistry, ExecuteAction, GlobalRegistry, OpenUrlAction, SerializationContext, SubmitAction } from 'adaptivecards';
-import { Template } from 'adaptivecards-templating';
-import { IPartialTheme, ITheme } from '@fluentui/react/lib/Styling';
-import { CustomizerContext } from '@fluentui/react/lib/Utilities';
 import * as React from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { ThemeProvider } from '@fluentui/react-theme-provider';
+import { mergeThemes } from '@fluentui/theme';
 import {
-  useCallback,
-  useEffect,
-  useRef
-} from 'react';
+  Action,
+  AdaptiveCard,
+  CardElement,
+  CardObjectRegistry,
+  ExecuteAction,
+  GlobalRegistry,
+  OpenUrlAction,
+  SerializationContext,
+  SubmitAction,
+} from 'adaptivecards';
+import { Template } from 'adaptivecards-templating';
+import { IPartialTheme, ITheme, CustomizerContext } from '@fluentui/react';
 import { fluentUIDefaultTheme } from '../../common/fluentUIThemes/FluentUIDefaultTheme';
 import { initializeAdaptiveCardHost } from './AdaptiveCardHost.HostConfig';
-import { initProcessMarkdown, injectContextProperty } from './AdaptiveCardHost.Utilities';
+import {
+  initProcessMarkdown,
+  injectContextProperty,
+} from './AdaptiveCardHost.Utilities';
 import { registerFluentUIActions, registerFluentUIElements } from './fluentUI';
 import { IAdaptiveCardHostProps } from './IAdaptiveCardHostProps';
 import { AdaptiveCardHostThemeType } from './models/AdaptiveCardHostThemeType';
 import { IAdaptiveCardHostActionResult } from './models/IAdaptiveCardHostActionResult';
 
-export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element => {
+export const AdaptiveCardHost = (
+  props: IAdaptiveCardHostProps
+): JSX.Element => {
   const renderElementRef = useRef<HTMLDivElement>(null);
   const adaptiveCardInstanceRef = useRef<AdaptiveCard>(null);
   const serializationContextInstanceRef = useRef<SerializationContext>(null);
   const fluentUIThemeInstanceRef = useRef<ITheme>(null);
   const fluentUICustomizerContext = React.useContext(CustomizerContext);
-  const adaptiveCardInstanceRefDependencies = [props.card, props.onSetCustomElements, props.onSetCustomActions, props.onUpdateHostCapabilities];
+  const adaptiveCardInstanceRefDependencies = [
+    props.card,
+    props.onSetCustomElements,
+    props.onSetCustomActions,
+    props.onUpdateHostCapabilities,
+  ];
 
   // Init Process Markdown
   useEffect(() => {
@@ -40,31 +55,50 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element =>
   // *****
 
   // create executeAction
-  const invokeAction = useCallback((action: Action) => {
-    if (props.onInvokeAction) {
-      let actionResult: IAdaptiveCardHostActionResult;
-      const type = action.getJsonTypeName();
-      switch (type) {
-        case OpenUrlAction.JsonTypeName: {
-          const openUrlAction = action as OpenUrlAction;
-          actionResult = { type: type, title: openUrlAction.title, url: openUrlAction.url };
-        }
-          break;
-        case SubmitAction.JsonTypeName: {
-          const submitAction = action as SubmitAction;
-          actionResult = { type: type, title: submitAction.title, data: submitAction.data };
+  const invokeAction = useCallback(
+    (action: Action) => {
+      if (props.onInvokeAction) {
+        let actionResult: IAdaptiveCardHostActionResult;
+        const type = action.getJsonTypeName();
+        switch (type) {
+          case OpenUrlAction.JsonTypeName:
+            {
+              const openUrlAction = action as OpenUrlAction;
+              actionResult = {
+                type: type,
+                title: openUrlAction.title,
+                url: openUrlAction.url,
+              };
+            }
+            break;
+          case SubmitAction.JsonTypeName:
+            {
+              const submitAction = action as SubmitAction;
+              actionResult = {
+                type: type,
+                title: submitAction.title,
+                data: submitAction.data,
+              };
+            }
+            break;
+          case ExecuteAction.JsonTypeName:
+            {
+              const executeAction = action as ExecuteAction;
+              actionResult = {
+                type: type,
+                title: executeAction.title,
+                data: executeAction.data,
+                verb: executeAction.verb,
+              };
+            }
+            break;
         }
-          break;
-        case ExecuteAction.JsonTypeName: {
-          const executeAction = action as ExecuteAction;
-          actionResult = { type: type, title: executeAction.title, data: executeAction.data, verb: executeAction.verb };
-        }
-          break;
-      }
 
-      props.onInvokeAction(actionResult);
-    }
-  }, [props.onInvokeAction]);
+        props.onInvokeAction(actionResult);
+      }
+    },
+    [props.onInvokeAction]
+  );
   // *****
 
   // set hostConfig
@@ -78,7 +112,8 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element =>
     }
 
     // if this control is wrapped on "ThemeProvider" take the theme from the context
-    const contextTheme: ITheme | IPartialTheme = fluentUICustomizerContext.customizations.settings.theme;
+    const contextTheme: ITheme | IPartialTheme =
+      fluentUICustomizerContext.customizations.settings.theme;
     // *****
 
     if (props.theme) {
@@ -90,18 +125,25 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element =>
     }
     // **********
 
-    const hostConfigResult = initializeAdaptiveCardHost(inputThemeType, mergeThemes(fluentUIDefaultTheme(), inputFluentUITheme));
+    const hostConfigResult = initializeAdaptiveCardHost(
+      inputThemeType,
+      mergeThemes(fluentUIDefaultTheme(), inputFluentUITheme)
+    );
     const currentHostConfig = hostConfigResult.hostConfig;
 
     fluentUIThemeInstanceRef.current = hostConfigResult.theme;
     adaptiveCardInstanceRef.current.hostConfig = hostConfigResult.hostConfig;
 
-
     if (props.onUpdateHostCapabilities) {
       props.onUpdateHostCapabilities(currentHostConfig.hostCapabilities);
     }
-
-  }, [...adaptiveCardInstanceRefDependencies, fluentUICustomizerContext, props.theme, props.themeType, props.hostConfig]);
+  }, [
+    ...adaptiveCardInstanceRefDependencies,
+    fluentUICustomizerContext,
+    props.theme,
+    props.themeType,
+    props.hostConfig,
+  ]);
   // *****
 
   // set invokeAction
@@ -132,7 +174,6 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element =>
     const currentSerializationContext = serializationContextInstanceRef.current;
     currentSerializationContext.setElementRegistry(elementRegistry);
     currentSerializationContext.setActionRegistry(actionRegistry);
-
   }, [...adaptiveCardInstanceRefDependencies]);
   // *****
 
@@ -147,30 +188,48 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps): JSX.Element =>
     const currentAdaptiveCard = adaptiveCardInstanceRef.current;
     try {
       const template = new Template(props.card);
-      const evaluationContext = injectContextProperty(props.data, fluentUIThemeInstanceRef.current, props.context);
+      const evaluationContext = injectContextProperty(
+        props.data,
+        fluentUIThemeInstanceRef.current,
+        props.context
+      );
       const cardPayload = template.expand(evaluationContext);
 
-      currentAdaptiveCard.parse(cardPayload, serializationContextInstanceRef.current);
+      currentAdaptiveCard.parse(
+        cardPayload,
+        serializationContextInstanceRef.current
+      );
 
       const renderedElement = currentAdaptiveCard.render();
       // If this isn't acceptable, we should compare the old template with the new template
       if (renderedElement.outerHTML !== currentRenderElement.innerHTML) {
-        currentRenderElement.innerHTML = "";
+        currentRenderElement.innerHTML = '';
         currentRenderElement.appendChild(renderedElement);
       }
     } catch (cardRenderError) {
       if (props.onError) {
         props.onError(cardRenderError);
       }
     }
-  }, [...adaptiveCardInstanceRefDependencies, props.data, props.hostConfig, props.onError]);
+  }, [
+    ...adaptiveCardInstanceRefDependencies,
+    props.data,
+    props.hostConfig,
+    props.onError,
+  ]);
   // *****
 
   return (
-    <ThemeProvider theme={(fluentUIThemeInstanceRef.current) ? fluentUIThemeInstanceRef.current : fluentUIDefaultTheme()}>
+    <ThemeProvider
+      theme={
+        fluentUIThemeInstanceRef.current
+          ? fluentUIThemeInstanceRef.current
+          : fluentUIDefaultTheme()
+      }
+    >
       <div
         ref={renderElementRef}
-        className={`${(props.className) ? props.className : ""}`}
+        className={`${props.className ? props.className : ''}`}
         style={props.style}
       />
     </ThemeProvider>

diff --git a/src/controls/adaptiveCardHost/fluentUI/HostConfig.ts b/src/controls/adaptiveCardHost/fluentUI/HostConfig.ts
@@ -1,6 +1,6 @@
-import { LocalizedFontFamilies } from '@fluentui/theme/lib/fonts';
+import { LocalizedFontFamilies } from '@fluentui/theme';
 import { ActionAlignment, HostConfig, TextColor, TextWeight } from 'adaptivecards';
-import { ITheme } from '@fluentui/react/lib/Styling';
+import type { ITheme } from '@fluentui/react';
 
 const lightenDarkenColor = (col: string, amt: number): string => {
     let usePound = false;

diff --git a/src/controls/adaptiveCardHost/fluentUI/Styles.ts b/src/controls/adaptiveCardHost/fluentUI/Styles.ts
@@ -1,4 +1,4 @@
-import { LocalizedFontFamilies } from '@fluentui/theme/lib/fonts';
+import { LocalizedFontFamilies } from '@fluentui/theme';
 import { IReadonlyTheme } from '@microsoft/sp-component-base';
 import { create } from 'nano-css';