Deploying to gh-pages from @ 5ff42ba 🚀

Author: angyanmark

ScratchcardStatistics.styles.css

@@ -1,2 +1,2 @@
-@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.b6pgxrrsua.bundle.scp.css';
+@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.wuc5ioiakb.bundle.scp.css';
 

ScratchcardStatistics.styles.css.br

@@ -36,8 +36,7 @@ export function goToNextFocusableElement(forContainer, toOriginal, delay) {
 /**
  * Focusable Element
  */
-class FocusableElement {
-
+export class FocusableElement {
     FOCUSABLE_SELECTORS = "input, select, textarea, button, object, a[href], area[href], [tabindex]";
     _originalActiveElement;
     _container;
@@ -64,11 +63,32 @@ class FocusableElement {
      * @returns
      */
     findNextFocusableElement(currentElement) {
-        // Get all focusable elements
-        const focusableElements = this._container.querySelectorAll(this.FOCUSABLE_SELECTORS);
+        // Fluent web components may have children that are focusable, but they are not
+        // focusable themselves. Thus, we unfortunately need to query every element or provide
+        // a list of all fluent elements that have focusable children.
+        const queriedElements = Array.from(this._container.querySelectorAll("*")).filter(el => {
+            return el.matches(this.FOCUSABLE_SELECTORS) || el.tagName.toLowerCase().startsWith("fluent-");
+        });
+
+        const focusableElements = [];
+
+        // If an element is a fluent web component and is not focusable, replace with its inner focusable element
+        // if one exists.
+        queriedElements.forEach((el, index) => {
+            if (el.tagName.toLowerCase().startsWith("fluent-") && el.tabIndex === -1 && !!el.shadowRoot) {
+                Array.from(el.shadowRoot.children).forEach(child => {
+                    if (child.tabIndex !== -1 && child.checkVisibility()) {
+                        focusableElements.push(child);
+                    }
+                });
+            }
+            else {
+                focusableElements.push(el);
+            }
+        });
 
-        // Filter out elements with tabindex="-1"
-        const filteredElements = Array.from(focusableElements).filter(el => el?.tabIndex !== -1);
+        // Filter out elements with tabindex="-1" and elements that are not visible
+        const filteredElements = focusableElements.filter(el => !!el && el.tabIndex !== -1 && el.checkVisibility());
 
         // Find the index of the current element
         const current = currentElement ?? document.activeElement;

ScratchcardStatistics.styles.css.gz

@@ -1,5 +1,4 @@
 let grids = [];
-const minWidth = 100;
 
 export function init(gridElement, autoFocus) {
     if (gridElement === undefined || gridElement === null) {
@@ -220,11 +219,13 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true)
     }
 
     const id = gridElement.id;
-    grids.push({
-        id,
-        columns,
-        initialWidths,
-    });
+    if (!grids.find(grid => grid.id === id)) {
+        grids.push({
+            id,
+            columns,
+            initialWidths,
+        });
+    }
 
     function setListeners(div, isRTL) {
         let pageX, curCol, curColWidth;
@@ -255,7 +256,7 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true)
                     const diffX = isRTL ? pageX - e.pageX : e.pageX - pageX;
                     const column = columns.find(({ header }) => header === curCol);
 
-                    column.size = parseInt(Math.max(minWidth, curColWidth + diffX), 10) + 'px';
+                    column.size = parseInt(Math.max(parseInt(column.header.style.minWidth), curColWidth + diffX), 10) + 'px';
 
                     columns.forEach((col) => {
                         if (col.size.startsWith('minmax')) {
@@ -352,7 +353,7 @@ export function resetColumnWidths(gridElement) {
 }
 
 export function resizeColumnDiscrete(gridElement, column, change) {
-
+    const isGrid = gridElement.classList.contains('grid');
     const columns = [];
     let headerBeingResized;
 
@@ -370,27 +371,32 @@ export function resizeColumnDiscrete(gridElement, column, change) {
 
     grids.find(({ id }) => id === gridElement.id).columns.forEach(column => {
         if (column.header === headerBeingResized) {
-            const width = headerBeingResized.getBoundingClientRect().width + change;
+            const width = headerBeingResized.offsetWidth + change; //.getBoundingClientRect().width + change;
 
             if (change < 0) {
-                column.size = Math.max(minWidth, width) + 'px';
+                column.size = Math.max(parseInt(column.header.style.minWidth), width) + 'px';
             }
             else {
                 column.size = width + 'px';
             }
+            column.header.style.width = column.size;
         }
-        else {
+        if (isGrid) {
+            // for grid we need to recalculate all columns that are minmax
             if (column.size.startsWith('minmax')) {
                 column.size = parseInt(column.header.clientWidth, 10) + 'px';
             }
+            columns.push(column.size);
         }
-        columns.push(column.size);
     });
 
-    gridElement.style.gridTemplateColumns = columns.join(' ');
+    if (isGrid) {
+        gridElement.style.gridTemplateColumns = columns.join(' ');
+    }
 }
 
 export function resizeColumnExact(gridElement, column, width) {
+    const isGrid = gridElement.classList.contains('grid');
     const columns = [];
     let headerBeingResized = gridElement.querySelector('.column-header[col-index="' + column + '"]');
 
@@ -400,17 +406,22 @@ export function resizeColumnExact(gridElement, column, width) {
 
     grids.find(({ id }) => id === gridElement.id).columns.forEach(column => {
         if (column.header === headerBeingResized) {
-            column.size = Math.max(minWidth, width) + 'px';
+            column.size = Math.max(parseInt(column.header.style.minWidth), width) + 'px';
+            column.header.style.width = column.size;
         }
-        else {
+        if (isGrid) {
+            // for grid we need to recalculate all columns that are minmax
             if (column.size.startsWith('minmax')) {
                 column.size = parseInt(column.header.clientWidth, 10) + 'px';
             }
+            column.header.style.width = column.size;
+            columns.push(column.size);
         }
-        columns.push(column.size);
     });
 
-    gridElement.style.gridTemplateColumns = columns.join(' ');
+    if (isGrid) {
+        gridElement.style.gridTemplateColumns = columns.join(' ');
+    }
 
     gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
     gridElement.focus();

_content/Microsoft.FluentUI.AspNetCore.Components/Components/AnchoredRegion/FluentAnchoredRegion.razor.js

@@ -3,7 +3,9 @@ export function addThemeChangeEvent(dotNetHelper, id) {
 
     if (element) {
         element.addEventListener("onchange", (e) => {
-            UpdateBodyDataSetTheme(e.detail.newValue);
+            if (e.detail.name === "mode") {
+                UpdateBodyDataSetTheme(e.detail.newValue);
+            }
             try {
                 // setTimeout: https://github.com/dotnet/aspnetcore/issues/26809
                 setTimeout(() => {
@@ -28,7 +30,7 @@ export function addThemeChangeEvent(dotNetHelper, id) {
             ClearLocalStorage(id);
             console.error(`FluentDesignTheme: failing to load theme from localStorage.`, error);
         }
-       
+
     }
 
     return null;