materialize-sass 1.0.0.beta → 1.0.0.rc1

data/assets/javascripts/materialize/autocomplete.js

@@ -64,6 +64,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       _this.oldVal;
       _this.$inputField = _this.$el.closest('.input-field');
       _this.$active = $();
+      _this._mousedown = false;
       _this._setupDropdown();
 
       _this._setupEventHandlers();
@@ -93,16 +94,21 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this._handleInputBlurBound = this._handleInputBlur.bind(this);
         this._handleInputKeyupAndFocusBound = this._handleInputKeyupAndFocus.bind(this);
         this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
+        this._handleInputClickBound = this._handleInputClick.bind(this);
         this._handleContainerMousedownAndTouchstartBound = this._handleContainerMousedownAndTouchstart.bind(this);
+        this._handleContainerMouseupAndTouchendBound = this._handleContainerMouseupAndTouchend.bind(this);
 
         this.el.addEventListener('blur', this._handleInputBlurBound);
         this.el.addEventListener('keyup', this._handleInputKeyupAndFocusBound);
         this.el.addEventListener('focus', this._handleInputKeyupAndFocusBound);
         this.el.addEventListener('keydown', this._handleInputKeydownBound);
+        this.el.addEventListener('click', this._handleInputClickBound);
         this.container.addEventListener('mousedown', this._handleContainerMousedownAndTouchstartBound);
+        this.container.addEventListener('mouseup', this._handleContainerMouseupAndTouchendBound);
 
         if (typeof window.ontouchstart !== 'undefined') {
           this.container.addEventListener('touchstart', this._handleContainerMousedownAndTouchstartBound);
+          this.container.addEventListener('touchend', this._handleContainerMouseupAndTouchendBound);
         }
       }
 
@@ -117,10 +123,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this.el.removeEventListener('keyup', this._handleInputKeyupAndFocusBound);
         this.el.removeEventListener('focus', this._handleInputKeyupAndFocusBound);
         this.el.removeEventListener('keydown', this._handleInputKeydownBound);
+        this.el.removeEventListener('click', this._handleInputClickBound);
         this.container.removeEventListener('mousedown', this._handleContainerMousedownAndTouchstartBound);
+        this.container.removeEventListener('mouseup', this._handleContainerMouseupAndTouchendBound);
 
         if (typeof window.ontouchstart !== 'undefined') {
           this.container.removeEventListener('touchstart', this._handleContainerMousedownAndTouchstartBound);
+          this.container.removeEventListener('touchend', this._handleContainerMouseupAndTouchendBound);
         }
       }
 
