Fix tether and dropdown-direction compatibility with bootstrap

src/DropdownMenu.ls

@@ -142,7 +142,7 @@ module.exports = class DropdownMenu extends React.PureComponent
 
             # DROPDOWN
             DivWrapper do
-                class-name: "dropdown-menu #{dynamic-class-name}"
+                class-name: "rs-dropdown-menu #{dynamic-class-name}"
                 ref: (element) !~> !!element && @dropdown-menu = element
 
                 # on-height-change :: Number -> ()

test/common-tests.ls

@@ -44,17 +44,17 @@ module.exports = (select-class) !->
     specify "must default the list of options to an empty list", ->
         select = create-select options: undefined
         click-to-open-select-control select
-        find-rendered-DOM-component-with-class select, \dropdown-menu
+        find-rendered-DOM-component-with-class select, \rs-dropdown-menu
 
     specify "must show the list of options on click", ->
         select = create-select!
         click-to-open-select-control select
-        find-rendered-DOM-component-with-class select, \dropdown-menu
+        find-rendered-DOM-component-with-class select, \rs-dropdown-menu
 
     specify "must open options dropdown on search change", ->
         select = create-select!
         set-input-text (get-input select), \text
-        find-rendered-DOM-component-with-class select, \dropdown-menu
+        find-rendered-DOM-component-with-class select, \rs-dropdown-menu
 
     specify "must filter options list on search change", ->
         select = create-select!
@@ -135,7 +135,7 @@ module.exports = (select-class) !->
         select = create-select do
             disabled: true
         click-to-open-select-control select
-        component-with-class-must-not-exist select, \dropdown-menu
+        component-with-class-must-not-exist select, \rs-dropdown-menu
 
     specify "must be able to render custom option", ->
         select = create-select do
@@ -193,7 +193,7 @@ module.exports = (select-class) !->
         select = create-select!
         click-to-open-select-control select
         press-escape (get-input select)
-        component-with-class-must-not-exist select, \dropdown-menu
+        component-with-class-must-not-exist select, \rs-dropdown-menu
 
     specify "must render custom dom for 'no results found'", ->
         select = create-select do
@@ -245,7 +245,7 @@ module.exports = (select-class) !->
     specify "highlight-first-selectable-option must not open the select", ->
         select = create-select!
         select.highlight-first-selectable-option!
-        component-with-class-must-not-exist select, \dropdown-menu
+        component-with-class-must-not-exist select, \rs-dropdown-menu
 
     specify "must highlight the second option, when creating options from search & search results are non empty", ->
         select = create-select do
@@ -269,7 +269,7 @@ module.exports = (select-class) !->
         select = create-select!
         click-to-open-select-control select
         blur get-input select
-        component-with-class-must-not-exist select, \dropdown-menu
+        component-with-class-must-not-exist select, \rs-dropdown-menu
 
     specify "must deselect on clicking reset button", ->
         select = create-select!
@@ -282,7 +282,7 @@ module.exports = (select-class) !->
         select = TestUtils.render-into-document (create-element select-class, {options: null}, [])
         click-to-open-select-control select
         set-input-text (get-input select), \test
-        find-rendered-DOM-component-with-class select, \dropdown-menu
+        find-rendered-DOM-component-with-class select, \rs-dropdown-menu
         find-rendered-DOM-component-with-class select, \no-results-found
         component-with-class-must-not-exist \simple-option
 
@@ -300,7 +300,7 @@ module.exports = (select-class) !->
                 disabled: true
                 options: []
             container
-        component-with-class-must-not-exist select, \dropdown-menu
+        component-with-class-must-not-exist select, \rs-dropdown-menu
 
     specify "must work when passed null props and undefined children", ->
         TestUtils.render-into-document do
@@ -324,9 +324,9 @@ module.exports = (select-class) !->
         select = create-select!
         toggle-button = find-rendered-DOM-component-with-class select, \react-selectize-toggle-button
         mouse-down toggle-button
-        find-rendered-DOM-component-with-class select, \dropdown-menu
+        find-rendered-DOM-component-with-class select, \rs-dropdown-menu
         mouse-down toggle-button
-        component-with-class-must-not-exist select, \dropdown-menu
+        component-with-class-must-not-exist select, \rs-dropdown-menu
 
     specify "must wrap around on hitting the boundary", ->
         select = create-select!
@@ -354,25 +354,25 @@ module.exports = (select-class) !->
         select = create-select!
         click-to-open-select-control select
         select.blur!
-        component-with-class-must-not-exist \dropdown-menu
+        component-with-class-must-not-exist \rs-dropdown-menu
 
     specify "pressing down arrow key on a closed select must open and select the first option", ->
         select = create-select!
         press-down-arrow get-input select
