Deploying to gh-pages from @ 8b38911 🚀

_content/Microsoft.FluentUI.AspNetCore.Components/Components/DataGrid/FluentDataGrid.razor.js

@@ -157,18 +157,26 @@ export function resetColumnWidths(gridElement) {
     gridElement.gridTemplateColumns = initialColumnsWidths;
 }
 
-export function resizeColumn(gridElement, change) {
+export function resizeColumnDiscrete(gridElement, column, change) {
 
     let headers = gridElement.querySelectorAll('.column-header.resizable');
     if (headers.length <= 0) {
         return
     }
 
-    if (!(document.activeElement.classList.contains("column-header") && document.activeElement.classList.contains("resizable"))) {
-        return;
+    let headerBeingResized;
+    if (!column) {
+
+        if (!(document.activeElement.classList.contains("column-header") && document.activeElement.classList.contains("resizable"))) {
+            return;
+        }
+        headerBeingResized = document.activeElement;
+    }
+    else {
+        headerBeingResized = gridElement.querySelector('.column-header[grid-column="' + column + '"]');
     }
     const columns = [];
-    let headerBeingResized = document.activeElement;
+
     let min = 50;
 
     headers.forEach(header => {
@@ -201,3 +209,47 @@ export function resizeColumn(gridElement, change) {
         .map(({ header }) => header.size)
         .join(' ');
 }
+
+export function resizeColumnExact(gridElement, column, width) {
+
+    let headers = gridElement.querySelectorAll('.column-header.resizable');
+    if (headers.length <= 0) {
+        return
+    }
+
+    let headerBeingResized = gridElement.querySelector('.column-header[grid-column="' + column + '"]');
+    if (!headerBeingResized) {
+        return;
+    }
+    const columns = [];
+
+    let min = 50;
+
+    headers.forEach(header => {
+        if (header === headerBeingResized) {
+            min = headerBeingResized.querySelector('.col-options-button') ? 75 : 50;
+
+            const newWidth = width;
+
+            header.size = Math.max(min, newWidth) + 'px';
+        }
+        else {
+            if (header.size === undefined) {
+                if (header.clientWidth === undefined || header.clientWidth === 0) {
+                    header.size = min + 'px';
+                } else {
+                    header.size = header.clientWidth + 'px';
+                }
+            }
+        }
+
+        columns.push({ header });
+    });
+
+    gridElement.gridTemplateColumns = columns
+        .map(({ header }) => header.size)
+        .join(' ');
+
+    gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true }));
+    gridElement.focus();
+}

_content/Microsoft.FluentUI.AspNetCore.Components/Components/DesignSystemProvider/FluentDesignTheme.razor.js

@@ -13,8 +13,15 @@ export function addThemeChangeEvent(dotNetHelper, id) {
             }
         });
 
-        const theme = element.themeStorage.readLocalStorage()
-        return theme == null ? theme : JSON.stringify(theme);
+        try {
+            // This can fail when localStorage does not contain a valid JSON object
+            const theme = element.themeStorage.readLocalStorage()
+            return theme == null ? theme : JSON.stringify(theme);
+        } catch (error) {
+            ClearLocalStorage(id);
+            console.error(`FluentDesignTheme: failing to load theme from localStorage.`, error);
+        }
+
     }
 
     return null;

_content/Microsoft.FluentUI.AspNetCore.Components/Components/List/FluentAutocomplete.razor.js

@@ -17,6 +17,18 @@ export function displayLastSelectedItem(id) {
     }
 }
 
+export function scrollToFirstSelectable(idPopup, goDown) {
+
+    const popup = document.getElementById(idPopup);
+    const item = popup?.querySelector("fluent-option[selectable]")
+    const next = goDown ? item?.nextElementSibling : item?.previousElementSibling;
+
+    if (!!next) {
+        next.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+    }
+
+}
+
 export function focusOn(id) {
     var item = document.getElementById(id);
     if (!!item) {

_content/Microsoft.FluentUI.AspNetCore.Components/Components/Overflow/FluentOverflow.razor.js

@@ -1,7 +1,7 @@
 let resizeObserver;
 let observerAddRemove;
 
-export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySelector) {
+export function fluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySelector) {
     var localSelector = querySelector;
     if (!localSelector) {
         // cannot use :scope for node.matches() further down
@@ -23,13 +23,13 @@ export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySe
                 return;
             }
 
-            FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelector);
+            fluentOverflowRefresh(dotNetHelper, id, isHorizontal, querySelector);
         });
     });
 
     // Create a ResizeObserver, started later
     resizeObserver = new ResizeObserver((entries) => {
-        FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelector);
+        fluentOverflowRefresh(dotNetHelper, id, isHorizontal, querySelector);
     });
 
     // Start the resize observation
@@ -42,7 +42,7 @@ export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySe
 
 // When the Element[id] is resized, set overflow attribute to all element outside of this element.
 // Except for elements with fixed attribute.
