Bottom sheet updates

src/GenOne.Blazor.BottomSheet/demo/BlazorHybrid/Pages/Index.razor

@@ -9,7 +9,7 @@ Times closed: @_closedCount;
 <button @onclick="OpenSheet">Open Sheet</button>
 <button @onclick="OpenSheet2">Open Sheet 2</button>
 
-<BottomSheetBlazorJs @ref="_sheet" Sensitivity="5" Stops="new[] { 95 }" OnClosed="() => _closedCount++">
+<BottomSheetBlazorJs @ref="_sheet" Sensitivity="5" DefaultStops="[95]" OnClosed="() => _closedCount++">
     @if (isTrue)
     {
         <Counter OnClick="Test" />
@@ -20,7 +20,8 @@ Times closed: @_closedCount;
     }
 </BottomSheetBlazorJs>
 
-<BottomSheetBlazorJs @ref="_sheet2" Sensitivity="20" Stops="new[] { 5 }">
+<BottomSheetBlazorJs @ref="_sheet2" Sensitivity="20" DefaultStops="[5]">
+    <button @onclick="Callback">Offset</button>
     <div>Bottome sheet 2</div>
 </BottomSheetBlazorJs>
 
@@ -30,27 +31,33 @@ Times closed: @_closedCount;
     private BottomSheetBlazorJs? _sheet;
     private BottomSheetBlazorJs? _sheet2;
     private bool isTrue = false;
-
+    private string _offset = "0";
     private int _closedCount;
 
     public async Task OpenSheet()
     {
         if (_sheet is null)
             throw new ArgumentNullException();
 
-        await _sheet.Open();
+        await _sheet.Open([50]);
     }
 
     public async Task OpenSheet2()
     {
         if (_sheet2 is null)
             throw new ArgumentNullException();
 
-        await _sheet2.Open();
+        await _sheet2.Open([50]);
     }
 
     private void Test()
     {
         isTrue = !isTrue;
     }
+
+    private void Callback()
+    {
+        _offset = _offset == "0" ? "50px" : "0";
+        _sheet2?.AddBottomOffset(_offset);
+    }
 }

src/GenOne.Blazor.BottomSheet/src/Components/BottomSheetBlazorJs.razor

@@ -2,11 +2,12 @@
 @using GenOne.Blazor.BottomSheet.JsInterop;
 @inject BottomSheetJsInterop Interop
 
+@implements IAsyncDisposable
 
 <div @ref="_sheetRef" class="sheet" role="dialog" aria-hidden data-bs>
     <div class="overlay" data-bs-overlay></div>
 
-    <div class="contents" data-bs-contents style="height: 0vh; width: 100%;">
+    <div class="contents" data-bs-contents>
         <main class="bottom-sheet-body @Class">
             @ChildContent
         </main>
@@ -16,20 +17,22 @@
 @code {
     private ElementReference _sheetRef;
 
+    public ElementReference Ref => _sheetRef;
+
     [Parameter]
     public EventCallback OnClosed { get; set; }
 
     [Parameter]
     public bool Passive { get; set; }
 
     [Parameter]
-    public int[] Stops
+    public int[] DefaultStops
     {
-        get => _stops;
-        set => _stops = value.Order().ToArray();
+        get => _defaultStops;
+        set => _defaultStops = value.Order().ToArray();
     }
 
-    private int[] _stops = { 95 };
+    private int[] _defaultStops = [95];
 
     [Parameter]
     public int Sensitivity { get; set; } = 15;
@@ -43,13 +46,13 @@
     [Parameter]
     public EventCallback WhenInitialized { get; set; }
 
-    private IJSObjectReference? _bottomSheetReference;
+    private BottomSheetReference? _bottomSheetReference;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            _bottomSheetReference = await Interop.InitializeBottomSheet(_sheetRef, Stops, Passive, Sensitivity, OnClosed.InvokeAsync);
+            _bottomSheetReference = await Interop.InitializeBottomSheet(_sheetRef, Passive, Sensitivity, OnClosed.InvokeAsync);
             await WhenInitialized.InvokeAsync();
         }
     }
@@ -59,17 +62,25 @@
         StateHasChanged();
     }
 
-    public async Task Open()
+    public ValueTask Open(int[]? stops = null)
     {
         BottomSheetNotInitializedException.ThrowIf(_bottomSheetReference is null);
-
-        await Interop.OpenBottomSheet(_bottomSheetReference);
+        return _bottomSheetReference.Open(stops ?? DefaultStops);
     }
 
-    public async Task Close()
+    public ValueTask Close()
     {
         BottomSheetNotInitializedException.ThrowIf(_bottomSheetReference is null);
+        return _bottomSheetReference.Close();
+    }
 
-        await Interop.CloseBottomSheet(_bottomSheetReference);
+    public ValueTask AddBottomOffset(string offset)
+    {
+        return Interop.AddBottomOffset(_sheetRef, offset);
+    }
+
+    public ValueTask DisposeAsync()
+    {
+        return _bottomSheetReference?.DisposeAsync() ?? ValueTask.CompletedTask;
     }
 }