@@ -131,6 +140,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_setupDropdown',
       value: function _setupDropdown() {
+        var _this2 = this;
+
         this.container = document.createElement('ul');
         this.container.id = 'autocomplete-options-' + M.guid();
         $(this.container).addClass('autocomplete-content dropdown-content');
@@ -140,7 +151,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this.dropdown = M.Dropdown.init(this.el, {
           autoFocus: false,
           closeOnClick: false,
-          coverTrigger: false
+          coverTrigger: false,
+          onItemClick: function (itemEl) {
+            _this2.selectOption($(itemEl));
+          }
         });
 
         // Sketchy removal of dropdown click handler
@@ -164,8 +178,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_handleInputBlur',
       value: function _handleInputBlur() {
-        this.dropdown.close();
-        this._resetAutocomplete();
+        if (!this._mousedown) {
+          this.close();
+          this._resetAutocomplete();
+        }
       }
 
       /**
@@ -176,8 +192,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_handleInputKeyupAndFocus',
       value: function _handleInputKeyupAndFocus(e) {
-        var _this2 = this;
-
         if (e.type === 'keyup') {
           Autocomplete._keydown = false;
         }
@@ -191,25 +205,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         }
 
         // Check if the input isn't empty
-        if (this.oldVal !== val) {
-          this._resetAutocomplete();
-
-          if (val.length >= this.options.minLength) {
-            this.isOpen = true;
-            this._renderDropdown(this.options.data, val);
-          }
-
-          // Open dropdown
-          if (!this.dropdown.isOpen) {
-            // Timeout to prevent dropdown temp doc click handler from firing
-            setTimeout(function () {
-              _this2.dropdown.open();
-            }, 100);
-
-            // Recalculate dropdown when its already open
-          } else {
-            this.dropdown.recalculateDimensions();
-          }
+        // Check if focus triggered by tab
+        if (this.oldVal !== val && (M.tabPressed || e.type !== 'focus')) {
+          this.open();
         }
 
         // Update oldVal
@@ -232,7 +230,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
             numItems = $(this.container).children('li').length;
 
         // select element on Enter
-        if (keyCode === 13 && this.activeIndex >= 0) {
+        if (keyCode === M.keys.ENTER && this.activeIndex >= 0) {
           liElement = $(this.container).children('li').eq(this.activeIndex);
           if (liElement.length) {
             this.selectOption(liElement);
@@ -242,14 +240,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         }
 
         // Capture up and down key
-        if (keyCode === 38 || keyCode === 40) {
+        if (keyCode === M.keys.ARROW_UP || keyCode === M.keys.ARROW_DOWN) {
           e.preventDefault();
 
-          if (keyCode === 38 && this.activeIndex > 0) {
+          if (keyCode === M.keys.ARROW_UP && this.activeIndex > 0) {
             this.activeIndex--;
           }
 
-          if (keyCode === 40 && this.activeIndex < numItems - 1) {
+          if (keyCode === M.keys.ARROW_DOWN && this.activeIndex < numItems - 1) {
             this.activeIndex++;
           }
 
@@ -261,6 +259,17 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         }
       }
 
+      /**
+       * Handle Input Click
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleInputClick',
+      value: function _handleInputClick(e) {
+        this.open();
+      }
+
       /**
        * Handle Container Mousedown and Touchstart
        * @param {Event} e
@@ -269,8 +278,18 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_handleContainerMousedownAndTouchstart',
       value: function _handleContainerMousedownAndTouchstart(e) {
-        var $autocompleteOption = $(e.target).closest('li');
-        this.selectOption($autocompleteOption);
+        this._mousedown = true;
+      }
+
+      /**
+       * Handle Container Mouseup and Touchend
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleContainerMouseupAndTouchend',
+      value: function _handleContainerMouseupAndTouchend(e) {
+        this._mousedown = false;
       }
 
       /**
@@ -281,12 +300,12 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: '_highlight',
       value: function _highlight(string, $el) {
         var img = $el.find('img');
-        var matchStart = $el.text().toLowerCase().indexOf("" + string.toLowerCase() + ""),
+        var matchStart = $el.text().toLowerCase().indexOf('' + string.toLowerCase() + ''),
             matchEnd = matchStart + string.length - 1,
             beforeMatch = $el.text().slice(0, matchStart),
             matchText = $el.text().slice(matchStart, matchEnd + 1),
             afterMatch = $el.text().slice(matchEnd + 1);
-        $el.html("<span>" + beforeMatch + "<span class='highlight'>" + matchText + "</span>" + afterMatch + "</span>");
+        $el.html('<span>' + beforeMatch + '<span class=\'highlight\'>' + matchText + '</span>' + afterMatch + '</span>');
         if (img.length) {
           $el.prepend(img);
         }
@@ -314,6 +333,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this._resetCurrentElement();
         this.oldVal = null;
         this.isOpen = false;
+        this._mousedown = false;
       }
 
       /**
@@ -328,7 +348,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this.el.value = text;
         this.$el.trigger('change');
         this._resetAutocomplete();
-        this.dropdown.close();
+        this.close();
 
         // Handle onAutocomplete callback.
         if (typeof this.options.onAutocomplete === 'function') {
@@ -370,10 +390,12 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         }
 
         // Sort
-        var sortFunctionBound = function (a, b) {
-          return _this3.options.sortFunction(a.key.toLowerCase(), b.key.toLowerCase(), val.toLowerCase());
-        };
-        matchingData.sort(sortFunctionBound);
+        if (this.options.sortFunction) {
+          var sortFunctionBound = function (a, b) {
+            return _this3.options.sortFunction(a.key.toLowerCase(), b.key.toLowerCase(), val.toLowerCase());
+          };
+          matchingData.sort(sortFunctionBound);
+        }
 
         // Render
         for (var i = 0; i < matchingData.length; i++) {
@@ -390,6 +412,41 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         }
       }
 
+      /**
+       * Open Autocomplete Dropdown
+       */
+
+    }, {
+      key: 'open',
+      value: function open() {
+        var val = this.el.value.toLowerCase();
+
+        this._resetAutocomplete();
+
+        if (val.length >= this.options.minLength) {
+          this.isOpen = true;
+          this._renderDropdown(this.options.data, val);
+        }
+
+        // Open dropdown
+        if (!this.dropdown.isOpen) {
+          this.dropdown.open();
+        } else {
+          // Recalculate dropdown when its already open
+          this.dropdown.recalculateDimensions();
+        }
+      }
+
+      /**
+       * Close Autocomplete Dropdown
+       */
+
+    }, {
+      key: 'close',
+      value: function close() {
+        this.dropdown.close();
+      }
+
       /**
        * Update Data
        * @param {Object} data

data/assets/javascripts/materialize/buttons.js

@@ -56,17 +56,15 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       _this.$floatingBtnsReverse = _this.$el.find('ul .btn-floating').reverse();
       _this.offsetY = 0;
       _this.offsetX = 0;
+
+      _this.$el.addClass('direction-' + _this.options.direction);
       if (_this.options.direction === 'top') {
-        _this.$el.addClass('direction-top');
         _this.offsetY = 40;
       } else if (_this.options.direction === 'right') {
-        _this.$el.addClass('direction-right');
         _this.offsetX = -40;
       } else if (_this.options.direction === 'bottom') {
-        _this.$el.addClass('direction-bottom');
         _this.offsetY = -40;
       } else {
-        _this.$el.addClass('direction-left');
         _this.offsetX = 40;
       }
       _this._setupEventHandlers();
@@ -202,7 +200,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           anim({
             targets: el,
             opacity: 1,
-            scale: [.4, 1],
+            scale: [0.4, 1],
             translateY: [_this2.offsetY, 0],
             translateX: [_this2.offsetX, 0],
             duration: 275,
@@ -227,7 +225,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           anim({
             targets: el,
             opacity: 0,
-            scale: .4,
+            scale: 0.4,
             translateY: _this3.offsetY,
             translateX: _this3.offsetX,
             duration: 175,

data/assets/javascripts/materialize/carousel.js

@@ -572,7 +572,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
             this.$el.find('.carousel-item').removeClass('active');
             el.classList.add('active');
           }
-          var transformString = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * this.options.shift * tween * i + 'px)' + ' translateZ(' + this.options.dist * tween + 'px)';
+          var transformString = alignment + ' translateX(' + -delta / 2 + 'px) translateX(' + dir * this.options.shift * tween * i + 'px) translateZ(' + this.options.dist * tween + 'px)';
           this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
         }
 
@@ -588,7 +588,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           // Don't show wrapped items.
           if (!this.noWrap || this.center + i < this.count) {
             el = this.images[this._wrap(this.center + i)];
-            var _transformString = alignment + ' translateX(' + (this.options.shift + (this.dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
+            var _transformString = alignment + ' translateX(' + (this.options.shift + (this.dim * i - delta) / 2) + 'px) translateZ(' + zTranslation + 'px)';
             this._updateItemStyle(el, tweenedOpacity, -i, _transformString);
           }
 
@@ -603,7 +603,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           // Don't show wrapped items.
           if (!this.noWrap || this.center - i >= 0) {
             el = this.images[this._wrap(this.center - i)];
-            var _transformString2 = alignment + ' translateX(' + (-this.options.shift + (-this.dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
+            var _transformString2 = alignment + ' translateX(' + (-this.options.shift + (-this.dim * i - delta) / 2) + 'px) translateZ(' + zTranslation + 'px)';
             this._updateItemStyle(el, tweenedOpacity, -i, _transformString2);
           }
         }
@@ -612,18 +612,18 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         // Don't show wrapped items.
         if (!this.noWrap || this.center >= 0 && this.center < this.count) {
           el = this.images[this._wrap(this.center)];
-          var _transformString3 = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * this.options.shift * tween + 'px)' + ' translateZ(' + this.options.dist * tween + 'px)';
+          var _transformString3 = alignment + ' translateX(' + -delta / 2 + 'px) translateX(' + dir * this.options.shift * tween + 'px) translateZ(' + this.options.dist * tween + 'px)';
           this._updateItemStyle(el, centerTweenedOpacity, 0, _transformString3);
         }
 
         // onCycleTo callback
         var $currItem = this.$el.find('.carousel-item').eq(this._wrap(this.center));
-        if (lastCenter !== this.center && typeof this.options.onCycleTo === "function") {
+        if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') {
           this.options.onCycleTo.call(this, $currItem[0], this.dragged);
         }
 
         // One time callback
-        if (typeof this.oneTimeCallback === "function") {
+        if (typeof this.oneTimeCallback === 'function') {
           this.oneTimeCallback.call(this, $currItem[0], this.dragged);
           this.oneTimeCallback = null;
         }
@@ -681,7 +681,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         }
 
         // Set one time callback
-        if (typeof callback === "function") {
+        if (typeof callback === 'function') {
           this.oneTimeCallback = callback;
         }
 

data/assets/javascripts/materialize/collapsible.js

@@ -257,7 +257,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         var $collapsibleLi = this.$el.children('li').eq(index);
         if ($collapsibleLi.length && !$collapsibleLi[0].classList.contains('active')) {
-
           // onOpenStart callback
           if (typeof this.options.onOpenStart === 'function') {
             this.options.onOpenStart.call(this, $collapsibleLi[0]);
@@ -289,7 +288,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       value: function close(index) {
         var $collapsibleLi = this.$el.children('li').eq(index);
         if ($collapsibleLi.length && $collapsibleLi[0].classList.contains('active')) {
-
           // onCloseStart callback
           if (typeof this.options.onCloseStart === 'function') {
             this.options.onCloseStart.call(this, $collapsibleLi[0]);

data/assets/javascripts/materialize/datepicker.js

@@ -12,6 +12,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
   'use strict';
 
   var _defaults = {
+    // Close when date is selected
+    autoClose: false,
 
     // the default output format for the input field value
     format: 'mmm dd, yyyy',
@@ -129,14 +131,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
       if (!_this.options.defaultDate) {
         _this.options.defaultDate = new Date(Date.parse(_this.el.value));
-        _this.options.setDefaultDate = true;
       }
 
       var defDate = _this.options.defaultDate;
-
       if (Datepicker._isDate(defDate)) {
         if (_this.options.setDefaultDate) {
           _this.setDate(defDate, true);
+          _this.setInputValue();
         } else {
           _this.gotoDate(defDate);
         }
@@ -149,7 +150,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
        * @type {Boolean}
        */
       _this.isOpen = false;
-
       return _this;
     }
 
