Remove modules deprecated in 4.0.0 (#5815)

* Remove legacy support for `<input />` tags

This never actually really worked, and since we thought this commit
was coming sooner, we never actually fixed it. Now we can just
remove it and accept the fact that Select2 currently only works
for `<select>` boxes, the things it advertises itself as being a
replacement for.

Closes #3294.

* Removed tests for legacy features

These features will be removed in upcoming commits.

* Remove legacy support for `initSelection`

* Remove legacy support for `query`

* Remove old `select2/compat/matcher` module

* Promote containerCss and dropdownCss to core plugins

These were originally slate to be deprecated and removed during the
4.1.0 release, but it has been determined that they should still
remain in the core. These will be stripped down to only the essentials
before the 4.1.0 release, sincce we don't want to have to continue
supporting another 6 options on top of the ones we already have.

* Remove dropdownCss and adaptDropdownCssClass

This removes the two options that were specific to the CSS for a
dropdown. These two options were not well documented and as a result
are not widely used.

* dropdownCss - Allowed for custom CSS styles to be injected on the
  dropdown container. Had an undocumented feature where the CSS
  could be customized per element by passing in a function as the
  option.

  There is no immediate replacement for this option since Select2
  will only allow custom CSS classes going forward. The best option
  is to create a new CSS class which covers the properties that
  were previously being injected.

* adaptDropdownCssClass - Allowed for the CSS classes which were
  present on the original element to be cloned into the set of
  CSS classes which were on the dropdown container.  This was only
  documented as a possible option but the rest of the documentation
  was left blank, probably because nobody knew what this did.
  Internally this was used to make the `:all:` helper function within
  the `dropdownCssClass` option.

  The suggested replacement for this is to change the CSS classes
  on the original element prior to initializing Select2, and to use
  the `:all:` helper to copy those classes over. The `:all:` helper
  will remain as a supported option going forward.

* Remove containerCss and adaptContainerCssClass

This removes the two options that were specific to the CSS for a
selection container. These two options were not well documented and
as a result are not widely used.

* containerCss - Allowed for custom CSS styles to be injected on the
  selection container. Had an undocumented feature where the CSS
  could be customized per element by passing in a function as the
  option.

  There is no immediate replacement for this option since Select2
  will only allow custom CSS classes going forward. The best option
  is to create a new CSS class which covers the properties that
  were previously being injected.

* adaptContainerCssClass - Allowed for the CSS classes which were
  present on the original element to be cloned into the set of
  CSS classes which were on the selection container.  This was only
  documented as a possible option but the rest of the documentation
  was left blank, probably because nobody knew what this did.
  Internally this was used to make the `:all:` helper function within
  the `containerCssClass` option.

  The suggested replacement for this is to change the CSS classes
  on the original element prior to initializing Select2, and to use
  the `:all:` helper to copy those classes over. The `:all:` helper
  will remain as a supported option going forward.

* Updated list of options in docs

Removed `adaptContainerCssClass`, `adaptDropdownCssClass`,
`containerCss`, and `dropdownCss` which are now no longer supported
with the promotion of `dropdownCssClass` and `selectionCssClass` to
the core builds.

Renamed `containerCssClass` to `selectionCssClass` to reflect the
new name.

Documented the `dir` option and pointed to the MDN documentation on
the `dir` attribute.

Removed `initSelection` and `query` which were used with the
now-removed support of `<input />` tags.

* Removed `amdBase` option

Now that we are not dynamically loading in any modules for the full
builds, we do not need the ability to override the AMD base path to
search for these additional modules at. The `amdLanguageBase` option
is still needed to handle dynamically loading in the additional
lanugage files, though we acknowledge that nobody appears to be
using this option.

* Remove support for *CssClass being a function

This was an undocumented feature that we are dropping to ease the
the maintenance burden now that the `dropdownCssClass` and
`selectionCssClass` options are being included in all builds.

* Rename containerCssClass to selectionCssClass

This should help alleviate much of the confusion that comes from
people who used Select2 3.x and were used to these classes being
injected at the container which wrapped the selection container
instead of on the selection container itself. Now this makes it more
clear what container these classes are being applied to.

* Internally rename ContainerCSS to SelectionCSS

* Clean up unused adapter logic for *CssClass

* Simplify internal logic for copying CSS classes

* Fixed issue copying classes with *CssClass

We were lacking a test that verified that original classes were not
copied unless `:all:` was actually specified.

Gruntfile.js

@@ -12,14 +12,6 @@ module.exports = function (grunt) {
   fullIncludes = [
     'jquery',
 
-    'select2/compat/containerCss',
-    'select2/compat/dropdownCss',
-
-    'select2/compat/initSelection',
-    'select2/compat/inputData',
-    'select2/compat/matcher',
-    'select2/compat/query',
-
     'select2/dropdown/attachContainer',
     'select2/dropdown/stopPropagation',
 

docs/pages/03.configuration/01.options-api/docs.md

@@ -4,31 +4,24 @@ taxonomy:
     category: docs
 ---
 
-This is a list of all the Select 2 configuration options.
+This is a list of all the Select2 configuration options.
 
-| Option | Type | Default | Description | 
+| Option | Type | Default | Description |
 | ------ | ---- | ------- | ----------- |
-| `adaptContainerCssClass` | | | |
-| `adaptDropdownCssClass` | | | |
 | `ajax` | object | `null` | Provides support for [ajax data sources](/data-sources/ajax). |
 | `allowClear` | boolean | `false` | Provides support for [clearable selections](/selections#clearable-selections). |
-| `amdBase` | string | `./` | See [Using Select2 with AMD or CommonJS loaders](/builds-and-modules#using-select2-with-amd-or-commonjs-loaders). |
 | `amdLanguageBase` | string | `./i18n/` | See [Using Select2 with AMD or CommonJS loaders](/builds-and-modules#using-select2-with-amd-or-commonjs-loaders). |
 | `closeOnSelect` | boolean | `true` | Controls whether the dropdown is [closed after a selection is made](/dropdown#forcing-the-dropdown-to-remain-open-after-selection). |
-| `containerCss` | object | null | Adds custom CSS to the container. Expects key-value pairs: `{ 'css-property': 'value' }` |
-| `containerCssClass` | string | `''` | |
 | `data` | array of objects | `null` | Allows rendering dropdown options from an [array](/data-sources/arrays). |
 | `dataAdapter` | | `SelectAdapter` | Used to override the built-in [DataAdapter](/advanced/default-adapters/data). |
 | `debug` | boolean | `false` | Enable debugging messages in the browser console. |
-| `dir` | | |
+| `dir` | string | `ltr` | Sets the [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the selection and dropdown containers to indicate the direction of the text. |
 | `disabled` | boolean | `false` | When set to `true`, the select control will be disabled. |
 | `dropdownAdapter` | | `DropdownAdapter` | Used to override the built-in [DropdownAdapter](/advanced/default-adapters/dropdown) |
 | `dropdownAutoWidth` | boolean | `false` | |
-| `dropdownCss` | object | null | Adds custom CSS to the dropdown. Expects key-value pairs: `{ 'css-property': 'value' }` |
-| `dropdownCssClass` | string | `''` | |
+| `dropdownCssClass` | string | `''` | Adds additional CSS classes to the dropdown container. The helper `:all:` can be used to add all CSS classes present on the original `<select>` element. |
 | `dropdownParent` | jQuery selector or DOM node | `$(document.body)` | Allows you to [customize placement](/dropdown#dropdown-placement) of the dropdown. |
 | `escapeMarkup` | callback | `Utils.escapeMarkup` | Handles [automatic escaping of content rendered by custom templates](/dropdown#built-in-escaping). |
-| `initSelection` | callback | | See [`initSelection`](/upgrading/migrating-from-35#removed-the-requirement-of-initselection).  **This option was deprecated in Select2 v4.0, and will be removed in v4.1.** |
 | `language` | string or object | `EnglishTranslation` | Specify the [language used for Select2 messages](/i18n#message-translations). |
 | `matcher` | A callback taking search `params` and the `data` object. | | Handles custom [search matching](/searching#customizing-how-results-are-matched). |
 | `maximumInputLength` | integer | `0` | [Maximum number of characters](/searching#maximum-search-term-length) that may be provided for a search term. |
@@ -37,9 +30,9 @@ This is a list of all the Select 2 configuration options.
 | `minimumResultsForSearch` | integer | `0` | The minimum number of results required to [display the search box](/searching#limiting-display-of-the-search-box-to-large-result-sets). |
 | `multiple` | boolean | `false` | This option enables multi-select (pillbox) mode. Select2 will automatically map the value of the `multiple` HTML attribute to this option during initialization. |
 | `placeholder` | string or object | `null` | Specifies the [placeholder](/placeholders) for the control. |
-| `query` | A function taking `params` (including a `callback`) | `Query` | **This option was deprecated in Select2 v4.0, and will be removed in v4.1.** |
 | `resultsAdapter` | | `ResultsAdapter` | Used to override the built-in [ResultsAdapter](/advanced/default-adapters/results). |
 | `selectionAdapter` | | `SingleSelection` or `MultipleSelection`, depending on the value of `multiple`. | Used to override the built-in [SelectionAdapter](/advanced/default-adapters/selection). |
+| `selectionCssClass` | string | `''` | Adds additional CSS classes to the selection container. The helper `:all:` can be used to add all CSS classes present on the original `<select>` element. |
 | `selectOnClose` | boolean | `false` | Implements [automatic selection](/dropdown#automatic-selection) when the dropdown is closed. |
 | `sorter` | callback | | |
 | `tags` | boolean / array of objects | `false` | Used to enable [free text responses](/tagging). |

src/js/select2/compat/containerCss.js

@@ -1,56 +0,0 @@
-define([
-  'jquery',
-  './utils'
-], function ($, CompatUtils) {
-  // No-op CSS adapter that discards all classes by default
-  function _containerAdapter (clazz) {
-    return null;
-  }
-
-  function ContainerCSS () { }
-
-  ContainerCSS.prototype.render = function (decorated) {
-    var $container = decorated.call(this);
-
-    var containerCssClass = this.options.get('containerCssClass') || '';
-
-    if ($.isFunction(containerCssClass)) {
-      containerCssClass = containerCssClass(this.$element);
-    }
-
-    var containerCssAdapter = this.options.get('adaptContainerCssClass');
-    containerCssAdapter = containerCssAdapter || _containerAdapter;
-
-    if (containerCssClass.indexOf(':all:') !== -1) {
-      containerCssClass = containerCssClass.replace(':all:', '');
-
-      var _cssAdapter = containerCssAdapter;
-
-      containerCssAdapter = function (clazz) {
-        var adapted = _cssAdapter(clazz);
-
-        if (adapted != null) {
-          // Append the old one along with the adapted one
-          return adapted + ' ' + clazz;
-        }
-
-        return clazz;
-      };
-    }
-
-    var containerCss = this.options.get('containerCss') || {};
-
-    if ($.isFunction(containerCss)) {
-      containerCss = containerCss(this.$element);
-    }
-
-    CompatUtils.syncCssClasses($container, this.$element, containerCssAdapter);
-
-    $container.css(containerCss);
-    $container.addClass(containerCssClass);
-
-    return $container;
-  };
-
-  return ContainerCSS;
-});

src/js/select2/compat/dropdownCss.js

@@ -1,56 +0,0 @@
-define([
-  'jquery',
-  './utils'
-], function ($, CompatUtils) {
-  // No-op CSS adapter that discards all classes by default
-  function _dropdownAdapter (clazz) {
-    return null;
-  }
-
-  function DropdownCSS () { }
-
-  DropdownCSS.prototype.render = function (decorated) {
-    var $dropdown = decorated.call(this);
-
-    var dropdownCssClass = this.options.get('dropdownCssClass') || '';
-
-    if ($.isFunction(dropdownCssClass)) {
-      dropdownCssClass = dropdownCssClass(this.$element);
-    }
-
-    var dropdownCssAdapter = this.options.get('adaptDropdownCssClass');
-    dropdownCssAdapter = dropdownCssAdapter || _dropdownAdapter;
-
-    if (dropdownCssClass.indexOf(':all:') !== -1) {
-      dropdownCssClass = dropdownCssClass.replace(':all:', '');
-
-      var _cssAdapter = dropdownCssAdapter;
-
-      dropdownCssAdapter = function (clazz) {
-        var adapted = _cssAdapter(clazz);
-
-        if (adapted != null) {
-          // Append the old one along with the adapted one
-          return adapted + ' ' + clazz;
-        }
-
-        return clazz;
-      };
-    }
-
-    var dropdownCss = this.options.get('dropdownCss') || {};
-
-    if ($.isFunction(dropdownCss)) {
-      dropdownCss = dropdownCss(this.$element);
-    }
-
-    CompatUtils.syncCssClasses($dropdown, this.$element, dropdownCssAdapter);
-
-    $dropdown.css(dropdownCss);
-    $dropdown.addClass(dropdownCssClass);
-
-    return $dropdown;
-  };
-
-  return DropdownCSS;
-});

src/js/select2/compat/initSelection.js

@@ -1,42 +0,0 @@
-define([
-  'jquery'
-], function ($) {
-  function InitSelection (decorated, $element, options) {
-    if (options.get('debug') && window.console && console.warn) {
-      console.warn(
-        'Select2: The `initSelection` option has been deprecated in favor' +
-        ' of a custom data adapter that overrides the `current` method. ' +
-        'This method is now called multiple times instead of a single ' +
-        'time when the instance is initialized. Support will be removed ' +
-        'for the `initSelection` option in future versions of Select2'
-      );
-    }
-
-    this.initSelection = options.get('initSelection');
-    this._isInitialized = false;
-
-    decorated.call(this, $element, options);
-  }
-
-  InitSelection.prototype.current = function (decorated, callback) {
-    var self = this;
-
-    if (this._isInitialized) {
-      decorated.call(this, callback);
-
-      return;
-    }
-
-    this.initSelection.call(null, this.$element, function (data) {
-      self._isInitialized = true;
-
-      if (!$.isArray(data)) {
-        data = [data];
-      }
-
-      callback(data);
-    });
-  };
-
-  return InitSelection;
-});

src/js/select2/compat/inputData.js

@@ -1,128 +0,0 @@
-define([
-  'jquery',
-  '../utils'
-], function ($, Utils) {
-  function InputData (decorated, $element, options) {
-    this._currentData = [];
-    this._valueSeparator = options.get('valueSeparator') || ',';
-
-    if ($element.prop('type') === 'hidden') {
-      if (options.get('debug') && console && console.warn) {
-        console.warn(
-          'Select2: Using a hidden input with Select2 is no longer ' +
-          'supported and may stop working in the future. It is recommended ' +
-          'to use a `<select>` element instead.'
-        );
-      }
-    }
-
-    decorated.call(this, $element, options);
-  }
-
-  InputData.prototype.current = function (_, callback) {
-    function getSelected (data, selectedIds) {
-      var selected = [];
-
-      if (data.selected || $.inArray(data.id, selectedIds) !== -1) {
-        data.selected = true;
-        selected.push(data);
-      } else {
-        data.selected = false;
-      }
-
-      if (data.children) {
-        selected.push.apply(selected, getSelected(data.children, selectedIds));
-      }
-
-      return selected;
-    }
-
-    var selected = [];
-
-    for (var d = 0; d < this._currentData.length; d++) {
-      var data = this._currentData[d];
-
-      selected.push.apply(
-        selected,
-        getSelected(
-          data,
-          this.$element.val().split(
-            this._valueSeparator
-          )
-        )
-      );
-    }
-
-    callback(selected);
-  };
-
-  InputData.prototype.select = function (_, data) {
-    if (!this.options.get('multiple')) {
-      this.current(function (allData) {
-        $.map(allData, function (data) {
-          data.selected = false;
-        });
-      });
-
-      this.$element.val(data.id);
-      this.$element.trigger('input').trigger('change');
-    } else {
-      var value = this.$element.val();
-      value += this._valueSeparator + data.id;
-
-      this.$element.val(value);
-      this.$element.trigger('input').trigger('change');
-    }
-  };
-
-  InputData.prototype.unselect = function (_, data) {
-    var self = this;
-
-    data.selected = false;
-
-    this.current(function (allData) {
-      var values = [];
-
-      for (var d = 0; d < allData.length; d++) {
-        var item = allData[d];
-
-        if (data.id == item.id) {
-          continue;
-        }
-
-        values.push(item.id);
-      }
-
-      self.$element.val(values.join(self._valueSeparator));
-      self.$element.trigger('input').trigger('change');
-    });
-  };
-
-  InputData.prototype.query = function (_, params, callback) {
-    var results = [];
-
-    for (var d = 0; d < this._currentData.length; d++) {
-      var data = this._currentData[d];
-
-      var matches = this.matches(params, data);
-
-      if (matches !== null) {
-        results.push(matches);
-      }
-    }
-
-    callback({
-      results: results
-    });
-  };
-
-  InputData.prototype.addOptions = function (_, $options) {
-    var options = $.map($options, function ($option) {
-      return Utils.GetData($option[0], 'data');
-    });
-
-    this._currentData.push.apply(this._currentData, options);
-  };
-
-  return InputData;
-});

src/js/select2/compat/matcher.js

@@ -1,42 +0,0 @@
-define([
-  'jquery'
-], function ($) {
-  function oldMatcher (matcher) {
-    function wrappedMatcher (params, data) {
-      var match = $.extend(true, {}, data);
-
-      if (params.term == null || $.trim(params.term) === '') {
-        return match;
-      }
-
-      if (data.children) {
-        for (var c = data.children.length - 1; c >= 0; c--) {
-          var child = data.children[c];
-
-          // Check if the child object matches
-          // The old matcher returned a boolean true or false
-          var doesMatch = matcher(params.term, child.text, child);
-
-          // If the child didn't match, pop it off
-          if (!doesMatch) {
-            match.children.splice(c, 1);
-          }
-        }
-
-        if (match.children.length > 0) {
-          return match;
-        }
-      }
-
-      if (matcher(params.term, data.text, data)) {
-        return match;
-      }
-
-      return null;
-    }
-
-    return wrappedMatcher;
-  }
-
-  return oldMatcher;
-});

src/js/select2/compat/query.js

@@ -1,26 +0,0 @@
-define([
-
-], function () {
-  function Query (decorated, $element, options) {
-    if (options.get('debug') && window.console && console.warn) {
-      console.warn(
-        'Select2: The `query` option has been deprecated in favor of a ' +
-        'custom data adapter that overrides the `query` method. Support ' +
-        'will be removed for the `query` option in future versions of ' +
-        'Select2.'
-      );
-    }
-
-    decorated.call(this, $element, options);
-  }
-
-  Query.prototype.query = function (_, params, callback) {
-    params.callback = callback;
-
-    var query = this.options.get('query');
-
-    query.call(null, params);
-  };
-
-  return Query;
-});

src/js/select2/compat/utils.js

@@ -1,43 +0,0 @@
-define([
-  'jquery'
-], function ($) {
-  function syncCssClasses ($dest, $src, adapter) {
-    var classes, replacements = [], adapted;
-
-    classes = $.trim($dest.attr('class'));
-
-    if (classes) {
-      classes = '' + classes; // for IE which returns object
-
-      $(classes.split(/\s+/)).each(function () {
-        // Save all Select2 classes
-        if (this.indexOf('select2-') === 0) {
-          replacements.push(this);
-        }
-      });
-    }
-
-    classes = $.trim($src.attr('class'));
-
-    if (classes) {
-      classes = '' + classes; // for IE which returns object
-
-      $(classes.split(/\s+/)).each(function () {
-        // Only adapt non-Select2 classes
-        if (this.indexOf('select2-') !== 0) {
-          adapted = adapter(this);
-
-          if (adapted != null) {
-            replacements.push(adapted);
-          }
-        }
-      });
-    }
-
-    $dest.attr('class', replacements.join(' '));
-  }
-
-  return {
-    syncCssClasses: syncCssClasses
-  };
-});

src/js/select2/defaults.js

@@ -1,6 +1,5 @@
 define([
   'jquery',
-  'require',
 
   './results',
 
@@ -9,6 +8,7 @@ define([
   './selection/placeholder',
   './selection/allowClear',
   './selection/search',
+  './selection/selectionCss',
   './selection/eventRelay',
 
   './utils',
@@ -32,14 +32,15 @@ define([
   './dropdown/minimumResultsForSearch',
   './dropdown/selectOnClose',
   './dropdown/closeOnSelect',
+  './dropdown/dropdownCss',
 
   './i18n/en'
-], function ($, require,
+], function ($,
 
              ResultsList,
 
              SingleSelection, MultipleSelection, Placeholder, AllowClear,
-             SelectionSearch, EventRelay,
+             SelectionSearch, SelectionCSS, EventRelay,
 
              Utils, Translation, DIACRITICS,
 
@@ -48,6 +49,7 @@ define([
 
              Dropdown, DropdownSearch, HidePlaceholder, InfiniteScroll,
              AttachBody, MinimumResultsForSearch, SelectOnClose, CloseOnSelect,
+             DropdownCSS,
 
              EnglishTranslation) {
   function Defaults () {
@@ -97,24 +99,6 @@ define([
           Tokenizer
         );
       }
-
-      if (options.query != null) {
-        var Query = require(options.amdBase + 'compat/query');
-
-        options.dataAdapter = Utils.Decorate(
-          options.dataAdapter,
-          Query
-        );
-      }
-
-      if (options.initSelection != null) {
-        var InitSelection = require(options.amdBase + 'compat/initSelection');
-
-        options.dataAdapter = Utils.Decorate(
-          options.dataAdapter,
-          InitSelection
-        );
-      }
     }
 
     if (options.resultsAdapter == null) {
@@ -170,8 +154,6 @@ define([
         options.dropdownCss != null ||
         options.adaptDropdownCssClass != null
       ) {
-        var DropdownCSS = require(options.amdBase + 'compat/dropdownCss');
-
         options.dropdownAdapter = Utils.Decorate(
           options.dropdownAdapter,
           DropdownCSS
@@ -218,11 +200,9 @@ define([
         options.containerCss != null ||
         options.adaptContainerCssClass != null
       ) {
-        var ContainerCSS = require(options.amdBase + 'compat/containerCss');
-
         options.selectionAdapter = Utils.Decorate(
           options.selectionAdapter,
-          ContainerCSS
+          SelectionCSS
         );
       }
 
@@ -315,7 +295,6 @@ define([
     }
 
     this.defaults = {
-      amdBase: './',
       amdLanguageBase: './i18n/',
       closeOnSelect: true,
       debug: false,

src/js/select2/dropdown/dropdownCss.js

@@ -0,0 +1,24 @@
+define([
+  'jquery',
+  '../utils'
+], function ($, Utils) {
+  function DropdownCSS () { }
+
+  DropdownCSS.prototype.render = function (decorated) {
+    var $dropdown = decorated.call(this);
+
+    var dropdownCssClass = this.options.get('dropdownCssClass') || '';
+
+    if (dropdownCssClass.indexOf(':all:') !== -1) {
+      dropdownCssClass = dropdownCssClass.replace(':all:', '');
+
+      Utils.copyNonInternalCssClasses($dropdown, this.$element);
+    }
+
+    $dropdown.addClass(dropdownCssClass);
+
+    return $dropdown;
+  };
+
+  return DropdownCSS;
+});

src/js/select2/options.js

@@ -1,9 +1,8 @@
 define([
-  'require',
   'jquery',
   './defaults',
   './utils'
-], function (require, $, Defaults, Utils) {
+], function ($, Defaults, Utils) {
   function Options (options, $element) {
     this.options = options;
 
@@ -16,15 +15,6 @@ define([
     }
 
     this.options = Defaults.apply(this.options);
-
-    if ($element && $element.is('input')) {
-      var InputCompat = require(this.get('amdBase') + 'compat/inputData');
-
-      this.options.dataAdapter = Utils.Decorate(
-        this.options.dataAdapter,
-        InputCompat
-      );
-    }
   }
 
   Options.prototype.fromElement = function ($e) {

src/js/select2/selection/selectionCss.js

@@ -0,0 +1,24 @@
+define([
+  'jquery',
+  '../utils'
+], function ($, Utils) {
+  function SelectionCSS () { }
+
+  SelectionCSS.prototype.render = function (decorated) {
+    var $selection = decorated.call(this);
+
+    var selectionCssClass = this.options.get('selectionCssClass') || '';
+
+    if (selectionCssClass.indexOf(':all:') !== -1) {
+      selectionCssClass = selectionCssClass.replace(':all:', '');
+
+      Utils.copyNonInternalCssClasses($selection, this.$element);
+    }
+
+    $selection.addClass(selectionCssClass);
+
+    return $selection;
+  };
+
+  return SelectionCSS;
+});

src/js/select2/utils.js

@@ -319,5 +319,37 @@ define([
     element.removeAttribute('data-select2-id');
   };
 
+  Utils.copyNonInternalCssClasses = function ($dest, $src) {
+    var classes, replacements = [], adapted;
+
+    classes = $.trim($dest.attr('class'));
+
+    if (classes) {
+      classes = '' + classes; // for IE which returns object
+
+      $(classes.split(/\s+/)).each(function () {
+        // Save all Select2 classes
+        if (this.indexOf('select2-') === 0) {
+          replacements.push(this);
+        }
+      });
+    }
+
+    classes = $.trim($src.attr('class'));
+
+    if (classes) {
+      classes = '' + classes; // for IE which returns object
+
+      $(classes.split(/\s+/)).each(function () {
+        // Only copy non-Select2 classes
+        if (this.indexOf('select2-') !== 0) {
+          replacements.push(this);
+        }
+      });
+    }
+
+    $dest.attr('class', replacements.join(' '));
+  };
+
   return Utils;
 });

tests/data/inputData-tests.js

@@ -1,173 +0,0 @@
-module('Data adapters - <input> compatibility');
-
-var $ = require('jquery');
-
-var Options = require('select2/options');
-var Utils = require('select2/utils');
-
-var ArrayData = require('select2/data/array');
-var InputData = require('select2/compat/inputData');
-
-var InputAdapter = Utils.Decorate(ArrayData, InputData);
-
-test('test that options can be selected', function (assert) {
-  var options = new Options({
-    data: [
-      {
-        id: 'test',
-        text: 'Test'
-      }
-    ]
-  });
-  var $element = $('<input />');
-
-  var adapter = new InputAdapter($element, options);
-
-  var container = new MockContainer();
-  adapter.bind(container, $('<div></div>'));
-
-  adapter.select({
-    id: 'test'
-  });
-
-  assert.equal(
-    $element.val(),
-    'test',
-    'The id of the item should be the value'
-  );
-});
-
-test('unselect the single selected option clears the value', function (assert) {
-  var options = new Options({
-    data: [
-      {
-        id: 'test',
-        text: 'Test',
-        selected: true
-      }
-    ]
-  });
-  var $element = $('<input />');
-
-  var adapter = new InputAdapter($element, options);
-
-  var container = new MockContainer();
-  adapter.bind(container, $('<div></div>'));
-
-  adapter.unselect({
-    id: 'test'
-  });
-
-  assert.equal(
-    $element.val(),
-    '',
-    'The id should no longer be in the value'
-  );
-});
-
-test('options can be unselected individually', function (assert) {
-  var options = new Options({
-    data: [
-      {
-        id: 'test',
-        text: 'Test'
-      },
-      {
-        id: 'test2',
-        text: 'Test2'
-      },
-      {
-        id: 'test3',
-        text: 'Test3'
-      }
-    ]
-  });
-  var $element = $('<input />');
-  $element.val('test,test2,test3');
-
-  var adapter = new InputAdapter($element, options);
-
-  var container = new MockContainer();
-  adapter.bind(container, $('<div></div>'));
-
-  adapter.unselect({
-    id: 'test2'
-  });
-
-  assert.equal(
-    $element.val(),
-    'test,test3',
-    'The value should contain all the still selected options'
-  );
-});
-
-test('default values can be set', function (assert) {
-  assert.expect(4);
-
-  var options = new Options({
-    data: [
-      {
-        id: 'test',
-        text: 'Test'
-      }
-    ]
-  });
-  var $element = $('<input value="test" />');
-
-  var adapter = new InputAdapter($element, options);
-
-  var container = new MockContainer();
-  adapter.bind(container, $('<div></div>'));
-
-  adapter.current(function (data) {
-    assert.equal(
-      data.length,
-      1,
-      'There should only be a single selected option'
-    );
-
-    var item = data[0];
-
-    assert.equal(item.id, 'test');
-    assert.equal(item.text, 'Test');
-  });
-
-  assert.equal(
-    $element.val(),
-    'test',
-    'The value should not have been altered'
-  );
-});
-
-test('no default value', function (assert) {
-  assert.expect(2);
-
-  var options = new Options({
-    data: [
-      {
-        id: 'test',
-        text: 'Test'
-      }
-    ]
-  });
-  var $element = $('<input />');
-
-  var adapter = new InputAdapter($element, options);
-
-  var container = new MockContainer();
-  adapter.bind(container, $('<div></div>'));
-
-  adapter.current(function (data) {
-    assert.equal(
-      data.length,
-      0,
-      'There should be no selected options'
-    );
-  });
-
-  assert.equal(
-    $element.val(),
-    '',
-    'The value should not have been altered'
-  );
-});

tests/dropdown/dropdownCss-tests.js

@@ -1,4 +1,4 @@
-module('Dropdown - dropdownCssClass compatibility');
+module('Dropdown - dropdownCssClass');
 
 var $ = require('jquery');
 var Utils = require('select2/utils');
@@ -7,7 +7,7 @@ var Options = require('select2/options');
 var Dropdown = require('select2/dropdown');
 var DropdownCSS = Utils.Decorate(
   Dropdown,
-  require('select2/compat/dropdownCss')
+  require('select2/dropdown/dropdownCss')
 );
 
 test('all classes will be copied if :all: is used', function (assert) {
@@ -52,53 +52,3 @@ test('classes can be passed in as a string', function (assert) {
 
   assert.ok($dropdown.hasClass('other'));
 });
-
-test('a function can be used based on the element', function (assert){
-  var $element = $('<select class="test"></select>');
-  var options = new Options({
-    dropdownCssClass: function ($element) {
-      return 'function';
-    }
-  });
-
-  var select = new DropdownCSS($element, options);
-  var $dropdown = select.render();
-
-  assert.ok($dropdown.hasClass('function'));
-  assert.ok(!$dropdown.hasClass('test'));
-});
-
-test(':all: works around custom adapters', function (assert) {
-  var $element = $('<select class="test"></select>');
-  var options = new Options({
-    dropdownCssClass: ':all: something',
-    adaptDropdownCssClass: function (clazz) {
-      return clazz + '-modified';
-    }
-  });
-
-  var select = new DropdownCSS($element, options);
-  var $dropdown = select.render();
-
-  assert.ok($dropdown.hasClass('something'));
-
-  assert.ok($dropdown.hasClass('test'));
-  assert.ok($dropdown.hasClass('test-modified'));
-});
-
-module('Dropdown - adaptDropdownCss compatibility');
-
-test('only return when adapted', function (assert) {
-  var $element = $('<select class="original"></select>');
-  var options = new Options({
-    adaptDropdownCssClass: function (clazz) {
-      return 'modified';
-    }
-  });
-
-  var select = new DropdownCSS($element, options);
-  var $dropdown = select.render();
-
-  assert.ok(!$dropdown.hasClass('original'));
-  assert.ok($dropdown.hasClass('modified'));
-});

tests/options/deprecated-tests.js

@@ -1,250 +0,0 @@
-module('Options - Deprecated - initSelection');
-
-var $ = require('jquery');
-var Options = require('select2/options');
-
-test('converted into dataAdapter.current', function (assert) {
-  assert.expect(5);
-
-  var $test = $('<select></select>');
-  var called = false;
-
-  var options = new Options({
-    initSelection: function ($element, callback) {
-      called = true;
-
-      callback([{
-        id: '1',
-        text: '2'
-      }]);
-    }
-  }, $test);
-
-  assert.ok(!called, 'initSelection should not have been called');
-
-  var DataAdapter = options.get('dataAdapter');
-  var data = new DataAdapter($test, options);
-
-  data.current(function (data) {
-    assert.equal(
-      data.length,
-      1,
-      'There should have only been one object selected'
-    );
-
-    var item = data[0];
-
-    assert.equal(
-      item.id,
-      '1',
-      'The id should have been set by initSelection'
-    );
-
-    assert.equal(
-      item.text,
-      '2',
-      'The text should have been set by initSelection'
-    );
-  });
-
-  assert.ok(called, 'initSelection should have been called');
-});
-
-test('single option converted to array automatically', function (assert) {
-  assert.expect(2);
-
-  var $test = $('<select></select>');
-  var called = false;
-
-  var options = new Options({
-    initSelection: function ($element, callback) {
-      called = true;
-
-      callback({
-        id: '1',
-        text: '2'
-      });
-    }
-  }, $test);
-
-  var DataAdapter = options.get('dataAdapter');
-  var data = new DataAdapter($test, options);
-
-  data.current(function (data) {
-    assert.ok(
-      $.isArray(data),
-      'The data should have been converted to an array'
-    );
-  });
-
-  assert.ok(called, 'initSelection should have been called');
-});
-
-test('only called once', function (assert) {
-  assert.expect(8);
-
-  var $test = $('<select><option value="3" selected>4</option></select>');
-  var called = 0;
-
-  var options = new Options({
-    initSelection: function ($element, callback) {
-      called++;
-
-      callback([{
-        id: '1',
-        text: '2'
-      }]);
-    }
-  }, $test);
-
-  var DataAdapter = options.get('dataAdapter');
-  var data = new DataAdapter($test, options);
-
-  data.current(function (data) {
-    assert.equal(
-      data.length,
-      1,
-      'There should have only been a single option'
-    );
-
-    var item = data[0];
-
-    assert.equal(
-      item.id,
-      '1',
-      'The id should match the one given by initSelection'
-    );
-
-    assert.equal(
-      item.text,
-      '2',
-      'The text should match the one given by initSelection'
-    );
-  });
-
-  assert.equal(
-    called,
-    1,
-    'initSelection should have been called'
-  );
-
-  data.current(function (data) {
-    assert.equal(
-      data.length,
-      1,
-      'There should have only been a single option'
-    );
-
-    var item = data[0];
-
-    assert.equal(
-      item.id,
-      '3',
-      'The id should match the value given in the DOM'
-    );
-
-    assert.equal(
-      item.text,
-      '4',
-      'The text should match the text given in the DOM'
-    );
-  });
-
-  assert.equal(
-    called,
-    1,
-    'initSelection should have only been called once'
-  );
-});
-
-module('Options - Deprecated - query');
-
-test('converted into dataAdapter.query automatically', function (assert) {
-  assert.expect(6);
-
-  var $test = $('<select></select>');
-  var called = false;
-
-  var options = new Options({
-    query: function (params) {
-      called = true;
-
-      params.callback({
-        results: [
-          {
-            id: 'test',
-            text: params.term
-          }
-        ]
-      });
-    }
-  }, $test);
-
-  assert.ok(!called, 'The query option should not have been called');
-
-  var DataAdapter = options.get('dataAdapter');
-  var data = new DataAdapter($test, options);
-
-  data.query({
-    term: 'term'
-  }, function (data) {
-    assert.ok(
-      'results' in data,
-      'It should have included the results key'
-    );
-
-    assert.equal(
-      data.results.length,
-      1,
-      'There should have only been a single result returned'
-    );
-
-    var item = data.results[0];
-
-    assert.equal(
-      item.id,
-      'test',
-      'The id should have been returned from the query function'
-    );
-
-    assert.equal(
-      item.text,
-      'term',
-      'The text should have matched the term that was passed in'
-    );
-  });
-
-  assert.ok(called, 'The query function should have been called');
-});
-
-module('Options - deprecated - data-ajax-url');
-
-test('converted ajax-url to ajax--url automatically', function (assert) {
-  var $test = $('<select data-ajax-url="test://url"></select>');
-  var options = new Options({}, $test);
-
-  assert.ok(
-    options.get('ajax'),
-    'The `ajax` key was automatically created'
-  );
-  assert.equal(
-    options.get('ajax').url,
-    'test://url',
-    'The `url` property for the `ajax` option was filled in correctly'
-  );
-});
-
-test('converted select2-tags to data/tags automatically', function (assert) {
-  var $test = $('<select data-select2-tags="original data"></select>');
-  var options = new Options({}, $test);
-
-  assert.ok(
-    options.get('tags'),
-    'The `tags` key is automatically set to true'
-  );
-  assert.equal(
-    options.get('data'),
-    'original data',
-    'The `data` key is created with the original data'
-  );
-});

tests/selection/containerCss-tests.js

@@ -1,104 +0,0 @@
-module('Dropdown - containerCssClass compatibility');
-
-var $ = require('jquery');
-var Utils = require('select2/utils');
-var Options = require('select2/options');
-
-var SingleSelection = require('select2/selection/single');
-var ContainerCSS = Utils.Decorate(
-  SingleSelection,
-  require('select2/compat/containerCss')
-);
-
-test('all classes will be copied if :all: is used', function (assert) {
-  var $element = $('<select class="test copy works"></select>');
-  var options = new Options({
-    containerCssClass: ':all:'
-  });
-
-  var select = new ContainerCSS($element, options);
-  var $container = select.render();
-
-  assert.ok($container.hasClass('test'));
-  assert.ok($container.hasClass('copy'));
-  assert.ok($container.hasClass('works'));
-  assert.ok(!$container.hasClass(':all:'));
-});
-
-test(':all: can be used with other classes', function (assert) {
-  var $element = $('<select class="test copy works"></select>');
-  var options = new Options({
-    containerCssClass: ':all: other'
-  });
-
-  var select = new ContainerCSS($element, options);
-  var $container = select.render();
-
-  assert.ok($container.hasClass('test'));
-  assert.ok($container.hasClass('copy'));
-  assert.ok($container.hasClass('works'));
-  assert.ok($container.hasClass('other'));
-  assert.ok(!$container.hasClass(':all:'));
-});
-
-test('classes can be passed in as a string', function (assert) {
-  var $element = $('<select class="test copy works"></select>');
-  var options = new Options({
-    containerCssClass: 'other'
-  });
-
-  var select = new ContainerCSS($element, options);
-  var $container = select.render();
-
-  assert.ok($container.hasClass('other'));
-});
-
-test('a function can be used based on the element', function (assert){
-  var $element = $('<select class="test"></select>');
-  var options = new Options({
-    containerCssClass: function ($element) {
-      return 'function';
-    }
-  });
-
-  var select = new ContainerCSS($element, options);
-  var $container = select.render();
-
-  assert.ok($container.hasClass('function'));
-  assert.ok(!$container.hasClass('test'));
-});
-
-test(':all: works around custom adapters', function (assert) {
-  var $element = $('<select class="test"></select>');
-  var options = new Options({
-    containerCssClass: ':all: something',
-    adaptContainerCssClass: function (clazz) {
-      return clazz + '-modified';
-    }
-  });
-
-  var select = new ContainerCSS($element, options);
-  var $container = select.render();
-
-  assert.ok($container.hasClass('something'));
-
-  assert.ok($container.hasClass('test'));
-  assert.ok($container.hasClass('test-modified'));
-});
-
-module('Selection - adaptContainerCss compatibility');
-
-test('only return when adapted', function (assert) {
-  var $element = $('<select class="original"></select>');
-  var options = new Options({
-    adaptContainerCssClass: function (clazz) {
-      return 'modified';
-    }
-  });
-
-  var select = new ContainerCSS($element, options);
-  var $container = select.render();
-
-  assert.ok(!$container.hasClass('original'));
-  assert.ok($container.hasClass('modified'));
-});

tests/selection/selectionCss-tests.js

@@ -0,0 +1,55 @@
+module('Dropdown - selectionCssClass');
+
+var $ = require('jquery');
+var Utils = require('select2/utils');
+var Options = require('select2/options');
+
+var SingleSelection = require('select2/selection/single');
+var SelectionCSS = Utils.Decorate(
+  SingleSelection,
+  require('select2/selection/selectionCss')
+);
+
+test('all classes will be copied if :all: is used', function (assert) {
+  var $element = $('<select class="test copy works"></select>');
+  var options = new Options({
+    selectionCssClass: ':all:'
+  });
+
+  var select = new SelectionCSS($element, options);
+  var $container = select.render();
+
+  assert.ok($container.hasClass('test'));
+  assert.ok($container.hasClass('copy'));
+  assert.ok($container.hasClass('works'));
+  assert.ok(!$container.hasClass(':all:'));
+});
+
+test(':all: can be used with other classes', function (assert) {
+  var $element = $('<select class="test copy works"></select>');
+  var options = new Options({
+    selectionCssClass: ':all: other'
+  });
+
+  var select = new SelectionCSS($element, options);
+  var $container = select.render();
+
+  assert.ok($container.hasClass('test'));
+  assert.ok($container.hasClass('copy'));
+  assert.ok($container.hasClass('works'));
+  assert.ok($container.hasClass('other'));
+  assert.ok(!$container.hasClass(':all:'));
+});
+
+test('classes can be passed in as a string', function (assert) {
+  var $element = $('<select class="test copy works"></select>');
+  var options = new Options({
+    selectionCssClass: 'other'
+  });
+
+  var select = new SelectionCSS($element, options);
+  var $container = select.render();
+
+  assert.ok($container.hasClass('other'));
+  assert.ok(!$container.hasClass('copy'));
+});

tests/unit-jq1.html

@@ -60,7 +60,6 @@
 
     <script src="data/array-tests.js" type="text/javascript"></script>
     <script src="data/base-tests.js" type="text/javascript"></script>
-    <script src="data/inputData-tests.js" type="text/javascript"></script>
     <script src="data/select-tests.js" type="text/javascript"></script>
     <script src="data/tags-tests.js" type="text/javascript"></script>
     <script src="data/tokenizer-tests.js" type="text/javascript"></script>
@@ -78,7 +77,6 @@
 
     <script src="options/ajax-tests.js" type="text/javascript"></script>
     <script src="options/data-tests.js" type="text/javascript"></script>
-    <script src="options/deprecated-tests.js" type="text/javascript"></script>
     <script src="options/translation-tests.js" type="text/javascript"></script>
     <script src="options/width-tests.js" type="text/javascript"></script>
 
@@ -88,13 +86,13 @@
     <script src="results/option-tests.js" type="text/javascript"></script>
 
     <script src="selection/allowClear-tests.js" type="text/javascript"></script>
-    <script src="selection/containerCss-tests.js" type="text/javascript"></script>
     <script src="selection/focusing-tests.js" type="text/javascript"></script>
     <script src="selection/multiple-tests.js" type="text/javascript"></script>
     <script src="selection/placeholder-tests.js" type="text/javascript"></script>
     <script src="selection/search-tests.js" type="text/javascript"></script>
     <script src="selection/search-a11y-tests.js" type="text/javascript"></script>
     <script src="selection/search-placeholder-tests.js" type="text/javascript"></script>
+    <script src="selection/selectionCss-tests.js" type="text/javascript"></script>
     <script src="selection/single-tests.js" type="text/javascript"></script>
     <script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
     <script src="selection/openOnKeyDown-tests.js" type="text/javascript"></script>

tests/unit-jq2.html

@@ -60,7 +60,6 @@
 
     <script src="data/array-tests.js" type="text/javascript"></script>
     <script src="data/base-tests.js" type="text/javascript"></script>
-    <script src="data/inputData-tests.js" type="text/javascript"></script>
     <script src="data/select-tests.js" type="text/javascript"></script>
     <script src="data/tags-tests.js" type="text/javascript"></script>
     <script src="data/tokenizer-tests.js" type="text/javascript"></script>
@@ -78,7 +77,6 @@
 
     <script src="options/ajax-tests.js" type="text/javascript"></script>
     <script src="options/data-tests.js" type="text/javascript"></script>
-    <script src="options/deprecated-tests.js" type="text/javascript"></script>
     <script src="options/translation-tests.js" type="text/javascript"></script>
     <script src="options/width-tests.js" type="text/javascript"></script>
 
@@ -88,13 +86,13 @@
     <script src="results/option-tests.js" type="text/javascript"></script>
 
     <script src="selection/allowClear-tests.js" type="text/javascript"></script>
-    <script src="selection/containerCss-tests.js" type="text/javascript"></script>
     <script src="selection/focusing-tests.js" type="text/javascript"></script>
     <script src="selection/multiple-tests.js" type="text/javascript"></script>
     <script src="selection/placeholder-tests.js" type="text/javascript"></script>
     <script src="selection/search-tests.js" type="text/javascript"></script>
     <script src="selection/search-a11y-tests.js" type="text/javascript"></script>
     <script src="selection/search-placeholder-tests.js" type="text/javascript"></script>
+    <script src="selection/selectionCss-tests.js" type="text/javascript"></script>
     <script src="selection/single-tests.js" type="text/javascript"></script>
     <script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
     <script src="selection/openOnKeyDown-tests.js" type="text/javascript"></script>

tests/unit-jq3.html

@@ -60,7 +60,6 @@
 
     <script src="data/array-tests.js" type="text/javascript"></script>
     <script src="data/base-tests.js" type="text/javascript"></script>
-    <script src="data/inputData-tests.js" type="text/javascript"></script>
     <script src="data/select-tests.js" type="text/javascript"></script>
     <script src="data/tags-tests.js" type="text/javascript"></script>
     <script src="data/tokenizer-tests.js" type="text/javascript"></script>
@@ -78,7 +77,6 @@
 
     <script src="options/ajax-tests.js" type="text/javascript"></script>
     <script src="options/data-tests.js" type="text/javascript"></script>
-    <script src="options/deprecated-tests.js" type="text/javascript"></script>
     <script src="options/translation-tests.js" type="text/javascript"></script>
     <script src="options/width-tests.js" type="text/javascript"></script>
 
@@ -88,13 +86,13 @@
     <script src="results/option-tests.js" type="text/javascript"></script>
 
     <script src="selection/allowClear-tests.js" type="text/javascript"></script>
-    <script src="selection/containerCss-tests.js" type="text/javascript"></script>
     <script src="selection/focusing-tests.js" type="text/javascript"></script>
     <script src="selection/multiple-tests.js" type="text/javascript"></script>
     <script src="selection/placeholder-tests.js" type="text/javascript"></script>
     <script src="selection/search-tests.js" type="text/javascript"></script>
     <script src="selection/search-a11y-tests.js" type="text/javascript"></script>
     <script src="selection/search-placeholder-tests.js" type="text/javascript"></script>
+    <script src="selection/selectionCss-tests.js" type="text/javascript"></script>
     <script src="selection/single-tests.js" type="text/javascript"></script>
     <script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
     <script src="selection/openOnKeyDown-tests.js" type="text/javascript"></script>