uikit 3.15.8 → 3.15.9-dev.ffad54c1a

package/package.json

@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.15.8",
+    "version": "3.15.9-dev.ffad54c1a",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/components/sortable.js

@@ -1,10 +1,12 @@
 import Animate from '../mixin/animate';
 import Class from '../mixin/class';
 import {
+    $,
     $$,
     addClass,
     append,
     assign,
+    attr,
     before,
     children,
     css,
@@ -15,6 +17,7 @@ import {
     index,
     isEmpty,
     isInput,
+    isTag,
     off,
     offsetViewport,
     on,
@@ -345,10 +348,18 @@ function untrackScroll() {
 }
 
 function appendDrag(container, element) {
-    const clone = append(
-        container,
-        element.outerHTML.replace(/(^<)(?:li|tr)|(?:li|tr)(\/>$)/g, '$1div$2')
-    );
+    let clone;
+    if (['li', 'tr'].some((tag) => isTag(element, tag))) {
+        clone = $('<div>');
+        append(clone, element.cloneNode(true).children);
+        for (const { nodeName, nodeValue } of element.attributes) {
+            attr(clone, nodeName, nodeValue);
+        }
+    } else {
+        clone = element.cloneNode(true);
+    }
+
+    append(container, clone);
 
     css(clone, 'margin', '0', 'important');
     css(clone, {

package/src/js/components/tooltip.js

@@ -40,9 +40,12 @@ export default {
     },
 
     beforeConnect() {
+        this.id = `uk-tooltip-${this._uid}`;
         this._hasTitle = hasAttr(this.$el, 'title');
-        attr(this.$el, 'title', '');
-        this.updateAria(false);
+        attr(this.$el, {
+            title: '',
+            'aria-describedby': this.id,
+        });
         makeFocusable(this.$el);
     },
 
@@ -91,14 +94,12 @@ export default {
         _show() {
             this.tooltip = append(
                 this.container,
-                `<div class="uk-${this.$options.name}">
+                `<div id="${this.id}" class="uk-${this.$options.name}" role="tooltip">
                     <div class="uk-${this.$options.name}-inner">${this.title}</div>
                  </div>`
             );
 
             on(this.tooltip, 'toggled', (e, toggled) => {
-                this.updateAria(toggled);
-
                 if (!toggled) {
                     return;
                 }
@@ -115,10 +116,6 @@ export default {
 
             this.toggleElement(this.tooltip, true);
         },
-
-        updateAria(toggled) {
-            attr(this.$el, 'aria-expanded', toggled);
-        },
     },
 
     events: {

package/src/js/mixin/internal/animate-slide.js

@@ -4,8 +4,10 @@ import {
     fastdom,
     includes,
     index,
+    isEqual,
     isVisible,
     noop,
+    observeMutation,
     offset,
     parent,
     position,
@@ -26,6 +28,8 @@ export default async function (action, target, duration) {
     nodes.forEach(Transition.cancel);
     reset(target);
 
+    const { promise, observer } = awaitMutation(target);
+
     // Adding, sorting, removing nodes
     action();
 
@@ -33,7 +37,12 @@ export default async function (action, target, duration) {
     nodes = nodes.concat(children(target).filter((el) => !includes(nodes, el)));
 
     // Wait for update to propagate
-    await Promise.resolve();
+    if (isEqual(children(target), nodes)) {
+        observer.disconnect();
+        await Promise.resolve();
+    } else {
+        await promise;
+    }
 
     // Force update
     fastdom.flush();
@@ -141,3 +150,19 @@ function getPositionWithMargin(el) {
 function awaitFrame() {
     return new Promise((resolve) => requestAnimationFrame(resolve));
 }
+
+function awaitMutation(target) {
+    let observer;
+    const promise = new Promise(
+        (resolve) =>
+            (observer = observeMutation(
+                target,
+                (records, observer) => {
+                    resolve();
+                    observer.disconnect();
+                },
+                { childList: true, attributes: true }
+            ))
+    );
+    return { promise, observer };
+}