carbon-addons-beta-react - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

cjs/components/Typeahead/Typeahead.js

@@ -49,4 +49,14 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Typeahead.__proto__ || Object.getPrototypeOf(Typeahead)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (evt) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Typeahead.__proto__ || Object.getPrototypeOf(Typeahead)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      isMenuClick: false
+    }, _this.handleChange = function (evt) {
       _this.props.onChange(evt);
+    }, _this.handleOnInputValueChange = function () {
+      if (_this.state.isMenuClick) {
+        _this.setState({ isMenuClick: false });
+      }
+    }, _this.handleOnClick = function () {
+      if (!_this.state.isMenuClick) {
+        _this.setState({ isMenuClick: true });
+      }
     }, _this.itemToString = function (item) {
@@ -63,5 +73,109 @@ return item ? item.label : '';
       return startsWith ? label.startsWith(value) : label.includes(value);
+    }, _this.renderMenuToggle = function (isOpen, getButtonProps) {
+      var iconMenuClass = (0, _classnames2.default)({
+        'bx--typeahead-menu-icon': true,
+        'bx--typeahead-menu-icon--active': isOpen
+      });
+
+      return _react2.default.createElement(
+        'button',
+        _extends({
+          className: 'bx--typeahead-menu'
+        }, getButtonProps({
+          'aria-label': isOpen ? 'close.menu' : 'open.menu',
+          onClick: _this.handleOnClick
+        })),
+        _react2.default.createElement(
+          'svg',
+          {
+            className: iconMenuClass,
+            width: '10',
+            height: '5',
+            viewBox: '0 0 10 5',
+            fillRule: 'evenodd'
+          },
+          _react2.default.createElement('path', { d: 'M10 0L5 5 0 0z' })
+        )
+      );
+    }, _this.renderClear = function (inputValue, clearSelection) {
+      if (!inputValue) {
+        return null;
+      }
+      return _react2.default.createElement(
+        'button',
+        {
+          onClick: clearSelection,
+          className: 'bx--typeahead-clear' },
+        _react2.default.createElement(
+          'svg',
+          {
+            className: 'bx--typeahead-clear-icon',
+            width: '16',
+            height: '16',
+            viewBox: '0 0 16 16',
+            fillRule: 'evenodd'
+          },
+          _react2.default.createElement('path', { d: 'M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z' })
+        )
+      );
+    }, _this.renderItems = function (_ref2) {
+      var items = _ref2.items,
+          isOpen = _ref2.isOpen,
+          inputValue = _ref2.inputValue,
+          getItemProps = _ref2.getItemProps,
+          itemToString = _ref2.itemToString,
+          highlightedIndex = _ref2.highlightedIndex,
+          selectedItem = _ref2.selectedItem,
+          startsWith = _ref2.startsWith;
+
+      var itemsClassName = (0, _classnames2.default)({
+        'bx--typeahead-items': true,
+        'bx--typeahead-items--expanded': isOpen
+      });
+      var children = items.filter(function (item) {
+        // If the menu is not open, we don't want to display any items
+        if (!isOpen) {
+          return false;
+        }
+
+        // If the render is trigged by a menu click, we should display all items
+        if (_this.state.isMenuClick) {
+          return true;
+        }
+
+        return _this.filterItems(inputValue, item, startsWith);
+      }).map(function (item, index) {
+        var itemClass = (0, _classnames2.default)({
+          'bx--typeahead__item': true,
+          'bx--typeahead__item--highlighted': highlightedIndex === index,
+          'bx--typeahead__item--active': selectedItem === item
+        });
+
+        return _react2.default.createElement(
+          'div',
+          _extends({}, getItemProps({ item: item }), {
+            key: item.value,
+            className: itemClass
+          }),
+          itemToString(item)
+        );
+      });
+
+      return _react2.default.createElement(
+        'div',
+        { className: itemsClassName },
+        children
+      );
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
+  // When a user is manipulating the input, we need to invalidate `isMenuClick`
+  // since we only want to display items related to the input.
+
+
+  // Invoked whenever a user clicks on the Menu Target. This should guarantee
+  // that `isMenuClick` is set to true in order to be used in the `filter`
+  // method for items so that all items are included in the menu dropdown.
+
+
   _createClass(Typeahead, [{
@@ -84,14 +198,15 @@ key: 'render',
           onChange: this.handleChange,
+          onInputValueChange: this.handleOnInputValueChange,
           itemToString: this.itemToString
         }, other),
-        function (_ref2) {
-          var getInputProps = _ref2.getInputProps,
-              getItemProps = _ref2.getItemProps,
-              getButtonProps = _ref2.getButtonProps,
-              itemToString = _ref2.itemToString,
-              isOpen = _ref2.isOpen,
-              inputValue = _ref2.inputValue,
-              selectedItem = _ref2.selectedItem,
-              highlightedIndex = _ref2.highlightedIndex,
-              clearSelection = _ref2.clearSelection;
+        function (_ref3) {
+          var getInputProps = _ref3.getInputProps,
+              getItemProps = _ref3.getItemProps,
+              getButtonProps = _ref3.getButtonProps,
+              itemToString = _ref3.itemToString,
+              isOpen = _ref3.isOpen,
+              inputValue = _ref3.inputValue,
+              selectedItem = _ref3.selectedItem,
+              highlightedIndex = _ref3.highlightedIndex,
+              clearSelection = _ref3.clearSelection;
 
@@ -105,7 +220,2 @@ var iconMenuClass = (0, _classnames2.default)({
           });
-          var itemsClassName = (0, _classnames2.default)({
-            'bx--typeahead-items': true,
-            'bx--typeahead-items--expanded': isOpen
-          });
-
           return _react2.default.createElement(
@@ -122,63 +232,17 @@ 'div',
                 id: id,
-                placeholder: placeholder
+                placeholder: placeholder,
+                onChange: _this2.handleOnInputValueChange
               }))),
-              inputValue && _react2.default.createElement(
-                'button',
-                {
-                  onClick: clearSelection,
-                  className: 'bx--typeahead-clear'
-                },
-                _react2.default.createElement(
-                  'svg',
-                  {
-                    className: iconClearClass,
-                    width: '16',
-                    height: '16',
-                    viewBox: '0 0 16 16',
-                    fillRule: 'evenodd'
-                  },
-                  _react2.default.createElement('path', { d: 'M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z' })
-                )
-              ),
-              _react2.default.createElement(
-                'button',
-                _extends({
-                  className: 'bx--typeahead-menu'
-                }, getButtonProps({
-                  'aria-label': isOpen ? 'close.menu' : 'open.menu'
-                })),
-                _react2.default.createElement(
-                  'svg',
-                  {
-                    className: iconMenuClass,
-                    width: '10',
-                    height: '5',
-                    viewBox: '0 0 10 5',
-                    fillRule: 'evenodd'
-                  },
-                  _react2.default.createElement('path', { d: 'M10 0L5 5 0 0z' })
-                )
-              ),
-              _react2.default.createElement(
-                'div',
-                { className: itemsClassName },
-                isOpen ? items.filter(function (item) {
-                  return _this2.filterItems(inputValue, item, startsWith);
-                }).map(function (item, index) {
-                  var itemClass = (0, _classnames2.default)({
-                    'bx--typeahead__item': true,
-                    'bx--typeahead__item--highlighted': highlightedIndex === index,
-                    'bx--typeahead__item--active': selectedItem === item
-                  });
-
-                  return _react2.default.createElement(
-                    'div',
-                    _extends({}, getItemProps({ item: item }), {
-                      key: item.value,
-                      className: itemClass
-                    }),
-                    itemToString(item)
-                  );
-                }) : null
-              )
+              _this2.renderClear(inputValue, clearSelection),
+              _this2.renderMenuToggle(isOpen, getButtonProps),
+              _this2.renderItems({
+                items: items,
+                isOpen: isOpen,
+                inputValue: inputValue,
+                getItemProps: getItemProps,
+                itemToString: itemToString,
+                highlightedIndex: highlightedIndex,
+                selectedItem: selectedItem,
+                startsWith: startsWith
+              })
             )
