@danielgindi/selectbox 1.0.105 → 1.0.108

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 1.0.105
+ * @danielgindi/selectbox 1.0.108
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -23,6 +23,7 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
  * @property {Element} [el] An element to attach to, instead of creating a new one
  * @property {string} [baseClassName='droplist'] class name for the menu root element
  * @property {string|string[]} [additionalClasses]
+ * @property {'ltr'|'rtl'|'auto'} [direction='auto']
  * @property {boolean} [autoItemBlur=true] Should we automatically blur the focused item when the droplist loses focus?
  * @property {number} [autoItemBlurDelay=300] How long to wait before deciding to blur the focused item (when the droplist loses focus)?
  * @property {boolean} [capturesFocus=true] Should this DropList be added to the TAB-key stack?
@@ -139,6 +140,8 @@ class DropList {
 
             baseClassName: o.baseClassName,
             additionalClasses: o.additionalClasses,
+            direction: o.direction === 'ltr' ? 'ltr' : o.direction === 'rtl' ? 'rtl' : 'auto',
+
             autoItemBlur: o.autoItemBlur,
             autoItemBlurDelay: o.autoItemBlurDelay,
             capturesFocus: o.capturesFocus,
@@ -362,6 +365,27 @@ class DropList {
         return this;
     }
 
+    /**
+     * Sets the appropriate direction for the droplist
+     * @param {'ltr'|'rtl'|'auto'} direction
+     * @return {DropList}
+     */
+    setDirection(direction) {
+        const p = this._p;
+        p.direction = direction === 'ltr' ? 'ltr' : direction === 'rtl' ? 'rtl' : 'auto';
+        this._syncBaseClasses();
+        return this;
+    }
+
+    /**
+     * Gets the supplied direction for the droplist
+     * @return {'ltr'|'rtl'|'auto'}
+     */
+    getDirection() {
+        const p = this._p;
+        return p.direction;
+    }
+
     /**
      * @param {string} prop
      * @returns {DropList}
@@ -436,6 +460,9 @@ class DropList {
 
         let classes = [p.baseClassName];
 
+        if (p.direction === 'ltr' || p.direction === 'rtl')
+            classes.push(`${p.baseClassName}__` + p.direction);
+
         if (p.additionalClasses) {
             classes = classes.concat(p.additionalClasses);
         }
@@ -2294,6 +2321,8 @@ const inputBackbufferCssProps = [
  * @property {DropList.Options} [listOptions] options to pass to the `DropList`
  * @property {Element} [el] An element to attach to, instead of creating a new one
  * @property {string} [baseClassName='selectbox'] class name for the menu root element
+ * @property {string|string[]} [additionalClasses]
+ * @property {'ltr'|'rtl'|'auto'} [direction='auto']
  * @property {boolean} [disabled=false] Should start as disabled?
  * @property {boolean} [clearable=true] Has clear button?
  * @property {boolean} [hasOpenIndicator=true] has open/close indicator?
@@ -2332,7 +2361,6 @@ const inputBackbufferCssProps = [
  * @property {function(item: DropList.ItemBase, itemEl: Element)} [unrenderNoResultsItem]
  * @property {function(items: DropList.ItemBase[], term: string):(DropList.ItemBase[]|null)} [filterFn]
  * @property {function(name: string, ...args)} [on]
- * @property {string|string[]} [additionalClasses]
  * @property {boolean} [isLoadingMode]
  * */
 const defaultOptions = {
@@ -2426,6 +2454,8 @@ class SelectBox {
             ownsEl: true,
 
             baseClassName: o.baseClassName,
+            additionalClasses: o.additionalClasses,
+            direction: o.direction === 'ltr' ? 'ltr' : o.direction === 'rtl' ? 'rtl' : 'auto',
 
             listOptions: o.listOptions,
 
@@ -2469,7 +2499,6 @@ class SelectBox {
             on: o.on || null,
             silenceEvents: true,
             mitt: mitt(),
-            additionalClasses: o.additionalClasses,
 
             isLoadingMode: !!o.isLoadingMode,
 
@@ -3576,6 +3605,9 @@ class SelectBox {
 
         this._trigger('open:before', { list: p.dropList });
 
+        // Propagate direction to droplist
+        p.dropList.setDirection(getComputedStyle(p.el).direction);
+
         p.dropList.show(this._getDropListPositionOptions());
         this._repositionDropList();
 
@@ -3670,6 +3702,27 @@ class SelectBox {
         return this._p.isLoadingMode;
     }
 
+    /**
+     * Sets the appropriate direction for the selectbox
+     * @param {'ltr'|'rtl'|'auto'} direction
+     * @return {SelectBox}
+     */
+    setDirection(direction) {
+        const p = this._p;
+        p.direction = direction === 'ltr' ? 'ltr' : direction === 'rtl' ? 'rtl' : 'auto';
+        this._syncBaseClasses();
+        return this;
+    }
+
+    /**
+     * Gets the supplied direction for the selectbox
+     * @return {'ltr'|'rtl'|'auto'}
+     */
+    getDirection() {
+        const p = this._p;
+        return p.direction;
+    }
+
     /**
      * Can be called in case that the selectbox was attached to the dom late and has a weird size.
      * @returns {SelectBox}
@@ -3920,6 +3973,9 @@ class SelectBox {
         if (p.searchable || p.multi)
             classes.push(`${p.baseClassName}__searchable`);
 
+        if (p.direction === 'ltr' || p.direction === 'rtl')
+            classes.push(`${p.baseClassName}__` + p.direction);
+
         if (p.additionalClasses) {
             classes = classes.concat(p.additionalClasses);
         }