add PreserveCalloutWidth option to callout infrastructure #11505

msynk · msynk · commit bbe8115875f3 · 2025-10-29T14:23:42.000+03:30
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
@@ -578,20 +578,23 @@ private async Task ToggleCallout()
     {
         if (IsEnabled is false || IsDisposed) return;
 
-        await _js.BitCalloutToggleCallout(_dotnetObj,
-                                _Id,
-                                null,
-                                _calloutId,
-                                null,
-                                IsOpen,
-                                BitResponsiveMode.None,
-                                BitDropDirection.TopAndBottom,
-                                Dir is BitDir.Rtl,
-                                "",
-                                0,
-                                "",
-                                "",
-                                true);
+        await _js.BitCalloutToggleCallout(
+            dotnetObj: _dotnetObj,
+            componentId: _Id,
+            component: null,
+            calloutId: _calloutId,
+            callout: null,
+            isCalloutOpen: IsOpen,
+            responsiveMode: BitResponsiveMode.None,
+            dropDirection: BitDropDirection.TopAndBottom,
+            isRtl: Dir is BitDir.Rtl,
+            scrollContainerId: "",
+            scrollOffset: 0,
+            headerId: "",
+            footerId: "",
+            setCalloutWidth: true,
+            preserveCalloutWidth: false,
+            maxWindowWidth: 0);
     }
 
     private void OnSetIsOpen()
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor.cs
@@ -536,20 +536,23 @@ private async Task ToggleCallout()
         if (Standalone) return;
         if (IsEnabled is false || IsDisposed) return;
 
-        await _js.BitCalloutToggleCallout(_dotnetObj,
-                                _circularTimePickerId,
-                                null,
-                                _calloutId,
-                                null,
-                                IsOpen,
-                                Responsive ? BitResponsiveMode.Top : BitResponsiveMode.None,
-                                BitDropDirection.TopAndBottom,
-                                Dir is BitDir.Rtl,
-                                "",
-                                0,
-                                "",
-                                "",
-                                false);
+        await _js.BitCalloutToggleCallout(
+            dotnetObj: _dotnetObj,
+            componentId: _circularTimePickerId,
+            component: null,
+            calloutId: _calloutId,
+            callout: null,
+            isCalloutOpen: IsOpen,
+            responsiveMode: Responsive ? BitResponsiveMode.Top : BitResponsiveMode.None,
+            dropDirection: BitDropDirection.TopAndBottom,
+            isRtl: Dir is BitDir.Rtl,
+            scrollContainerId: "",
+            scrollOffset: 0,
+            headerId: "",
+            footerId: "",
+            setCalloutWidth: false,
+            preserveCalloutWidth: false,
+            maxWindowWidth: 0);
     }
 
     private async Task UpdateTime(MouseEventArgs e)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs
@@ -1401,21 +1401,23 @@ private async Task<bool> ToggleCallout()
         if (Standalone) return false;
         if (IsEnabled is false || IsDisposed) return false;
 
-        return await _js.BitCalloutToggleCallout(_dotnetObj,
-                                       _datePickerId,
-                                       null,
-                                       _calloutId,
-                                       null,
-                                       IsOpen,
-                                       Responsive ? BitResponsiveMode.Top : BitResponsiveMode.None,
-                                       BitDropDirection.TopAndBottom,
-                                       Dir is BitDir.Rtl,
-                                       "",
-                                       0,
-                                       "",
-                                       "",
-                                       false,
-                                       MAX_WIDTH);
+        return await _js.BitCalloutToggleCallout(
+            dotnetObj: _dotnetObj,
+            componentId: _datePickerId,
+            component: null,
+            calloutId: _calloutId,
+            callout: null,
+            isCalloutOpen: IsOpen,
+            responsiveMode: Responsive ? BitResponsiveMode.Top : BitResponsiveMode.None,
+            dropDirection: BitDropDirection.TopAndBottom,
+            isRtl: Dir is BitDir.Rtl,
+            scrollContainerId: "",
+            scrollOffset: 0,
+            headerId: "",
+            footerId: "",
+            setCalloutWidth: false,
+            preserveCalloutWidth: false,
+            maxWindowWidth: MAX_WIDTH);
     }
 
     private string GetCalloutCssClasses()
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
@@ -1924,21 +1924,23 @@ private async Task<bool> ToggleCallout()
         if (Standalone) return false;
         if (IsEnabled is false || IsDisposed) return false;
 