-        find-rendered-DOM-component-with-class select, \dropdown-menu
+        find-rendered-DOM-component-with-class select, \rs-dropdown-menu
         assert \apple == get-item-text (find-rendered-DOM-component-with-class select, \highlight)
 
     specify "pressing up arrow key on a closed select must open and select the first option", ->
         select = create-select!
         press-up-arrow get-input select
-        find-rendered-DOM-component-with-class select, \dropdown-menu
+        find-rendered-DOM-component-with-class select, \rs-dropdown-menu
         assert \apple == get-item-text (find-rendered-DOM-component-with-class select, \highlight)
 
     specify "must not interfere with command + enter or control + enter", ->
         select = create-select!
         click-to-open-select-control select
         key-down (get-input select), which: 13, meta-key: true
-        find-rendered-DOM-component-with-class select, \dropdown-menu
+        find-rendered-DOM-component-with-class select, \rs-dropdown-menu
 
     specify "hide reset button when nothing is selected", ->
         select = create-select!

test/multi-select.ls

@@ -113,9 +113,9 @@ describe "MultiSelect", ->
         click-to-open-select-control select
         click-option find-highlighted-option select
         click-option find-highlighted-option select
-        assert component-with-class-must-not-exist select, \dropdown-menu
+        assert component-with-class-must-not-exist select, \rs-dropdown-menu
         click-to-open-select-control select
-        assert component-with-class-must-not-exist select, \dropdown-menu
+        assert component-with-class-must-not-exist select, \rs-dropdown-menu
 
     specify "command + left/right must position the cursor at the start/end", (done) ->
         start-count = 0
@@ -138,7 +138,7 @@ describe "MultiSelect", ->
         select = create-multi-select!
         click-to-open-select-control select
         [0 til 8] |> each ~> click-option find-highlighted-option select
-        component-with-class-must-not-exist select, \dropdown-menu
+        component-with-class-must-not-exist select, \rs-dropdown-menu
 
     specify "must be able to select other values when props.default-values is defined", ->
         select = create-multi-select do

test/simple-select.ls

@@ -159,6 +159,6 @@ describe "SimpleSelect", ->
         set-input-text input, "some random text"
         press-return input
         <~ set-timeout _, 25
-        component-with-class-must-not-exist \dropdown-menu
+        component-with-class-must-not-exist \rs-dropdown-menu
         assert select.state.search == ""
         done!

themes/base.styl

@@ -89,7 +89,7 @@ height = 30px
         width 100%
 
 // dropdown-menu present in document.body when props.tether is true
-.react-selectize.dropdown-menu
+.react-selectize.rs-dropdown-menu
     box-sizing border-box
     overflow auto
     position absolute

themes/bootstrap3.styl

@@ -33,7 +33,7 @@
     &:not(.flipped)
         margin-top 5px
 
-    .dropdown-menu
+    .rs-dropdown-menu
 
         &.custom-enter-active, &.custom-leave-active
             transition opacity 0.2s 0s ease
@@ -51,7 +51,7 @@
             opacity 0
 
 // dropdown-menu present in document.body when props.tether is true
-.react-selectize.bootstrap3.dropdown-menu
+.react-selectize.bootstrap3.rs-dropdown-menu
     background white
     border 1px solid #ccc
     border-radius 4px

themes/default.styl

@@ -42,7 +42,7 @@
 .react-selectize.dropdown-menu-wrapper.default
     overflow hidden
 
-    .dropdown-menu
+    .rs-dropdown-menu
 
         &.custom-enter-active, &.custom-leave-active
             transition transform 0.2s 0s ease
@@ -76,7 +76,7 @@
                 transform translateY(-100%)
 
 // dropdown-menu present in document.body when props.tether is true
-.react-selectize.dropdown-menu.default
+.react-selectize.rs-dropdown-menu.default
     background white
     border 1px solid #ccc
     margin-top -1px

themes/material.styl

@@ -32,16 +32,16 @@
     &.flipped
         margin-bottom 8px
 
-        .dropdown-menu
+        .rs-dropdown-menu
             transform-origin 100% 100%
 
     &:not(.flipped)
         margin-top 8px
 
-        .dropdown-menu
+        .rs-dropdown-menu
             transform-origin 0% 0%
 
-    .dropdown-menu
+    .rs-dropdown-menu
 
         &.custom-enter-active, &.custom-leave-active
             transition transform 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms
@@ -62,7 +62,7 @@
             opacity 0
 
 // dropdown-menu present in document.body when props.tether is true
-.react-selectize.material.dropdown-menu
+.react-selectize.material.rs-dropdown-menu
     background-color white
     border-radius 2px
     box-shadow rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px