@@ -170,11 +170,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: 'destroySelects',
       value: function destroySelects() {
-        var oldYearSelect = this.calendarEl.querySelector('.pika-select-year');
+        var oldYearSelect = this.calendarEl.querySelector('.orig-select-year');
         if (oldYearSelect) {
           M.FormSelect.getInstance(oldYearSelect).destroy();
         }
-        var oldMonthSelect = this.calendarEl.querySelector('.pika-select-month');
+        var oldMonthSelect = this.calendarEl.querySelector('.orig-select-month');
         if (oldMonthSelect) {
           M.FormSelect.getInstance(oldMonthSelect).destroy();
         }
@@ -309,9 +309,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
             month: date.getMonth(),
             year: date.getFullYear()
           }];
-          // if (this.options.mainCalendar === 'right') {
-          //   this.calendars[0].month += 1 - this.options.numberOfMonths;
-          // }
         }
 
         this.adjustCalendars();
@@ -320,12 +317,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: 'adjustCalendars',
       value: function adjustCalendars() {
         this.calendars[0] = this.adjustCalendar(this.calendars[0]);
-        // for (let c = 1; c < this.options.numberOfMonths; c++) {
-        //   this.calendars[c] = this.adjustCalendar({
-        //     month: this.calendars[0].month + c,
-        //     year: this.calendars[0].year
-        //   });
-        // }
         this.draw();
       }
     }, {
@@ -469,12 +460,12 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         if (opts.isEndRange) {
           arr.push('is-endrange');
         }
-        return '<td data-day="' + opts.day + '" class="' + arr.join(' ') + '" aria-selected="' + ariaSelected + '">' + '<button class="datepicker-day-button" type="button" ' + 'data-pika-year="' + opts.year + '" data-pika-month="' + opts.month + '" data-pika-day="' + opts.day + '">' + opts.day + '</button>' + '</td>';
+        return '<td data-day="' + opts.day + '" class="' + arr.join(' ') + '" aria-selected="' + ariaSelected + '">' + ('<button class="datepicker-day-button" type="button" data-year="' + opts.year + '" data-month="' + opts.month + '" data-day="' + opts.day + '">' + opts.day + '</button>') + '</td>';
       }
     }, {
       key: 'renderRow',
       value: function renderRow(days, isRTL, isRowSelected) {
-        return '<tr class="pika-row' + (isRowSelected ? ' is-selected' : '') + '">' + (isRTL ? days.reverse() : days).join('') + '</tr>';
+        return '<tr class="datepicker-row' + (isRowSelected ? ' is-selected' : '') + '">' + (isRTL ? days.reverse() : days).join('') + '</tr>';
       }
     }, {
       key: 'renderTable',
@@ -515,7 +506,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' + (i === month ? ' selected="selected"' : '') + (isMinYear && i < opts.minMonth || isMaxYear && i > opts.maxMonth ? 'disabled="disabled"' : '') + '>' + opts.i18n.months[i] + '</option>');
         }
 
