Rebuild Popover with Floating UI (#324)

baoagency · Sep 29, 2023 · ecdc02d · ecdc02d
1 parent 6808d6c
commit ecdc02d
Show file tree

Hide file tree

Showing 8 changed files with 894 additions and 2,294 deletions.
diff --git a/app/assets/javascripts/polaris_view_components.js b/app/assets/javascripts/polaris_view_components.js
diff --git a/app/assets/javascripts/polaris_view_components/popover_controller.js b/app/assets/javascripts/polaris_view_components/popover_controller.js
@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { createPopper } from "@popperjs/core/dist/esm"
+import { computePosition, autoUpdate, offset, flip, shift } from "@floating-ui/dom"
 
 export default class extends Controller {
   static targets = ["activator", "popover", "template"]
@@ -11,48 +11,59 @@ export default class extends Controller {
   }
 
   connect() {
-    const popperOptions = {
-      placement: this.placementValue,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 5],
-          },
-        },
-        {
-          name: 'flip',
-          options: {
-            allowedAutoPlacements: ['top-start', 'bottom-start', 'top-end', 'bottom-end']
-          },
-        }
-      ]
-    }
-
     if (this.appendToBodyValue) {
       const clonedTemplate = this.templateTarget.content.cloneNode(true)
       this.target = clonedTemplate.firstElementChild
-      popperOptions['strategy'] = 'fixed'
-
       document.body.appendChild(clonedTemplate)
     }
 
-    this.popper = createPopper(this.activatorTarget, this.target, popperOptions)
+    this.target.style.display = 'none'
+
     if (this.activeValue) {
       this.show()
     }
   }
 
-  async toggle() {
-    this.target.classList.toggle(this.closedClass)
-    this.target.classList.toggle(this.openClass)
-    await this.popper.update()
+  disconnect() {
+    if (this.cleanup) {
+      this.cleanup()
+    }
+  }
+
+  updatePosition() {
+    if (this.cleanup) {
+      this.cleanup()
+    }
+    this.cleanup = autoUpdate(this.activatorTarget, this.target, () => {
+      computePosition(this.activatorTarget, this.target, {
+        placement: this.placementValue,
+        middleware: [
+          offset(5),
+          flip(),
+          shift({ padding: 5 })
+        ]
+      }).then(({x, y}) => {
+        Object.assign(this.target.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        })
+      })
+    })
+  }
+
+  toggle() {
+    if (this.target.classList.contains(this.openClass)) {
+      this.forceHide()
+    } else {
+      this.show()
+    }
   }
 