src/GenOne.Blazor.BottomSheet/src/JsInterop/BottomSheetJsInterop.cs

@@ -9,23 +9,18 @@ internal class BottomSheetJsInterop(IJSRuntime jsRuntime) : BaseJsInterop(jsRunt
         private const string BottomSheetInteropName = "bottom-sheet.js";
         private const string BottomSheetInteropPath = $"{InteropConfig.BaseJsFolder}{BottomSheetInteropName}";
 
-        internal async ValueTask<IJSObjectReference> InitializeBottomSheet(ElementReference sheetElement, int[] stops, bool passive, int sensitivity, Func<Task> onClosed)
+        public async ValueTask<BottomSheetReference> InitializeBottomSheet(ElementReference sheetElement, bool passive, int sensitivity, Func<Task> onClosed)
         {
             var module = await EnsureModuleImported();
             var handler = JsHandlerFactory.AsyncCallbackHandler(onClosed);
-            return await module.InvokeAsync<IJSObjectReference>("initializeBottomSheet", sheetElement, stops, passive, sensitivity, handler);
+            var bsRef = await module.InvokeAsync<IJSObjectReference>("initializeBottomSheet", sheetElement, passive, sensitivity, handler);
+            return new BottomSheetReference(bsRef);
         }
 
-        internal async ValueTask OpenBottomSheet(IJSObjectReference bottomSheetReference)
+        public async ValueTask AddBottomOffset(ElementReference sheetElement, string offset)
         {
             var module = await EnsureModuleImported();
-            await module.InvokeVoidAsync("openBottomSheet", bottomSheetReference);
-        }
-
-        internal async ValueTask CloseBottomSheet(IJSObjectReference bottomSheetReference)
-        {
-            var module = await EnsureModuleImported();
-            await module.InvokeVoidAsync("closeBottomSheet", bottomSheetReference);
+            await module.InvokeVoidAsync("addBottomOffset", sheetElement, offset);
         }
     }
 }

src/GenOne.Blazor.BottomSheet/src/JsInterop/BottomSheetReference.cs

@@ -0,0 +1,15 @@
+using Microsoft.JSInterop;
+
+namespace GenOne.Blazor.BottomSheet.JsInterop;
+
+internal class BottomSheetReference(IJSObjectReference bottomSheetReference) : IAsyncDisposable
+{
+    public ValueTask Open(int[] stops) 
+        => bottomSheetReference.InvokeVoidAsync("open", stops);
+
+    public ValueTask Close() 
+        => bottomSheetReference.InvokeVoidAsync("close");
+
+    public ValueTask DisposeAsync() 
+        => bottomSheetReference.DisposeAsync();
+}

src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.css

@@ -47,8 +47,10 @@
   overflow-y: hidden;
   max-width: 70rem;
   max-height: 100vh;
-  height: 30vh;
+  height: 0vh;
+  width: 100%;
   box-sizing: border-box;
+  position: absolute;
 }
 
 .sheet .contents[full-screen] {

src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.scss

@@ -56,8 +56,10 @@ $max-width: 70rem;
     overflow-y: hidden;
     max-width: 70rem;
     max-height: 100vh;
-    height: 30vh;
+    height: 0vh;
+    width: 100%;
     box-sizing: border-box;
+    position: absolute;
 }
 
 .sheet .contents[full-screen] {

src/GenOne.Blazor.BottomSheet/src/wwwroot/bottom-sheet.js

@@ -1,15 +1,13 @@
 class BottomSheet {
     /**
      * @param {Element} sheet
-     * @param {number[]} stops
      * @param {boolean} passive
      * @param {number} sensitivity
      * @param {function} onClosedHandler
      */
-    constructor(sheet, stops = [], passive, sensitivity, onClosedHandler) {
+    constructor(sheet, passive, sensitivity, onClosedHandler) {
         this._sheet = sheet;
         this._onClosedHandler = onClosedHandler;
-        this._stops = stops;
         this._sensitivity = sensitivity;
         this._passive = passive;
 
@@ -222,9 +220,15 @@
         }
     };
 
-    open() {
+    /**
+    * Open bottom sheet
+    * @param {number[]} stops
+    */
+    open(stops) {
         if (!this._hidden) return;
 
+        this._stops = stops;
+
         this._hidden = false;
         this._height = this._stops[0];
 
@@ -330,18 +334,11 @@ export const initializeBottomSheet = (
     return new BottomSheet(sheet, stops, passive, sensitivity, onClosedHandler);
 };
 
-/**
- * Open bottom sheet
- * @param {BottomSheet} bottomSheetInstance
- */
-export const openBottomSheet = (bottomSheetInstance) => {
-    bottomSheetInstance.open();
-};
-
 /**
  * Close bottom sheet
- * @param {BottomSheet} bottomSheetInstance
+ * @param {Element} sheet
+ * @param {string} bottomOffset
  */
-export const closeBottomSheet = (bottomSheetInstance) => {
-    bottomSheetInstance.close();
+export const addBottomOffset = (sheetReference, bottomOffset) => {
+    sheetReference.querySelector('[data-bs-contents]').style.bottom = bottomOffset;
 };