-        monthHtml = '<select class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select>';
+        monthHtml = '<select class="datepicker-select orig-select-month" tabindex="-1">' + arr.join('') + '</select>';
 
         if ($.isArray(opts.yearRange)) {
           i = opts.yearRange[0];
@@ -527,11 +518,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         for (arr = []; i < j && i <= opts.maxYear; i++) {
           if (i >= opts.minYear) {
-            arr.push('<option value="' + i + '"' + (i === year ? ' selected="selected"' : '') + '>' + i + '</option>');
+            arr.push('<option value="' + i + '" ' + (i === year ? 'selected="selected"' : '') + '>' + i + '</option>');
           }
         }
 
-        yearHtml = '<select class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select>';
+        yearHtml = '<select class="datepicker-select orig-select-year" tabindex="-1">' + arr.join('') + '</select>';
 
         var leftArrow = '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
         html += '<button class="month-prev' + (prev ? '' : ' is-disabled') + '" type="button">' + leftArrow + '</button>';
@@ -552,10 +543,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           next = false;
         }
 
-        // if (c === (this.options.numberOfMonths - 1) ) {
         var rightArrow = '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
         html += '<button class="month-next' + (next ? '' : ' is-disabled') + '" type="button">' + rightArrow + '</button>';
-        // }
 
         return html += '</div>';
       }
