added floating-ui

HeadlessBlazor.sln

@@ -8,9 +8,6 @@ EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "HeadlessBlazor.Dropdown", "src\HeadlessBlazor.Dropdown\HeadlessBlazor.Dropdown.csproj", "{E207C22E-D5FC-47C0-BA77-2A75B0B03272}"
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Docs", "Docs", "{45E6AD2B-E550-4375-A452-63A8FE7787E4}"
-	ProjectSection(SolutionItems) = preProject
-		README.md = README.md
-	EndProjectSection
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "HeadlessBlazor.Core", "src\HeadlessBlazor.Core\HeadlessBlazor.Core.csproj", "{E3A1957A-9803-4B81-B1F0-EB66F8E7DE12}"
 EndProject

docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/SimpleDropdownExample.razor

@@ -1,13 +1,28 @@
-<HBDropdown class="dropdown d-inline-block">
-    <HBDropdownTrigger class="btn btn-primary dropdown-toggle">Click Me</HBDropdownTrigger>
-    <HBDropdownItems class="dropdown-menu show">
-        <HBDropdownItem class="dropdown-item">Default</HBDropdownItem>
-        <HBDropdownItemButton class="dropdown-item">Button</HBDropdownItemButton>
-        <HBDropdownItemButton class="dropdown-item" disabled="true">Disabled Button</HBDropdownItemButton>
-        <HBDropdownItemButton class="dropdown-item" @onclick:stopPropagation="true">Button (Stop Propagation)</HBDropdownItemButton>
-        <HBDropdownItemLink class="dropdown-item">Link</HBDropdownItemLink>
-        <HBDropdownItemLink class="dropdown-item" href="#" @onclick:preventDefault="true">Link (Prevent Default)</HBDropdownItemLink>
-        <HBDropdownItemLink class="dropdown-item" href="#" @onclick:stopPropagation="true">Link (Stop Propagation)</HBDropdownItemLink>
-        <HBDropdownItemLink class="dropdown-item" href="#" OnClickPreventDefault="true" OnClickStopPropagation="true">Link (Prevent Default and Stop Propagation)</HBDropdownItemLink>
-    </HBDropdownItems>
-</HBDropdown>
+<div class="d-flex justify-content-between">
+    <HBDropdown class="dropdown d-inline-block">
+        <HBDropdownTrigger class="btn btn-primary dropdown-toggle">Click Me</HBDropdownTrigger>
+        <HBDropdownItems class="@(context.IsOpen ? "dropdown-menu show" : "dropdown-menu")">
+            <HBDropdownItem class="dropdown-item">Default</HBDropdownItem>
+            <HBDropdownItemButton class="dropdown-item">Button</HBDropdownItemButton>
+            <HBDropdownItemButton class="dropdown-item" disabled="true">Disabled Button</HBDropdownItemButton>
+            <HBDropdownItemButton class="dropdown-item" @onclick:stopPropagation="true">Button (Stop Propagation)</HBDropdownItemButton>
+            <HBDropdownItemLink class="dropdown-item">Link</HBDropdownItemLink>
+            <HBDropdownItemLink class="dropdown-item" href="#" @onclick:preventDefault="true">Link (Prevent Default)</HBDropdownItemLink>
+            <HBDropdownItemLink class="dropdown-item" href="#" @onclick:stopPropagation="true">Link (Stop Propagation)</HBDropdownItemLink>
+            <HBDropdownItemLink class="dropdown-item" href="#" OnClickPreventDefault="true" OnClickStopPropagation="true">Link (Prevent Default and Stop Propagation)</HBDropdownItemLink>
+        </HBDropdownItems>
+    </HBDropdown>
+    <HBDropdown class="dropdown d-inline-block">
+        <HBDropdownTrigger class="btn btn-primary dropdown-toggle">Click Me</HBDropdownTrigger>
+        <HBDropdownItems class="@(context.IsOpen ? "dropdown-menu show" : "dropdown-menu")">
+            <HBDropdownItem class="dropdown-item">Default</HBDropdownItem>
+            <HBDropdownItemButton class="dropdown-item">Button</HBDropdownItemButton>
+            <HBDropdownItemButton class="dropdown-item" disabled="true">Disabled Button</HBDropdownItemButton>
+            <HBDropdownItemButton class="dropdown-item" @onclick:stopPropagation="true">Button (Stop Propagation)</HBDropdownItemButton>
+            <HBDropdownItemLink class="dropdown-item">Link</HBDropdownItemLink>
+            <HBDropdownItemLink class="dropdown-item" href="#" @onclick:preventDefault="true">Link (Prevent Default)</HBDropdownItemLink>
+            <HBDropdownItemLink class="dropdown-item" href="#" @onclick:stopPropagation="true">Link (Stop Propagation)</HBDropdownItemLink>
+            <HBDropdownItemLink class="dropdown-item" href="#" OnClickPreventDefault="true" OnClickStopPropagation="true">Link (Prevent Default and Stop Propagation)</HBDropdownItemLink>
+        </HBDropdownItems>
+    </HBDropdown>
+</div>

