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

polaris_view_components 0.10.1 → 0.12.0

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;
   }
 }