-        return await _js.BitCalloutToggleCallout(_dotnetObj,
-                                       _dateRangePickerId,
-                                       null,
-                                       _calloutId,
-                                       null,
-                                       IsOpen,
-                                       Responsive ? BitResponsiveMode.Top : BitResponsiveMode.None,
-                                       BitDropDirection.TopAndBottom,
-                                       Dir is BitDir.Rtl,
-                                       "",
-                                       0,
-                                       "",
-                                       "",
-                                       false,
-                                       MAX_WIDTH);
+        return await _js.BitCalloutToggleCallout(
+            dotnetObj: _dotnetObj,
+            componentId: _dateRangePickerId,
+            component: null,
+            calloutId: _calloutId,
+            callout: null,
+            isCalloutOpen: IsOpen,
+            responsiveMode: Responsive ? BitResponsiveMode.Top : BitResponsiveMode.None,
+            dropDirection: BitDropDirection.TopAndBottom,
+            isRtl: Dir is BitDir.Rtl,
+            scrollContainerId: "",
+            scrollOffset: 0,
+            headerId: "",
+            footerId: "",
+            setCalloutWidth: false,
+            preserveCalloutWidth: false,
+            maxWindowWidth: MAX_WIDTH);
     }
 
     private string GetCalloutCssClasses()
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -850,7 +850,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         await base.OnAfterRenderAsync(firstRender);
 
         if (firstRender is false) return;
-        
+
         _dotnetObj = DotNetObjectReference.Create(this);
 
         if (Responsive is false) return;
@@ -1172,20 +1172,23 @@ private async Task ToggleCallout()
     {
         if (IsEnabled is false || IsDisposed) return;
 
-        _isResponsiveMode = await _js.BitCalloutToggleCallout(_dotnetObj,
-                                                    _dropdownId,
-                                                    null,
-                                                    _calloutId,
-                                                    null,
-                                                    IsOpen,
-                                                    Responsive ? BitResponsiveMode.Panel : BitResponsiveMode.None,
-                                                    DropDirection,
-                                                    Dir is BitDir.Rtl,
-                                                    _scrollContainerId,
-                                                    ShowSearchBox && Combo is false ? 32 : 0,
-                                                    CalloutHeaderTemplate is not null ? _headerId : "",
-                                                    CalloutFooterTemplate is not null ? _footerId : "",
-                                                    PreserveCalloutWidth is false);
+        _isResponsiveMode = await _js.BitCalloutToggleCallout(
+            dotnetObj: _dotnetObj,
+            componentId: _dropdownId,
+            component: null,
+            calloutId: _calloutId,
+            callout: null,
+            isCalloutOpen: IsOpen,
+            responsiveMode: Responsive ? BitResponsiveMode.Panel : BitResponsiveMode.None,
+            dropDirection: DropDirection,
+            isRtl: Dir is BitDir.Rtl,
+            scrollContainerId: _scrollContainerId,
+            scrollOffset: ShowSearchBox && Combo is false ? 32 : 0,
+            headerId: CalloutHeaderTemplate is not null ? _headerId : "",
+            footerId: CalloutFooterTemplate is not null ? _footerId : "",
+            setCalloutWidth: PreserveCalloutWidth is false,
+            preserveCalloutWidth: false,
+            maxWindowWidth: 0);
     }
 
     private async ValueTask<ItemsProviderResult<TItem>> InternalItemsProvider(ItemsProviderRequest request)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs
@@ -520,20 +520,23 @@ private async Task ToggleCallout()
     {
         if (IsEnabled is false || IsDisposed) return;
 
-        await _js.BitCalloutToggleCallout(_dotnetObj,
-                                          _Id,
-                                          null,
-                                          _calloutId,
-                                          null,
-                                          _isOpen,
-                                          BitResponsiveMode.None,
-                                          BitDropDirection.TopAndBottom,
-                                          Dir is BitDir.Rtl,
-                                          _scrollContainerId,
-                                          0,
-                                          string.Empty,
-                                          string.Empty,
-                                          true);
+        await _js.BitCalloutToggleCallout(
+            dotnetObj: _dotnetObj,
+            componentId: _Id,
+            component: null,
+            calloutId: _calloutId,
+            callout: null,
+            isCalloutOpen: _isOpen,
+            responsiveMode: BitResponsiveMode.None,
+            dropDirection: BitDropDirection.TopAndBottom,
+            isRtl: Dir is BitDir.Rtl,
+            scrollContainerId: _scrollContainerId,
+            scrollOffset: 0,
+            headerId: string.Empty,
+            footerId: string.Empty,
+            setCalloutWidth: false,
+            preserveCalloutWidth: false,
+            maxWindowWidth: 0);
     }
 
     private async Task ChangeSelectedItem(bool isArrowUp)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor.cs
@@ -349,7 +349,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender is false) return;
 
         _dotnetObj = DotNetObjectReference.Create(this);
-        
+
         if (Responsive is false) return;
 
         await _js.BitSwipesSetup(_calloutId, 0.25m, BitPanelPosition.Top, Dir is BitDir.Rtl, BitSwipeOrientation.Vertical, _dotnetObj);
@@ -432,20 +432,23 @@ private async Task ToggleCallout()
         if (Standalone) return;
         if (IsEnabled is false || IsDisposed) return;
 
