Merge branch 'develop' into release/1.1.0

microsoft-search · Nov 12, 2024 · c22a3ad · c22a3ad
2 parents 3ecf711 + b573dca
commit c22a3ad
Show file tree

Hide file tree

Showing 185 changed files with 20,755 additions and 28,324 deletions.
diff --git a/apps/spfx/package.json b/apps/spfx/package.json
@@ -72,6 +72,7 @@
     "gulp-rename": "2.0.0",
     "gulp-replace": "1.1.4",
     "autoprefixer": "10.4.16",
+    "postcss": "8.4.31",
     "tailwindcss": "3.2.4",
     "@tailwindcss/forms": "0.5.3",
     "@tailwindcss/line-clamp": "0.4.4",

diff --git a/apps/spfx/src/webparts/searchBox/components/SearchBox.tsx b/apps/spfx/src/webparts/searchBox/components/SearchBox.tsx
@@ -3,7 +3,7 @@ import { ISearchBoxProps } from './ISearchBoxProps';
 import { wrapWc } from 'wc-react';
 import { SearchInputComponent } from '@pnp/modern-search-core';
 
-const SearchInputWebComponent = wrapWc<SearchInputComponent>('pnp-search-input');
+const SearchInputWebComponent = wrapWc<Partial<SearchInputComponent>>('pnp-search-input');
 
 export class SearchBox extends React.Component<ISearchBoxProps, {}> {
 

diff --git a/apps/spfx/src/webparts/searchResults/components/SearchResults.tsx b/apps/spfx/src/webparts/searchResults/components/SearchResults.tsx
@@ -10,7 +10,7 @@ import parse from 'html-react-parser';
 import { SlotType } from '../../../models/common/ILayoutSlot';
 import { EventConstants } from '@pnp/modern-search-core/dist/es6/common/Constants';
 
-const SearchResultsWebComponent = wrapWc<SearchResultsComponent>('pnp-search-results');
+const SearchResultsWebComponent = wrapWc<Partial<SearchResultsComponent>>('pnp-search-results');
 
 export default class SearchResults extends React.Component<ISearchResultsProps, ISearchResultsState> {
 

diff --git a/apps/spfx/src/webparts/searchVerticals/components/SearchVerticals.tsx b/apps/spfx/src/webparts/searchVerticals/components/SearchVerticals.tsx
@@ -8,7 +8,7 @@ import parse, {  } from 'html-react-parser';
 import { isEqual } from '@microsoft/sp-lodash-subset';
 import { Guid } from '@microsoft/sp-core-library';
 
-const SearchVerticalsWebComponent = wrapWc<SearchVerticalsComponent>('pnp-search-verticals');
+const SearchVerticalsWebComponent = wrapWc<Partial<SearchVerticalsComponent>>('pnp-search-verticals');
 
 export default class SearchVerticals extends React.Component<ISearchVerticalsProps, {}> {
 

diff --git a/packages/components/dev/index.css b/packages/components/dev/index.css
diff --git a/packages/components/dev/index.html b/packages/components/dev/index.html
@@ -81,7 +81,11 @@
                     <pnp-language-provider id="pnpLanguage" locale="en-us" show-picker>
                     </pnp-language-provider>
 
-                    <pnp-theme-provider></pnp-theme-provider>
+                    <pnp-theme-provider 
+                        selector="body"
+                        background-color-dark="var(--pnpsearch-colorBackgroundDarkPrimary)"
+                        background-color-light="#FFF"
+                    ></pnp-theme-provider>
                 </div>                         
         </div>
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -72,12 +72,12 @@
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.12.0",
     "@microsoft/fast-foundation": "2.49.4",
-    "@microsoft/mgt": "4.2.1",
-    "@microsoft/mgt-components": "4.2.1",
-    "@microsoft/mgt-element": "4.2.1",
-    "@microsoft/mgt-msal2-provider": "4.2.1",
-    "@microsoft/mgt-teamsfx-provider": "4.2.1",
-    "@microsoft/mgt-sharepoint-provider": "4.2.1",
+    "@microsoft/mgt": "4.3.0",
+    "@microsoft/mgt-components": "4.3.0",
+    "@microsoft/mgt-element": "4.3.0",
+    "@microsoft/mgt-msal2-provider": "4.3.0",
+    "@microsoft/mgt-teamsfx-provider": "4.3.0",
+    "@microsoft/mgt-sharepoint-provider": "4.3.0",
     "@microsoft/microsoft-graph-client": "3.0.2",
     "@microsoft/microsoft-graph-types": "2.5.0",
     "@monaco-editor/loader": "1.3.3",
@@ -153,7 +153,7 @@
     "sinon": "15.0.1",
     "storybook": "^7.6.17",
     "storybook-source-code-addon": "^1.2.0",
-    "tailwindcss": "3.2.4",
+    "tailwindcss": "3.4.4",
     "ts-dedent": "^2.2.0",
     "ts-loader": "9.4.4",
     "tslib": "2.5.0",

diff --git a/packages/components/src/components/BaseComponent.ts b/packages/components/src/components/BaseComponent.ts
@@ -176,8 +176,7 @@ export abstract class BaseComponent extends ScopedElementsMixin(MgtTemplatedComp
          // Set the theme automatically if a parent has the "dark" CSS class or theme
         // This avoid to set explicitly the 'theme' property for each component
         const setDarkModeClass = () => {
-            // Check if theme property was set explicitly on the component
-            if (this.parentElement && !this.theme) {
+            if (this.parentElement) {
                 const parentInDarkMode = this.parentElement.closest("[class~=dark],[theme~=dark]");
                 if (parentInDarkMode ) {
                     this.theme = "dark";

diff --git a/packages/components/src/components/adaptive-card/AdaptiveCardComponent.ts b/packages/components/src/components/adaptive-card/AdaptiveCardComponent.ts
@@ -1,4 +1,4 @@
-import { css, html } from "lit";
+import { PropertyValues, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { FileFormat } from "../../services/templateService/ITemplateService";
 import { TemplateService } from "../../services/templateService/TemplateService";
@@ -122,6 +122,15 @@ export class AdaptiveCardComponent extends BaseComponent {
         super.connectedCallback();
     }
 
+    protected override updated(changedProperties: PropertyValues<this>): void {
+
+        if (this.hasPropertyUpdated(changedProperties, "theme")) {
+
+            // Re-render the adaptive with the new theme through adaptive card host configuration (as we can't use CSS variables in an adaptive card).
+            this._processAdaptiveCard();
+        }
+    }
+
     private async _processAdaptiveCard() {
 
         const templateService = new TemplateService();

diff --git a/...s/src/components/search-filters/sub-components/filters/date-filter/DateFilterComponent.ts b/...s/src/components/search-filters/sub-components/filters/date-filter/DateFilterComponent.ts
@@ -78,7 +78,7 @@ export class DateFilterComponent extends BaseFilterComponent {
                             intervals.map(filterValue => {
                                 return html`
                                         <fast-menu-item
-                                            class="dark:text-textColorDark dark:hover:text-textColor mb-2 mt-2"
+                                            class="dark:text-textColorDark dark:hover:text-textColor mb-2 mt-2 hover:bg-gray-100 bg-transparent"
                                             @click=${(e) => {
                                                 // Use a mouse down event to not trigger the parent blur() event and close the panel before selecting a value
                                                 e.preventDefault();

diff --git a/packages/components/src/components/search-results/SearchResultsComponent.ts b/packages/components/src/components/search-results/SearchResultsComponent.ts
@@ -682,7 +682,7 @@ export class SearchResultsComponent extends BaseComponent {
             if (this.enableResultTypes) {
 
                 // Process result types and replace part of HTML with item id
-                const newElement = this.templateService.processResultTypesFromHtml(this.data, element, this.getTheme());
+                const newElement = this.templateService.processResultTypesFromHtml(this.data, element);
                 element.replaceWith(newElement);
             }
 
@@ -818,7 +818,7 @@ export class SearchResultsComponent extends BaseComponent {
 
         // Process result types on default Lit template of this component
         if (this.enableResultTypes && !this.hasTemplate("items")) {
-            this.templateService.processResultTypesFromHtml(this.data, this.renderRoot as HTMLElement, this.getTheme());
+            this.templateService.processResultTypesFromHtml(this.data, this.renderRoot as HTMLElement);
         }
 
         // Property updates that should trigger a new search

diff --git a/packages/components/src/components/theme-provider/ThemeProviderComponent.ts b/packages/components/src/components/theme-provider/ThemeProviderComponent.ts
@@ -1,4 +1,3 @@
-import { Switch } from "@microsoft/fast-foundation";
 import { LitElement, PropertyValues, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { BaseComponent } from "../BaseComponent";
@@ -11,14 +10,25 @@ export class ThemeProviderComponent extends LitElement {
     @property({type: String, attribute: "theme-default", reflect: true})
     defaultTheme: string;
 
+    /**
+     * The selector to use to apply theme classes
+     */ 
+    @property({type: String, attribute: "selector"})
+    selector: string;
+
+    @property({type: String, attribute: "background-color-dark"})
+    backgroundColorDark: string;
+
+    @property({type: String, attribute: "background-color-light"})
+    backgroundColorLight: string;
 
     @state()
-    checked = false;
+    isDark = false;
 
     protected override render(): unknown {
 
         const renderToggle =  html`
-                <fast-switch @change=${this._onThemeChange} checked=${this.checked}>
+                <fast-switch @change=${() => this._onThemeChange(!this.isDark)} checked=${this.isDark}>
                     <span slot="checked-message" class="dark:text-white">Dark</span>
                     <span slot="unchecked-message" class="dark:text-white">Light</span>
                 </fast-switch>
@@ -38,19 +48,29 @@ export class ThemeProviderComponent extends LitElement {
     protected override firstUpdated(changedProperties: PropertyValues<this>): void {
 
         const defaultTheme = this.defaultTheme ? this.defaultTheme : "light";
+        const element: HTMLElement = this.selector ? document.querySelector(this.selector) : document.documentElement;
 
         switch (localStorage.theme) {
             case "dark":
-                document.documentElement.classList.add("dark"); 
+                element.classList.add("dark");
+
+                if (this.backgroundColorDark) {
+                    element.style.backgroundColor = this.backgroundColorDark;
+                }
+
                 localStorage.theme = "dark";
-                this.checked = true;
+                this.isDark = true;
 
                 break;
 
             case "light":
-                document.documentElement.classList.remove("dark");
+                element.classList.remove("dark");
+                if (this.backgroundColorLight) {
+                    element.style.backgroundColor = this.backgroundColorLight;
+                }
+
                 localStorage.theme = "light";
-                this.checked = false;
+                this.isDark = false;
 
                 break;
 
@@ -61,17 +81,26 @@ export class ThemeProviderComponent extends LitElement {
         super.firstUpdated(changedProperties);
     }
 
-    private _onThemeChange(e: Event) {
-        const checked = (e.target as Switch).checked;
+    private _onThemeChange(isDark: boolean) {
+
+        const element: HTMLElement = this.selector ? document.querySelector(this.selector) : document.documentElement;
+
+        if (isDark) { 
+            element.classList.add("dark");
+            if (this.backgroundColorDark) {
+                element.style.backgroundColor = this.backgroundColorDark;
+            }
 
-        if (checked) { 
-            document.documentElement.classList.add("dark"); 
             localStorage.theme = "dark";
-            this.checked = true;
+            this.isDark = true;
         } else {
-            document.documentElement.classList.remove("dark");
+            element.classList.remove("dark");
+            if (this.backgroundColorLight) {
+                element.style.backgroundColor = this.backgroundColorLight;
+            }
+
             localStorage.theme = "light";
-            this.checked = false;
+            this.isDark = false;
         }
     }
 

diff --git a/packages/components/src/exports/index.ts b/packages/components/src/exports/index.ts
@@ -9,7 +9,12 @@ export { VideoPlayerComponent } from "../components/video-player/VideoPlayerComp
 // Needed to work with SPFx as we can't use the default mgt-spfx package
 export * from "@microsoft/mgt-sharepoint-provider";
 export * from "@microsoft/mgt-teamsfx-provider";
+export * from "@microsoft/mgt-msal2-provider";
+
 export * from "@microsoft/mgt-element/dist/es6/utils/TemplateHelper";
 export * from "@microsoft/mgt-element/dist/es6/providers/IProvider";
 export * from "@microsoft/mgt-element/dist/es6/providers/Providers";
-export * from "@microsoft/mgt-element/dist/es6/utils/LocalizationHelper";
+export * from "@microsoft/mgt-element/dist/es6/utils/LocalizationHelper";
+
+// To be able to use MGT components alongside search components
+export * from "@microsoft/mgt-components";
diff --git a/packages/components/src/services/templateService/ITemplateService.ts b/packages/components/src/services/templateService/ITemplateService.ts
@@ -12,10 +12,9 @@ export interface ITemplateService {
      * Update the HTML element with corresponding result types for items (i.e. node with id attribute equals to "hitId")
      * @param data the data source data containing the items
      * @param templateContent the template content as HTML
-     * @param theme the theme to apply
      * @returns the updated HTML element with result types
      */
-    processResultTypesFromHtml(data: IDataSourceData, templateContent: HTMLElement, theme?: IThemeDefinition): HTMLElement;
+    processResultTypesFromHtml(data: IDataSourceData, templateContent: HTMLElement): HTMLElement;
 
     /**
      * Process the adaptive card with data from the context

diff --git a/packages/components/tailwind-dev.config.js b/packages/components/tailwind-dev.config.js
@@ -7,7 +7,7 @@ module.exports = {
       "./dev/**/*.html"
     ]
   },
-  darkMode: "class",
+  darkMode: "selector",
   theme: {
     extend: {
         gridTemplateColumns: {

diff --git a/packages/components/tailwind.config.js b/packages/components/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
       ts: tailwindTransform
     }
   },
-  darkMode: "class",
+  darkMode: "selector",
   theme: {
     extend: {
         gridTemplateColumns: {