-export function FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelector) {
+export function fluentOverflowRefresh(dotNetHelper, id, isHorizontal, querySelector) {
     let container = document.getElementById(id);                                  // Container
     if (!container) return;
 
@@ -61,6 +61,8 @@ export function FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelec
     let containerGap = parseFloat(window.getComputedStyle(container).gap);
     if (!containerGap) containerGap = 0;
 
+    containerMaxSize -= 25; // Account for the overflow bage width
+
     // Size of all fixed elements
     fixedItems.forEach(element => {
         element.overflowSize = isHorizontal ? getElementWidth(element) : getElementHeight(element);

_content/Microsoft.FluentUI.AspNetCore.Components/Components/Splitter/FluentMultiSplitter.razor.js

@@ -73,24 +73,36 @@ export function startSplitterResize(
         paneLength: paneLength,
         paneNextLength: isFinite(paneNextLength) ? paneNextLength : 0,
         mouseUpHandler: function (e) {
-            if (document.splitterData[el]) {
-                splitter.invokeMethodAsync(
-                    'FluentMultiSplitter.OnPaneResizedAsync',
-                    parseInt(pane.getAttribute('data-index')),
-                    parseFloat(pane.style.flexBasis),
-                    paneNext ? parseInt(paneNext.getAttribute('data-index')) : null,
-                    paneNext ? parseFloat(paneNext.style.flexBasis) : null
-                );
+            if (document.splitterData[el] &&
+                pane.style.flexBasis.includes('%') &&
+                paneNext.style.flexBasis.includes('%')) {
+
+                if (document.splitterData[el].moved === true) {
+                    splitter.invokeMethodAsync(
+                        'FluentMultiSplitter.OnPaneResizedAsync',
+                        parseInt(pane.getAttribute('data-index')),
+                        parseFloat(pane.style.flexBasis),
+                        paneNext ? parseInt(paneNext.getAttribute('data-index')) : null,
+                        paneNext ? parseFloat(paneNext.style.flexBasis) : null
+                    );
+                }
+
                 document.removeEventListener('mousemove', document.splitterData[el].mouseMoveHandler);
                 document.removeEventListener('mouseup', document.splitterData[el].mouseUpHandler);
                 document.removeEventListener('touchmove', document.splitterData[el].touchMoveHandler);
                 document.removeEventListener('touchend', document.splitterData[el].mouseUpHandler);
                 document.splitterData[el] = null;
             }
+
+            if (document.splitterData[el]) {
+                document.splitterData[el].moved = false;
+            }
         },
         mouseMoveHandler: function (e) {
             if (document.splitterData[el]) {
 
+                document.splitterData[el].moved = true;
+
                 var spacePerc = document.splitterData[el].panePerc + document.splitterData[el].paneNextPerc;
                 var spaceLength = document.splitterData[el].paneLength + document.splitterData[el].paneNextLength;
 

_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css

@@ -72,10 +72,22 @@ fluent-anchored-region[b-2ov9fhztky] {
 
 [b-dkkdhxy2t7] .fluent-appbar-item:hover svg[part="icon-rest"],
 [b-dkkdhxy2t7] .fluent-appbar-item:not(:hover):not(.active) svg[part="icon-active"],
-[b-dkkdhxy2t7] .fluent-appbar-item:not(:hover).active svg[part="icon-rest"],
+[b-dkkdhxy2t7] .fluent-appbar-item:not(:hover) a.active svg[part="icon-rest"],
 [b-dkkdhxy2t7] .fluent-appbar-item[overflow] {
     display: none;
 }
+
+[b-dkkdhxy2t7] .fluent-appbar-item:not(:hover) .active svg[part="icon-active"] {
+    display: block;
+}
+
+[b-dkkdhxy2t7] .fluent-appbar-item.popover:not(:hover) a.active svg[part="icon-active"] {
+    display: none;
+}
+
+[b-dkkdhxy2t7] .fluent-appbar-item.popover:not(:hover) a.active svg[part="icon-rest"] {
+    display: block;
+}
 /* _content/Microsoft.FluentUI.AspNetCore.Components/Components/BodyContent/FluentBodyContent.razor.rz.scp.css */
 .body-content[b-9l28a7kahd] {
     margin: 0;
@@ -205,6 +217,7 @@ fluent-data-grid[b-ppmhrkw1mj] {
 
 .col-options[b-ppmhrkw1mj] {
     position: absolute;
+    min-width: 250px;
     top: 2.2rem;
     background: var(--neutral-layer-2);
     border: 1px solid var(--neutral-layer-3);
@@ -220,19 +233,25 @@ fluent-data-grid[b-ppmhrkw1mj] {
 
 .col-justify-end .col-options[b-ppmhrkw1mj], .col-justify-right .col-options[b-ppmhrkw1mj] {
     left: unset;
-    right: 0.2rem;
+    margin-right:  0.6rem;
 }
 
 [dir=rtl] .col-justify-end .col-options[b-ppmhrkw1mj], [dir=rtl] .col-justify-right .col-options[b-ppmhrkw1mj] {
     right: unset;
-    left: 0.2rem;
+    margin-left: 0.6rem;
 }
 
 [b-ppmhrkw1mj] > fluent-data-grid-row > fluent-data-grid-cell.grid-cell-placeholder:after {
     content: '\2026'; /*horizontal ellipsis*/
     opacity: 0.75;
 }
 
+.resize-options[b-ppmhrkw1mj] {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
 
 
 [b-ppmhrkw1mj] .col-width-draghandle {
@@ -263,7 +282,6 @@ fluent-data-grid-cell[b-w6qdxfylwy] {
 .column-header[b-w6qdxfylwy] {
     display: flex;
     width: 100%;
-    height: 100%;
     align-self: center;
     padding-inline: 0;
     padding-right: 1px;
@@ -306,6 +324,7 @@ fluent-data-grid-cell[b-w6qdxfylwy] {
 
     .column-header.col-justify-end[b-w6qdxfylwy]  .col-title-text, .column-header.col-justify-right[b-w6qdxfylwy]  .col-title-text {
         text-align: end;
+        padding-left: 4px;
     }
 
     .column-header.col-justify-end[b-w6qdxfylwy]  .col-sort-button, .column-header.col-justify-right[b-w6qdxfylwy]  .col-sort-button {
@@ -2712,6 +2731,25 @@ div[dragged-over][b-qxma62j335] {
 fluent-radio[b-98313echfq] {
     margin: calc(var(--design-unit) * 1px) 0;
 }
+/* _content/Microsoft.FluentUI.AspNetCore.Components/Components/Rating/FluentRating.razor.rz.scp.css */
+.fluent-rating[b-9p46vl6e0d] {
+    justify-content: start;
+    align-items: start;
+    column-gap: 0px;
+}
+
+    .fluent-rating[b-9p46vl6e0d]  input[type='radio'] {
+        opacity: 0;
+        position: absolute;
+        width: 0px;
+        height: 0px;
+    }
+
+    .fluent-rating:focus-within[b-9p46vl6e0d]  svg[selected] {
+        outline-style: auto;
+        outline-color: var(--focus-stroke-outer);
+        outline-width: var(--focus-stroke-width);
+    }
 /* _content/Microsoft.FluentUI.AspNetCore.Components/Components/SortableList/FluentSortableList.razor.rz.scp.css */
 /* 
   you need the ::deep identifier if you are using scoped styles like this
@@ -2890,7 +2928,7 @@ fluent-radio[b-98313echfq] {
     }
 
         .fluent-multi-splitter[orientation="horizontal"][b-ug2ltnxcve]  > .fluent-multi-splitter-bar > span[part="collapse"]:before {
-            content: '\025C0;';            
+            content: '\025C0';            
         }
 
         .fluent-multi-splitter[orientation="horizontal"][b-ug2ltnxcve]  > .fluent-multi-splitter-bar > span[part="resize"] {
@@ -2899,7 +2937,7 @@ fluent-radio[b-98313echfq] {
         }
 
         .fluent-multi-splitter[orientation="horizontal"][b-ug2ltnxcve]  > .fluent-multi-splitter-bar > span[part="expand"]:before {
-            content: '\025B6;';
+            content: '\025B6';
         }
 
         .fluent-multi-splitter[orientation="horizontal"][b-ug2ltnxcve]  > .fluent-multi-splitter-bar[status="resizable"]:hover {
@@ -2917,7 +2955,7 @@ fluent-radio[b-98313echfq] {
     }
 
         .fluent-multi-splitter[orientation="vertical"][b-ug2ltnxcve]  > .fluent-multi-splitter-bar > span[part="collapse"]:before {
-            content: '\025B2;';
+            content: '\025B2';
         }
 
         .fluent-multi-splitter[orientation="vertical"][b-ug2ltnxcve]  > .fluent-multi-splitter-bar > span[part="resize"] {
@@ -2926,7 +2964,7 @@ fluent-radio[b-98313echfq] {
         }
 
         .fluent-multi-splitter[orientation="vertical"][b-ug2ltnxcve]  > .fluent-multi-splitter-bar > span[part="expand"]:before {
-            content: '\025BC;';
+            content: '\025BC';
         }
 
         .fluent-multi-splitter[orientation="vertical"][b-ug2ltnxcve]  > .fluent-multi-splitter-bar[status="resizable"]:hover {
@@ -2938,6 +2976,8 @@ fluent-radio[b-98313echfq] {
     overflow: hidden;
     position: relative;
     flex: 0 1 auto;
+    flex-grow: 0;
+    flex-shrink: 0;
 }
 
     .fluent-multi-splitter[b-ug2ltnxcve]  > .fluent-multi-splitter-pane[status="collapsed"] {
@@ -3045,7 +3085,6 @@ fluent-tab[b-urryfr514w] {
         justify-content: flex-end;
         align-items: center;
         gap: 8px;
-        cursor: pointer;
         width: 48px;
         min-width: 48px;
         height: 20px;
@@ -3318,7 +3357,7 @@ fluent-tab[b-urryfr514w] {
 
 /* Icon Number */
 .fluent-wizard > ol > li .fluent-wizard-icon-number[b-a5o5s1yurv] {
-    margin-top: calc(var(--fluent-wizard-circle-size) * -1 - 4px);
+    margin-top: calc(var(--fluent-wizard-circle-size) * -1 - 5px);
     font-size: small;
     color: var(--accent-fill-rest);
     text-align: center;