-  async show() {
+  show() {
+    this.target.style.display = 'block'
     this.target.classList.remove(this.closedClass)
     this.target.classList.add(this.openClass)
-    await this.popper.update()
+    this.updatePosition()
   }
 
   hide(event) {
@@ -64,6 +75,7 @@ export default class extends Controller {
   }
 
   forceHide() {
+    this.target.style.display = 'none'
     this.target.classList.remove(this.openClass)
     this.target.classList.add(this.closedClass)
   }

diff --git a/app/assets/javascripts/polaris_view_components/tooltip_controller.js b/app/assets/javascripts/polaris_view_components/tooltip_controller.js
@@ -17,38 +17,36 @@ export default class extends Controller {
 
     const arrowElement = element.querySelector("[data-tooltip-arrow]");
 
-    autoUpdate(element, this.tooltip, () => {
-      computePosition(element, this.tooltip, {
-        placement: this.positionValue,
-        middleware: [
-          offset(this.offsetValue),
-          flip(),
-          shift({ padding: 5 }),
-          arrow({ element: arrowElement })
-        ]
-      }).then(({x, y, placement, middlewareData}) => {
-        Object.assign(this.tooltip.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        })
+    computePosition(element, this.tooltip, {
+      placement: this.positionValue,
+      middleware: [
+        offset(this.offsetValue),
+        flip(),
+        shift({ padding: 5 }),
+        arrow({ element: arrowElement })
+      ]
+    }).then(({x, y, placement, middlewareData}) => {
+      Object.assign(this.tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
 
-        const {x: arrowX, y: arrowY} = middlewareData.arrow;
+      const {x: arrowX, y: arrowY} = middlewareData.arrow;
 
-        const staticSide = {
-          top: 'bottom',
-          right: 'left',
-          bottom: 'top',
-          left: 'right',
-        }[placement.split('-')[0]];
+      const staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+      }[placement.split('-')[0]];
 
-        Object.assign(arrowElement.style, {
-          left: arrowX != null ? `${arrowX}px` : '',
-          top: arrowY != null ? `${arrowY}px` : '',
-          right: '',
-          bottom: '',
-          [staticSide]: '-4px',
-        });
-      })
+      Object.assign(arrowElement.style, {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top: arrowY != null ? `${arrowY}px` : '',
+        right: '',
+        bottom: '',
+        [staticSide]: '-4px',
+      });
     })
   }
 

diff --git a/app/components/polaris/popover_component.rb b/app/components/polaris/popover_component.rb
@@ -55,7 +55,7 @@ def wrapper_arguments
         prepend_option(opts[:data], :controller, "polaris-popover")
         opts[:data][:polaris_popover_append_to_body_value] = @append_to_body
         opts[:data][:polaris_popover_active_value] = @active
-        opts[:data][:polaris_popover_placement_value] = popperjs_placement
+        opts[:data][:polaris_popover_placement_value] = popover_placement
         opts[:data][:polaris_popover_open_class] = "Polaris-Popover__PopoverOverlay--open"
         opts[:data][:polaris_popover_closed_class] = "Polaris-Popover__PopoverOverlay--closed"
         if @inline
@@ -106,13 +106,13 @@ def content_arguments
       end
     end
 
-    def popperjs_placement
+    def popover_placement
       placement =
         case @position
         when :above then "top"
         when :below then "bottom"
         else
-          "auto"
+          "bottom"
         end
       placement += "-start" if @alignment == :left
       placement += "-end" if @alignment == :right

diff --git a/demo/app/previews/autocomplete_component_preview.rb b/demo/app/previews/autocomplete_component_preview.rb
@@ -19,4 +19,7 @@ def empty_state
 
   def event_handler
   end
+
+  def long_page
+  end
 end
diff --git a/demo/app/previews/autocomplete_component_preview/long_page.html.erb b/demo/app/previews/autocomplete_component_preview/long_page.html.erb
@@ -0,0 +1,22 @@
+<% 3.times do %>
+  <%= polaris_card do %>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  <% end %>
+<% end %>
+
+<%= polaris_card do %>
+  <%= polaris_autocomplete do |autocomplete| %>
+    <% autocomplete.with_text_field(name: :tags, label: "Tags", placeholder: "Search") do |c| %>
+      <% c.with_prefix do %>
+        <%= polaris_icon(name: "SearchMinor") %>
+      <% end %>
+    <% end %>
+
+    <% autocomplete.with_option(label: "Rustic", value: "rustic") %>
+    <% autocomplete.with_option(label: "Antique", value: "antique") %>
+    <% autocomplete.with_option(label: "Vinyl", value: "vinyl") %>
+    <% autocomplete.with_option(label: "Vintage", value: "vintage") %>
+    <% autocomplete.with_option(label: "Refurbished", value: "refurbished") %>
+  <% end %>
+<% end %>
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "release": "npm publish"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.8",
+    "@floating-ui/dom": "^1.5.3",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@shopify/polaris": "^11.19.0",
     "postcss": "^8.4.29",
@@ -40,7 +40,6 @@
     "rollup-plugin-terser": "^7.0.2"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.3",
     "@hotwired/stimulus": "^3.2.2",
     "@rails/request.js": "^0.0.8"
   }

diff --git a/yarn.lock b/yarn.lock
@@ -76,11 +76,6 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@popperjs/core@^2.11.8":
-  version "2.11.8"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
-  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
-
 "@rails/request.js@^0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@rails/request.js/-/request.js-0.0.8.tgz#5e2e8da15013b1af7f04d759e4e9d1cff981865c"