polaris_view_components 0.9.0 → 0.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c25ff3636898168d8b63d341155e80003d847ee4e3888150382c59275d9df5d0
-  data.tar.gz: b865d3b96a3e46b09a76d16699935314403a5efe407ef5f1dd759457f057c4f0
+  metadata.gz: 910750f06bdf1ff3095625a911c884155cca167b4dba43fd9e7aa9d61cc0ba72
+  data.tar.gz: a0bc6e2afc097fc27148cc8fcb91282380fe6ec878dfcf8828703aed6edec433
 SHA512:
-  metadata.gz: 459107009e35c2eef5ccfca95eb3708b90e9ea5f45eecb23e9e68b17566a16ba95341e646339515129e20ee5b18bfcb3cf3a3195afc18b5a6ce79946398226de
-  data.tar.gz: 3992aad996e4a9f2c38f2d915bd11af2106e6ee54cb5421a9a463f18820c0877eadf9e4b7823a02cf1c6e2995ef09f1019730a3986b4136eb50615e67a1c0b41
+  metadata.gz: 1d22ebdc5b83c1b52157c8e9b1f59cc2477546b521955329fff0b012a4c0472db8adad6b3bef881d108ad2e9388d2b23f44adb0d9e67fb0bb793015e4d23500b
+  data.tar.gz: 4891914fde6deb943f74567a89334bee1a8ada3736d3547acbf47d834446974e42c83ddb9d0b7ae6cf6c3d5017ce70d9cbf74c8b4706097695a5b7bda0b0f3ea

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

