hotwire_combobox 0.1.27 → 0.1.28

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e221d9fd94697b8faa4987a7464ec3e0325df4c7afb5177252dc3ed5e84c1869
-  data.tar.gz: 900ea551c230017aeb81525eb07599463336fb33508d2b30a25b7eaf55b5983b
+  metadata.gz: 8742f8a51c5eab21dc0ec69c0a3c2a232ecc43ef04342c2b16eee551dea92312
+  data.tar.gz: fcb66748f4d083a32641317aae3dcd788435301ce7fa4bb93edd6912dd707a52
 SHA512:
-  metadata.gz: 1bfb3c001fb07b9d5c40ed21b7229960e24830d598f0ae5e1baf4eda1c7d865e2b3418d57b955c702a6c3937be38cc74eb376b6d717a74955aba31854bd98581
-  data.tar.gz: e921c0714ef63f7bf32dd96257fdc3b08ccc963c6f962420c892b0afe4e4ad9f4efd94dccee9c41a8ad00e1cc8d9cd35b5748e776dcd136bb9134d7b13d722f8
+  metadata.gz: 1175734ef7d8052bb3dd092fbf900386e95ef2eb419b5e29564cbd5cdd7dcab8ce5df7b7bd18b9dc28edd837fce6aee0c48710b781e6004dd7f8acb03536189b
+  data.tar.gz: 01d02f1275c151584f3a44a82640d63d4a3fcfeeda26297b953b2b8789422127c34140a9930111b4d6e6e09311f9f165efe6a24328d22ff32ae963334a482ab0

data/app/assets/javascripts/models/combobox/dialog.js

@@ -33,9 +33,10 @@ Combobox.Dialog = Base => class extends Base {
 
   _resizeDialog = () => {
     if (window.visualViewport) {
-      const fullHeight = window.innerHeight
-      const viewportHeight = window.visualViewport.height
-      this.dialogTarget.style.setProperty("--hw-dialog-bottom-padding", `${fullHeight - viewportHeight}px`)
+      this.dialogTarget.style.setProperty(
+        "--hw-visual-viewport-height",
+        `${window.visualViewport.height}px`
+      )
     }
   }
 

data/app/assets/javascripts/models/combobox/toggle.js

@@ -24,6 +24,7 @@ Combobox.Toggle = Base => class extends Base {
   closeOnClickOutside(event) {
     const target = event.target
 
+    if (!this._isOpen) return
     if (this.element.contains(target) && !this._isDialogDismisser(target)) return
     if (this._withinElementBounds(event)) return
 
@@ -100,6 +101,7 @@ Combobox.Toggle = Base => class extends Base {
     this._moveArtifactsInline()
     this.dialogTarget.close()
     this._restoreBodyScroll()
+    this._actingCombobox.scrollIntoView({ block: "center" })
   }
 
   _closeInline() {

data/app/assets/stylesheets/hotwire_combobox.css

@@ -6,7 +6,6 @@
   --hw-border-width--slim: 1px;
   --hw-border-width--thick: 2px;
 
-  --hw-dialog-bottom-padding: 0;
   --hw-dialog-font-size: 1.25rem;
   --hw-dialog-input-height: 2.5rem;
   --hw-dialog-label-alignment: center;
@@ -37,6 +36,8 @@
 
   --hw-padding--slim: 0.375rem;
   --hw-padding--thick: 0.75rem;
+
+  --hw-visual-viewport-height: 100vh;
 }
 
 .hw-combobox {
@@ -98,6 +99,7 @@
   left: 0;
   line-height: var(--hw-line-height);
   list-style: none;
+  margin: 0;
   max-height: var(--hw-listbox-height);
   overflow: auto;
   padding: 0;
@@ -125,16 +127,31 @@
   background-color: var(--hw-active-bg-color);
 }
 
+.hw-combobox__dialog__wrapper {
+  display: none;
+  height: 100vh;
+  inset-inline-start: 0;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  width: 100%;
+
+  &:has([open]) {
+    display: flex;
+  }
+}
+
 .hw-combobox__dialog {
   border: 0;
   font-size: var(--hw-dialog-font-size);
   height: auto;
   margin: 0;
-  max-height: none;
+  max-height: calc(var(--hw-visual-viewport-height) - var(--hw-dialog-top-offset));
   max-width: none;
   overflow: hidden;
-  padding: var(--hw-dialog-padding) var(--hw-dialog-padding) var(--hw-dialog-bottom-padding) var(--hw-dialog-padding);
-  position: fixed;
+  padding: var(--hw-dialog-padding);
+  pointer-events: auto;
+  position: absolute;
   top: var(--hw-dialog-top-offset);
   width: auto;
 
@@ -146,7 +163,7 @@
   }
 
   &::backdrop {
-    background-color: rgba(0, 0, 0, 0.6);
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 50%, white 50%);
   }
 }
 

data/app/presenters/hotwire_combobox/component.rb

@@ -82,6 +82,12 @@ class HotwireCombobox::Component
   end
 
 
+  def dialog_wrapper_attrs
+    {
+      class: "hw-combobox__dialog__wrapper"
+    }
+  end
+
   def dialog_attrs
     {
       class: "hw-combobox__dialog",

data/app/views/hotwire_combobox/combobox/_dialog.html.erb

@@ -1,7 +1,9 @@
 <%= tag.div **component.dialog_focus_trap_attrs %>
 
-<%= tag.dialog **component.dialog_attrs do %>
-  <%= tag.label component.dialog_label, **component.dialog_label_attrs %>
-  <%= tag.input **component.dialog_input_attrs %>
-  <%= tag.ul **component.dialog_listbox_attrs %>
+<%= tag.div **component.dialog_wrapper_attrs do %>
+  <%= tag.dialog **component.dialog_attrs do %>
+    <%= tag.label component.dialog_label, **component.dialog_label_attrs %>
+    <%= tag.input **component.dialog_input_attrs %>
+    <%= tag.ul **component.dialog_listbox_attrs %>
+  <% end %>
 <% end %>

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.27"
+  VERSION = "0.1.28"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.27
+  version: 0.1.28
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-02-04 00:00:00.000000000 Z
+date: 2024-02-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails