@instructure/ui-navigation 8.25.1-snapshot-10 → 8.25.1-snapshot-13

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-13) (2022-06-22)
 
 **Note:** Version bump only for package @instructure/ui-navigation
 

package/es/AppNav/Item/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -44,51 +44,45 @@ id: AppNav.Item
 @module Item
 **/
 
-let Item = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class Item extends Component {
-  static displayName = "Item";
-  static componentId = 'AppNav.Item';
-  static allowedProps = allowedProps;
-  static propTypes = propTypes;
-  static defaultProps = {
-    children: null,
-    isSelected: false,
-    cursor: 'pointer',
-    isDisabled: false
-  };
-  ref = null;
+let Item = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class Item extends Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
 
-  componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    this.handleClick = e => {
+      const _this$props = this.props,
+            isDisabled = _this$props.isDisabled,
+            onClick = _this$props.onClick;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+      if (isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (typeof onClick === 'function') {
+        onClick(e);
+      }
+    };
   }
 
-  componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
 
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-  handleClick = e => {
-    const _this$props3 = this.props,
-          isDisabled = _this$props3.isDisabled,
-          onClick = _this$props3.onClick;
-
-    if (isDisabled) {
-      e.preventDefault();
-      e.stopPropagation();
-    } else if (typeof onClick === 'function') {
-      onClick(e);
-    }
-  };
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+  }
 
   render() {
     var _this$props$styles, _this$props$styles2;
@@ -125,6 +119,11 @@ let Item = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
     }, label), renderAfter && callRenderProp(renderAfter));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "Item", _class2.componentId = 'AppNav.Item', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  children: null,
+  isSelected: false,
+  cursor: 'pointer',
+  isDisabled: false
+}, _class2)) || _class) || _class);
 export default Item;
 export { Item };

package/es/AppNav/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -45,34 +45,88 @@ category: components
 ---
 @tsProps
 **/
-let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class AppNav extends Component {
-  static displayName = "AppNav";
-  static componentId = 'AppNav';
-  static allowedProps = allowedProps;
-  static propTypes = propTypes;
-  static defaultProps = {
-    children: null,
-    debounce: 300,
-    margin: '0',
-    renderTruncateLabel: () => 'More',
-    visibleItemsCount: 0
-  };
-  static Item = Item;
-  state = {
-    isMeasuring: false
-  };
-  ref = null;
-  _list = null;
-  _debounced;
-  _resizeListener;
+let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class AppNav extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      isMeasuring: false
+    };
+    this.ref = null;
+    this._list = null;
+    this._debounced = void 0;
+    this._resizeListener = void 0;
+
+    this.measureItems = () => {
+      var _this$props$styles;
+
+      const menuTriggerWidth = px((_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuTriggerWidth);
+      let visibleItemsCount = 0;
+
+      if (this._list) {
+        const _getBoundingClientRec = getBoundingClientRect(this._list),
+              navWidth = _getBoundingClientRec.width;
+
+        const itemWidths = Array.from(this._list.getElementsByTagName('li')).map(item => {
+          // Todo: if item's type isn't `unknown`, can remove `Element`
+          const _getBoundingClientRec2 = getBoundingClientRect(item),
+                width = _getBoundingClientRec2.width;
+
+          return width;
+        });
+        let currentWidth = 0;
+
+        for (let i = 0; i < itemWidths.length; i++) {
+          currentWidth += itemWidths[i];
+
+          if (currentWidth <= navWidth - menuTriggerWidth) {
+            visibleItemsCount++;
+          } else {
+            break;
+          }
+        }
+      }
+
+      return {
+        visibleItemsCount
+      };
+    };
+
+    this.handleResize = () => {
+      this.setState({
+        isMeasuring: true
+      }, () => {
+        const _this$measureItems = this.measureItems(),
+              visibleItemsCount = _this$measureItems.visibleItemsCount;
+
+        if (typeof this.props.onUpdate === 'function') {
+          this.props.onUpdate({
+            visibleItemsCount
+          });
+        }
+
+        this.setState({
+          isMeasuring: false
+        });
+      });
+    };
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
 
-    const _getBoundingClientRec = getBoundingClientRect(this._list),
-          origWidth = _getBoundingClientRec.width;
+    const _getBoundingClientRec3 = getBoundingClientRect(this._list),
+          origWidth = _getBoundingClientRec3.width;
 
     this._debounced = debounce(this.handleResize, this.props.debounce, {
       leading: true,
@@ -109,67 +163,6 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     }
   }
 
-  measureItems = () => {
-    var _this$props$styles;
-
-    const menuTriggerWidth = px((_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuTriggerWidth);
-    let visibleItemsCount = 0;
-
-    if (this._list) {
-      const _getBoundingClientRec2 = getBoundingClientRect(this._list),
-            navWidth = _getBoundingClientRec2.width;
-
-      const itemWidths = Array.from(this._list.getElementsByTagName('li')).map(item => {
-        // Todo: if item's type isn't `unknown`, can remove `Element`
-        const _getBoundingClientRec3 = getBoundingClientRect(item),
-              width = _getBoundingClientRec3.width;
-
-        return width;
-      });
-      let currentWidth = 0;
-
-      for (let i = 0; i < itemWidths.length; i++) {
-        currentWidth += itemWidths[i];
-
-        if (currentWidth <= navWidth - menuTriggerWidth) {
-          visibleItemsCount++;
-        } else {
-          break;
-        }
-      }
-    }
-
-    return {
-      visibleItemsCount
-    };
-  };
-  handleResize = () => {
-    this.setState({
-      isMeasuring: true
-    }, () => {
-      const _this$measureItems = this.measureItems(),
-            visibleItemsCount = _this$measureItems.visibleItemsCount;
-
-      if (typeof this.props.onUpdate === 'function') {
-        this.props.onUpdate({
-          visibleItemsCount
-        });
-      }
-
-      this.setState({
-        isMeasuring: false
-      });
-    });
-  };
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-
   renderListItem(item, isMenuTrigger, key) {
     var _this$props$styles2, _this$props$styles3;
 
@@ -225,6 +218,12 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     }), hiddenChildren.length > 0 && this.renderMenu(hiddenChildren)), renderAfterItems && jsx("span", null, renderAfterItems));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "AppNav", _class2.componentId = 'AppNav', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  children: null,
+  debounce: 300,
+  margin: '0',
+  renderTruncateLabel: () => 'More',
+  visibleItemsCount: 0
+}, _class2.Item = Item, _class2)) || _class) || _class);
 export { AppNav };
 export default AppNav;

package/es/Navigation/NavigationItem/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -42,25 +42,20 @@ id: Navigation.Item
 @tsProps
 **/
 
-let NavigationItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class NavigationItem extends Component {
-  static displayName = "NavigationItem";
-  static componentId = 'Navigation.Item';
-  static allowedProps = allowedProps;
-  static propTypes = propTypes;
-  static defaultProps = {
-    as: 'a',
-    selected: false,
-    minimized: false
-  };
-  ref = null;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
+let NavigationItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class NavigationItem extends Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
 
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -116,6 +111,10 @@ let NavigationItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
     }, link) : link;
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "NavigationItem", _class2.componentId = 'Navigation.Item', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  as: 'a',
+  selected: false,
+  minimized: false
+}, _class2)) || _class) || _class);
 export default NavigationItem;
 export { NavigationItem };

package/es/Navigation/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -50,22 +50,21 @@ category: components/deprecated
 **/
 
 
-let Navigation = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec3 = deprecated('9.0.0', null, 'No one uses <Navigation>, so we will deprecate it.'), _dec(_class = _dec2(_class = _dec3(_class = class Navigation extends Component {
-  static displayName = "Navigation";
-  static componentId = 'Navigation';
-  static allowedProps = allowedProps;
-  static propTypes = propTypes;
-  static defaultProps = {
-    children: null,
-    defaultMinimized: false,
-    // TODO we should investigate later if it used or not
-    onClick: function (_e) {}
-  };
-  static Item = NavigationItem;
-  ref = null;
-
+let Navigation = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec3 = deprecated('9.0.0', null, 'No one uses <Navigation>, so we will deprecate it.'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Navigation extends Component {
   constructor(props) {
     super(props);
+    this.ref = null;
+
+    this.handleNavToggle = event => {
+      if (!this.isControlled()) {
+        this.setState(navMinimized);
+      }
+
+      if (typeof this.props.onMinimized === 'function') {
+        this.props.onMinimized(event, !this.minimized);
+      }
+    };
+
     this.state = {
       minimized: this.isControlled(props) ? !!props.minimized : !!props.defaultMinimized
     };
@@ -100,16 +99,6 @@ let Navigation = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     return typeof props.minimized === 'boolean';
   }
 
-  handleNavToggle = event => {
-    if (!this.isControlled()) {
-      this.setState(navMinimized);
-    }
-
-    if (typeof this.props.onMinimized === 'function') {
-      this.props.onMinimized(event, !this.minimized);
-    }
-  };
-
   renderChildren() {
     return Children.map(this.props.children, child => {
       var _this$props$styles;
@@ -153,6 +142,11 @@ let Navigation = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     })));
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "Navigation", _class2.componentId = 'Navigation', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  children: null,
+  defaultMinimized: false,
+  // TODO we should investigate later if it used or not
+  onClick: function (_e) {}
+}, _class2.Item = NavigationItem, _class2)) || _class) || _class) || _class);
 export default Navigation;
 export { Navigation, NavigationItem };

