Add PreserveCalloutWidth option to callout infrastructure (#11505)

[msynk]

closes #11505

Summary by CodeRabbit

• New Features
  • Added width-preservation capabilities to callout-based components, allowing callouts to maintain their original dimensions when toggling. Enhanced callout sizing controls provide improved management of responsive width behavior across Dropdowns, DatePickers, TimePickers, and related components.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This PR introduces a new PreserveCalloutWidth parameter to the Callout component that preserves the component's original width when toggling. The interop method signature is updated to include this new parameter, and all call sites are refactored to use named parameters for clarity.

Changes

Cohort / File(s)	Summary
Callout components refactored to named parameters src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs, src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor.cs, src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs, src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs, src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs, src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs, src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor.cs, src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs, src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs	Refactored BitCalloutToggleCallout invocations from positional to named parameters, passing explicit arguments: dotnetObj, componentId, component, calloutId, callout, isCalloutOpen, responsiveMode, dropDirection, isRtl, scrollContainerId, scrollOffset, headerId, footerId, setCalloutWidth, preserveCalloutWidth, maxWindowWidth.
Core Callout component src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs	Added new public parameter PreserveCalloutWidth (bool) to preserve the component's original width; updated interop call to pass this parameter.
Interop extension src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalloutsJsRuntimeExtensions.cs	Updated BitCalloutToggleCallout method signature, replacing setCalloutWidth with preserveCalloutWidth parameter and removing default value for maxWindowWidth to make it required.
JavaScript implementation src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts	Added preserveCalloutWidth parameter to Callouts.toggle() method; when true, computes new width as minimum of component width and current callout width, then applies it to the callout.
Demo component src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.cs	Added new parameter entry PreserveCalloutWidth (bool, default false) to demonstrate the new width-preservation feature.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Component as Callout Component
    participant Interop as JS Interop
    participant Callouts as Callouts.ts

    User->>Component: ToggleCallout()
    Component->>Interop: BitCalloutToggleCallout(..., preserveCalloutWidth, ...)
    Interop->>Callouts: toggle(..., preserveCalloutWidth, ...)
    
    rect rgb(220, 240, 255)
    Note over Callouts: New Width Preservation Logic
    alt preserveCalloutWidth == true
        Callouts->>Callouts: newWidth = min(componentWidth, calloutWidth)
        Callouts->>Callouts: Apply newWidth to callout
    end
    end
    
    Callouts->>Callouts: Handle visibility & positioning
    Callouts->>Component: Return result
    Component->>User: Callout toggled with preserved width

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Files affected: 13+ files with largely homogeneous changes (consistent parameter refactoring pattern across multiple components)
• Key logic change: New width-preservation logic in Callouts.ts requires careful review for correctness
• Signature change: Method signature update in CalloutsJsRuntimeExtensions.cs affects all call sites; verify all have been updated consistently
• Parameter mapping: Ensure the new preserveCalloutWidth parameter flows correctly through interop layer from C# to JavaScript

Poem

🐰 A width-preserving hop, we say,
Callouts now keep their form at play!
From C# through JS it flows,
With named parameters—clarity shows!
The rabbit grins, for widths are blessed. 🎉

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "Add PreserveCalloutWidth option to callout infrastructure (#11505)" clearly and specifically summarizes the main change in the changeset. It is concise, avoids vague terminology, and directly conveys what is being implemented—a new PreserveCalloutWidth option for the Callout component. The title accurately reflects the core functionality being added across the multiple modified files.
Linked Issues Check	✅ Passed	The PR fully addresses the objective from linked issue #11505, which requests a new option to force preservation of the Callout component's original width. The implementation includes adding the PreserveCalloutWidth public parameter to BitCallout.razor.cs, updating the JS interop extension method signature in CalloutsJsRuntimeExtensions.cs to support the new parameter, implementing the width-preservation logic in Callouts.ts (computing the minimum of component width and callout width when enabled), and consistently propagating this parameter through all affected components that use BitCalloutToggleCallout. The demo component is also updated to showcase the new parameter, demonstrating complete coverage of the requested feature.
Out of Scope Changes Check	✅ Passed	The code changes are directly scoped to implementing the PreserveCalloutWidth feature. While many component files undergo refactoring from positional to named parameters when calling BitCalloutToggleCallout, this refactoring appears to be a necessary supporting change to accommodate the updated interop method signature. The CalloutsJsRuntimeExtensions.cs changes introduce the new preserveCalloutWidth parameter as a replacement for the previous setCalloutWidth pattern and make maxWindowWidth required, necessitating the parameter refactoring across callsites. All modifications across BitCallout, the JavaScript interop layer, TypeScript implementation, and consuming components are cohesive parts of implementing the single requested feature.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalloutsJsRuntimeExtensions.cs (1)

26-42: Critical: Missing preserveCalloutWidth parameter in JS invocation.

The preserveCalloutWidth parameter is declared in the method signature (line 23) but is not passed to the JavaScript function. This will cause the width preservation feature to not work at all.

Apply this diff to include the missing parameter:

         return jsRuntime.Invoke<bool>("BitBlazorUI.Callouts.toggle",
                                       dotnetObj,
                                       componentId,
                                       component,
                                       calloutId,
                                       callout,
                                       isCalloutOpen,
                                       responsiveMode,
                                       dropDirection,
                                       isRtl,
                                       scrollContainerId,
                                       scrollOffset,
                                       headerId,
                                       footerId,
                                       setCalloutWidth,
+                                      preserveCalloutWidth,
                                       maxWindowWidth);

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between f568119 and bbe8115.

📒 Files selected for processing (13)

• src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs (2 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor.cs (2 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs (2 hunks)
• src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalloutsJsRuntimeExtensions.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts (2 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.cs (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build and test

🔇 Additional comments (11)

src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts (1)

22-22: LGTM! Width preservation logic is correct.

The new preserveCalloutWidth parameter and its implementation look good. The logic correctly computes the minimum of component and callout width to ensure the callout doesn't exceed the component's width when preservation is enabled.

Also applies to: 98-102

src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs (1)

206-223: LGTM! Consistent parameter passing.

The addition of preserveCalloutWidth: false is consistent with the broader refactor and correctly uses named parameters for clarity.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs (1)

523-540: LGTM! Named parameters improve readability.

The refactor to named parameters makes the interop call much clearer and easier to maintain. The addition of width-related parameters is consistent with the PR objectives.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs (1)

1927-1944: LGTM! Consistent refactor to named parameters.

The change follows the same pattern as other components in the PR, improving code clarity through named parameters.

src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs (1)

581-598: LGTM! Named parameters improve maintainability.

The refactor to named parameters is consistent with the broader changes in this PR and makes the code more maintainable.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs (1)

1404-1421: LGTM! Consistent with project-wide refactor.

The change to named parameters is consistent and correct, aligning with the broader improvements in this PR.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor.cs (1)

539-556: LGTM! Final component refactored consistently.

The refactor to named parameters completes the consistent pattern across all components, improving code quality and maintainability.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.cs (1)

96-101: LGTM!

The new PreserveCalloutWidth parameter is well-documented and correctly defined.

src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs (1)

82-84: LGTM!

The PreserveCalloutWidth parameter is correctly defined and properly passed to the JS interop layer.

Also applies to: 208-208

src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs (1)

610-626: LGTM!

The refactoring to named parameters improves clarity. The default values for setCalloutWidth: false and preserveCalloutWidth: false are appropriate for this component.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor.cs (1)

435-451: LGTM!

The refactoring to named parameters improves clarity. The values setCalloutWidth: true and preserveCalloutWidth: false are appropriate for the TimePicker component.