clay-autocomplete - npm Package Compare versions

Comparing version 2.16.0 to 2.16.1

lib/ClayAutocomplete.js

@@ -20,2 +20,4 @@ 'use strict';
 
+var _metalDom = require('metal-dom');
+
 var _metal = require('metal');
@@ -69,5 +71,7 @@
 
+			this._documentClickHandler = _metalDom.dom.on(document, 'click', this._handleDocumentClick.bind(this));
 			this.addListener('dataChange', this._defaultDataChange, true);
 			this.addListener('dataLoading', this._defaultDataLoading, true);
 			this.addListener('inputChange', this._defaultInputChange, true);
+			this.addListener('itemSelected', this._defaultItemSelected, true);
 			this.refs.dataProvider.refs.portal.on('rendered', this._handleRenderedPortal.bind(this));
@@ -95,2 +99,3 @@ }
 		value: function disposed() {
+			this._documentClickHandler.removeListener();
 			this._dropdownItemFocused = null;
@@ -161,2 +166,4 @@ }
 
+			this._expanded = true;
+
 			if (this._query) {
@@ -174,2 +181,12 @@ if ((0, _metal.isFunction)(this.dataSource)) {
 		/**
+   * @private
+   */
+
+	}, {
+		key: '_defaultItemSelected',
+		value: function _defaultItemSelected() {
+			this._expanded = false;
+		}
+
+		/**
    * Gets the accepted characters of the input
@@ -278,2 +295,17 @@ * element values
 		/**
+   * Handles the dropdown hiding when clicking outside the autocomplete
+   * component
+   * @param {!Event} event
+   */
+
+	}, {
+		key: '_handleDocumentClick',
+		value: function _handleDocumentClick(event) {
+			if (event.target === this.element) {
+				return;
+			}
+			this._expanded = false;
+		}
+
+		/**
    * Continues the propagation of the item clicked event
@@ -511,2 +543,3 @@ * @param {!Event} event
 	/**
+  * Flag to indicate if dropdown is expanded.
   * @default false
@@ -518,2 +551,11 @@ * @instance
   */
+	_expanded: _metalState.Config.bool().value(false).internal(),
+
+	/**
+  * @default false
+  * @instance
+  * @memberof ClayAutocomplete
+  * @private
+  * @type {?bool}
+  */
 	_isFetching: _metalState.Config.bool().value(false).internal(),
@@ -520,0 +562,0 @@

lib/ClayAutocomplete.soy.js

@@ -60,2 +60,3 @@ 'use strict';
    *  _dropdownWidth: (null|number|undefined),
+   *  _expanded: (boolean|null|undefined),
    *  _handleDataChange: (*|null|undefined),
@@ -101,2 +102,4 @@ *  _handleDataError: (*|null|undefined),
     var _dropdownWidth = soy.asserts.assertType(opt_data._dropdownWidth == null || goog.isNumber(opt_data._dropdownWidth), '_dropdownWidth', opt_data._dropdownWidth, 'null|number|undefined');
+    /** @type {boolean|null|undefined} */
+    var _expanded = soy.asserts.assertType(opt_data._expanded == null || goog.isBoolean(opt_data._expanded) || opt_data._expanded === 1 || opt_data._expanded === 0, '_expanded', opt_data._expanded, 'boolean|null|undefined');
     /** @type {*|null|undefined} */
@@ -156,3 +159,3 @@ var _handleDataChange = opt_data._handleDataChange;
     var wrapInput = soy.asserts.assertType(opt_data.wrapInput == null || goog.isBoolean(opt_data.wrapInput) || opt_data.wrapInput === 1 || opt_data.wrapInput === 0, 'wrapInput', opt_data.wrapInput, 'boolean|null|undefined');
-    var attributes__soy33 = function attributes__soy33() {
+    var attributes__soy34 = function attributes__soy34() {
       incrementalDom.attr('class', (elementClasses ? ' ' + elementClasses : '') + (useDefaultClasses != false ? ' input-group' : ''));
@@ -163,9 +166,9 @@ if (id) {
     };
-    var content__soy52 = function content__soy52() {
+    var content__soy53 = function content__soy53() {
       soyIdom.print(unstable_content);
       $input({ _handleOnBlur: _handleOnBlur, _handleOnFocus: _handleOnFocus, _handleOnInput: _handleOnInput, _handleOnKeydown: _handleOnKeydown, _isFetching: _isFetching, inputElementClasses: inputElementClasses, inputName: inputName, inputValue: inputValue, placeholder: placeholder, wrapInput: ($$temp = wrapInput) == null ? false : $$temp }, null, opt_ijData);
-      $dropdown(opt_data, null, opt_ijData);
+      $dropdown({ _dropdownWidth: _dropdownWidth, _expanded: ($$temp = _expanded) == null ? false : $$temp, _handleDataChange: _handleDataChange, _handleDataError: _handleDataError, _handleDataLoading: _handleDataLoading, _handleDropdownItemClick: _handleDropdownItemClick, _handleOnKeydown: _handleOnKeydown, contentRenderer: contentRenderer, dataProviderInitialData: dataProviderInitialData, dataSource: dataSource, dropdownPortalElement: dropdownPortalElement, filteredItems: filteredItems, inputValue: inputValue, pollingInterval: pollingInterval, requestInputMode: requestInputMode, requestOptions: requestOptions, requestRetries: requestRetries, requestTimeout: requestTimeout }, null, opt_ijData);
     };
     incrementalDom.elementOpenStart('div');
-    attributes__soy33();
+    attributes__soy34();
     incrementalDom.elementOpenEnd();
@@ -176,6 +179,6 @@ if (useDefaultClasses != false) {
       incrementalDom.elementOpenEnd();
-      content__soy52();
+      content__soy53();
       incrementalDom.elementClose('div');
     } else {
-      content__soy52();
+      content__soy53();
     }
@@ -189,2 +192,3 @@ incrementalDom.elementClose('div');
    *  _dropdownWidth: (null|number|undefined),
+   *  _expanded: (boolean|null|undefined),
    *  _handleDataChange: (*|null|undefined),
@@ -265,3 +269,3 @@ *  _handleDataError: (*|null|undefined),
     var wrapInput = soy.asserts.assertType(opt_data.wrapInput == null || goog.isBoolean(opt_data.wrapInput) || opt_data.wrapInput === 1 || opt_data.wrapInput === 0, 'wrapInput', opt_data.wrapInput, 'boolean|null|undefined');
-    var attributes__soy112 = function attributes__soy112() {
+    var attributes__soy114 = function attributes__soy114() {
       incrementalDom.attr('class', (inputElementClasses ? inputElementClasses : 'form-control') + (_isFetching && !wrapInput ? ' input-group-inset input-group-inset-after' : ''));
@@ -295,3 +299,3 @@ if (inputName) {
       incrementalDom.elementOpenStart('input');
-      attributes__soy112();
+      attributes__soy114();
       incrementalDom.elementOpenEnd();
@@ -314,3 +318,3 @@ incrementalDom.elementClose('input');
       incrementalDom.elementOpenStart('input');
-      attributes__soy112();
+      attributes__soy114();
       incrementalDom.elementOpenEnd();
@@ -355,2 +359,3 @@ incrementalDom.elementClose('input');
    *  _dropdownWidth: (null|number|undefined),
+   *  _expanded: (boolean|null|undefined),
    *  _handleDataChange: (*|null|undefined),
@@ -365,3 +370,2 @@ *  _handleDataError: (*|null|undefined),
    *  filteredItems: (!Array<?>|null|undefined),
-   *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  pollingInterval: (null|number|undefined),
@@ -385,2 +389,4 @@ *  requestInputMode: (!goog.soy.data.SanitizedContent|null|string|undefined),
     var _dropdownWidth = soy.asserts.assertType(opt_data._dropdownWidth == null || goog.isNumber(opt_data._dropdownWidth), '_dropdownWidth', opt_data._dropdownWidth, 'null|number|undefined');
+    /** @type {boolean|null|undefined} */
+    var _expanded = soy.asserts.assertType(opt_data._expanded == null || goog.isBoolean(opt_data._expanded) || opt_data._expanded === 1 || opt_data._expanded === 0, '_expanded', opt_data._expanded, 'boolean|null|undefined');
     /** @type {*|null|undefined} */
@@ -404,4 +410,2 @@ var _handleDataChange = opt_data._handleDataChange;
     var filteredItems = soy.asserts.assertType(opt_data.filteredItems == null || goog.isArray(opt_data.filteredItems), 'filteredItems', opt_data.filteredItems, '!Array<?>|null|undefined');
-    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
-    var inputValue = soy.asserts.assertType(opt_data.inputValue == null || goog.isString(opt_data.inputValue) || opt_data.inputValue instanceof goog.soy.data.SanitizedContent, 'inputValue', opt_data.inputValue, '!goog.soy.data.SanitizedContent|null|string|undefined');
     /** @type {null|number|undefined} */
@@ -417,5 +421,4 @@ var pollingInterval = soy.asserts.assertType(opt_data.pollingInterval == null || goog.isNumber(opt_data.pollingInterval), 'pollingInterval', opt_data.pollingInterval, 'null|number|undefined');
     var requestTimeout = soy.asserts.assertType(opt_data.requestTimeout == null || goog.isNumber(opt_data.requestTimeout), 'requestTimeout', opt_data.requestTimeout, 'null|number|undefined');
-    var isVisible__soy200 = filteredItems && filteredItems.length > 0 || inputValue ? true : false;
     var attributes__soy202 = function attributes__soy202() {
-      incrementalDom.attr('class', 'autocomplete-dropdown-menu dropdown-menu' + (isVisible__soy200 ? ' show' : ''));
+      incrementalDom.attr('class', 'autocomplete-dropdown-menu dropdown-menu' + (_expanded ? ' show' : ''));
       incrementalDom.attr('data-onkeydown', _handleOnKeydown);
@@ -500,2 +503,3 @@ if (_dropdownWidth) {
    *  _dropdownWidth: (null|number|undefined),
+   *  _expanded: (boolean|null|undefined),
    *  _handleDataChange: (*|null|undefined),
@@ -510,3 +514,2 @@ *  _handleDataError: (*|null|undefined),
    *  filteredItems: (!Array<?>|null|undefined),
-   *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  pollingInterval: (null|number|undefined),
@@ -613,8 +616,8 @@ *  requestInputMode: (!goog.soy.data.SanitizedContent|null|string|undefined),
 
-  exports.render.params = ["dataSource", "_dropdownWidth", "_handleDataChange", "_handleDataError", "_handleDataLoading", "_handleDropdownItemClick", "_handleOnBlur", "_handleOnFocus", "_handleOnInput", "_handleOnKeydown", "_isFetching", "contentRenderer", "dataProviderInitialData", "dropdownPortalElement", "elementClasses", "filteredItems", "id", "inputElementClasses", "inputName", "inputValue", "placeholder", "pollingInterval", "requestInputMode", "requestOptions", "requestRetries", "requestTimeout", "unstable_content", "useDefaultClasses", "wrapInput"];
-  exports.render.types = { "dataSource": "string|[]|list<?>|any", "_dropdownWidth": "number", "_handleDataChange": "any", "_handleDataError": "any", "_handleDataLoading": "any", "_handleDropdownItemClick": "any", "_handleOnBlur": "any", "_handleOnFocus": "any", "_handleOnInput": "any", "_handleOnKeydown": "any", "_isFetching": "bool", "contentRenderer": "string", "dataProviderInitialData": "[]|list<?>", "dropdownPortalElement": "string", "elementClasses": "string", "filteredItems": "list<?>", "id": "string", "inputElementClasses": "string", "inputName": "string", "inputValue": "string", "placeholder": "string", "pollingInterval": "number", "requestInputMode": "string", "requestOptions": "[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]", "requestRetries": "number", "requestTimeout": "number", "unstable_content": "html", "useDefaultClasses": "bool", "wrapInput": "bool" };
+  exports.render.params = ["dataSource", "_dropdownWidth", "_expanded", "_handleDataChange", "_handleDataError", "_handleDataLoading", "_handleDropdownItemClick", "_handleOnBlur", "_handleOnFocus", "_handleOnInput", "_handleOnKeydown", "_isFetching", "contentRenderer", "dataProviderInitialData", "dropdownPortalElement", "elementClasses", "filteredItems", "id", "inputElementClasses", "inputName", "inputValue", "placeholder", "pollingInterval", "requestInputMode", "requestOptions", "requestRetries", "requestTimeout", "unstable_content", "useDefaultClasses", "wrapInput"];
+  exports.render.types = { "dataSource": "string|[]|list<?>|any", "_dropdownWidth": "number", "_expanded": "bool", "_handleDataChange": "any", "_handleDataError": "any", "_handleDataLoading": "any", "_handleDropdownItemClick": "any", "_handleOnBlur": "any", "_handleOnFocus": "any", "_handleOnInput": "any", "_handleOnKeydown": "any", "_isFetching": "bool", "contentRenderer": "string", "dataProviderInitialData": "[]|list<?>", "dropdownPortalElement": "string", "elementClasses": "string", "filteredItems": "list<?>", "id": "string", "inputElementClasses": "string", "inputName": "string", "inputValue": "string", "placeholder": "string", "pollingInterval": "number", "requestInputMode": "string", "requestOptions": "[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]", "requestRetries": "number", "requestTimeout": "number", "unstable_content": "html", "useDefaultClasses": "bool", "wrapInput": "bool" };
   exports.input.params = ["_handleOnBlur", "_handleOnFocus", "_handleOnInput", "_handleOnKeydown", "_isFetching", "inputElementClasses", "inputName", "inputValue", "placeholder", "wrapInput"];
   exports.input.types = { "_handleOnBlur": "any", "_handleOnFocus": "any", "_handleOnInput": "any", "_handleOnKeydown": "any", "_isFetching": "bool", "inputElementClasses": "string", "inputName": "string", "inputValue": "string", "placeholder": "string", "wrapInput": "bool" };
-  exports.dropdown.params = ["dataSource", "_dropdownWidth", "_handleDataChange", "_handleDataError", "_handleDataLoading", "_handleDropdownItemClick", "_handleOnKeydown", "contentRenderer", "dataProviderInitialData", "dropdownPortalElement", "filteredItems", "inputValue", "pollingInterval", "requestInputMode", "requestOptions", "requestRetries", "requestTimeout"];
-  exports.dropdown.types = { "dataSource": "string|[]|list<?>|any", "_dropdownWidth": "number", "_handleDataChange": "any", "_handleDataError": "any", "_handleDataLoading": "any", "_handleDropdownItemClick": "any", "_handleOnKeydown": "any", "contentRenderer": "string", "dataProviderInitialData": "[]|list<?>", "dropdownPortalElement": "string", "filteredItems": "list<?>", "inputValue": "string", "pollingInterval": "number", "requestInputMode": "string", "requestOptions": "[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]", "requestRetries": "number", "requestTimeout": "number" };
+  exports.dropdown.params = ["dataSource", "_dropdownWidth", "_expanded", "_handleDataChange", "_handleDataError", "_handleDataLoading", "_handleDropdownItemClick", "_handleOnKeydown", "contentRenderer", "dataProviderInitialData", "dropdownPortalElement", "filteredItems", "pollingInterval", "requestInputMode", "requestOptions", "requestRetries", "requestTimeout"];
+  exports.dropdown.types = { "dataSource": "string|[]|list<?>|any", "_dropdownWidth": "number", "_expanded": "bool", "_handleDataChange": "any", "_handleDataError": "any", "_handleDataLoading": "any", "_handleDropdownItemClick": "any", "_handleOnKeydown": "any", "contentRenderer": "string", "dataProviderInitialData": "[]|list<?>", "dropdownPortalElement": "string", "filteredItems": "list<?>", "pollingInterval": "number", "requestInputMode": "string", "requestOptions": "[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]", "requestRetries": "number", "requestTimeout": "number" };
   exports.templates = templates = exports;
@@ -621,0 +624,0 @@ return exports;

package.json

 {
   "name": "clay-autocomplete",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "description": "Metal ClayAutocomplete component",
@@ -31,7 +31,8 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "clay-data-provider": "^2.16.0",
-    "clay-loading-indicator": "^2.16.0",
-    "clay-portal": "^2.16.0",
+    "clay-data-provider": "^2.16.1",
+    "clay-loading-indicator": "^2.16.1",
+    "clay-portal": "^2.16.1",
     "metal": "^2.16.0",
     "metal-component": "^2.16.0",
+    "metal-dom": "^2.16.0",
     "metal-position": "^2.1.0",
@@ -48,8 +49,8 @@ "metal-soy": "^2.16.0",
     "babel-preset-env": "^1.6.0",
-    "browserslist-config-clay": "^2.16.0",
-    "clay-css": "^2.16.0",
+    "browserslist-config-clay": "^2.16.1",
+    "clay-css": "^2.16.1",
     "metal-dom": "^2.13.2",
     "metal-tools-soy": "^4.3.2",
     "webpack": "^3.0.0",
-    "webpack-config-clay": "^2.16.0"
+    "webpack-config-clay": "^2.16.1"
   },
@@ -59,3 +60,3 @@ "browserslist": [
   ],
-  "gitHead": "224fc50ddb378c264b1df6f685f23473b8d3174a"
+  "gitHead": "d5b84cb7fcab414e0e3c7cc5927cb34171cd1266"
 }

src/ClayAutocomplete.js

@@ -6,2 +6,3 @@ import 'clay-data-provider';
 import {Config} from 'metal-state';
+import {dom} from 'metal-dom';
 import {isFunction} from 'metal';
@@ -25,5 +26,11 @@ import ClayComponent from 'clay-component';
 
+		this._documentClickHandler = dom.on(
+			document,
+			'click',
+			this._handleDocumentClick.bind(this)
+		);
 		this.addListener('dataChange', this._defaultDataChange, true);
 		this.addListener('dataLoading', this._defaultDataLoading, true);
 		this.addListener('inputChange', this._defaultInputChange, true);
+		this.addListener('itemSelected', this._defaultItemSelected, true);
 		this.refs.dataProvider.refs.portal.on(
@@ -48,2 +55,3 @@ 'rendered',
 	disposed() {
+		this._documentClickHandler.removeListener();
 		this._dropdownItemFocused = null;
@@ -99,2 +107,4 @@ }
 
+		this._expanded = true;
+
 		if (this._query) {
@@ -112,2 +122,9 @@ if (isFunction(this.dataSource)) {
 	/**
+	 * @private
+	 */
+	_defaultItemSelected() {
+		this._expanded = false;
+	}
+
+	/**
 	 * Gets the accepted characters of the input
@@ -208,2 +225,14 @@ * element values
 	/**
+	 * Handles the dropdown hiding when clicking outside the autocomplete
+	 * component
+	 * @param {!Event} event
+	 */
+	_handleDocumentClick(event) {
+		if (event.target === this.element) {
+			return;
+		}
+		this._expanded = false;
+	}
+
+	/**
 	 * Continues the propagation of the item clicked event
@@ -440,2 +469,3 @@ * @param {!Event} event
 	/**
+	 * Flag to indicate if dropdown is expanded.
 	 * @default false
@@ -447,2 +477,13 @@ * @instance
 	 */
+	_expanded: Config.bool()
+		.value(false)
+		.internal(),
+
+	/**
+	 * @default false
+	 * @instance
+	 * @memberof ClayAutocomplete
+	 * @private
+	 * @type {?bool}
+	 */
 	_isFetching: Config.bool()
@@ -449,0 +490,0 @@ .value(false)

src/ClayAutocomplete.soy.js

@@ -41,2 +41,3 @@ /* jshint ignore:start */
  *  _dropdownWidth: (null|number|undefined),
+ *  _expanded: (boolean|null|undefined),
  *  _handleDataChange: (*|null|undefined),
@@ -82,2 +83,4 @@ *  _handleDataError: (*|null|undefined),
   var _dropdownWidth = soy.asserts.assertType(opt_data._dropdownWidth == null || goog.isNumber(opt_data._dropdownWidth), '_dropdownWidth', opt_data._dropdownWidth, 'null|number|undefined');
+  /** @type {boolean|null|undefined} */
+  var _expanded = soy.asserts.assertType(opt_data._expanded == null || (goog.isBoolean(opt_data._expanded) || opt_data._expanded === 1 || opt_data._expanded === 0), '_expanded', opt_data._expanded, 'boolean|null|undefined');
   /** @type {*|null|undefined} */
@@ -137,3 +140,3 @@ var _handleDataChange = opt_data._handleDataChange;
   var wrapInput = soy.asserts.assertType(opt_data.wrapInput == null || (goog.isBoolean(opt_data.wrapInput) || opt_data.wrapInput === 1 || opt_data.wrapInput === 0), 'wrapInput', opt_data.wrapInput, 'boolean|null|undefined');
-  var attributes__soy33 = function() {
+  var attributes__soy34 = function() {
     incrementalDom.attr('class', (elementClasses ? ' ' + elementClasses : '') + (useDefaultClasses != false ? ' input-group' : ''));
@@ -144,9 +147,9 @@ if (id) {
   };
-  var content__soy52 = function() {
+  var content__soy53 = function() {
     soyIdom.print(unstable_content);
     $input({_handleOnBlur: _handleOnBlur, _handleOnFocus: _handleOnFocus, _handleOnInput: _handleOnInput, _handleOnKeydown: _handleOnKeydown, _isFetching: _isFetching, inputElementClasses: inputElementClasses, inputName: inputName, inputValue: inputValue, placeholder: placeholder, wrapInput: ($$temp = wrapInput) == null ? false : $$temp}, null, opt_ijData);
-    $dropdown(opt_data, null, opt_ijData);
+    $dropdown({_dropdownWidth: _dropdownWidth, _expanded: ($$temp = _expanded) == null ? false : $$temp, _handleDataChange: _handleDataChange, _handleDataError: _handleDataError, _handleDataLoading: _handleDataLoading, _handleDropdownItemClick: _handleDropdownItemClick, _handleOnKeydown: _handleOnKeydown, contentRenderer: contentRenderer, dataProviderInitialData: dataProviderInitialData, dataSource: dataSource, dropdownPortalElement: dropdownPortalElement, filteredItems: filteredItems, inputValue: inputValue, pollingInterval: pollingInterval, requestInputMode: requestInputMode, requestOptions: requestOptions, requestRetries: requestRetries, requestTimeout: requestTimeout}, null, opt_ijData);
   };
   incrementalDom.elementOpenStart('div');
-      attributes__soy33();
+      attributes__soy34();
   incrementalDom.elementOpenEnd();
@@ -157,6 +160,6 @@ if (useDefaultClasses != false) {
       incrementalDom.elementOpenEnd();
-        content__soy52();
+        content__soy53();
       incrementalDom.elementClose('div');
     } else {
-      content__soy52();
+      content__soy53();
     }
@@ -170,2 +173,3 @@ incrementalDom.elementClose('div');
  *  _dropdownWidth: (null|number|undefined),
+ *  _expanded: (boolean|null|undefined),
  *  _handleDataChange: (*|null|undefined),
@@ -247,3 +251,3 @@ *  _handleDataError: (*|null|undefined),
   var wrapInput = soy.asserts.assertType(opt_data.wrapInput == null || (goog.isBoolean(opt_data.wrapInput) || opt_data.wrapInput === 1 || opt_data.wrapInput === 0), 'wrapInput', opt_data.wrapInput, 'boolean|null|undefined');
-  var attributes__soy112 = function() {
+  var attributes__soy114 = function() {
     incrementalDom.attr('class', (inputElementClasses ? inputElementClasses : 'form-control') + (_isFetching && !wrapInput ? ' input-group-inset input-group-inset-after' : ''));
@@ -277,3 +281,3 @@ if (inputName) {
         incrementalDom.elementOpenStart('input');
-            attributes__soy112();
+            attributes__soy114();
         incrementalDom.elementOpenEnd();
@@ -296,3 +300,3 @@ incrementalDom.elementClose('input');
     incrementalDom.elementOpenStart('input');
-        attributes__soy112();
+        attributes__soy114();
     incrementalDom.elementOpenEnd();
@@ -338,2 +342,3 @@ incrementalDom.elementClose('input');
  *  _dropdownWidth: (null|number|undefined),
+ *  _expanded: (boolean|null|undefined),
  *  _handleDataChange: (*|null|undefined),
@@ -348,3 +353,2 @@ *  _handleDataError: (*|null|undefined),
  *  filteredItems: (!Array<?>|null|undefined),
- *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  pollingInterval: (null|number|undefined),
@@ -368,2 +372,4 @@ *  requestInputMode: (!goog.soy.data.SanitizedContent|null|string|undefined),
   var _dropdownWidth = soy.asserts.assertType(opt_data._dropdownWidth == null || goog.isNumber(opt_data._dropdownWidth), '_dropdownWidth', opt_data._dropdownWidth, 'null|number|undefined');
+  /** @type {boolean|null|undefined} */
+  var _expanded = soy.asserts.assertType(opt_data._expanded == null || (goog.isBoolean(opt_data._expanded) || opt_data._expanded === 1 || opt_data._expanded === 0), '_expanded', opt_data._expanded, 'boolean|null|undefined');
   /** @type {*|null|undefined} */
@@ -387,4 +393,2 @@ var _handleDataChange = opt_data._handleDataChange;
   var filteredItems = soy.asserts.assertType(opt_data.filteredItems == null || goog.isArray(opt_data.filteredItems), 'filteredItems', opt_data.filteredItems, '!Array<?>|null|undefined');
-  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
-  var inputValue = soy.asserts.assertType(opt_data.inputValue == null || (goog.isString(opt_data.inputValue) || opt_data.inputValue instanceof goog.soy.data.SanitizedContent), 'inputValue', opt_data.inputValue, '!goog.soy.data.SanitizedContent|null|string|undefined');
   /** @type {null|number|undefined} */
@@ -400,5 +404,4 @@ var pollingInterval = soy.asserts.assertType(opt_data.pollingInterval == null || goog.isNumber(opt_data.pollingInterval), 'pollingInterval', opt_data.pollingInterval, 'null|number|undefined');
   var requestTimeout = soy.asserts.assertType(opt_data.requestTimeout == null || goog.isNumber(opt_data.requestTimeout), 'requestTimeout', opt_data.requestTimeout, 'null|number|undefined');
-  var isVisible__soy200 = filteredItems && (filteredItems.length) > 0 || inputValue ? true : false;
   var attributes__soy202 = function() {
-    incrementalDom.attr('class', 'autocomplete-dropdown-menu dropdown-menu' + (isVisible__soy200 ? ' show' : ''));
+    incrementalDom.attr('class', 'autocomplete-dropdown-menu dropdown-menu' + (_expanded ? ' show' : ''));
     incrementalDom.attr('data-onkeydown', _handleOnKeydown);
@@ -483,2 +486,3 @@ if (_dropdownWidth) {
  *  _dropdownWidth: (null|number|undefined),
+ *  _expanded: (boolean|null|undefined),
  *  _handleDataChange: (*|null|undefined),
@@ -493,3 +497,2 @@ *  _handleDataError: (*|null|undefined),
  *  filteredItems: (!Array<?>|null|undefined),
- *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  pollingInterval: (null|number|undefined),
@@ -598,8 +601,8 @@ *  requestInputMode: (!goog.soy.data.SanitizedContent|null|string|undefined),
 
-exports.render.params = ["dataSource","_dropdownWidth","_handleDataChange","_handleDataError","_handleDataLoading","_handleDropdownItemClick","_handleOnBlur","_handleOnFocus","_handleOnInput","_handleOnKeydown","_isFetching","contentRenderer","dataProviderInitialData","dropdownPortalElement","elementClasses","filteredItems","id","inputElementClasses","inputName","inputValue","placeholder","pollingInterval","requestInputMode","requestOptions","requestRetries","requestTimeout","unstable_content","useDefaultClasses","wrapInput"];
-exports.render.types = {"dataSource":"string|[]|list<?>|any","_dropdownWidth":"number","_handleDataChange":"any","_handleDataError":"any","_handleDataLoading":"any","_handleDropdownItemClick":"any","_handleOnBlur":"any","_handleOnFocus":"any","_handleOnInput":"any","_handleOnKeydown":"any","_isFetching":"bool","contentRenderer":"string","dataProviderInitialData":"[]|list<?>","dropdownPortalElement":"string","elementClasses":"string","filteredItems":"list<?>","id":"string","inputElementClasses":"string","inputName":"string","inputValue":"string","placeholder":"string","pollingInterval":"number","requestInputMode":"string","requestOptions":"[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]","requestRetries":"number","requestTimeout":"number","unstable_content":"html","useDefaultClasses":"bool","wrapInput":"bool"};
+exports.render.params = ["dataSource","_dropdownWidth","_expanded","_handleDataChange","_handleDataError","_handleDataLoading","_handleDropdownItemClick","_handleOnBlur","_handleOnFocus","_handleOnInput","_handleOnKeydown","_isFetching","contentRenderer","dataProviderInitialData","dropdownPortalElement","elementClasses","filteredItems","id","inputElementClasses","inputName","inputValue","placeholder","pollingInterval","requestInputMode","requestOptions","requestRetries","requestTimeout","unstable_content","useDefaultClasses","wrapInput"];
+exports.render.types = {"dataSource":"string|[]|list<?>|any","_dropdownWidth":"number","_expanded":"bool","_handleDataChange":"any","_handleDataError":"any","_handleDataLoading":"any","_handleDropdownItemClick":"any","_handleOnBlur":"any","_handleOnFocus":"any","_handleOnInput":"any","_handleOnKeydown":"any","_isFetching":"bool","contentRenderer":"string","dataProviderInitialData":"[]|list<?>","dropdownPortalElement":"string","elementClasses":"string","filteredItems":"list<?>","id":"string","inputElementClasses":"string","inputName":"string","inputValue":"string","placeholder":"string","pollingInterval":"number","requestInputMode":"string","requestOptions":"[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]","requestRetries":"number","requestTimeout":"number","unstable_content":"html","useDefaultClasses":"bool","wrapInput":"bool"};
 exports.input.params = ["_handleOnBlur","_handleOnFocus","_handleOnInput","_handleOnKeydown","_isFetching","inputElementClasses","inputName","inputValue","placeholder","wrapInput"];
 exports.input.types = {"_handleOnBlur":"any","_handleOnFocus":"any","_handleOnInput":"any","_handleOnKeydown":"any","_isFetching":"bool","inputElementClasses":"string","inputName":"string","inputValue":"string","placeholder":"string","wrapInput":"bool"};
-exports.dropdown.params = ["dataSource","_dropdownWidth","_handleDataChange","_handleDataError","_handleDataLoading","_handleDropdownItemClick","_handleOnKeydown","contentRenderer","dataProviderInitialData","dropdownPortalElement","filteredItems","inputValue","pollingInterval","requestInputMode","requestOptions","requestRetries","requestTimeout"];
-exports.dropdown.types = {"dataSource":"string|[]|list<?>|any","_dropdownWidth":"number","_handleDataChange":"any","_handleDataError":"any","_handleDataLoading":"any","_handleDropdownItemClick":"any","_handleOnKeydown":"any","contentRenderer":"string","dataProviderInitialData":"[]|list<?>","dropdownPortalElement":"string","filteredItems":"list<?>","inputValue":"string","pollingInterval":"number","requestInputMode":"string","requestOptions":"[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]","requestRetries":"number","requestTimeout":"number"};
+exports.dropdown.params = ["dataSource","_dropdownWidth","_expanded","_handleDataChange","_handleDataError","_handleDataLoading","_handleDropdownItemClick","_handleOnKeydown","contentRenderer","dataProviderInitialData","dropdownPortalElement","filteredItems","pollingInterval","requestInputMode","requestOptions","requestRetries","requestTimeout"];
+exports.dropdown.types = {"dataSource":"string|[]|list<?>|any","_dropdownWidth":"number","_expanded":"bool","_handleDataChange":"any","_handleDataError":"any","_handleDataLoading":"any","_handleDropdownItemClick":"any","_handleOnKeydown":"any","contentRenderer":"string","dataProviderInitialData":"[]|list<?>","dropdownPortalElement":"string","filteredItems":"list<?>","pollingInterval":"number","requestInputMode":"string","requestOptions":"[\n\t\tmethod: string,\n\t\tmode: string,\n\t\tcache: string,\n\t\tcredentials: string,\n\t\theaders: [],\n\t\tredirect: string,\n\t\treferrer: string,\n\t\tbody: []\n\t]","requestRetries":"number","requestTimeout":"number"};
 templates = exports;
@@ -606,0 +609,0 @@ return exports;

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

247723

increased by2.58%

Lines of code

3081

increased by2.73%

Worsened metrics

Dependency count

10

increased by11.11%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmetal-dom@^2.16.0

• Updatedclay-data-provider@^2.16.1

• Updatedclay-loading-indicator@^2.16.1

• Updatedclay-portal@^2.16.1