package/lib/AppNav/Item/index.js

@@ -35,7 +35,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -45,52 +45,46 @@ id: AppNav.Item
 @tsProps
 @module Item
 **/
-let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class Item extends _react.Component {
-  static displayName = "Item";
-  static componentId = 'AppNav.Item';
-  static allowedProps = _props.allowedProps;
-  static propTypes = _props.propTypes;
-  static defaultProps = {
-    children: null,
-    isSelected: false,
-    cursor: 'pointer',
-    isDisabled: false
-  };
-  ref = null;
+let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class Item extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    this.handleClick = e => {
+      const _this$props = this.props,
+            isDisabled = _this$props.isDisabled,
+            onClick = _this$props.onClick;
+
+      if (isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (typeof onClick === 'function') {
+        onClick(e);
+      }
+    };
+  }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props2;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
+    var _this$props$makeStyle2, _this$props3;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-  handleClick = e => {
-    const _this$props3 = this.props,
-          isDisabled = _this$props3.isDisabled,
-          onClick = _this$props3.onClick;
-
-    if (isDisabled) {
-      e.preventDefault();
-      e.stopPropagation();
-    } else if (typeof onClick === 'function') {
-      onClick(e);
-    }
-  };
-
   render() {
     var _this$props$styles, _this$props$styles2;
 
@@ -126,7 +120,12 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     }, label), renderAfter && (0, _callRenderProp.callRenderProp)(renderAfter));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "Item", _class2.componentId = 'AppNav.Item', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  children: null,
+  isSelected: false,
+  cursor: 'pointer',
+  isDisabled: false
+}, _class2)) || _class) || _class);
 exports.Item = Item;
 var _default = Item;
 exports.default = _default;

package/lib/AppNav/index.js

@@ -35,7 +35,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -43,34 +43,88 @@ category: components
 ---
 @tsProps
 **/
