RubyGems - polaris_view_components - Versions diffs - 0.10.1 → 0.12.0 - Mend

polaris_view_components 0.10.1 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6559d19f7338ce9195fa1903e58f14596006d813bbc30599061bce4c00d49c9d
-  data.tar.gz: 61223fea9beddaa96b4762b8b7dc00cf42051a462e92bab25733d6f35b232ae2
+  metadata.gz: c6ac82b9541cc182ed79f45d4850e23a0afe6255e3b94d0071c2cc9716dc81e8
+  data.tar.gz: 48de38d93d9d972eb4becc326242ea894ea56532f68e0527339ac0647ee662f1
 SHA512:
-  metadata.gz: 8ad6e0a1dc0f3f491e6beeae7dc4c6c72a8a077ec0b6f6c4cc04e95723761aa93181d663ef9f9f52945d5fad3be40a9d3a3b7e3f64504f9e347925b733841fb5
-  data.tar.gz: 4b5b661dbd74e991dde7e7386f33b65caeaac53839b0c3c0d3951acb30f5179d1d007d97a08c058024c7e1a4e72d56fba8ba0d0a12729b885ebecf458a4116b3
+  metadata.gz: 20b0f280d097398cf7793b35ddf77d8dfcdafea0039dd5114e1261fafa62d7bad528b1e3b83ac0015dce4af3619459f711b16bbeb85429f428d5766b1457b82d
+  data.tar.gz: 5d187b4045398761dc1dfd1052965220ee80888a5ef17a3cef8eba19e6632ecf633497275f0833bd36c1e8ff0e0cb22d1fd11a8f0639ff0d2ba4a70a9881da88

data/README.md CHANGED Viewed

@@ -20,95 +20,57 @@ Render Polaris ViewComponents:
 <% end %>
 ```
+## Dependencies
+- [Stimulus](https://stimulus.hotwired.dev/)
 ## Installation
-In `Gemfile`, add:
+Add to `Gemfile`:
 ```ruby
-gem 'polaris_view_components'
+gem "polaris_view_components"
 ```
-Run install generator:
+Run installer:
 ```bash
-rails generate polaris_view_components:install
+bin/rails polaris_view_components:install
 ```
-Setup Polaris styles in your layouts `<head>` tag:
-```erb
-<%= stylesheet_link_tag 'polaris_view_components' %>
-```
-Define Polaris style on your `<body>` tag:
-```erb
-<body style="<%= polaris_body_styles %>">
-```
+## Development
-### Importmaps
+To get started:
-Install dependencies:
-```
-bin/importmap pin @rails/request.js --download
-```
+1. Run: `bundle install`
+1. Run: `yarn install`
+1. Run: `bin/dev`
-If you use sprockets make sure the vendor folder is loaded in `app/assets/config/manifest.js`:
-```js
-//= link_tree ../../../vendor/assets/javascripts .js
-```
+It will open demo app with component previews on `localhost:4000`. You can change components and they will be updated on page reload. Component previews located in `demo/test/components/previews`.
-Add to `config/importmap.rb`:
+To run tests:
-```rb
-pin "polaris-view-components", to: "polaris_view_components.js"
+```bash
+rake
 ```