docs/HeadlessBlazor.Docs/Components/Pages/Home.razor.css

@@ -1,4 +1,8 @@
-.page-root > * {
+.page-root {
+    height: 200vh;
+}
+
+.page-root > * {
     padding: 0.5rem 1rem;
 }
 

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "headlessblazor",
+  "version": "1.0.0",
+  "description": "<h1>\r   <img src=\"HeadlessBlazorLogo.svg\" width=\"24\" hspace=\"4\" /> Headless Blazor\r </h1>",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.5"
+  }
+}

src/HeadlessBlazor.Core/Behaviors/HBOutsideClickBehavior.razor

@@ -1,8 +1,7 @@
 @implements IAsyncDisposable
-
 @code {
-    private IJSObjectReference? jsObjRef;
-    private DotNetObjectReference<HBOutsideClickBehavior>? objRef;
+    private DotNetObjectReference<HBOutsideClickBehavior>? dotNetObjRef;
+    private IJSObjectReference? handlerRef;
 
     [Inject]
     private IJSRuntime JS { get; set; } = default!;
@@ -15,13 +14,14 @@
 
     public async ValueTask DisposeAsync()
     {
-        if (jsObjRef is not null)
+        if (handlerRef is not null)
         {
-            await jsObjRef.InvokeVoidAsync("dispose");
-            await jsObjRef.DisposeAsync();
+            await handlerRef.InvokeVoidAsync("dispose");
+            await handlerRef.DisposeAsync();
+            handlerRef = null;
         }
 
-        objRef?.Dispose();
+        dotNetObjRef?.Dispose();
     }
 
     [JSInvokable]
@@ -30,17 +30,14 @@
         await OnClick.InvokeAsync();
     }
 
-    protected override void OnInitialized()
-    {
-        objRef = DotNetObjectReference.Create(this);
-    }
-
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            var module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/HeadlessBlazor.Core/Behaviors/HBOutsideClickBehavior.razor.js");
-            jsObjRef = await module.InvokeAsync<IJSObjectReference>("OutsideClickBehavior.createInstance", Container.ElementReference, objRef);
+            dotNetObjRef ??= DotNetObjectReference.Create(this);
+            var moduleName = nameof(HBOutsideClickBehavior);
+            var module = await JS.InvokeAsync<IJSObjectReference>("import", $"./_content/HeadlessBlazor.Core/Behaviors/{moduleName}.razor.js");
+            handlerRef = await module.InvokeAsync<IJSObjectReference>($"{moduleName}.createInstance", Container.ElementReference, dotNetObjRef);
             await module.DisposeAsync();
         }
     }

src/HeadlessBlazor.Core/Behaviors/HBOutsideClickBehavior.razor.js

