polaris_view_components 0.7.0 → 0.9.0

data/app/assets/javascripts/polaris_view_components.js

@@ -2,10 +2,25 @@ import { Controller } from "@hotwired/stimulus";
 
 import { get } from "@rails/request.js";
 
+function debounce$1(fn, wait) {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout((() => fn.apply(this, args)), wait);
+  };
+}
+
+function formatBytes(bytes, decimals) {
+  if (bytes == 0) return "0 Bytes";
+  const k = 1024, dm = decimals || 2, sizes = [ "Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB" ], i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}
+
 class Autocomplete extends Controller {
   static targets=[ "popover", "input", "results", "option", "emptyState" ];
   static values={
-    url: String
+    url: String,
+    selected: Array
   };
   connect() {
     this.inputTarget.addEventListener("input", this.onInputChange);
@@ -14,13 +29,10 @@ class Autocomplete extends Controller {
     this.inputTarget.removeEventListener("input", this.onInputChange);
   }
   toggle() {
-    if (this.visibleOptions.length > 0) {
-      this.hideEmptyState();
-      this.popoverController.show();
-    } else if (this.value.length > 0 && this.hasEmptyStateTarget) {
-      this.showEmptyState();
+    if (this.isRemote && this.visibleOptions.length == 0 && this.value.length == 0) {
+      this.fetchResults();
     } else {
-      this.popoverController.forceHide();
+      this.handleResults();
     }
   }
   select(event) {
@@ -42,6 +54,13 @@ class Autocomplete extends Controller {
       this.filterOptions();
     }
   }), 200);
+  reset() {
+    this.inputTarget.value = "";
+    this.optionTargets.forEach((option => {
+      option.classList.add("Polaris--hidden");
+    }));
+    this.handleResults();
+  }
   get isRemote() {
     return this.urlValue.length > 0;
   }
@@ -54,6 +73,17 @@ class Autocomplete extends Controller {
   get visibleOptions() {
     return this.optionTargets.filter((option => !option.classList.contains("Polaris--hidden")));
   }
+  handleResults() {
+    if (this.visibleOptions.length > 0) {
+      this.hideEmptyState();
+      this.popoverController.show();
+      this.checkSelected();
+    } else if (this.value.length > 0 && this.hasEmptyStateTarget) {
+      this.showEmptyState();
+    } else {
+      this.popoverController.forceHide();
+    }
+  }
   filterOptions() {
     if (this.value === "") {
       this.optionTargets.forEach((option => {
@@ -69,7 +99,7 @@ class Autocomplete extends Controller {
         }
       }));
     }
-    this.toggle();
+    this.handleResults();
   }
   async fetchResults() {
     const response = await get(this.urlValue, {
@@ -80,7 +110,7 @@ class Autocomplete extends Controller {
     if (response.ok) {
       const results = await response.html;
       this.resultsTarget.innerHTML = results;
-      this.toggle();
+      this.handleResults();
     }
   }
   showEmptyState() {
@@ -95,16 +125,15 @@ class Autocomplete extends Controller {
       this.resultsTarget.classList.remove("Polaris--hidden");
     }
   }
+  checkSelected() {
+    this.visibleOptions.forEach((option => {
+      const input = option.querySelector("input");
+      if (!input) return;
+      input.checked = this.selectedValue.includes(input.value);
+    }));
+  }
 }
 
-const debounce$1 = (fn, delay = 10) => {
-  let timeoutId = null;
-  return (...args) => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(fn, delay);
-  };
-};
-
 class Button extends Controller {
   disable(event) {
     if (this.button.disabled) {
@@ -136,6 +165,405 @@ class Button extends Controller {
   }
 }
 
+class Collapsible extends Controller {
+  toggle() {
+    if (this.isClosed) {
+      this.element.style.maxHeight = "none";
+      this.element.style.overflow = "visible";
+      this.element.classList.remove("Polaris-Collapsible--isFullyClosed");
+    } else {
+      this.element.style.maxHeight = "0px";
+      this.element.style.overflow = "hidden";
+      this.element.classList.add("Polaris-Collapsible--isFullyClosed");
+    }
+  }
+  get isClosed() {
+    return this.element.classList.contains("Polaris-Collapsible--isFullyClosed");
+  }
+}
+
+const dragEvents = [ "dragover", "dragenter", "drop" ];
+
+const SIZES = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large",
+  EXTRA_LARGE: "extraLarge"
+};
+
+class Dropzone extends Controller {
+  static targets=[ "container", "fileUpload", "loader", "input", "preview", "previewTemplate", "itemTemplate", "overlay", "errorOverlay" ];
+  static classes=[ "disabled" ];
+  static values={
+    accept: String,
+    allowMultiple: Boolean,
+    disabled: Boolean,
+    dropOnPage: Boolean,
+    focused: Boolean,
+    renderPreview: Boolean,
+    size: String
+  };
+  files=[];
+  acceptedFiles=[];
+  rejectedFiles=[];
+  _dragging=false;
+  dragTargets=[];
+  previewRendered=false;
+  _size="large";
+  connect() {
+    document.body.addEventListener("click", this.onExternalTriggerClick);
+    addEventListener("resize", this.onWindowResize);
+    addEventListener("direct-uploads:start", this.onDirectUploadsStart);
+    addEventListener("direct-uploads:end", this.onDirectUploadsEnd);
+    addEventListener("direct-upload:initialize", this.onDirectUploadInitialize);
+    addEventListener("direct-upload:start", this.onDirectUploadStart);
+    addEventListener("direct-upload:progress", this.onDirectUploadProgress);
+    addEventListener("direct-upload:error", this.onDirectUploadError);
+    addEventListener("direct-upload:end", this.onDirectUploadEnd);
+    this.onWindowResize();
+  }
+  disconnect() {
+    document.body.removeEventListener("click", this.onExternalTriggerClick);
+    removeEventListener("resize", this.onWindowResize);
+    removeEventListener("direct-uploads:start", this.onDirectUploadsStart);
+    removeEventListener("direct-uploads:end", this.onDirectUploadsEnd);
+    removeEventListener("direct-upload:initialize", this.onDirectUploadInitialize);
+    removeEventListener("direct-upload:start", this.onDirectUploadStart);
+    removeEventListener("direct-upload:progress", this.onDirectUploadProgress);
+    removeEventListener("direct-upload:error", this.onDirectUploadError);
+    removeEventListener("direct-upload:end", this.onDirectUploadEnd);
+  }
+  onExternalTriggerClick=event => {
+    const trigger = event.target.closest(`[data-${this.identifier}-external-target="trigger"]`);
+    if (!trigger) return;
+    event.preventDefault();
+    this.onClick();
+  };
+  onWindowResize=debounce$1((() => {
+    const size = this.calculateSize();
+    if (size !== this.size) {
+      this.size = size;
+    }
+  }), 50);
+  onBlur() {
+    this.focusedValue = false;
+  }
+  onChange(e) {
+    this.stopEvent(e);
+    if (this.disabled) return;
+    this.clearFiles();
+    const fileList = getDataTransferFiles(e);
+    const {files: files, acceptedFiles: acceptedFiles, rejectedFiles: rejectedFiles} = this.getValidatedFiles(fileList);
+    this.dragTargets = [];
+    this.files = files;
+    this.acceptedFiles = acceptedFiles;
+    this.rejectedFiles = rejectedFiles;
+    this.render();
+  }
+  onDragOver(e) {
+    this.stopEvent(e);
+    if (this.disabled) return;
+  }
+  onDragEnter(e) {
+    this.stopEvent(e);
+    if (this.disabled) return;
+    if (e.target && !this.dragTargets.includes(e.target)) {
+      this.dragTargets.push(e.target);
+    }
+    if (this.dragging) return;
+    this.dragging = true;
+  }
+  onDragLeave(e) {
+    this.stopEvent(e);
+    if (this.disabled) return;
+    this.dragTargets = this.dragTargets.filter((el => {
+      const compareNode = this.element;
+      return el !== e.target && compareNode && compareNode.contains(el);
+    }));
+    if (this.dragTargets.length > 0) return;
+    this.dragging = false;
+  }
+  onDrop(e) {
+    this.stopEvent(e);
+    if (this.disabled) return;
+    this.dragging = false;
+    this.onChange(e);
+  }
+  onFocus() {
+    this.focusedValue = true;
+  }
+  onClick() {
+    if (this.disabledValue) return;
+    this.open();
+  }
+  onDirectUploadsStart=() => {
+    this.disable();
+  };
+  onDirectUploadsEnd=() => {
+    this.enable();
+    this.clearFiles();
+    this.loaderTarget.classList.remove("Polaris--hidden");
+  };
+  onDirectUploadInitialize=event => {
+    const {target: target, detail: detail} = event;
+    const {id: id, file: file} = detail;
+    const dropzone = target.closest(".Polaris-DropZone");
+    if (!dropzone) return;
+    const content = dropzone.querySelector(`[data-file-name="${file.name}"]`);
+    const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]');
+    progressBar.id = `direct-upload-${id}`;
+  };
+  onDirectUploadStart=event => {
+    const {id: id} = event.detail;
+    const progressBar = document.getElementById(`direct-upload-${id}`);
+    if (!progressBar) return;
+    progressBar.classList.remove("Polaris--hidden");
+  };
+  onDirectUploadProgress=event => {
+    const {id: id, progress: progress} = event.detail;
+    const progressBar = document.getElementById(`direct-upload-${id}`);
+    if (!progressBar) return;
+    const progressElement = progressBar.querySelector(".Polaris-ProgressBar__Indicator");
+    progressElement.style.width = `${progress}%`;
+  };
+  onDirectUploadError=event => {
+    const {id: id, error: error} = event.detail;
+    const progressBar = document.getElementById(`direct-upload-${id}`);
+    if (!progressBar) return;
+    event.preventDefault();
+    progressBar.classList.add("Polaris--hidden");
+    const uploadError = progressBar.parentElement.querySelector('[data-target="upload-error"]');
+    const errorIcon = uploadError.querySelector(".Polaris-InlineError__Icon");
+    if (errorIcon) errorIcon.remove();
+    uploadError.classList.remove("Polaris--hidden");
+  };
+  onDirectUploadEnd=event => {
+    const {id: id} = event.detail;
+    const progressBar = document.getElementById(`direct-upload-${id}`);
+    if (!progressBar) return;
+    progressBar.classList.add("Polaris-ProgressBar--colorSuccess");
+  };
+  open() {
+    this.inputTarget.click();
+  }
+  focusedValueChanged() {
+    this.element.classList.toggle("Polaris-DropZone--focused", this.focusedValue);
+  }
+  stopEvent(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  getValidatedFiles(files) {
+    const acceptedFiles = [];
+    const rejectedFiles = [];
+    Array.from(files).forEach((file => {
+      if (fileAccepted(file, this.acceptValue)) {
+        acceptedFiles.push(file);
+      } else {
+        rejectedFiles.push(file);
+      }
+    }));
+    if (!this.allowMultipleValue) {
+      acceptedFiles.splice(1, acceptedFiles.length);
+      rejectedFiles.push(...acceptedFiles.slice(1));
+    }
+    return {
+      files: files,
+      acceptedFiles: acceptedFiles,
+      rejectedFiles: rejectedFiles
+    };
+  }
+  render() {
+    if (this.files.length === 0) {
+      this.toggleFileUpload(true);
+      this.toggleErrorOverlay(false);
+    } else if (this.rejectedFiles.length > 0) {
+      this.toggleFileUpload(false);
+      this.toggleErrorOverlay(true);
+      const dropRejectedEvent = new CustomEvent("polaris-dropzone:drop-rejected", {
+        detail: {
+          rejectedFiles: this.rejectedFiles
+        }
+      });
+      this.element.dispatchEvent(dropRejectedEvent);
+    } else if (this.acceptedFiles.length > 0) {
+      if (this.renderPreviewValue) {
+        this.renderUploadedFiles();
+        this.toggleFileUpload(false);
+      }
+      this.toggleErrorOverlay(false);
+      const dropAcceptedEvent = new CustomEvent("polaris-dropzone:drop-accepted", {
+        detail: {
+          acceptedFiles: this.acceptedFiles
+        }
+      });
+      this.element.dispatchEvent(dropAcceptedEvent);
+    }
+    const dropEvent = new CustomEvent("polaris-dropzone:drop", {
+      detail: {
+        files: this.files,
+        acceptedFiles: this.acceptedFiles,
+        rejectedFiles: this.rejectedFiles
+      }
+    });
+    this.element.dispatchEvent(dropEvent);
+  }
+  renderUploadedFiles() {
+    if (this.acceptedFiles.length === 0) return;
+    const clone = this.previewTemplateTarget.content.cloneNode(true);
+    const filesTarget = clone.querySelector(".target");
+    let files = this.acceptedFiles;
+    if (this.sizeValue == "small") files = [ files[0] ];
+    files.map((file => this.renderFile(file))).forEach((fragment => filesTarget.parentNode.appendChild(fragment)));
+    filesTarget.remove();
+    this.containerTarget.prepend(clone);
+    this.previewRendered = true;
+  }
+  toggleFileUpload(show = false) {
+    this.fileUploadTarget.classList.toggle("Polaris-VisuallyHidden", !show);
+  }
+  toggleErrorOverlay(show = false) {
+    this.errorOverlayTarget.classList.toggle("Polaris-VisuallyHidden", !show);
+    this.element.classList.toggle("Polaris-DropZone--hasError", show);
+  }
+  renderFile(file) {
+    const validImageTypes = [ "image/gif", "image/jpeg", "image/png" ];
+    const clone = this.itemTemplateTarget.content.cloneNode(true);
+    const [icon, thumbnail, content, fileSize] = [ clone.querySelector('[data-target="icon"]'), clone.querySelector('[data-target="thumbnail"]'), clone.querySelector('[data-target="content"]'), clone.querySelector('[data-target="file-size"]') ];
+    if (validImageTypes.includes(file.type)) {
+      const img = thumbnail.querySelector("img");
+      img.alt = file.name;
+      img.src = window.URL.createObjectURL(file);
+      icon.remove();
+    } else {
+      thumbnail.remove();
+    }
+    if (this.sizeValue != "small") {
+      content.insertAdjacentText("afterbegin", file.name);
+      content.setAttribute("data-file-name", file.name);
+      fileSize.textContent = formatBytes(file.size);
+    }
+    return clone;
+  }
+  clearFiles() {
+    if (!this.previewRendered) return;
+    this.acceptedFiles = [];
+    this.files = [];
+    this.rejectedFiles = [];
+    if (!this.hasPreviewTarget) return;
+    this.previewTarget.remove();
+    this.previewRendered = false;
+  }
+  calculateSize() {
+    const width = this.element.getBoundingClientRect().width;
+    let size = SIZES.LARGE;
+    if (width < 100) {
+      size = SIZES.SMALL;
+    } else if (width < 160) {
+      size = SIZES.MEDIUM;
+    } else if (width > 300) {
+      size = SIZES.EXTRA_LARGE;
+    }
+    this.size = size;
+    return size;
+  }
+  getSizeClass(size = "large") {
+    return this.sizeClassesSchema[size] || this.sizeClassesSchema.large;
+  }
+  disable() {
+    this.disabled = true;
+    this.element.classList.add(this.disabledClass);
+    this.inputTarget.disabled = true;
+  }
+  enable() {
+    this.disabled = false;
+    this.element.classList.remove(this.disabledClass);
+    this.inputTarget.disabled = false;
+  }
+  get fileListRendered() {
+    return this.element.querySelector("[data-rendered]");
+  }
+  get dropNode() {
+    return this.dropOnPageValue ? document : this.element;
+  }
+  get disabled() {
+    return this.disabledValue;
+  }
+  set disabled(val) {
+    this.disabledValue = val;
+  }
+  get dragging() {
+    return this._dragging;
+  }
+  set dragging(val) {
+    this._dragging = val;
+    this.element.classList.toggle("Polaris-DropZone--isDragging", val);
+    this.overlayTarget.classList.toggle("Polaris-VisuallyHidden", !val);
+  }
+  get sizeClassesSchema() {
+    return {
+      [SIZES.SMALL]: "Polaris-DropZone--sizeSmall",
+      [SIZES.MEDIUM]: "Polaris-DropZone--sizeMedium",
+      [SIZES.LARGE]: "Polaris-DropZone--sizeLarge",
+      [SIZES.EXTRA_LARGE]: "Polaris-DropZone--sizeExtraLarge"
+    };
+  }
+  get size() {
+    return this._size;
+  }
+  set size(val) {
+    this._size = val;
+    const sizeClassesToRemove = Object.values(this.sizeClassesSchema);
+    sizeClassesToRemove.forEach((className => this.element.classList.remove(className)));
+    this.element.classList.add(this.getSizeClass(val));
+  }
+}
+
+function fileAccepted(file, accept) {
+  return file.type === "application/x-moz-file" || accepts(file, accept);
+}
+
+function getDataTransferFiles(event) {
+  if (isDragEvent(event) && event.dataTransfer) {
+    const dt = event.dataTransfer;
+    if (dt.files && dt.files.length) {
+      return Array.from(dt.files);
+    } else if (dt.items && dt.items.length) {
+      return Array.from(dt.items);
+    }
+  } else if (isChangeEvent(event) && event.target.files) {
+    return Array.from(event.target.files);
+  }
+  return [];
+}
+
+function accepts(file, acceptedFiles = [ "" ]) {
+  if (file && acceptedFiles) {
+    const fileName = file.name || "";
+    const mimeType = file.type || "";
+    const baseMimeType = mimeType.replace(/\/.*$/, "");
+    const acceptedFilesArray = Array.isArray(acceptedFiles) ? acceptedFiles : acceptedFiles.split(",");
+    return acceptedFilesArray.some((type => {
+      const validType = type.trim();
+      if (validType.startsWith(".")) {
+        return fileName.toLowerCase().endsWith(validType.toLowerCase());
+      } else if (validType.endsWith("/*")) {
+        return baseMimeType === validType.replace(/\/.*$/, "");
+      }
+      return mimeType === validType;
+    }));
+  }
+  return true;
+}
+
+function isDragEvent(event) {
+  return dragEvents.indexOf(event.type) > 0;
+}
+
+function isChangeEvent(event) {
+  return event.type === "change";
+}
+
 const alpineNames = {
   enterFromClass: "enter",
   enterActiveClass: "enterStart",
@@ -392,6 +820,9 @@ class Polaris extends Controller {
   showToast() {
     this.findElement("toast").show();
   }
+  toggleCollapsible() {
+    this.findElement("collapsible").toggle();
+  }
   findElement(type) {
     const targetId = this.element.dataset.target.replace("#", "");
     const target = document.getElementById(targetId);
@@ -558,10 +989,29 @@ function getBasePlacement(placement) {
   return placement.split("-")[0];
 }
 
+var max = Math.max;
+
+var min = Math.min;
+
+var round = Math.round;
+
 function getBoundingClientRect(element, includeScale) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
   var rect = 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;
+    }
+  }
   return {
     width: rect.width / scaleX,
     height: rect.height / scaleY,
@@ -671,16 +1121,15 @@ function getMainAxisFromPlacement(placement) {
   return [ "top", "bottom" ].indexOf(placement) >= 0 ? "x" : "y";
 }
 
-var max = Math.max;
-
-var min = Math.min;
-
-var round = Math.round;
-
 function within(min$1, value, max$1) {
   return max(min$1, min(value, max$1));
 }
 
+function withinMaxClamp(min, value, max) {
+  var v = within(min, value, max);
+  return v > max ? max : v;
+}
+
 function getFreshSideObject() {
   return {
     top: 0,
@@ -782,15 +1231,24 @@ function roundOffsetsByDPR(_ref) {
   var win = window;
   var dpr = win.devicePixelRatio || 1;
   return {
-    x: round(round(x * dpr) / dpr) || 0,
-    y: round(round(y * dpr) / dpr) || 0
+    x: round(x * dpr) / dpr || 0,
+    y: round(y * dpr) / dpr || 0
   };
 }
 
 function mapToStyles(_ref2) {
   var _Object$assign2;
-  var popper = _ref2.popper, popperRect = _ref2.popperRect, placement = _ref2.placement, variation = _ref2.variation, offsets = _ref2.offsets, position = _ref2.position, gpuAcceleration = _ref2.gpuAcceleration, adaptive = _ref2.adaptive, roundOffsets = _ref2.roundOffsets;
-  var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === "function" ? roundOffsets(offsets) : offsets, _ref3$x = _ref3.x, x = _ref3$x === void 0 ? 0 : _ref3$x, _ref3$y = _ref3.y, y = _ref3$y === void 0 ? 0 : _ref3$y;
+  var popper = _ref2.popper, popperRect = _ref2.popperRect, placement = _ref2.placement, variation = _ref2.variation, offsets = _ref2.offsets, position = _ref2.position, gpuAcceleration = _ref2.gpuAcceleration, adaptive = _ref2.adaptive, roundOffsets = _ref2.roundOffsets, isFixed = _ref2.isFixed;
+  var _offsets$x = offsets.x, x = _offsets$x === void 0 ? 0 : _offsets$x, _offsets$y = offsets.y, y = _offsets$y === void 0 ? 0 : _offsets$y;
+  var _ref3 = typeof roundOffsets === "function" ? roundOffsets({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+  x = _ref3.x;
+  y = _ref3.y;
   var hasX = offsets.hasOwnProperty("x");
   var hasY = offsets.hasOwnProperty("y");
   var sideX = left;
@@ -810,18 +1268,29 @@ function mapToStyles(_ref2) {
     offsetParent = offsetParent;
     if (placement === top || (placement === left || placement === right) && variation === end) {
       sideY = bottom;
-      y -= offsetParent[heightProp] - popperRect.height;
+      var offsetY = isFixed && 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;
-      x -= offsetParent[widthProp] - popperRect.width;
+      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : offsetParent[widthProp];
+      x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
     }
   }
   var commonStyles = Object.assign({
     position: position
   }, adaptive && unsetSides);
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+  x = _ref4.x;
+  y = _ref4.y;
   if (gpuAcceleration) {
     var _Object$assign;
     return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? "0" : "", 
@@ -832,15 +1301,16 @@ function mapToStyles(_ref2) {
   _Object$assign2[sideX] = hasX ? x + "px" : "", _Object$assign2.transform = "", _Object$assign2));
 }
 
-function computeStyles(_ref4) {
-  var state = _ref4.state, options = _ref4.options;
+function computeStyles(_ref5) {
+  var state = _ref5.state, options = _ref5.options;
   var _options$gpuAccelerat = options.gpuAcceleration, gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, _options$adaptive = options.adaptive, adaptive = _options$adaptive === void 0 ? true : _options$adaptive, _options$roundOffsets = options.roundOffsets, roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
   var commonStyles = {
     placement: getBasePlacement(state.placement),
     variation: getVariation(state.placement),
     popper: state.elements.popper,
     popperRect: state.rects.popper,
-    gpuAcceleration: gpuAcceleration
+    gpuAcceleration: gpuAcceleration,
+    isFixed: state.options.strategy === "fixed"
   };
   if (state.modifiersData.popperOffsets != null) {
     state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
@@ -1042,7 +1512,7 @@ function getInnerBoundingClientRect(element) {
 }
 
 function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 }
 
 function getClippingParents(element) {
@@ -1444,6 +1914,14 @@ function preventOverflow(_ref) {
   var tetherOffsetValue = typeof tetherOffset === "function" ? tetherOffset(Object.assign({}, state.rects, {
     placement: state.placement
   })) : tetherOffset;
+  var normalizedTetherOffsetValue = typeof tetherOffsetValue === "number" ? {
+    mainAxis: tetherOffsetValue,
+    altAxis: tetherOffsetValue
+  } : Object.assign({
+    mainAxis: 0,
+    altAxis: 0
+  }, tetherOffsetValue);
+  var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
   var data = {
     x: 0,
     y: 0
@@ -1451,13 +1929,14 @@ function preventOverflow(_ref) {
   if (!popperOffsets) {
     return;
   }
-  if (checkMainAxis || checkAltAxis) {
+  if (checkMainAxis) {
+    var _offsetModifierState$;
     var mainSide = mainAxis === "y" ? top : left;
     var altSide = mainAxis === "y" ? bottom : right;
     var len = mainAxis === "y" ? "height" : "width";
     var offset = popperOffsets[mainAxis];
-    var min$1 = popperOffsets[mainAxis] + overflow[mainSide];
-    var max$1 = popperOffsets[mainAxis] - overflow[altSide];
+    var min$1 = offset + overflow[mainSide];
+    var max$1 = offset - overflow[altSide];
     var additive = tether ? -popperRect[len] / 2 : 0;
     var minLen = variation === start ? referenceRect[len] : popperRect[len];
     var maxLen = variation === start ? -popperRect[len] : -referenceRect[len];
@@ -1470,28 +1949,32 @@ function preventOverflow(_ref) {
     var arrowPaddingMin = arrowPaddingObject[mainSide];
     var arrowPaddingMax = arrowPaddingObject[altSide];
     var arrowLen = within(0, referenceRect[len], arrowRect[len]);
-    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue;
-    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
+    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
+    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
     var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
     var clientOffset = arrowOffsetParent ? mainAxis === "y" ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
-    var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
-    var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;
-    var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
-    if (checkMainAxis) {
-      var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
-      popperOffsets[mainAxis] = preventedOffset;
-      data[mainAxis] = preventedOffset - offset;
-    }
-    if (checkAltAxis) {
-      var _mainSide = mainAxis === "x" ? top : left;
-      var _altSide = mainAxis === "x" ? bottom : right;
-      var _offset = popperOffsets[altAxis];
-      var _min = _offset + overflow[_mainSide];
-      var _max = _offset - overflow[_altSide];
-      var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max);
-      popperOffsets[altAxis] = _preventedOffset;
-      data[altAxis] = _preventedOffset - _offset;
-    }
+    var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
+    var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
+    var tetherMax = offset + maxOffset - offsetModifierValue;
+    var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
+    popperOffsets[mainAxis] = preventedOffset;
+    data[mainAxis] = preventedOffset - offset;
+  }
+  if (checkAltAxis) {
+    var _offsetModifierState$2;
+    var _mainSide = mainAxis === "x" ? top : left;
+    var _altSide = mainAxis === "x" ? bottom : right;
+    var _offset = popperOffsets[altAxis];
+    var _len = altAxis === "y" ? "height" : "width";
+    var _min = _offset + overflow[_mainSide];
+    var _max = _offset - overflow[_altSide];
+    var isOriginSide = [ top, left ].indexOf(basePlacement) !== -1;
+    var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
+    var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
+    var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
+    var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
+    popperOffsets[altAxis] = _preventedOffset;
+    data[altAxis] = _preventedOffset - _offset;
   }
   state.modifiersData[name] = data;
 }
@@ -1521,8 +2004,8 @@ function getNodeScroll(node) {
 
 function isElementScaled(element) {
   var rect = element.getBoundingClientRect();
-  var scaleX = rect.width / element.offsetWidth || 1;
-  var scaleY = rect.height / element.offsetHeight || 1;
+  var scaleX = round(rect.width) / element.offsetWidth || 1;
+  var scaleY = round(rect.height) / element.offsetHeight || 1;
   return scaleX !== 1 || scaleY !== 1;
 }
 
@@ -1531,9 +2014,9 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
     isFixed = false;
   }
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
-  isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -1547,7 +2030,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
       scroll = getNodeScroll(offsetParent);
     }
     if (isHTMLElement(offsetParent)) {
-      offsets = getBoundingClientRect(offsetParent);
+      offsets = getBoundingClientRect(offsetParent, true);
       offsets.x += offsetParent.clientLeft;
       offsets.y += offsetParent.clientTop;
     } else if (documentElement) {
@@ -1775,13 +2258,18 @@ class Popover extends Controller {
     active: Boolean
   };
   connect() {
-    createPopper(this.activatorTarget, this.popoverTarget, {
+    this.popper = createPopper(this.activatorTarget, this.popoverTarget, {
       placement: this.placementValue,
       modifiers: [ {
         name: "offset",
         options: {
           offset: [ 0, 5 ]
         }
+      }, {
+        name: "flip",
+        options: {
+          allowedAutoPlacements: [ "top-start", "bottom-start", "top-end", "bottom-end" ]
+        }
       } ]
     });
     if (this.activeValue) {
@@ -1792,9 +2280,10 @@ class Popover extends Controller {
     this.popoverTarget.classList.toggle(this.closedClass);
     this.popoverTarget.classList.toggle(this.openClass);
   }
-  show() {
+  async show() {
     this.popoverTarget.classList.remove(this.closedClass);
     this.popoverTarget.classList.add(this.openClass);
+    await this.popper.update();
   }
   hide(event) {
     if (!this.element.contains(event.target) && !this.popoverTarget.classList.contains(this.closedClass)) {
@@ -1996,8 +2485,9 @@ class Toast extends Controller {
     this.element.removeEventListener("transitionend", this.updatePositions, false);
   };
   getStyle(position) {
-    const translateIn = -80 * position;
-    const translateOut = 150 - 80 * position;
+    const height = this.element.offsetHeight + this.heightOffset;
+    const translateIn = height * -1;
+    const translateOut = 150 - height;
     return `--toast-translate-y-in: ${translateIn}px; --toast-translate-y-out: ${translateOut}px;`;
   }
   get timeoutDuration() {
@@ -2018,11 +2508,16 @@ class Toast extends Controller {
   get position() {
     return this.visibleToasts.filter((el => !this.element.isEqualNode(el))).length + 1;
   }
+  get heightOffset() {
+    return this.visibleToasts.filter((el => !this.element.isEqualNode(el) && this.element.dataset.position > el.dataset.position)).map((el => el.offsetHeight)).reduce(((a, b) => a + b), 0);
+  }
 }
 
 function registerPolarisControllers(application) {
   application.register("polaris-autocomplete", Autocomplete);
   application.register("polaris-button", Button);
+  application.register("polaris-collapsible", Collapsible);
+  application.register("polaris-dropzone", Dropzone);
   application.register("polaris-frame", Frame);
   application.register("polaris-modal", Modal);
   application.register("polaris-option-list", OptionList);