react-autowhatever - npm Package Compare versions

Comparing version 4.3.0 to 5.0.0

dist/Autowhatever.js

@@ -50,7 +50,7 @@ 'use strict';
   itemsContainer: 'react-autowhatever__items-container',
+  itemsList: 'react-autowhatever__items-list',
   item: 'react-autowhatever__item',
   itemFocused: 'react-autowhatever__item--focused',
   sectionContainer: 'react-autowhatever__section-container',
-  sectionTitle: 'react-autowhatever__section-title',
-  sectionItemsContainer: 'react-autowhatever__section-items-container'
+  sectionTitle: 'react-autowhatever__section-title'
 };
@@ -66,2 +66,4 @@
 
+    _this.focusedItem = null;
+
     _this.setSectionsItems(props);
@@ -73,3 +75,4 @@ _this.setSectionIterator(props);
     _this.storeInputReference = _this.storeInputReference.bind(_this);
-    _this.storeItemsListReference = _this.storeItemsListReference.bind(_this);
+    _this.storeItemsContainerReference = _this.storeItemsContainerReference.bind(_this);
+    _this.onFocusedItemChange = _this.onFocusedItemChange.bind(_this);
     _this.getItemId = _this.getItemId.bind(_this);
@@ -80,2 +83,7 @@ return _this;
   _createClass(Autowhatever, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.ensureFocusedItemIsVisible();
+    }
+  }, {
     key: 'componentWillReceiveProps',
@@ -96,2 +104,7 @@ value: function componentWillReceiveProps(nextProps) {
   }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.ensureFocusedItemIsVisible();
+    }
+  }, {
     key: 'setSectionsItems',
@@ -131,13 +144,15 @@ value: function setSectionsItems(props) {
     }
-
-    // Needed only for testing
-
   }, {
-    key: 'storeItemsListReference',
-    value: function storeItemsListReference(itemsList) {
-      if (itemsList !== null) {
-        this.itemsList = itemsList;
+    key: 'storeItemsContainerReference',
+    value: function storeItemsContainerReference(itemsContainer) {
+      if (itemsContainer !== null) {
+        this.itemsContainer = itemsContainer;
       }
     }
   }, {
+    key: 'onFocusedItemChange',
+    value: function onFocusedItemChange(focusedItem) {
+      this.focusedItem = focusedItem;
+    }
+  }, {
     key: 'getItemId',
@@ -156,10 +171,2 @@ value: function getItemId(sectionIndex, itemIndex) {
   }, {
-    key: 'getItemsContainerId',
-    value: function getItemsContainerId() {
-      var id = this.props.id;
-
-
-      return 'react-autowhatever-' + id;
-    }
-  }, {
     key: 'renderSections',
@@ -186,39 +193,35 @@ value: function renderSections() {
 
-      return _react2.default.createElement(
-        'div',
-        theme('react-autowhatever-' + id + '-items-container', 'itemsContainer'),
-        items.map(function (section, sectionIndex) {
-          if (!shouldRenderSection(section)) {
-            return null;
-          }
+      return items.map(function (section, sectionIndex) {
+        if (!shouldRenderSection(section)) {
+          return null;
+        }
 
-          var keyPrefix = 'react-autowhatever-' + id + '-';
-          var sectionKeyPrefix = keyPrefix + 'section-' + sectionIndex + '-';
+        var keyPrefix = 'react-autowhatever-' + id + '-';
+        var sectionKeyPrefix = keyPrefix + 'section-' + sectionIndex + '-';
 
-          // `key` is provided by theme()
-          /* eslint-disable react/jsx-key */
-          return _react2.default.createElement(
-            'div',
-            theme(sectionKeyPrefix + 'container', 'sectionContainer'),
-            _react2.default.createElement(_SectionTitle2.default, {
-              section: section,
-              renderSectionTitle: renderSectionTitle,
-              theme: theme,
-              sectionKeyPrefix: sectionKeyPrefix }),
-            _react2.default.createElement(_ItemsList2.default, {
-              id: _this2.getItemsContainerId(),
-              items: _this2.sectionsItems[sectionIndex],
-              itemProps: itemProps,
-              renderItem: renderItem,
-              renderItemData: renderItemData,
-              sectionIndex: sectionIndex,
-              focusedItemIndex: focusedSectionIndex === sectionIndex ? focusedItemIndex : null,
-              getItemId: _this2.getItemId,
-              theme: theme,
-              keyPrefix: keyPrefix,
-              ref: _this2.storeItemsListReference })
-          );
-          /* eslint-enable react/jsx-key */
-        })
-      );
+        // `key` is provided by theme()
+        /* eslint-disable react/jsx-key */
+        return _react2.default.createElement(
+          'div',
+          theme(sectionKeyPrefix + 'container', 'sectionContainer'),
+          _react2.default.createElement(_SectionTitle2.default, {
+            section: section,
+            renderSectionTitle: renderSectionTitle,
+            theme: theme,
+            sectionKeyPrefix: sectionKeyPrefix }),
+          _react2.default.createElement(_ItemsList2.default, {
+            items: _this2.sectionsItems[sectionIndex],
+            itemProps: itemProps,
+            renderItem: renderItem,
+            renderItemData: renderItemData,
+            sectionIndex: sectionIndex,
+            focusedItemIndex: focusedSectionIndex === sectionIndex ? focusedItemIndex : null,
+            onFocusedItemChange: _this2.onFocusedItemChange,
+            getItemId: _this2.getItemId,
+            theme: theme,
+            keyPrefix: keyPrefix,
+            ref: _this2.storeItemsListReference })
+        );
+        /* eslint-enable react/jsx-key */
+      });
     }
@@ -246,3 +249,2 @@ }, {
       return _react2.default.createElement(_ItemsList2.default, {
-        id: this.getItemsContainerId(),
         items: items,
@@ -253,6 +255,6 @@ itemProps: itemProps,
         focusedItemIndex: focusedSectionIndex === null ? focusedItemIndex : null,
+        onFocusedItemChange: this.onFocusedItemChange,
         getItemId: this.getItemId,
         theme: theme,
-        keyPrefix: 'react-autowhatever-' + id + '-',
-        ref: this.storeItemsListReference });
+        keyPrefix: 'react-autowhatever-' + id + '-' });
     }
@@ -291,2 +293,30 @@ }, {
   }, {
+    key: 'ensureFocusedItemIsVisible',
+    value: function ensureFocusedItemIsVisible() {
+      var focusedItem = this.focusedItem;
+
+
+      if (!focusedItem) {
+        return;
+      }
+
+      var itemsContainer = this.itemsContainer;
+
+      var itemOffsetRelativeToContainer = focusedItem.offsetParent === itemsContainer ? focusedItem.offsetTop : focusedItem.offsetTop - itemsContainer.offsetTop;
+
+      var scrollTop = itemsContainer.scrollTop; // Top of the visible area
+
+      if (itemOffsetRelativeToContainer < scrollTop) {
+        // Item is off the top of the visible area
+        scrollTop = itemOffsetRelativeToContainer;
+      } else if (itemOffsetRelativeToContainer + focusedItem.offsetHeight > scrollTop + itemsContainer.offsetHeight) {
+        // Item is off the bottom of the visible area
+        scrollTop = itemOffsetRelativeToContainer + focusedItem.offsetHeight - itemsContainer.offsetHeight;
+      }
+
+      if (scrollTop !== itemsContainer.scrollTop) {
+        itemsContainer.scrollTop = scrollTop;
+      }
+    }
+  }, {
     key: 'render',
@@ -304,2 +334,4 @@ value: function render() {
       var ariaActivedescendant = this.getItemId(focusedSectionIndex, focusedItemIndex);
+      var containerProps = theme('react-autowhatever-' + id + '-container', 'container', isOpen && 'containerOpen');
+      var itemsContainerId = 'react-autowhatever-' + id;
       var inputProps = _extends({
@@ -311,4 +343,5 @@ type: 'text',
         'aria-autocomplete': 'list',
-        'aria-owns': this.getItemsContainerId(),
+        'aria-owns': itemsContainerId,
         'aria-expanded': isOpen,
+        'aria-haspopup': isOpen,
         'aria-activedescendant': ariaActivedescendant
@@ -319,8 +352,17 @@ }, theme('react-autowhatever-' + id + '-input', 'input'), this.props.inputProps, {
       });
+      var itemsContainerProps = _extends({
+        id: itemsContainerId
+      }, theme('react-autowhatever-' + id + '-items-container', 'itemsContainer'), {
+        ref: this.storeItemsContainerReference
+      });
 
       return _react2.default.createElement(
         'div',
-        theme('react-autowhatever-' + id + '-container', 'container', isOpen && 'containerOpen'),
+        containerProps,
         _react2.default.createElement('input', inputProps),
-        renderedItems
+        _react2.default.createElement(
+          'div',
+          itemsContainerProps,
+          renderedItems
+        )
       );
@@ -327,0 +369,0 @@ }

dist/ItemsList.js

@@ -39,3 +39,2 @@ 'use strict';
 
-    _this.storeItemsContainerReference = _this.storeItemsContainerReference.bind(_this);
     _this.storeFocusedItemReference = _this.storeFocusedItemReference.bind(_this);
@@ -46,7 +45,2 @@ return _this;
   _createClass(ItemsList, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.ensureFocusedItemIsVisible();
-    }
-  }, {
     key: 'shouldComponentUpdate',
@@ -57,47 +51,7 @@ value: function shouldComponentUpdate(nextProps) {
   }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      this.ensureFocusedItemIsVisible();
-    }
-  }, {
-    key: 'storeItemsContainerReference',
-    value: function storeItemsContainerReference(itemsContainer) {
-      if (itemsContainer !== null) {
-        this.itemsContainer = itemsContainer;
-      }
-    }
-  }, {
     key: 'storeFocusedItemReference',
     value: function storeFocusedItemReference(focusedItem) {
-      if (focusedItem !== null) {
-        this.focusedItem = focusedItem.item;
-      }
+      this.props.onFocusedItemChange(focusedItem === null ? null : focusedItem.item);
     }
   }, {
-    key: 'ensureFocusedItemIsVisible',
-    value: function ensureFocusedItemIsVisible() {
-      if (!this.focusedItem) {
-        return;
-      }
-
-      var focusedItem = this.focusedItem;
-      var itemsContainer = this.itemsContainer;
-
-      var itemOffsetRelativeToContainer = focusedItem.offsetParent === itemsContainer ? focusedItem.offsetTop : focusedItem.offsetTop - itemsContainer.offsetTop;
-
-      var scrollTop = itemsContainer.scrollTop; // Top of the visible area
-
-      if (itemOffsetRelativeToContainer < scrollTop) {
-        // Item is off the top of the visible area
-        scrollTop = itemOffsetRelativeToContainer;
-      } else if (itemOffsetRelativeToContainer + focusedItem.offsetHeight > scrollTop + itemsContainer.offsetHeight) {
-        // Item is off the bottom of the visible area
-        scrollTop = itemOffsetRelativeToContainer + focusedItem.offsetHeight - itemsContainer.offsetHeight;
-      }
-
-      if (scrollTop !== itemsContainer.scrollTop) {
-        itemsContainer.scrollTop = scrollTop;
-      }
-    }
-  }, {
     key: 'render',
@@ -108,3 +62,2 @@ value: function render() {
       var _props = this.props;
-      var id = _props.id;
       var items = _props.items;
@@ -121,3 +74,2 @@ var itemProps = _props.itemProps;
       var sectionPrefix = sectionIndex === null ? keyPrefix : keyPrefix + 'section-' + sectionIndex + '-';
-      var itemsContainerClass = sectionIndex === null ? 'itemsContainer' : 'sectionItemsContainer';
       var isItemPropsFunction = typeof itemProps === 'function';
@@ -127,7 +79,3 @@
         'ul',
-        _extends({
-          id: id,
-          ref: this.storeItemsContainerReference,
-          role: 'listbox'
-        }, theme(sectionPrefix + 'items-container', itemsContainerClass)),
+        _extends({ role: 'listbox' }, theme(sectionPrefix + 'items-list', 'itemsList')),
         items.map(function (item, itemIndex) {
@@ -163,3 +111,2 @@ var isFocused = itemIndex === focusedItemIndex;
 ItemsList.propTypes = {
-  id: _react.PropTypes.string.isRequired,
   items: _react.PropTypes.array.isRequired,
@@ -171,2 +118,3 @@ itemProps: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.func]),
   focusedItemIndex: _react.PropTypes.number,
+  onFocusedItemChange: _react.PropTypes.func.isRequired,
   getItemId: _react.PropTypes.func.isRequired,
@@ -173,0 +121,0 @@ theme: _react.PropTypes.func.isRequired,

package.json

 {
   "name": "react-autowhatever",
-  "version": "4.3.0",
+  "version": "5.0.0",
   "description": "Accessible rendering layer for Autosuggest and Autocomplete components",
@@ -5,0 +5,0 @@ "main": "dist/Autowhatever.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

35899

decreased by-0.65%

Lines of code

647

decreased by-1.37%

No dependency changes