@@ -1,36 +1,37 @@
-export class OutsideClickBehavior {
+export class HBOutsideClickBehavior {
 
     /**
      * @param {Element} element
      * @param {any} dotNetRef
+     * @returns {HBOutsideClickBehavior}
      */
     static createInstance(element, dotNetRef) {
-        return new OutsideClickBehavior(element, dotNetRef);
+        return new HBOutsideClickBehavior(element, dotNetRef);
     }
 
     /**
+     * @constructor
      * @param {Element} element
      * @param {any} dotNetRef
      */
     constructor(element, dotNetRef) {
-        console.log('creating');
         this.element = element;
         this.dotNetRef = dotNetRef;
-
-        this.handleDocumentClick = this.handleDocumentClick.bind(this);
-
+
         document.addEventListener('click', this.handleDocumentClick);
     }
 
     dispose() {
-        console.log('disposing');
         document.removeEventListener('click', this.handleDocumentClick);
     }
 
     /**
      * @param {MouseEvent} e
      */
-    handleDocumentClick(e) {
+    handleDocumentClick = e => {
+        console.log('you clicked outside!');
+        console.log(this.element);
+
         if (!this.element.contains(e.target)) {
             this.dotNetRef.invokeMethodAsync('NotifyClickOutside');
         }

src/HeadlessBlazor.Core/Behaviors/HBPopoverBehavior.razor

@@ -0,0 +1,35 @@
+@implements IAsyncDisposable
+@code {
+    private DotNetObjectReference<HBPopoverBehavior>? dotNetObjRef;
+    private IJSObjectReference? popover;
+
+    [Inject]
+    private IJSRuntime JS { get; set; } = default!;
+
+    [Parameter]
+    public IReferenceable Container { get; set; } = default!;
+
+    public async ValueTask DisposeAsync()
+    {
+        if (popover is not null)
+        {
+            await popover.InvokeVoidAsync("dispose");
+            await popover.DisposeAsync();
+            popover = null;
+        }
+
+        dotNetObjRef?.Dispose();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            dotNetObjRef ??= DotNetObjectReference.Create(this);
+            var moduleName = nameof(HBPopoverBehavior);
+            var module = await JS.InvokeAsync<IJSObjectReference>("import", $"./_content/HeadlessBlazor.Core/Behaviors/{moduleName}.razor.js");
+            popover = await module.InvokeAsync<IJSObjectReference>($"{moduleName}.createInstance", Container.ElementReference, dotNetObjRef);
+            await module.DisposeAsync();
+        }
+    }
+}

src/HeadlessBlazor.Core/Behaviors/HBPopoverBehavior.razor.js

@@ -0,0 +1,42 @@
+import {
+    autoUpdate,
+    computePosition,
+    flip
+} from '../@floating-ui/dom/dist/floating-ui.dom.browser.min.mjs';
+
+export class HBPopoverBehavior {
+
+    /**
+     * @static
+     * @param {Element} container
+     * @param {any} dotNetRef
+     * @returns {HBPopoverBehavior}
+     */
+    static createInstance(container) {
+        return new HBPopoverBehavior(container);
+    }
+
+    /**
+     * Creates a new instance of HBPopoverBehavior.
+     * @constructor
+     * @param {Element} container
+     * @param {any} dotNetRef
+     */
+    constructor(container) {
+        const anchor = container.querySelector('[hb-popover-anchor]');
+        const floater = container.querySelector('[hb-popover]');
+
+        this.dispose = autoUpdate(anchor, floater, () => {
+            computePosition(anchor, floater, {
+                placement: 'bottom-start',
+                middleware: [flip()]
+            }).then(({ x, y }) => {
+                Object.assign(floater.style, {
+                    display: `block`,
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+            })
+        });
+    }
+}

src/HeadlessBlazor.Core/Behaviors/ICloseable.cs

@@ -1,6 +1,6 @@
 namespace HeadlessBlazor.Behaviors;
 
-public interface ICloseable : IReferenceable
+public interface ICloseable
 {
     Task CloseAsync();
 }

src/HeadlessBlazor.Core/HeadlessBlazor.Core.csproj

@@ -7,7 +7,6 @@
     <RootNamespace>HeadlessBlazor</RootNamespace>
   </PropertyGroup>
 
-
   <ItemGroup>
     <SupportedPlatform Include="browser" />
   </ItemGroup>

src/HeadlessBlazor.Core/wwwroot/@floating-ui/core/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2021-present Floating UI contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

src/HeadlessBlazor.Core/wwwroot/@floating-ui/core/README.md

@@ -0,0 +1,4 @@
+# @floating-ui/core
+
+This is the platform-agnostic core of Floating UI, exposing the main
+`computePosition` function but no platform interface logic.