-        await _js.BitCalloutToggleCallout(_dotnetObj,
-                                _timePickerId,
-                                null,
-                                _calloutId,
-                                null,
-                                IsOpen,
-                                Responsive ? BitResponsiveMode.Top : BitResponsiveMode.None,
-                                DropDirection,
-                                Dir is BitDir.Rtl,
-                                string.Empty,
-                                0,
-                                string.Empty,
-                                string.Empty,
-                                true);
+        await _js.BitCalloutToggleCallout(
+            dotnetObj: _dotnetObj,
+            componentId: _timePickerId,
+            component: null,
+            calloutId: _calloutId,
+            callout: null,
+            isCalloutOpen: IsOpen,
+            responsiveMode: Responsive ? BitResponsiveMode.Top : BitResponsiveMode.None,
+            dropDirection: DropDirection,
+            isRtl: Dir is BitDir.Rtl,
+            scrollContainerId: string.Empty,
+            scrollOffset: 0,
+            headerId: string.Empty,
+            footerId: string.Empty,
+            setCalloutWidth: true,
+            preserveCalloutWidth: false,
+            maxWindowWidth: 0);
     }
 
     private async Task HandleOnChange(ChangeEventArgs e)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs
@@ -607,20 +607,23 @@ private async Task ToggleCallout()
     {
         if (IsEnabled is false || IsDisposed) return;
 
-        await _js.BitCalloutToggleCallout(_dotnetObj,
-                                _overflowAnchorId,
-                                null,
-                                _calloutId,
-                                null,
-                                _isCalloutOpen,
-                                BitResponsiveMode.None,
-                                BitDropDirection.TopAndBottom,
-                                Dir is BitDir.Rtl,
-                                _scrollContainerId,
-                                0,
-                                "",
-                                "",
-                                false);
+        await _js.BitCalloutToggleCallout(
+            dotnetObj: _dotnetObj,
+            componentId: _overflowAnchorId,
+            component: null,
+            calloutId: _calloutId,
+            callout: null,
+            isCalloutOpen: _isCalloutOpen,
+            responsiveMode: BitResponsiveMode.None,
+            dropDirection: BitDropDirection.TopAndBottom,
+            isRtl: Dir is BitDir.Rtl,
+            scrollContainerId: _scrollContainerId,
+            scrollOffset: 0,
+            headerId: "",
+            footerId: "",
+            setCalloutWidth: false,
+            preserveCalloutWidth: false,
+            maxWindowWidth: 0);
     }
 
     private string GetItemKey(TItem item, string defaultKey)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs
@@ -218,6 +218,7 @@ await _js.BitCalloutToggleCallout(
             headerId: "",
             footerId: "",
             setCalloutWidth: false,
+            preserveCalloutWidth: false,
             maxWindowWidth: 0);
     }
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs
@@ -79,7 +79,12 @@ public partial class BitCallout : BitComponentBase
     [Parameter] public EventCallback<bool> OnToggle { get; set; }
 
     /// <summary>
-    /// Force the callout to set its content container width while openning it based on the available space and actual content.
+    /// Forces the callout to preserve its component's original width.
+    /// </summary>
+    [Parameter] public bool PreserveCalloutWidth { get; set; }
+
+    /// <summary>
+    /// Forces the callout to set its content container width while openning based on the available space and actual content.
     /// </summary>
     [Parameter] public bool SetCalloutWidth { get; set; }
 
@@ -200,6 +205,7 @@ await _js.BitCalloutToggleCallout(
             headerId: HeaderId ?? "",
             footerId: FooterId ?? "",
             setCalloutWidth: SetCalloutWidth,
+            preserveCalloutWidth: PreserveCalloutWidth,
             maxWindowWidth: MaxWindowWidth ?? 0);
 
         await OnToggle.InvokeAsync(IsOpen);
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalloutsJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalloutsJsRuntimeExtensions.cs
@@ -20,7 +20,8 @@ internal static class CalloutsJsRuntimeExtensions
         string headerId,
         string footerId,
         bool setCalloutWidth,
-        int maxWindowWidth = 0) where T : class
+        bool preserveCalloutWidth,
+        int maxWindowWidth) where T : class
     {
         return jsRuntime.Invoke<bool>("BitBlazorUI.Callouts.toggle",
                                       dotnetObj,
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts
@@ -19,6 +19,7 @@ namespace BitBlazorUI {
             headerId: string,
             footerId: string,
             setCalloutWidth: boolean,
+            preserveCalloutWidth: boolean,
             maxWindowWidth: number,
         ) {
             component ??= document.getElementById(componentId);
@@ -94,6 +95,11 @@ namespace BitBlazorUI {
                 callout.style.width = width + 'px';
                 calloutWidth = width;
             }
+            if (preserveCalloutWidth) {
+                let width = Math.min(componentWidth, calloutWidth);
+                callout.style.width = width + 'px';
+                calloutWidth = width;
+            }
 
             if (windowWidth < Utils.MAX_MOBILE_WIDTH && responsiveMode) {
                 callout.style.opacity = '1';
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.cs

Original file line number	Diff line number	Diff line change
`@@ -218,6 +218,7 @@ await _js.BitCalloutToggleCallout(`
`218`	`218`	`headerId: "",`
`219`	`219`	`footerId: "",`
`220`	`220`	`setCalloutWidth: false,`
	`221`	`+ preserveCalloutWidth: false,`
`221`	`222`	`maxWindowWidth: 0);`
`222`	`223`	`}`
`223`	`224`