@@ -591,7 +580,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           }
         }
 
-        randId = 'pika-title-' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 2);
+        randId = 'datepicker-title-' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 2);
 
         for (var c = 0; c < 1; c++) {
           this._renderDateDisplay();
@@ -603,10 +592,16 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this.calendarEl.innerHTML = html;
 
         // Init Materialize Select
-        var yearSelect = this.calendarEl.querySelector('.pika-select-year');
-        var monthSelect = this.calendarEl.querySelector('.pika-select-month');
-        M.FormSelect.init(yearSelect, { classes: 'select-year', dropdownOptions: { container: document.body, constrainWidth: false } });
-        M.FormSelect.init(monthSelect, { classes: 'select-month', dropdownOptions: { container: document.body, constrainWidth: false } });
+        var yearSelect = this.calendarEl.querySelector('.orig-select-year');
+        var monthSelect = this.calendarEl.querySelector('.orig-select-month');
+        M.FormSelect.init(yearSelect, {
+          classes: 'select-year',
+          dropdownOptions: { container: document.body, constrainWidth: false }
+        });
+        M.FormSelect.init(monthSelect, {
+          classes: 'select-month',
+          dropdownOptions: { container: document.body, constrainWidth: false }
+        });
 
         // Add change handlers for select
         yearSelect.addEventListener('change', this._handleYearChange.bind(this));
@@ -652,7 +647,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this.$modalEl = $(Datepicker._template);
         this.modalEl = this.$modalEl[0];
 
-        this.calendarEl = this.modalEl.querySelector('.pika-single');
+        this.calendarEl = this.modalEl.querySelector('.datepicker-calendar');
 
         this.yearTextEl = this.modalEl.querySelector('.year-text');
         this.dateTextEl = this.modalEl.querySelector('.date-text');
@@ -663,7 +658,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel');
 
         this.formats = {
-
           d: function () {
             return _this4.date.getDate();
           },
@@ -734,24 +728,16 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         var $target = $(e.target);
         if (!$target.hasClass('is-disabled')) {
           if ($target.hasClass('datepicker-day-button') && !$target.hasClass('is-empty') && !$target.parent().hasClass('is-disabled')) {
-            this.setDate(new Date(e.target.getAttribute('data-pika-year'), e.target.getAttribute('data-pika-month'), e.target.getAttribute('data-pika-day')));
+            this.setDate(new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day')));
+            if (this.options.autoClose) {
+              this._finishSelection();
+            }
           } else if ($target.closest('.month-prev').length) {
             this.prevMonth();
           } else if ($target.closest('.month-next').length) {
             this.nextMonth();
           }
         }
-        // if (!$target.hasClass('pika-select')) {
-        //   // if this is touch event prevent mouse events emulation
-        //   // if (e.preventDefault) {
-        //   //   e.preventDefault();
-        //   // } else {
-        //   //   e.returnValue = false;
-        //   //   return false;
-        //   // }
-        // } else {
-        //   this._c = true;
-        // }
       }
     }, {
       key: '_handleClearClick',
@@ -814,9 +800,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         if (Datepicker._isDate(date)) {
           this.setDate(date);
         }
-        // if (!self._v) {
-        //   self.show();
-        // }
       }
     }, {
       key: 'renderDayName',
@@ -942,7 +925,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     return Datepicker;
   }(Component);
 