-let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class AppNav extends _react.Component {
-  static displayName = "AppNav";
-  static componentId = 'AppNav';
-  static allowedProps = _props.allowedProps;
-  static propTypes = _props.propTypes;
-  static defaultProps = {
-    children: null,
-    debounce: 300,
-    margin: '0',
-    renderTruncateLabel: () => 'More',
-    visibleItemsCount: 0
-  };
-  static Item = _Item.Item;
-  state = {
-    isMeasuring: false
-  };
-  ref = null;
-  _list = null;
-  _debounced;
-  _resizeListener;
+let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class AppNav extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      isMeasuring: false
+    };
+    this.ref = null;
+    this._list = null;
+    this._debounced = void 0;
+    this._resizeListener = void 0;
+
+    this.measureItems = () => {
+      var _this$props$styles;
+
+      const menuTriggerWidth = (0, _px.px)((_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuTriggerWidth);
+      let visibleItemsCount = 0;
+
+      if (this._list) {
+        const _getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(this._list),
+              navWidth = _getBoundingClientRec.width;
+
+        const itemWidths = Array.from(this._list.getElementsByTagName('li')).map(item => {
+          // Todo: if item's type isn't `unknown`, can remove `Element`
+          const _getBoundingClientRec2 = (0, _getBoundingClientRect.getBoundingClientRect)(item),
+                width = _getBoundingClientRec2.width;
+
+          return width;
+        });
+        let currentWidth = 0;
+
+        for (let i = 0; i < itemWidths.length; i++) {
+          currentWidth += itemWidths[i];
+
+          if (currentWidth <= navWidth - menuTriggerWidth) {
+            visibleItemsCount++;
+          } else {
+            break;
+          }
+        }
+      }
+
+      return {
+        visibleItemsCount
+      };
+    };
+
+    this.handleResize = () => {
+      this.setState({
+        isMeasuring: true
+      }, () => {
+        const _this$measureItems = this.measureItems(),
+              visibleItemsCount = _this$measureItems.visibleItemsCount;
+
+        if (typeof this.props.onUpdate === 'function') {
+          this.props.onUpdate({
+            visibleItemsCount
+          });
+        }
+
+        this.setState({
+          isMeasuring: false
+        });
+      });
+    };
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
 
-    const _getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(this._list),
-          origWidth = _getBoundingClientRec.width;
+    const _getBoundingClientRec3 = (0, _getBoundingClientRect.getBoundingClientRect)(this._list),
+          origWidth = _getBoundingClientRec3.width;
 
     this._debounced = (0, _debounce.debounce)(this.handleResize, this.props.debounce, {
       leading: true,
@@ -107,67 +161,6 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     }
   }
 
-  measureItems = () => {
-    var _this$props$styles;
-
-    const menuTriggerWidth = (0, _px.px)((_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuTriggerWidth);
-    let visibleItemsCount = 0;
-
-    if (this._list) {
-      const _getBoundingClientRec2 = (0, _getBoundingClientRect.getBoundingClientRect)(this._list),
-            navWidth = _getBoundingClientRec2.width;
-
-      const itemWidths = Array.from(this._list.getElementsByTagName('li')).map(item => {
-        // Todo: if item's type isn't `unknown`, can remove `Element`
-        const _getBoundingClientRec3 = (0, _getBoundingClientRect.getBoundingClientRect)(item),
-              width = _getBoundingClientRec3.width;
-
-        return width;
-      });
-      let currentWidth = 0;
-
-      for (let i = 0; i < itemWidths.length; i++) {
-        currentWidth += itemWidths[i];
-
-        if (currentWidth <= navWidth - menuTriggerWidth) {
-          visibleItemsCount++;
-        } else {
-          break;
-        }
-      }
-    }
-
-    return {
-      visibleItemsCount
-    };
-  };
-  handleResize = () => {
-    this.setState({
-      isMeasuring: true
-    }, () => {
-      const _this$measureItems = this.measureItems(),
-            visibleItemsCount = _this$measureItems.visibleItemsCount;
-
-      if (typeof this.props.onUpdate === 'function') {
-        this.props.onUpdate({
-          visibleItemsCount
-        });
-      }
-
-      this.setState({
-        isMeasuring: false
-      });
-    });
-  };
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-
   renderListItem(item, isMenuTrigger, key) {
     var _this$props$styles2, _this$props$styles3;
 
@@ -227,7 +220,13 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     }), hiddenChildren.length > 0 && this.renderMenu(hiddenChildren)), renderAfterItems && (0, _emotion.jsx)("span", null, renderAfterItems));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "AppNav", _class2.componentId = 'AppNav', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  children: null,
+  debounce: 300,
+  margin: '0',
+  renderTruncateLabel: () => 'More',
+  visibleItemsCount: 0
+}, _class2.Item = _Item.Item, _class2)) || _class) || _class);
 exports.AppNav = AppNav;
 var _default = AppNav;
 exports.default = _default;

package/lib/Navigation/NavigationItem/index.js

@@ -27,7 +27,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -36,25 +36,20 @@ id: Navigation.Item
 ---
 @tsProps
 **/
-let NavigationItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class NavigationItem extends _react.Component {
-  static displayName = "NavigationItem";
-  static componentId = 'Navigation.Item';
-  static allowedProps = _props.allowedProps;
-  static propTypes = _props.propTypes;
-  static defaultProps = {
-    as: 'a',
-    selected: false,
-    minimized: false
-  };
-  ref = null;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
+let NavigationItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class NavigationItem extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -110,7 +105,11 @@ let NavigationItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     }, link) : link;
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "NavigationItem", _class2.componentId = 'Navigation.Item', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  as: 'a',
+  selected: false,
+  minimized: false
+}, _class2)) || _class) || _class);
 exports.NavigationItem = NavigationItem;
 var _default = NavigationItem;
 exports.default = _default;

package/lib/Navigation/index.js

