@danielgindi/selectbox 1.0.123 → 1.0.124

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 1.0.123
+ * @danielgindi/selectbox 1.0.124
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -7,7 +7,7 @@ import { remove, toggleClass, before, append, getRootNode } from '@danielgindi/d
 import { setCssProps, getElementOffset, getElementHeight, getElementWidth, anchoredPosition, setElementHeight, parseTransition, setElementWidth, getPseudoElementWidth, getCssProps } from '@danielgindi/dom-utils/lib/Css';
 import DomEventsSink from '@danielgindi/dom-utils/lib/DomEventsSink';
 import VirtualListHelper from '@danielgindi/virtual-list-helper';
-import { VALUE_ESCAPE, VALUE_SPACE, VALUE_ENTER, VALUE_DOWN, VALUE_UP, VALUE_END, VALUE_HOME, VALUE_PAGE_DOWN, VALUE_PAGE_UP, VALUE_TAB, VALUE_DELETE, VALUE_BACK_SPACE, VALUE_LEFT, VALUE_RIGHT } from 'keycode-js';
+import { VALUE_ESCAPE, VALUE_SPACE, VALUE_ENTER, VALUE_RIGHT, VALUE_LEFT, VALUE_DOWN, VALUE_UP, VALUE_END, VALUE_HOME, VALUE_PAGE_DOWN, VALUE_PAGE_UP, VALUE_TAB, VALUE_DELETE, VALUE_BACK_SPACE } from 'keycode-js';
 import mitt from 'mitt';
 
 var escapeRegex = value => value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
@@ -331,9 +331,9 @@ class DropList {
             remove(p.el);
         }
 
-        if (p._currentSubDropList) {
-            p._currentSubDropList?.droplist?.destroy();
-            p._currentSubDropList = null;
+        if (p.currentSubDropList) {
+            p.currentSubDropList?.droplist?.destroy();
+            p.currentSubDropList = null;
         }
 
         if (!p.ownsEl) {
@@ -364,6 +364,22 @@ class DropList {
         return this._p.el;
     }
 
+    /**
+     * Returns true if other is an inclusive descendant of node, and false otherwise.
+     * @param {Node} other
+     * @param {boolean} [considerSubmenus=true]
+     * @returns {boolean}
+     */
+    elContains(other, considerSubmenus = true) {
+        if (this.el.contains(other))
+            return true;
+
+        if (considerSubmenus && this._p.currentSubDropList?.droplist?.elContains(other))
+            return true;
+
+        return false;
+    }
+
     /**
      * @param {string|string[]} classes
      * @returns {DropList}
@@ -501,7 +517,7 @@ class DropList {
         if (!item)
             return;
 
-        if (p._currentSubDropList) {
+        if (p.currentSubDropList) {
             this._hideSublist();
         }
 
@@ -1294,7 +1310,7 @@ class DropList {
             if (this[DestroyedSymbol$1]) return;
             this._trigger('hide:after');
 
-            if (p._currentSubDropList) {
+            if (p.currentSubDropList) {
                 this._hideSublist();
             }
         }
@@ -1420,7 +1436,7 @@ class DropList {
             updateWidth: true,
         });
 
-        p._currentSubDropList = {
+        p.currentSubDropList = {
             item: item,
             itemElement: itemElement,
             droplist: droplist,
@@ -1430,13 +1446,13 @@ class DropList {
     _hideSublist() {
         const p = this._p;
 
-        if (!p._currentSubDropList)
+        if (!p.currentSubDropList)
             return;
 
-        const data = p._currentSubDropList;
+        const data = p.currentSubDropList;
         data.droplist.hide();
         data.droplist.destroy();
-        p._currentSubDropList = null;
+        p.currentSubDropList = null;
 
         this._trigger('hide_subitems', {
             value: data.item.value,
@@ -1686,7 +1702,7 @@ class DropList {
     }
 
     _handleMouseOver(event, itemEl) {
-        this._focus(event, itemEl);
+        this._focus(event, itemEl, true);
     }
 
     _hookTouchEvents() {
@@ -1752,7 +1768,7 @@ class DropList {
                 let itemEl = p.focusItemEl || // focused item
                     p.el.firstChild; // or the first item
 
-                this._focus(event, itemEl);
+                this._focus(event, itemEl, false);
             })
             .add(p.el, 'blur', () => {
                 setTimeout(() => {
@@ -1811,6 +1827,21 @@ class DropList {
                 }
                 break;
 
+            case VALUE_LEFT:
+            case VALUE_RIGHT:
+                if (event.key === VALUE_RIGHT && getComputedStyle(event.target).direction !== 'rtl' ||
+                    event.key === VALUE_LEFT && getComputedStyle(event.target).direction === 'rtl') {
+                    let item = p.items[p.focusItemIndex];
+                    if (p.focusItemIndex > -1 && item._subitems)
+                        this._showSublist(item, p.focusItemEl);
+                } else {
+                    if (p.currentSubDropList) {
+                        p.currentSubDropList.hide();
+                        preventDefault = false;
+                    }
+                }
+                break;
+
             case VALUE_ENTER:
                 this.triggerItemSelection(null, event);
                 event.preventDefault();
@@ -1887,7 +1918,7 @@ class DropList {
 
         if (matchIndex > -1) {
             let next = p.virtualListHelper.getItemElementAt(matchIndex);
-            this._focus(evt, next || null, matchIndex);
+            this._focus(evt, next || null, matchIndex, true);
 
             if (!this.isVisible()) {
                 this.triggerItemSelection(next ? null : p.items[matchIndex], evt);
@@ -1906,7 +1937,7 @@ class DropList {
         }
     }
 
-    _focus(event, itemEl, itemIndex) {
+    _focus(event, itemEl, itemIndex, openSubitems) {
         const p = this._p;
 
         if (!itemIndex && itemEl) {
@@ -1943,7 +1974,9 @@ class DropList {
             event: event,
             el: focusItemEl,
         });
-        this._showSublist(item, focusItemEl);
+
+        if (openSubitems)
+            this._showSublist(item, focusItemEl);
     }
 
     _delayBlurItemOnBlur() {
@@ -2087,7 +2120,7 @@ class DropList {
         }
 
         next = p.virtualListHelper.getItemElementAt(nextIndex);
-        this._focus(event, next || null, nextIndex);
+        this._focus(event, next || null, nextIndex, false);
 
         if (!this.isVisible()) {
             this.triggerItemSelection(item, event);