@@ -164,6 +164,9 @@ export default class extends Controller {
   onDirectUploadsEnd = () => {
     this.enable()
     this.clearFiles()
+
+    if (this.acceptedFiles.length === 0) return
+
     this.loaderTarget.classList.remove("Polaris--hidden")
   }
 
@@ -172,10 +175,16 @@ export default class extends Controller {
     const { id, file } = detail
     const dropzone = target.closest('.Polaris-DropZone')
     if (!dropzone) return
+    if (this.acceptedFiles.length === 0) return
 
-    const content = dropzone.querySelector(`[data-file-name="${file.name}"]`)
-    const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]')
-    progressBar.id = `direct-upload-${id}`
+    if (this.sizeValue == 'small') {
+      this.clearFiles()
+      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}`
+    }
   }
 
   onDirectUploadStart = (event) => {
@@ -258,6 +267,7 @@ export default class extends Controller {
       this.toggleErrorOverlay(true)
 
       const dropRejectedEvent = new CustomEvent('polaris-dropzone:drop-rejected', {
+        bubbles: true,
         detail: { rejectedFiles: this.rejectedFiles }
       })
       this.element.dispatchEvent(dropRejectedEvent)
@@ -270,12 +280,14 @@ export default class extends Controller {
       this.toggleErrorOverlay(false)
 
       const dropAcceptedEvent = new CustomEvent('polaris-dropzone:drop-accepted', {
+        bubbles: true,
         detail: {acceptedFiles: this.acceptedFiles }
       })
       this.element.dispatchEvent(dropAcceptedEvent)
     }
 
     const dropEvent = new CustomEvent('polaris-dropzone:drop', {
+      bubbles: true,
       detail: {
         files: this.files,
         acceptedFiles: this.acceptedFiles,

data/app/assets/javascripts/polaris_view_components/frame_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { useTransition } from "stimulus-use"
+import { useTransition } from "./utils"
 
 export default class extends Controller {
   static targets = ["navigationOverlay", "navigation", "saveBar"]

data/app/assets/javascripts/polaris_view_components/{utils.js → utils/index.js}

@@ -4,7 +4,7 @@
  *
  * @return {Function}
  */
-export function debounce (fn, wait) {
+ export function debounce (fn, wait) {
   let timeoutId
 
   return (...args) => {
@@ -21,3 +21,5 @@ export function formatBytes (bytes, decimals) {
     i = Math.floor(Math.log(bytes) / Math.log(k))
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }
+
+export { useTransition } from "./use-transition"

data/app/assets/javascripts/polaris_view_components/utils/use-transition.js

@@ -0,0 +1,162 @@
+const alpineNames = {
+    enterFromClass: 'enter',
+    enterActiveClass: 'enterStart',
+    enterToClass: 'enterEnd',
+    leaveFromClass: 'leave',
+    leaveActiveClass: 'leaveStart',
+    leaveToClass: 'leaveEnd'
+}
+const defaultOptions = {
+    transitioned: false,
+    hiddenClass: 'hidden',
+    preserveOriginalClass: true,
+    removeToClasses: true
+};
+export const useTransition = (controller, options = {}) => {
+    var _a, _b, _c;
+    const targetName = controller.element.dataset.transitionTarget;
+    let targetFromAttribute;
+    if (targetName) {
+        targetFromAttribute = controller[`${targetName}Target`];
+    }
+    const targetElement = (options === null || options === void 0 ? void 0 : options.element) || targetFromAttribute || controller.element;
+    // data attributes are only available on HTMLElement and SVGElement
+    if (!(targetElement instanceof HTMLElement || targetElement instanceof SVGElement))
+        return;
+    const dataset = targetElement.dataset;
+    const leaveAfter = parseInt(dataset.leaveAfter || '') || options.leaveAfter || 0;
+    const { transitioned, hiddenClass, preserveOriginalClass, removeToClasses } = Object.assign(defaultOptions, options);
+    const controllerEnter = (_a = controller.enter) === null || _a === void 0 ? void 0 : _a.bind(controller);
+    const controllerLeave = (_b = controller.leave) === null || _b === void 0 ? void 0 : _b.bind(controller);
+    const controllerToggleTransition = (_c = controller.toggleTransition) === null || _c === void 0 ? void 0 : _c.bind(controller);
+    async function enter(event) {
+        if (controller.transitioned)
+            return;
+        controller.transitioned = true;
+        controllerEnter && controllerEnter(event);
+        const enterFromClasses = getAttribute('enterFrom', options, dataset);
+        const enterActiveClasses = getAttribute('enterActive', options, dataset);
+        const enterToClasses = getAttribute('enterTo', options, dataset);
+        const leaveToClasses = getAttribute('leaveTo', options, dataset);
+        if (!!hiddenClass) {
+            targetElement.classList.remove(hiddenClass);
+        }
+        if (!removeToClasses) {
+            removeClasses(targetElement, leaveToClasses);
+        }
+        await transition(targetElement, enterFromClasses, enterActiveClasses, enterToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
+        if (leaveAfter > 0) {
+            setTimeout(() => {
+                leave(event);
+            }, leaveAfter);
+        }
+    }
+    async function leave(event) {
+        if (!controller.transitioned)
+            return;
+        controller.transitioned = false;
+        controllerLeave && controllerLeave(event);
+        const leaveFromClasses = getAttribute('leaveFrom', options, dataset);
+        const leaveActiveClasses = getAttribute('leaveActive', options, dataset);
+        const leaveToClasses = getAttribute('leaveTo', options, dataset);
+        const enterToClasses = getAttribute('enterTo', options, dataset);
+        if (!removeToClasses) {
+            removeClasses(targetElement, enterToClasses);
+        }
+        await transition(targetElement, leaveFromClasses, leaveActiveClasses, leaveToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
+        if (!!hiddenClass) {
+            targetElement.classList.add(hiddenClass);
+        }
+    }
+    function toggleTransition(event) {
+        controllerToggleTransition && controllerToggleTransition(event);
+        if (controller.transitioned) {
+            leave();
+        }
+        else {
+            enter();
+        }
+    }
+    async function transition(element, initialClasses, activeClasses, endClasses, hiddenClass, preserveOriginalClass, removeEndClasses) {
+        // if there's any overlap between the current set of classes and initialClasses/activeClasses/endClasses,
+        // we should remove them before we start and add them back at the end
+        const stashedClasses = [];
+        if (preserveOriginalClass) {
+            initialClasses.forEach(cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls));
+            activeClasses.forEach(cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls));
+            endClasses.forEach(cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls));
+        }
+        // Add initial class before element start transition
+        addClasses(element, initialClasses);
+        // remove the overlapping classes
+        removeClasses(element, stashedClasses);
+        // Add active class before element start transition and maitain it during the entire transition.
+        addClasses(element, activeClasses);
+        await nextAnimationFrame();
+        // remove the initial class on frame after the beginning of the transition
+        removeClasses(element, initialClasses);
+        // add the endClass on frame after the beginning of the transition
+        addClasses(element, endClasses);
+        // dynamically comput the duration of the transition from the style of the element
+        await afterTransition(element);
+        // remove both activeClasses and endClasses
+        removeClasses(element, activeClasses);
+        if (removeEndClasses) {
+            removeClasses(element, endClasses);
+        }
+        // restore the overlaping classes
+        addClasses(element, stashedClasses);
+    }
+    function initialState() {
+        controller.transitioned = transitioned;
+        if (transitioned) {
+            if (!!hiddenClass) {
+                targetElement.classList.remove(hiddenClass);
+            }
+            enter();
+        }
+        else {
+            if (!!hiddenClass) {
+                targetElement.classList.add(hiddenClass);
+            }
+            leave();
+        }
+    }
+    function addClasses(element, classes) {
+        if (classes.length > 0) {
+            element.classList.add(...classes);
+        }
+    }
+    function removeClasses(element, classes) {
+        if (classes.length > 0) {
+            element.classList.remove(...classes);
+        }
+    }
+    initialState();
+    Object.assign(controller, { enter, leave, toggleTransition });
+    return [enter, leave, toggleTransition];
+};
+function getAttribute(name, options, dataset) {
+    const datasetName = `transition${name[0].toUpperCase()}${name.substr(1)}`;
+    const datasetAlpineName = alpineNames[name];
+    const classes = options[name] || dataset[datasetName] || dataset[datasetAlpineName] || ' ';
+    return isEmpty(classes) ? [] : classes.split(' ');
+}
+async function afterTransition(element) {
+    return new Promise(resolve => {
+        const duration = Number(getComputedStyle(element).transitionDuration.split(',')[0].replace('s', '')) * 1000;
+        setTimeout(() => {
+            resolve(duration);
+        }, duration);
+    });
+}
+async function nextAnimationFrame() {
+    return new Promise(resolve => {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(resolve);
+        });
+    });
+}
+function isEmpty(str) {
+    return str.length === 0 || !str.trim();
+}

data/app/assets/javascripts/polaris_view_components.js

@@ -2,6 +2,163 @@ import { Controller } from "@hotwired/stimulus";
 
 import { get } from "@rails/request.js";
 
+const alpineNames = {
+  enterFromClass: "enter",
+  enterActiveClass: "enterStart",
+  enterToClass: "enterEnd",
+  leaveFromClass: "leave",
+  leaveActiveClass: "leaveStart",
+  leaveToClass: "leaveEnd"
+};
+
+const defaultOptions = {
+  transitioned: false,
+  hiddenClass: "hidden",
+  preserveOriginalClass: true,
+  removeToClasses: true
+};
+
+const useTransition = (controller, options = {}) => {
+  var _a, _b, _c;
+  const targetName = controller.element.dataset.transitionTarget;
+  let targetFromAttribute;
+  if (targetName) {
+    targetFromAttribute = controller[`${targetName}Target`];
+  }
+  const targetElement = (options === null || options === void 0 ? void 0 : options.element) || targetFromAttribute || controller.element;
+  if (!(targetElement instanceof HTMLElement || targetElement instanceof SVGElement)) return;
+  const dataset = targetElement.dataset;
+  const leaveAfter = parseInt(dataset.leaveAfter || "") || options.leaveAfter || 0;
+  const {transitioned: transitioned, hiddenClass: hiddenClass, preserveOriginalClass: preserveOriginalClass, removeToClasses: removeToClasses} = Object.assign(defaultOptions, options);
+  const controllerEnter = (_a = controller.enter) === null || _a === void 0 ? void 0 : _a.bind(controller);
+  const controllerLeave = (_b = controller.leave) === null || _b === void 0 ? void 0 : _b.bind(controller);
+  const controllerToggleTransition = (_c = controller.toggleTransition) === null || _c === void 0 ? void 0 : _c.bind(controller);
+  async function enter(event) {
+    if (controller.transitioned) return;
+    controller.transitioned = true;
+    controllerEnter && controllerEnter(event);
+    const enterFromClasses = getAttribute("enterFrom", options, dataset);
+    const enterActiveClasses = getAttribute("enterActive", options, dataset);
+    const enterToClasses = getAttribute("enterTo", options, dataset);
+    const leaveToClasses = getAttribute("leaveTo", options, dataset);
+    if (!!hiddenClass) {
+      targetElement.classList.remove(hiddenClass);
+    }
+    if (!removeToClasses) {
+      removeClasses(targetElement, leaveToClasses);
+    }
+    await transition(targetElement, enterFromClasses, enterActiveClasses, enterToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
+    if (leaveAfter > 0) {
+      setTimeout((() => {
+        leave(event);
+      }), leaveAfter);
+    }
+  }
+  async function leave(event) {
+    if (!controller.transitioned) return;
+    controller.transitioned = false;
+    controllerLeave && controllerLeave(event);
+    const leaveFromClasses = getAttribute("leaveFrom", options, dataset);
+    const leaveActiveClasses = getAttribute("leaveActive", options, dataset);
+    const leaveToClasses = getAttribute("leaveTo", options, dataset);
+    const enterToClasses = getAttribute("enterTo", options, dataset);
+    if (!removeToClasses) {
+      removeClasses(targetElement, enterToClasses);
+    }
+    await transition(targetElement, leaveFromClasses, leaveActiveClasses, leaveToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
+    if (!!hiddenClass) {
+      targetElement.classList.add(hiddenClass);
+    }
+  }
+  function toggleTransition(event) {
+    controllerToggleTransition && controllerToggleTransition(event);
+    if (controller.transitioned) {
+      leave();
+    } else {
+      enter();
+    }
+  }
+  async function transition(element, initialClasses, activeClasses, endClasses, hiddenClass, preserveOriginalClass, removeEndClasses) {
+    const stashedClasses = [];
+    if (preserveOriginalClass) {
+      initialClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
+      activeClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
+      endClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
+    }
+    addClasses(element, initialClasses);
+    removeClasses(element, stashedClasses);
+    addClasses(element, activeClasses);
+    await nextAnimationFrame();
+    removeClasses(element, initialClasses);
+    addClasses(element, endClasses);
+    await afterTransition(element);
+    removeClasses(element, activeClasses);
+    if (removeEndClasses) {
+      removeClasses(element, endClasses);
+    }
+    addClasses(element, stashedClasses);
+  }
+  function initialState() {
+    controller.transitioned = transitioned;
+    if (transitioned) {
+      if (!!hiddenClass) {
+        targetElement.classList.remove(hiddenClass);
+      }
+      enter();
+    } else {
+      if (!!hiddenClass) {
+        targetElement.classList.add(hiddenClass);
+      }
+      leave();
+    }
+  }
+  function addClasses(element, classes) {
+    if (classes.length > 0) {
+      element.classList.add(...classes);
+    }
+  }
+  function removeClasses(element, classes) {
+    if (classes.length > 0) {
+      element.classList.remove(...classes);
+    }
+  }
+  initialState();
+  Object.assign(controller, {
+    enter: enter,
+    leave: leave,
+    toggleTransition: toggleTransition
+  });
+  return [ enter, leave, toggleTransition ];
+};
+
+function getAttribute(name, options, dataset) {
+  const datasetName = `transition${name[0].toUpperCase()}${name.substr(1)}`;
+  const datasetAlpineName = alpineNames[name];
+  const classes = options[name] || dataset[datasetName] || dataset[datasetAlpineName] || " ";
+  return isEmpty(classes) ? [] : classes.split(" ");
+}
+
+async function afterTransition(element) {
+  return new Promise((resolve => {
+    const duration = Number(getComputedStyle(element).transitionDuration.split(",")[0].replace("s", "")) * 1e3;
+    setTimeout((() => {
+      resolve(duration);
+    }), duration);
+  }));
+}
+
+async function nextAnimationFrame() {
+  return new Promise((resolve => {
+    requestAnimationFrame((() => {
+      requestAnimationFrame(resolve);
+    }));
+  }));
+}
+
+function isEmpty(str) {
+  return str.length === 0 || !str.trim();
+}
+
 function debounce$1(fn, wait) {
   let timeoutId;
   return (...args) => {
@@ -302,6 +459,7 @@ class Dropzone extends Controller {
   onDirectUploadsEnd=() => {
     this.enable();
     this.clearFiles();
+    if (this.acceptedFiles.length === 0) return;
     this.loaderTarget.classList.remove("Polaris--hidden");
   };
   onDirectUploadInitialize=event => {
@@ -309,9 +467,15 @@ class Dropzone extends Controller {
     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}`;
+    if (this.acceptedFiles.length === 0) return;
+    if (this.sizeValue == "small") {
+      this.clearFiles();
+      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}`;
+    }
   };
   onDirectUploadStart=event => {
     const {id: id} = event.detail;
@@ -564,163 +728,6 @@ function isChangeEvent(event) {
   return event.type === "change";
 }
 
-const alpineNames = {
-  enterFromClass: "enter",
-  enterActiveClass: "enterStart",
-  enterToClass: "enterEnd",
-  leaveFromClass: "leave",
-  leaveActiveClass: "leaveStart",
-  leaveToClass: "leaveEnd"
-};
-
-const defaultOptions = {
-  transitioned: false,
-  hiddenClass: "hidden",
-  preserveOriginalClass: true,
-  removeToClasses: true
-};
-
-const useTransition = (controller, options = {}) => {
-  var _a, _b, _c;
-  const targetName = controller.element.dataset.transitionTarget;
-  let targetFromAttribute;
-  if (targetName) {
-    targetFromAttribute = controller[`${targetName}Target`];
-  }
-  const targetElement = (options === null || options === void 0 ? void 0 : options.element) || targetFromAttribute || controller.element;
-  if (!(targetElement instanceof HTMLElement || targetElement instanceof SVGElement)) return;
-  const dataset = targetElement.dataset;
-  const leaveAfter = parseInt(dataset.leaveAfter || "") || options.leaveAfter || 0;
-  const {transitioned: transitioned, hiddenClass: hiddenClass, preserveOriginalClass: preserveOriginalClass, removeToClasses: removeToClasses} = Object.assign(defaultOptions, options);
-  const controllerEnter = (_a = controller.enter) === null || _a === void 0 ? void 0 : _a.bind(controller);
-  const controllerLeave = (_b = controller.leave) === null || _b === void 0 ? void 0 : _b.bind(controller);
-  const controllerToggleTransition = (_c = controller.toggleTransition) === null || _c === void 0 ? void 0 : _c.bind(controller);
-  async function enter(event) {
-    if (controller.transitioned) return;
-    controller.transitioned = true;
-    controllerEnter && controllerEnter(event);
-    const enterFromClasses = getAttribute("enterFrom", options, dataset);
-    const enterActiveClasses = getAttribute("enterActive", options, dataset);
-    const enterToClasses = getAttribute("enterTo", options, dataset);
-    const leaveToClasses = getAttribute("leaveTo", options, dataset);
-    if (!!hiddenClass) {
-      targetElement.classList.remove(hiddenClass);
-    }
-    if (!removeToClasses) {
-      removeClasses(targetElement, leaveToClasses);
-    }
-    await transition(targetElement, enterFromClasses, enterActiveClasses, enterToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
-    if (leaveAfter > 0) {
-      setTimeout((() => {
-        leave(event);
-      }), leaveAfter);
-    }
-  }
-  async function leave(event) {
-    if (!controller.transitioned) return;
-    controller.transitioned = false;
-    controllerLeave && controllerLeave(event);
-    const leaveFromClasses = getAttribute("leaveFrom", options, dataset);
-    const leaveActiveClasses = getAttribute("leaveActive", options, dataset);
-    const leaveToClasses = getAttribute("leaveTo", options, dataset);
-    const enterToClasses = getAttribute("enterTo", options, dataset);
-    if (!removeToClasses) {
-      removeClasses(targetElement, enterToClasses);
-    }
-    await transition(targetElement, leaveFromClasses, leaveActiveClasses, leaveToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
-    if (!!hiddenClass) {
-      targetElement.classList.add(hiddenClass);
-    }
-  }
-  function toggleTransition(event) {
-    controllerToggleTransition && controllerToggleTransition(event);
-    if (controller.transitioned) {
-      leave();
-    } else {
-      enter();
-    }
-  }
-  async function transition(element, initialClasses, activeClasses, endClasses, hiddenClass, preserveOriginalClass, removeEndClasses) {
-    const stashedClasses = [];
-    if (preserveOriginalClass) {
-      initialClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
-      activeClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
-      endClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
-    }
-    addClasses(element, initialClasses);
-    removeClasses(element, stashedClasses);
-    addClasses(element, activeClasses);
-    await nextAnimationFrame();
-    removeClasses(element, initialClasses);
-    addClasses(element, endClasses);
-    await afterTransition(element);
-    removeClasses(element, activeClasses);
-    if (removeEndClasses) {
-      removeClasses(element, endClasses);
-    }
-    addClasses(element, stashedClasses);
-  }
-  function initialState() {
-    controller.transitioned = transitioned;
-    if (transitioned) {
-      if (!!hiddenClass) {
-        targetElement.classList.remove(hiddenClass);
-      }
-      enter();
-    } else {
-      if (!!hiddenClass) {
-        targetElement.classList.add(hiddenClass);
-      }
-      leave();
-    }
-  }
-  function addClasses(element, classes) {
-    if (classes.length > 0) {
-      element.classList.add(...classes);
-    }
-  }
-  function removeClasses(element, classes) {
-    if (classes.length > 0) {
-      element.classList.remove(...classes);
-    }
-  }
-  initialState();
-  Object.assign(controller, {
-    enter: enter,
-    leave: leave,
-    toggleTransition: toggleTransition
-  });
-  return [ enter, leave, toggleTransition ];
-};
-
-function getAttribute(name, options, dataset) {
-  const datasetName = `transition${name[0].toUpperCase()}${name.substr(1)}`;
-  const datasetAlpineName = alpineNames[name];
-  const classes = options[name] || dataset[datasetName] || dataset[datasetAlpineName] || " ";
-  return isEmpty(classes) ? [] : classes.split(" ");
-}
-
-async function afterTransition(element) {
-  return new Promise((resolve => {
-    const duration = Number(getComputedStyle(element).transitionDuration.split(",")[0].replace("s", "")) * 1e3;
-    setTimeout((() => {
-      resolve(duration);
-    }), duration);
-  }));
-}
-
-async function nextAnimationFrame() {
-  return new Promise((resolve => {
-    requestAnimationFrame((() => {
-      requestAnimationFrame(resolve);
-    }));
-  }));
-}
-
-function isEmpty(str) {
-  return str.length === 0 || !str.trim();
-}
-
 class Frame extends Controller {
   static targets=[ "navigationOverlay", "navigation", "saveBar" ];
   connect() {

data/app/assets/stylesheets/polaris_view_components/custom.css

@@ -137,5 +137,9 @@ a.Polaris-Tag__Button {
     align-items: center;
     text-align: center;
     justify-content: center;
+
+    .Polaris-Spinner--sizeSmall {
+      height: 20px;
+    }
   }
 }

data/app/assets/stylesheets/polaris_view_components.css

@@ -2343,3 +2343,6 @@ a.Polaris-Tag__Button {
     text-align: center;
     justify-content: center;
   }
+.Polaris-DropZone__Loader .Polaris-Spinner--sizeSmall {
+      height: 20px;
+    }

data/app/components/polaris/dropzone_component.html.erb

@@ -68,7 +68,7 @@
       <% end %>
 
       <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader">
-        <%= polaris_spinner %>
+        <%= polaris_spinner(size: (@size == :small) ? :small : :large) %>
       </div>
     </div>
 

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "0.9.0"
+    VERSION = "0.9.1"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 0.9.0
+  version: 0.9.1
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-03-07 00:00:00.000000000 Z
+date: 2022-04-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -469,7 +469,8 @@ files:
 - app/assets/javascripts/polaris_view_components/select_controller.js
 - app/assets/javascripts/polaris_view_components/text_field_controller.js
 - app/assets/javascripts/polaris_view_components/toast_controller.js
-- app/assets/javascripts/polaris_view_components/utils.js
+- app/assets/javascripts/polaris_view_components/utils/index.js
+- app/assets/javascripts/polaris_view_components/utils/use-transition.js
 - app/assets/stylesheets/polaris_view_components.css
 - app/assets/stylesheets/polaris_view_components.postcss.css
 - app/assets/stylesheets/polaris_view_components/custom.css