-Add to `app/javascript/controllers/index.js`:
-```javascript
-// ...
+## Releases
-import { registerPolarisControllers } from "polaris-view-components"
-registerPolarisControllers(Stimulus)
-```
-### NPM
+The library follows [semantic versioning](https://semver.org/). To draft a new release you need to run `script/release` with a new version number:
-Install NPM package:
 ```bash
-yarn add polaris-view-components @rails/request.js
-```
-Add to `app/javascript/controllers/index.js`:
-```javascript
-// ...
-import { registerPolarisControllers } from "polaris-view-components"
-registerPolarisControllers(Stimulus)
+script/release VERSION
 ```
-## Dependencies
-In addition to the dependencies declared in the `gemspec`, Polaris ViewComponents assumes the presence of Polaris CSS.
-## Development
-To get started:
+Where the VERSION is the version number you want to release. This script will update the version in the gem and push it to GitHub and Rubygems automatically.
-1. Run: `bundle install`
-2. Run: `bin/dev`
-It will open demo app with component previews on `localhost:4000`. You can change components and they will be updated on page reload. Component previews located in `demo/test/components/previews`.
+To release a new version of npm package update the package.json file with the new version number and run:
-To release gem run:
-```bash
-script/release
-```
-To release npm package run:
 ```bash
 npm run release
 ```
+After that make sure to commit changes in package.json.
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/javascripts/polaris_view_components/autocomplete_controller.js CHANGED Viewed

@@ -3,8 +3,8 @@ import { get } from '@rails/request.js'
 import { debounce } from './utils'
 export default class extends Controller {
-  static targets = ['popover', 'input', 'results', 'option', 'emptyState']
-  static values = { url: String, selected: Array }
+  static targets = ['popover', 'input', 'hiddenInput', 'results', 'option', 'emptyState']
+  static values = { multiple: Boolean, url: String, selected: Array }
   connect() {
     this.inputTarget.addEventListener("input", this.onInputChange)
@@ -32,6 +32,12 @@ export default class extends Controller {
     })
     this.element.dispatchEvent(changeEvent)
+    if (!this.multipleValue) {
+      this.popoverController.forceHide()
+      this.inputTarget.value = label
+      this.hiddenInputTarget.value = input.value
+    }
   }
   onInputChange = debounce(() => {
@@ -65,7 +71,7 @@ export default class extends Controller {
   }
   get visibleOptions() {
-    return this.optionTargets.filter(option => {
+    return [...this.optionTargets].filter(option => {
       return !option.classList.contains('Polaris--hidden')
     })
   }

data/app/assets/javascripts/polaris_view_components/dropzone_controller.js CHANGED Viewed

@@ -30,7 +30,8 @@ export default class extends Controller {
     dropOnPage: Boolean,
     focused: Boolean,
     renderPreview: Boolean,
-    size: String
+    size: String,
+    removePreviewsAfterUpload: Boolean
   }
   files = []
@@ -164,11 +165,12 @@ export default class extends Controller {
   onDirectUploadsEnd = () => {
     this.enable()
-    this.clearFiles()
+    this.clearFiles(this.removePreviewsAfterUploadValue)
     if (this.acceptedFiles.length === 0) return
-    this.loaderTarget.classList.remove("Polaris--hidden")
+    if (this.hasLoaderTarget)
+      this.loaderTarget.classList.remove("Polaris--hidden")
   }
   onDirectUploadInitialize = (event) => {
@@ -179,12 +181,15 @@ export default class extends Controller {
     if (this.acceptedFiles.length === 0) return
     if (this.sizeValue == 'small') {
-      this.clearFiles()
-      this.loaderTarget.classList.remove("Polaris--hidden")
+      this.removePreview()
+      if (this.hasLoaderTarget)
+        this.loaderTarget.classList.remove("Polaris--hidden")
     } else {
       const content = dropzone.querySelector(`[data-file-name="${file.name}"]`)
-      const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]')
-      progressBar.id = `direct-upload-${id}`
+      if (content) {
+        const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]')
+        progressBar.id = `direct-upload-${id}`
+      }
     }
   }
@@ -354,13 +359,18 @@ export default class extends Controller {
     return clone
   }
-  clearFiles () {
+  clearFiles (removePreview = true) {
     if (!this.previewRendered) return
     this.acceptedFiles = []
     this.files = []
     this.rejectedFiles = []
+    if (removePreview)
+      this.removePreview()
+  }
+  removePreview () {
     if (!this.hasPreviewTarget) return
     this.previewTarget.remove()

data/app/assets/javascripts/polaris_view_components/popover_controller.js CHANGED Viewed

@@ -2,15 +2,16 @@ import { Controller } from "@hotwired/stimulus"
 import { createPopper } from "@popperjs/core/dist/esm"
 export default class extends Controller {
-  static targets = ["activator", "popover"]
+  static targets = ["activator", "popover", "template"]
   static classes = ["open", "closed"]
   static values = {
+    appendToBody: Boolean,
     placement: String,
     active: Boolean
   }
   connect() {
-    this.popper = createPopper(this.activatorTarget, this.popoverTarget, {
+    const popperOptions = {
       placement: this.placementValue,
       modifiers: [
         {
@@ -26,31 +27,56 @@ export default class extends Controller {
           },
         }
       ]
-    })
+    }
+    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)
     if (this.activeValue) {
       this.show()
     }
   }
-  toggle() {
-    this.popoverTarget.classList.toggle(this.closedClass)
-    this.popoverTarget.classList.toggle(this.openClass)
+  async toggle() {
+    this.target.classList.toggle(this.closedClass)
+    this.target.classList.toggle(this.openClass)
+    await this.popper.update()
   }
   async show() {
-    this.popoverTarget.classList.remove(this.closedClass)
-    this.popoverTarget.classList.add(this.openClass)
+    this.target.classList.remove(this.closedClass)
+    this.target.classList.add(this.openClass)
     await this.popper.update()
   }
   hide(event) {
-    if (!this.element.contains(event.target) && !this.popoverTarget.classList.contains(this.closedClass)) {
-      this.forceHide()
-    }
+    if (this.element.contains(event.target)) return
+    if (this.target.classList.contains(this.closedClass)) return
+    if (this.appendToBodyValue && this.target.contains(event.target)) return
+    this.forceHide()
   }
   forceHide() {
-    this.popoverTarget.classList.remove(this.openClass)
-    this.popoverTarget.classList.add(this.closedClass)
+    this.target.classList.remove(this.openClass)
+    this.target.classList.add(this.closedClass)
+  }
+  get target() {
+    if (this.hasPopoverTarget) {
+      return this.popoverTarget
+    } else {
+      return this._target
+    }
+  }
+  set target(value) {
+    this._target = value
   }
 }

data/app/assets/javascripts/polaris_view_components.js CHANGED Viewed

@@ -174,8 +174,9 @@ function formatBytes(bytes, decimals) {
 }
 class Autocomplete extends Controller {
-  static targets=[ "popover", "input", "results", "option", "emptyState" ];
+  static targets=[ "popover", "input", "hiddenInput", "results", "option", "emptyState" ];
   static values={
+    multiple: Boolean,
     url: String,
     selected: Array
   };
@@ -203,6 +204,11 @@ class Autocomplete extends Controller {
       }
     });
     this.element.dispatchEvent(changeEvent);
+    if (!this.multipleValue) {
+      this.popoverController.forceHide();
+      this.inputTarget.value = label;
+      this.hiddenInputTarget.value = input.value;
+    }
   }
   onInputChange=debounce$1((() => {
     if (this.isRemote) {
@@ -228,7 +234,7 @@ class Autocomplete extends Controller {
     return this.inputTarget.value;
   }
   get visibleOptions() {
-    return this.optionTargets.filter((option => !option.classList.contains("Polaris--hidden")));
+    return [ ...this.optionTargets ].filter((option => !option.classList.contains("Polaris--hidden")));
   }
   handleResults() {
     if (this.visibleOptions.length > 0) {
@@ -358,7 +364,8 @@ class Dropzone extends Controller {
     dropOnPage: Boolean,
     focused: Boolean,
     renderPreview: Boolean,
-    size: String
+    size: String,
+    removePreviewsAfterUpload: Boolean
   };
   files=[];
   rejectedFiles=[];
@@ -458,9 +465,9 @@ class Dropzone extends Controller {
   };
   onDirectUploadsEnd=() => {
     this.enable();
-    this.clearFiles();
+    this.clearFiles(this.removePreviewsAfterUploadValue);
     if (this.acceptedFiles.length === 0) return;
-    this.loaderTarget.classList.remove("Polaris--hidden");
+    if (this.hasLoaderTarget) this.loaderTarget.classList.remove("Polaris--hidden");
   };
   onDirectUploadInitialize=event => {
     const {target: target, detail: detail} = event;
@@ -469,12 +476,14 @@ class Dropzone extends Controller {
     if (!dropzone) return;
     if (this.acceptedFiles.length === 0) return;
     if (this.sizeValue == "small") {
-      this.clearFiles();
-      this.loaderTarget.classList.remove("Polaris--hidden");
+      this.removePreview();
+      if (this.hasLoaderTarget) this.loaderTarget.classList.remove("Polaris--hidden");
     } else {
       const content = dropzone.querySelector(`[data-file-name="${file.name}"]`);
-      const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]');
-      progressBar.id = `direct-upload-${id}`;
+      if (content) {
+        const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]');
+        progressBar.id = `direct-upload-${id}`;
+      }
     }
   };
   onDirectUploadStart=event => {
@@ -612,11 +621,14 @@ class Dropzone extends Controller {
     }
     return clone;
   }
-  clearFiles() {
+  clearFiles(removePreview = true) {
     if (!this.previewRendered) return;
     this.acceptedFiles = [];
     this.files = [];
     this.rejectedFiles = [];
+    if (removePreview) this.removePreview();
+  }
+  removePreview() {
     if (!this.hasPreviewTarget) return;
     this.previewTarget.remove();
     this.previewRendered = false;
@@ -1014,32 +1026,49 @@ var min = Math.min;
 var round = Math.round;
-function getBoundingClientRect(element, includeScale) {
+function getUAString() {
+  var uaData = navigator.userAgentData;
+  if (uaData != null && uaData.brands) {
+    return uaData.brands.map((function(item) {
+      return item.brand + "/" + item.version;
+    })).join(" ");
+  }
+  return navigator.userAgent;
+}
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
   if (includeScale === void 0) {
     includeScale = false;
   }
-  var rect = element.getBoundingClientRect();
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  var clientRect = element.getBoundingClientRect();
   var scaleX = 1;
   var scaleY = 1;
-  if (isHTMLElement(element) && includeScale) {
-    var offsetHeight = element.offsetHeight;
-    var offsetWidth = element.offsetWidth;
-    if (offsetWidth > 0) {
-      scaleX = round(rect.width) / offsetWidth || 1;
-    }
-    if (offsetHeight > 0) {
-      scaleY = round(rect.height) / offsetHeight || 1;
-    }
-  }
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
+  }
+  var _ref = isElement(element) ? getWindow(element) : window, visualViewport = _ref.visualViewport;
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
   return {
-    width: rect.width / scaleX,
-    height: rect.height / scaleY,
-    top: rect.top / scaleY,
-    right: rect.right / scaleX,
-    bottom: rect.bottom / scaleY,
-    left: rect.left / scaleX,
-    x: rect.left / scaleX,
-    y: rect.top / scaleY
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
   };
 }
@@ -1104,8 +1133,8 @@ function getTrueOffsetParent(element) {
 }
 function getContainingBlock(element) {
-  var isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") !== -1;
-  var isIE = navigator.userAgent.indexOf("Trident") !== -1;
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
   if (isIE && isHTMLElement(element)) {
     var elementCss = getComputedStyle$1(element);
     if (elementCss.position === "fixed") {
@@ -1113,6 +1142,9 @@ function getContainingBlock(element) {
     }
   }
   var currentNode = getParentNode(element);
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
   while (isHTMLElement(currentNode) && [ "html", "body" ].indexOf(getNodeName(currentNode)) < 0) {
     var css = getComputedStyle$1(currentNode);
     if (css.transform !== "none" || css.perspective !== "none" || css.contain === "paint" || [ "transform", "perspective" ].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === "filter" || isFirefox && css.filter && css.filter !== "none") {
@@ -1287,13 +1319,13 @@ function mapToStyles(_ref2) {
     offsetParent = offsetParent;
     if (placement === top || (placement === left || placement === right) && variation === end) {
       sideY = bottom;
-      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : offsetParent[heightProp];
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : offsetParent[heightProp];
       y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
     }
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
       sideX = right;
-      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : offsetParent[widthProp];
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : offsetParent[widthProp];
       x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
     }
@@ -1436,7 +1468,7 @@ function getWindowScrollBarX(element) {
   return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
 }
-function getViewportRect(element) {
+function getViewportRect(element, strategy) {
   var win = getWindow(element);
   var html = getDocumentElement(element);
   var visualViewport = win.visualViewport;
@@ -1447,7 +1479,8 @@ function getViewportRect(element) {
   if (visualViewport) {
     width = visualViewport.width;
     height = visualViewport.height;
-    if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+    var layoutViewport = isLayoutViewport();
+    if (layoutViewport || !layoutViewport && strategy === "fixed") {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
     }
@@ -1517,8 +1550,8 @@ function rectToClientRect(rect) {
   });
 }
-function getInnerBoundingClientRect(element) {
-  var rect = getBoundingClientRect(element);
+function getInnerBoundingClientRect(element, strategy) {
+  var rect = getBoundingClientRect(element, false, strategy === "fixed");
   rect.top = rect.top + element.clientTop;
   rect.left = rect.left + element.clientLeft;
   rect.bottom = rect.top + element.clientHeight;
@@ -1530,8 +1563,8 @@ function getInnerBoundingClientRect(element) {
   return rect;
 }
-function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+function getClientRectFromMixedType(element, clippingParent, strategy) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 }
 function getClippingParents(element) {
@@ -1546,18 +1579,18 @@ function getClippingParents(element) {
   }));
 }
-function getClippingRect(element, boundary, rootBoundary) {
+function getClippingRect(element, boundary, rootBoundary, strategy) {
   var mainClippingParents = boundary === "clippingParents" ? getClippingParents(element) : [].concat(boundary);
   var clippingParents = [].concat(mainClippingParents, [ rootBoundary ]);
   var firstClippingParent = clippingParents[0];
   var clippingRect = clippingParents.reduce((function(accRect, clippingParent) {
-    var rect = getClientRectFromMixedType(element, clippingParent);
+    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
     accRect.top = max(rect.top, accRect.top);
     accRect.right = min(rect.right, accRect.right);
     accRect.bottom = min(rect.bottom, accRect.bottom);
     accRect.left = max(rect.left, accRect.left);
     return accRect;
-  }), getClientRectFromMixedType(element, firstClippingParent));
+  }), getClientRectFromMixedType(element, firstClippingParent, strategy));
   clippingRect.width = clippingRect.right - clippingRect.left;
   clippingRect.height = clippingRect.bottom - clippingRect.top;
   clippingRect.x = clippingRect.left;
@@ -1627,12 +1660,12 @@ function detectOverflow(state, options) {
   if (options === void 0) {
     options = {};
   }
-  var _options = options, _options$placement = _options.placement, placement = _options$placement === void 0 ? state.placement : _options$placement, _options$boundary = _options.boundary, boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, _options$rootBoundary = _options.rootBoundary, rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, _options$elementConte = _options.elementContext, elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, _options$altBoundary = _options.altBoundary, altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, _options$padding = _options.padding, padding = _options$padding === void 0 ? 0 : _options$padding;
+  var _options = options, _options$placement = _options.placement, placement = _options$placement === void 0 ? state.placement : _options$placement, _options$strategy = _options.strategy, strategy = _options$strategy === void 0 ? state.strategy : _options$strategy, _options$boundary = _options.boundary, boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, _options$rootBoundary = _options.rootBoundary, rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, _options$elementConte = _options.elementContext, elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, _options$altBoundary = _options.altBoundary, altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, _options$padding = _options.padding, padding = _options$padding === void 0 ? 0 : _options$padding;
   var paddingObject = mergePaddingObject(typeof padding !== "number" ? padding : expandToHashMap(padding, basePlacements));
   var altContext = elementContext === popper ? reference : popper;
   var popperRect = state.rects.popper;
   var element = state.elements[altBoundary ? altContext : elementContext];
-  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
+  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
   var referenceClientRect = getBoundingClientRect(state.elements.reference);
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
@@ -2035,7 +2068,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
   var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -2270,14 +2303,15 @@ var createPopper = popperGenerator({
 });
 class Popover extends Controller {
-  static targets=[ "activator", "popover" ];
+  static targets=[ "activator", "popover", "template" ];
   static classes=[ "open", "closed" ];
   static values={
+    appendToBody: Boolean,
     placement: String,
     active: Boolean
   };
   connect() {
-    this.popper = createPopper(this.activatorTarget, this.popoverTarget, {
+    const popperOptions = {
       placement: this.placementValue,
       modifiers: [ {
         name: "offset",
@@ -2290,28 +2324,47 @@ class Popover extends Controller {
           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);
     if (this.activeValue) {
       this.show();
     }
   }
-  toggle() {
-    this.popoverTarget.classList.toggle(this.closedClass);
-    this.popoverTarget.classList.toggle(this.openClass);
+  async toggle() {
+    this.target.classList.toggle(this.closedClass);
+    this.target.classList.toggle(this.openClass);
+    await this.popper.update();
   }
   async show() {
-    this.popoverTarget.classList.remove(this.closedClass);
-    this.popoverTarget.classList.add(this.openClass);
+    this.target.classList.remove(this.closedClass);
+    this.target.classList.add(this.openClass);
     await this.popper.update();
   }
   hide(event) {
-    if (!this.element.contains(event.target) && !this.popoverTarget.classList.contains(this.closedClass)) {
-      this.forceHide();
-    }
+    if (this.element.contains(event.target)) return;
+    if (this.target.classList.contains(this.closedClass)) return;
+    if (this.appendToBodyValue && this.target.contains(event.target)) return;
+    this.forceHide();
   }
   forceHide() {
-    this.popoverTarget.classList.remove(this.openClass);
-    this.popoverTarget.classList.add(this.closedClass);
+    this.target.classList.remove(this.openClass);
+    this.target.classList.add(this.closedClass);
+  }
+  get target() {
+    if (this.hasPopoverTarget) {
+      return this.popoverTarget;
+    } else {
+      return this._target;
+    }
+  }
+  set target(value) {
+    this._target = value;
   }
 }