@@ -185,0 +249,0 @@ );

es/components/Typeahead/Typeahead.js

@@ -32,4 +32,14 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Typeahead.__proto__ || Object.getPrototypeOf(Typeahead)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (evt) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Typeahead.__proto__ || Object.getPrototypeOf(Typeahead)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      isMenuClick: false
+    }, _this.handleChange = function (evt) {
       _this.props.onChange(evt);
+    }, _this.handleOnInputValueChange = function () {
+      if (_this.state.isMenuClick) {
+        _this.setState({ isMenuClick: false });
+      }
+    }, _this.handleOnClick = function () {
+      if (!_this.state.isMenuClick) {
+        _this.setState({ isMenuClick: true });
+      }
     }, _this.itemToString = function (item) {
@@ -46,5 +56,109 @@ return item ? item.label : '';
       return startsWith ? label.startsWith(value) : label.includes(value);
+    }, _this.renderMenuToggle = function (isOpen, getButtonProps) {
+      var iconMenuClass = classNames({
+        'bx--typeahead-menu-icon': true,
+        'bx--typeahead-menu-icon--active': isOpen
+      });
+
+      return React.createElement(
+        'button',
+        _extends({
+          className: 'bx--typeahead-menu'
+        }, getButtonProps({
+          'aria-label': isOpen ? 'close.menu' : 'open.menu',
+          onClick: _this.handleOnClick
+        })),
+        React.createElement(
+          'svg',
+          {
+            className: iconMenuClass,
+            width: '10',
+            height: '5',
+            viewBox: '0 0 10 5',
+            fillRule: 'evenodd'
+          },
+          React.createElement('path', { d: 'M10 0L5 5 0 0z' })
+        )
+      );
+    }, _this.renderClear = function (inputValue, clearSelection) {
+      if (!inputValue) {
+        return null;
+      }
+      return React.createElement(
+        'button',
+        {
+          onClick: clearSelection,
+          className: 'bx--typeahead-clear' },
+        React.createElement(
+          'svg',
+          {
+            className: 'bx--typeahead-clear-icon',
+            width: '16',
+            height: '16',
+            viewBox: '0 0 16 16',
+            fillRule: 'evenodd'
+          },
+          React.createElement('path', { d: 'M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z' })
+        )
+      );
+    }, _this.renderItems = function (_ref2) {
+      var items = _ref2.items,
+          isOpen = _ref2.isOpen,
+          inputValue = _ref2.inputValue,
+          getItemProps = _ref2.getItemProps,
+          itemToString = _ref2.itemToString,
+          highlightedIndex = _ref2.highlightedIndex,
+          selectedItem = _ref2.selectedItem,
+          startsWith = _ref2.startsWith;
+
+      var itemsClassName = classNames({
+        'bx--typeahead-items': true,
+        'bx--typeahead-items--expanded': isOpen
+      });
+      var children = items.filter(function (item) {
+        // If the menu is not open, we don't want to display any items
+        if (!isOpen) {
+          return false;
+        }
+
+        // If the render is trigged by a menu click, we should display all items
+        if (_this.state.isMenuClick) {
+          return true;
+        }
+
+        return _this.filterItems(inputValue, item, startsWith);
+      }).map(function (item, index) {
+        var itemClass = classNames({
+          'bx--typeahead__item': true,
+          'bx--typeahead__item--highlighted': highlightedIndex === index,
+          'bx--typeahead__item--active': selectedItem === item
+        });
+
+        return React.createElement(
+          'div',
+          _extends({}, getItemProps({ item: item }), {
+            key: item.value,
+            className: itemClass
+          }),
+          itemToString(item)
+        );
+      });
+
+      return React.createElement(
+        'div',
+        { className: itemsClassName },
+        children
+      );
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
+  // When a user is manipulating the input, we need to invalidate `isMenuClick`
+  // since we only want to display items related to the input.
+
+
+  // Invoked whenever a user clicks on the Menu Target. This should guarantee
+  // that `isMenuClick` is set to true in order to be used in the `filter`
+  // method for items so that all items are included in the menu dropdown.
+
+
   _createClass(Typeahead, [{
@@ -67,14 +181,15 @@ key: 'render',
           onChange: this.handleChange,
+          onInputValueChange: this.handleOnInputValueChange,
           itemToString: this.itemToString
         }, other),
-        function (_ref2) {
-          var getInputProps = _ref2.getInputProps,
-              getItemProps = _ref2.getItemProps,
-              getButtonProps = _ref2.getButtonProps,
-              itemToString = _ref2.itemToString,
-              isOpen = _ref2.isOpen,
-              inputValue = _ref2.inputValue,
-              selectedItem = _ref2.selectedItem,
-              highlightedIndex = _ref2.highlightedIndex,
-              clearSelection = _ref2.clearSelection;
+        function (_ref3) {
+          var getInputProps = _ref3.getInputProps,
+              getItemProps = _ref3.getItemProps,
+              getButtonProps = _ref3.getButtonProps,
+              itemToString = _ref3.itemToString,
+              isOpen = _ref3.isOpen,
+              inputValue = _ref3.inputValue,
+              selectedItem = _ref3.selectedItem,
+              highlightedIndex = _ref3.highlightedIndex,
+              clearSelection = _ref3.clearSelection;
 
@@ -88,7 +203,2 @@ var iconMenuClass = classNames({
           });
-          var itemsClassName = classNames({
-            'bx--typeahead-items': true,
-            'bx--typeahead-items--expanded': isOpen
-          });
-
           return React.createElement(
@@ -105,63 +215,17 @@ 'div',
                 id: id,
-                placeholder: placeholder
+                placeholder: placeholder,
+                onChange: _this2.handleOnInputValueChange
               }))),
-              inputValue && React.createElement(
-                'button',
-                {
-                  onClick: clearSelection,
-                  className: 'bx--typeahead-clear'
-                },
-                React.createElement(
-                  'svg',
-                  {
-                    className: iconClearClass,
-                    width: '16',
-                    height: '16',
-                    viewBox: '0 0 16 16',
-                    fillRule: 'evenodd'
-                  },
-                  React.createElement('path', { d: 'M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z' })
-                )
-              ),
-              React.createElement(
-                'button',
-                _extends({
-                  className: 'bx--typeahead-menu'
-                }, getButtonProps({
-                  'aria-label': isOpen ? 'close.menu' : 'open.menu'
-                })),
-                React.createElement(
-                  'svg',
-                  {
-                    className: iconMenuClass,
-                    width: '10',
-                    height: '5',
-                    viewBox: '0 0 10 5',
-                    fillRule: 'evenodd'
-                  },
-                  React.createElement('path', { d: 'M10 0L5 5 0 0z' })
-                )
-              ),
-              React.createElement(
-                'div',
-                { className: itemsClassName },
-                isOpen ? items.filter(function (item) {
-                  return _this2.filterItems(inputValue, item, startsWith);
-                }).map(function (item, index) {
-                  var itemClass = classNames({
-                    'bx--typeahead__item': true,
-                    'bx--typeahead__item--highlighted': highlightedIndex === index,
-                    'bx--typeahead__item--active': selectedItem === item
-                  });
-
-                  return React.createElement(
-                    'div',
-                    _extends({}, getItemProps({ item: item }), {
-                      key: item.value,
-                      className: itemClass
-                    }),
-                    itemToString(item)
-                  );
-                }) : null
-              )
+              _this2.renderClear(inputValue, clearSelection),
+              _this2.renderMenuToggle(isOpen, getButtonProps),
+              _this2.renderItems({
+                items: items,
+                isOpen: isOpen,
+                inputValue: inputValue,
+                getItemProps: getItemProps,
+                itemToString: itemToString,
+                highlightedIndex: highlightedIndex,
+                selectedItem: selectedItem,
+                startsWith: startsWith
+              })
             )
@@ -168,0 +232,0 @@ );

package.json

 {
   "name": "carbon-addons-beta-react",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Beta components, to be considered for potential main library components",
@@ -5,0 +5,0 @@ "main": "cjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

27378

increased by16.05%

Lines of code

519

increased by27.52%

No dependency changes