uikit 3.7.3-dev.af32c46e8 → 3.7.4-dev.e74b22b13

package/dist/js/uikit-core.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.7.3-dev.af32c46e8 | https://www.getuikit.com | (c) 2014 - 2021 YOOtheme | MIT License */
+/*! UIkit 3.7.4-dev.e74b22b13 | https://www.getuikit.com | (c) 2014 - 2021 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -463,8 +463,9 @@
         return toNodes(element).some(function (element) { return matches(element, selInput); });
     }
 
+    var selFocusable = selInput + ",a[href],[tabindex]";
     function isFocusable(element) {
-        return isInput(element) || matches(element, 'a[href],button') || hasAttr(element, 'tabindex');
+        return matches(element, selFocusable);
     }
 
     function parent(element) {
@@ -2574,6 +2575,7 @@
         isVisible: isVisible,
         selInput: selInput,
         isInput: isInput,
+        selFocusable: selFocusable,
         isFocusable: isFocusable,
         parent: parent,
         filter: filter,
@@ -3444,7 +3446,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.7.3-dev.af32c46e8';
+    UIkit.version = '3.7.4-dev.e74b22b13';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -6617,12 +6619,18 @@
             dropdowns: {
 
                 get: function(ref, $el) {
+                    var this$1 = this;
                     var clsDrop = ref.clsDrop;
 
                     var dropdowns = $$(("." + clsDrop), $el);
 
-                    if (this.container !== $el) {
-                        $$(("." + clsDrop), this.container).forEach(function (el) { return !includes(dropdowns, el) && dropdowns.push(el); });
+                    if (this.dropContainer !== $el) {
+                        $$(("." + clsDrop), this.dropContainer).forEach(function (el) {
+                            var dropdown = this$1.getDropdown(el);
+                            if (!includes(dropdowns, el) && dropdown && dropdown.target && within(dropdown.target, this$1.$el)) {
+                                dropdowns.push(el);
+                            }
+                        });
                     }
 
                     return dropdowns;
@@ -6640,6 +6648,12 @@
 
                 immediate: true
 
+            },
+
+            toggles: function(ref, $el) {
+                var dropdown = ref.dropdown;
+
+                return $$(dropdown, $el);
             }
 
         },
@@ -6652,7 +6666,7 @@
         events: [
 
             {
-                name: 'mouseover',
+                name: 'mouseover focusin',
 
                 delegate: function() {
                     return this.dropdown;
@@ -6662,13 +6676,93 @@
                     var current = ref.current;
 
                     var active = this.getActive();
-                    if (active && active.target && !within(active.target, current) && !active.tracker.movesTo(active.$el)) {
+                    if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.tracker.movesTo(active.$el)) {
                         active.hide(false);
                     }
                 }
 
             },
 
+            {
+                name: 'keydown',
+
+                delegate: function() {
+                    return this.dropdown;
+                },
+
+                handler: function(e) {
+
+                    var current = e.current;
+                    var keyCode = e.keyCode;
+                    var active = this.getActive();
+
+                    if (keyCode === keyMap.DOWN && hasAttr(current, 'aria-expanded')) {
+
+                        e.preventDefault();
+
+                        if (!active || active.target !== current) {
+                            current.click();
+                            once(this.dropContainer, 'show', function (ref) {
+                                var target = ref.target;
+
+                                return focusFirstFocusableElement(target);
+                            });
+                        } else {
+                            focusFirstFocusableElement(active.$el);
+                        }
+
+                    }
+
+                    handleNavItemNavigation(e, this.toggles, active);
+                }
+            },
+
+            {
+                name: 'keydown',
+
+                el: function() {
+                    return this.dropContainer;
+                },
+
+                delegate: function() {
+                    return ("." + (this.clsDrop));
+                },
+
+                handler: function(e) {
+
+                    var current = e.current;
+                    var keyCode = e.keyCode;
+
+                    if (!includes(this.dropdowns, current)) {
+                        return;
+                    }
+
+                    var active = this.getActive();
+                    var elements = $$(selFocusable, current);
+                    var i = findIndex(elements, function (el) { return matches(el, ':focus'); });
+
+                    if (keyCode === keyMap.UP) {
+                        e.preventDefault();
+                        if (i > 0) {
+                            elements[i - 1].focus();
+                        }
+                    }
+
+                    if (keyCode === keyMap.DOWN) {
+                        e.preventDefault();
+                        if (i < elements.length - 1) {
+                            elements[i + 1].focus();
+                        }
+                    }
+
+                    if (keyCode === keyMap.ESC) {
+                        active && active.target && active.target.focus();
+                    }
+
+                    handleNavItemNavigation(e, this.toggles, active);
+                }
+            },
+
             {
                 name: 'mouseleave',
 
@@ -6676,10 +6770,14 @@
                     return this.dropbar;
                 },
 
+                filter: function() {
+                    return this.dropbar;
+                },
+
                 handler: function() {
                     var active = this.getActive();
 
-                    if (active && !this.dropdowns.some(function (el) { return matches(el, ':hover'); })) {
+                    if (active && includes(active.mode, 'hover') && !this.dropdowns.some(function (el) { return matches(el, ':hover'); })) {
                         active.hide();
                     }
                 }
@@ -6790,7 +6888,7 @@
         methods: {
 
             getActive: function() {
-                return active$1 && includes(active$1.mode, 'hover') && within(active$1.target, this.$el) && active$1;
+                return active$1 && within(active$1.target, this.$el) && active$1;
             },
 
             transitionTo: function(newHeight, el) {
@@ -6827,6 +6925,49 @@
 
     };
 
+    function handleNavItemNavigation(e, toggles, active) {
+
+        var current = e.current;
+        var keyCode = e.keyCode;
+        var target = active && active.target || current;
+        var i = toggles.indexOf(target);
+
+        // Left
+        if (keyCode === keyMap.LEFT && i > 0) {
+            active && active.hide(false);
+            toggles[i - 1].focus();
+        }
+
+        // Right
+        if (keyCode === keyMap.RIGHT && i < toggles.length - 1) {
+            active && active.hide(false);
+            toggles[i + 1].focus();
+        }
+
+        if (keyCode === keyMap.TAB) {
+            target.focus();
+            active && active.hide(false);
+        }
+    }
+
+    function focusFirstFocusableElement(el) {
+        if (!$(':focus', el)) {
+            var focusEl = $(selFocusable, el);
+            if (focusEl) {
+                focusEl.focus();
+            }
+        }
+    }
+
+    var keyMap = {
+        TAB: 9,
+        ESC: 27,
+        LEFT: 37,
+        UP: 38,
+        RIGHT: 39,
+        DOWN: 40
+    };
+
     var offcanvas = {
 
         mixins: [Modal],
@@ -7100,12 +7241,14 @@
 
         props: {
             selContainer: String,
-            selContent: String
+            selContent: String,
+            minHeight: Number
         },
 
         data: {
             selContainer: '.uk-modal',
-            selContent: '.uk-modal-dialog'
+            selContent: '.uk-modal-dialog',
+            minHeight: 150
         },
 
         computed: {
@@ -7125,7 +7268,7 @@
         },
 
         connected: function() {
-            css(this.$el, 'minHeight', 150);
+            css(this.$el, 'minHeight', this.minHeight);
         },
 
         update: {
@@ -7138,7 +7281,7 @@
 
                 return {
                     current: toFloat(css(this.$el, 'maxHeight')),
-                    max: Math.max(150, height(this.container) - (dimensions(this.content).height - height(this.$el)))
+                    max: Math.max(this.minHeight, height(this.container) - (dimensions(this.content).height - height(this.$el)))
                 };
             },
 
@@ -7855,6 +7998,7 @@
         props: {
             connect: String,
             toggle: String,
+            itemNav: String,
             active: Number,
             swiping: Boolean
         },
@@ -7862,6 +8006,7 @@
         data: {
             connect: '~.uk-switcher',
             toggle: '> * > :first-child',
+            itemNav: false,
             active: 0,
             swiping: true,
             cls: 'uk-active',
@@ -7943,7 +8088,7 @@
                 name: 'click',
 
                 el: function() {
-                    return this.connects;
+                    return this.connects.concat(this.itemNav ? queryAll(this.itemNav, this.$el) : []);
                 },
 
                 delegate: function() {
@@ -8134,6 +8279,18 @@
 
             },
 
+            {
+                name: 'keydown',
+
+                handler: function(e) {
+                    // Space
+                    if (e.keyCode === 32) {
+                        e.preventDefault();
+                        this.$el.click();
+                    }
+                }
+            },
+
             {
 
                 name: 'click',
@@ -8147,7 +8304,7 @@
                     var link;
                     if (closest(e.target, 'a[href="#"], a[href=""]')
                         || (link = closest(e.target, 'a[href]')) && (
-                            !attr(this.$el, 'aria-expanded')
+                            attr(this.$el, 'aria-expanded') !== 'true'
                             || link.hash && matches(this.target, link.hash)
                         )
                     ) {