@@ -40,7 +40,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 const navMinimized = _ref => {
   let minimized = _ref.minimized;
@@ -56,22 +56,21 @@ category: components/deprecated
 **/
 
 
-let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec3 = (0, _deprecated.deprecated)('9.0.0', null, 'No one uses <Navigation>, so we will deprecate it.'), _dec(_class = _dec2(_class = _dec3(_class = class Navigation extends _react.Component {
-  static displayName = "Navigation";
-  static componentId = 'Navigation';
-  static allowedProps = _props.allowedProps;
-  static propTypes = _props.propTypes;
-  static defaultProps = {
-    children: null,
-    defaultMinimized: false,
-    // TODO we should investigate later if it used or not
-    onClick: function (_e) {}
-  };
-  static Item = _NavigationItem.NavigationItem;
-  ref = null;
-
+let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec3 = (0, _deprecated.deprecated)('9.0.0', null, 'No one uses <Navigation>, so we will deprecate it.'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Navigation extends _react.Component {
   constructor(props) {
     super(props);
+    this.ref = null;
+
+    this.handleNavToggle = event => {
+      if (!this.isControlled()) {
+        this.setState(navMinimized);
+      }
+
+      if (typeof this.props.onMinimized === 'function') {
+        this.props.onMinimized(event, !this.minimized);
+      }
+    };
+
     this.state = {
       minimized: this.isControlled(props) ? !!props.minimized : !!props.defaultMinimized
     };
@@ -106,16 +105,6 @@ let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     return typeof props.minimized === 'boolean';
   }
 
-  handleNavToggle = event => {
-    if (!this.isControlled()) {
-      this.setState(navMinimized);
-    }
-
-    if (typeof this.props.onMinimized === 'function') {
-      this.props.onMinimized(event, !this.minimized);
-    }
-  };
-
   renderChildren() {
     return _react.Children.map(this.props.children, child => {
       var _this$props$styles;
@@ -159,7 +148,12 @@ let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     })));
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "Navigation", _class2.componentId = 'Navigation', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  children: null,
+  defaultMinimized: false,
+  // TODO we should investigate later if it used or not
+  onClick: function (_e) {}
+}, _class2.Item = _NavigationItem.NavigationItem, _class2)) || _class) || _class) || _class);
 exports.Navigation = Navigation;
 var _default = Navigation;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-navigation",
-  "version": "8.25.1-snapshot-10",
+  "version": "8.25.1-snapshot-13",
   "description": "Main and application level navigational components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,31 +23,31 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
-    "@instructure/ui-color-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-themes": "8.25.1-snapshot-10"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-themes": "8.25.1-snapshot-13"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.25.1-snapshot-10",
-    "@instructure/debounce": "8.25.1-snapshot-10",
-    "@instructure/emotion": "8.25.1-snapshot-10",
-    "@instructure/shared-types": "8.25.1-snapshot-10",
-    "@instructure/ui-a11y-content": "8.25.1-snapshot-10",
-    "@instructure/ui-a11y-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-badge": "8.25.1-snapshot-10",
-    "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-focusable": "8.25.1-snapshot-10",
-    "@instructure/ui-icons": "8.25.1-snapshot-10",
-    "@instructure/ui-menu": "8.25.1-snapshot-10",
-    "@instructure/ui-prop-types": "8.25.1-snapshot-10",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-testable": "8.25.1-snapshot-10",
-    "@instructure/ui-tooltip": "8.25.1-snapshot-10",
-    "@instructure/ui-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-view": "8.25.1-snapshot-10",
+    "@instructure/console": "8.25.1-snapshot-13",
+    "@instructure/debounce": "8.25.1-snapshot-13",
+    "@instructure/emotion": "8.25.1-snapshot-13",
+    "@instructure/shared-types": "8.25.1-snapshot-13",
+    "@instructure/ui-a11y-content": "8.25.1-snapshot-13",
+    "@instructure/ui-a11y-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-badge": "8.25.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-focusable": "8.25.1-snapshot-13",
+    "@instructure/ui-icons": "8.25.1-snapshot-13",
+    "@instructure/ui-menu": "8.25.1-snapshot-13",
+    "@instructure/ui-prop-types": "8.25.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-testable": "8.25.1-snapshot-13",
+    "@instructure/ui-tooltip": "8.25.1-snapshot-13",
+    "@instructure/ui-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-view": "8.25.1-snapshot-13",
     "prop-types": "^15"
   },
   "peerDependencies": {