-  Datepicker._template = ['<div class= "modal datepicker-modal">', '<div class="modal-content datepicker-container">', '<div class="datepicker-date-display">', '<span class="year-text"></span>', '<span class="date-text"></span>', '</div>', '<div class="datepicker-calendar-container">', '<div class="pika-single"></div>', '<div class="datepicker-footer">', '<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>', '<div class="confirmation-btns">', '<button class="btn-flat datepicker-cancel waves-effect" type="button"></button>', '<button class="btn-flat datepicker-done waves-effect" type="button"></button>', '</div>', '</div>', '</div>', '</div>', '</div>'].join('');
+  Datepicker._template = ['<div class= "modal datepicker-modal">', '<div class="modal-content datepicker-container">', '<div class="datepicker-date-display">', '<span class="year-text"></span>', '<span class="date-text"></span>', '</div>', '<div class="datepicker-calendar-container">', '<div class="datepicker-calendar"></div>', '<div class="datepicker-footer">', '<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>', '<div class="confirmation-btns">', '<button class="btn-flat datepicker-cancel waves-effect" type="button"></button>', '<button class="btn-flat datepicker-done waves-effect" type="button"></button>', '</div>', '</div>', '</div>', '</div>', '</div>'].join('');
 
   M.Datepicker = Datepicker;