@instructure/ui-navigation 8.23.1-snapshot.9 → 8.24.1-snapshot.17

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.24.0](https://github.com/instructure/instructure-ui/compare/v8.23.0...v8.24.0) (2022-04-26)
+
+**Note:** Version bump only for package @instructure/ui-navigation
+
 # [8.23.0](https://github.com/instructure/instructure-ui/compare/v8.22.0...v8.23.0) (2022-04-07)
 
 **Note:** Version bump only for package @instructure/ui-navigation

package/es/AppNav/AppNavLocator.js

@@ -23,7 +23,8 @@
  */
 import { locator } from '@instructure/ui-test-locator';
 import { AppNav } from './index';
-import { AppNavItemLocator } from './Item/AppNavItemLocator';
+import { AppNavItemLocator } from './Item/AppNavItemLocator'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const AppNavLocator = locator(AppNav.selector, {
   findAllItems: function () {
     return AppNavItemLocator.findAll(...arguments);

package/es/AppNav/Item/AppNavItemLocator.js

@@ -22,5 +22,6 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { Item } from './index';
+import { Item } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const AppNavItemLocator = locator(Item.selector);

package/es/AppNav/Item/index.js

@@ -40,6 +40,7 @@ import { allowedProps, propTypes } from './props';
 parent: AppNav
 id: AppNav.Item
 ---
+@tsProps
 @module Item
 **/
 
@@ -111,8 +112,6 @@ let Item = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       display: "flex",
       position: "relative",
       borderRadius: "medium",
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
       cursor: isDisabled ? 'not-allowed' : cursor,
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.item
     }), icon, labelIsForScreenReaders ? label : jsx("span", {
@@ -122,7 +121,6 @@ let Item = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
 
 }, _class2.displayName = "Item", _class2.componentId = 'AppNav.Item', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   children: null,
-  onClick: function (event) {},
   isSelected: false,
   cursor: 'pointer',
   isDisabled: false

package/es/AppNav/Item/props.js

@@ -23,56 +23,15 @@
  */
 import PropTypes from 'prop-types';
 const propTypes = {
-  /**
-   * The text to display. If the `icon` prop is used, label text must be wrapped
-   * in `ScreenReaderContent`.
-   */
-  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-
-  /**
-   * Content to display after the renderLabel text, such as a badge
-   */
+  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]).isRequired,
   renderAfter: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * The visual to display (ex. an Image, Logo, Avatar, or Icon)
-   */
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * If the item goes to a new page, pass an href
-   */
   href: PropTypes.string,
-
-  /**
-   * If the item does not go to a new page, pass an onClick
-   */
   onClick: PropTypes.func,
-
-  /**
-   * Denotes which item is currently selected
-   */
   isSelected: PropTypes.bool,
-
-  /**
-   * provides a reference to the underlying focusable (`button` or `a`) element
-   */
   elementRef: PropTypes.func,
-
-  /**
-   * The element type to render as (will default to `<a>` if href is provided)
-   */
   as: PropTypes.elementType,
-
-  /**
-   * Specify the mouse cursor to use on :hover.
-   * The `pointer` cursor is used by default.
-   */
   cursor: PropTypes.string,
-
-  /**
-   * Disables the link or button visually and functionally
-   */
   isDisabled: PropTypes.bool
 };
 const allowedProps = ['renderLabel', 'renderAfter', 'renderIcon', 'href', 'onClick', 'isSelected', 'elementRef', 'as', 'cursor', 'isDisabled'];

package/es/AppNav/index.js

@@ -38,12 +38,13 @@ import { Item } from './Item';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
+@tsProps
 **/
-
 let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class AppNav extends Component {
   constructor() {
     super(...arguments);
@@ -52,6 +53,8 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     };
     this.ref = null;
     this._list = null;
+    this._debounced = void 0;
+    this._resizeListener = void 0;
 
     this.measureItems = () => {
       var _this$props$styles;
@@ -95,9 +98,12 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
         const _this$measureItems = this.measureItems(),
               visibleItemsCount = _this$measureItems.visibleItemsCount;
 
-        this.props.onUpdate({
-          visibleItemsCount
-        });
+        if (typeof this.props.onUpdate === 'function') {
+          this.props.onUpdate({
+            visibleItemsCount
+          });
+        }
+
         this.setState({
           isMeasuring: false
         });
@@ -168,19 +174,17 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
 
   renderMenu(items) {
     const menu = jsx(Menu, {
-      onDismiss: this.handleMenuDismiss // TODO: remove when INSTUI-2262 is resolved
-      ,
       trigger: jsx(AppNav.Item, {
         renderLabel: callRenderProp(this.props.renderTruncateLabel)
       })
     }, items.map((item, index) => {
       return jsx(Menu.Item, {
         href: item.props.href ? item.props.href : void 0,
-        onClick: item.props.onClick && !item.props.href ? item.props.onClick : null,
+        onClick: item.props.onClick && !item.props.href ? item.props.onClick : void 0,
         key: index
       }, callRenderProp(item.props.renderLabel));
     }));
-    return this.renderListItem(menu, true, null);
+    return this.renderListItem(menu, true);
   }
 
   render() {
@@ -218,9 +222,7 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
   children: null,
   debounce: 300,
   margin: '0',
-  elementRef: el => {},
   renderTruncateLabel: () => 'More',
-  onUpdate: () => {},
   visibleItemsCount: 0
 }, _class2.Item = Item, _class2)) || _class) || _class);
 export { AppNav };

package/es/AppNav/props.js

@@ -26,61 +26,15 @@ import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 import { Item } from './Item';
 const propTypes = {
-  /**
-   * Screenreader label for the overall navigation
-   */
   screenReaderLabel: PropTypes.string.isRequired,
-
-  /**
-   * Only accepts `AppNav.Item` as children
-   */
   children: ChildrenPropTypes.oneOf([Item]),
-
-  /**
-   * The rate (in ms) the component responds to container resizing or
-   * an update to one of its child items
-   */
   debounce: PropTypes.number,
-
-  /**
-   * Content to display before the navigation items, such as a logo
-   */
   renderBeforeItems: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Content to display after the navigation items, aligned to the far end
-   * of the navigation
-   */
   renderAfterItems: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
-
-  /**
-   * Provides a reference to the underlying nav element
-   */
   elementRef: PropTypes.func,
-
-  /**
-   * Customize the text displayed in the menu trigger when links overflow
-   * the overall nav width.
-   */
   renderTruncateLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Called whenever the navigation items are updated or the size of
-   * the navigation changes. Passes in the `visibleItemsCount` as
-   * a parameter.
-   */
   onUpdate: PropTypes.func,
-
-  /**
-   * Sets the number of navigation items that are visible.
-   */
   visibleItemsCount: PropTypes.number
 };
 const allowedProps = ['screenReaderLabel', 'children', 'debounce', 'renderBeforeItems', 'renderAfterItems', 'margin', 'elementRef', 'renderTruncateLabel', 'onUpdate', 'visibleItemsCount'];

package/es/Navigation/NavigationItem/NavigationItemLocator.js

@@ -21,10 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { locator } from '@instructure/ui-test-locator'; // eslint-disable-next-line no-restricted-imports
+import { locator } from '@instructure/ui-test-locator'; // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
+// eslint-disable-next-line no-restricted-imports
 
 import { TooltipLocator } from '@instructure/ui-tooltip/es/Tooltip/TooltipLocator';
-import { NavigationItem } from './index';
+import { NavigationItem } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const NavigationItemLocator = locator(NavigationItem.selector, {
   findTooltipContent: function () {
     return TooltipLocator.findContent(...arguments);

package/es/Navigation/NavigationItem/index.js

@@ -39,6 +39,7 @@ import { allowedProps, propTypes } from './props';
 parent: Navigation
 id: Navigation.Item
 ---
+@tsProps
 **/
 
 let NavigationItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class NavigationItem extends Component {
@@ -82,7 +83,8 @@ let NavigationItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
           icon = _this$props3.icon,
           label = _this$props3.label;
     const props = omitProps(this.props, NavigationItem.allowedProps);
-    return jsx(ElementType, Object.assign({}, props, {
+    return jsx(ElementType // @ts-expect-error TODO: fix TS2590: Expression produces a union type that is too complex to represent.
+    , Object.assign({}, props, {
       href: href,
       onClick: onClick,
       ref: addRef ? this.handleRef : void 0,
@@ -111,7 +113,6 @@ let NavigationItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
 
 }, _class2.displayName = "NavigationItem", _class2.componentId = 'Navigation.Item', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   as: 'a',
-  onClick: function (e, selected) {},
   selected: false,
   minimized: false
 }, _class2)) || _class) || _class);

package/es/Navigation/NavigationItem/props.js

@@ -23,44 +23,13 @@
  */
 import PropTypes from 'prop-types';
 const propTypes = {
-  /**
-   * The reference to the underlying HTML element
-   */
   elementRef: PropTypes.func,
-
-  /**
-   * The visual to display (ex. an Image, Logo, Avatar, or Icon)
-   */
   icon: PropTypes.node.isRequired,
-
-  /**
-   * The text to display  for the Navigation Link
-   */
   label: PropTypes.node.isRequired,
-
-  /**
-   * The element type to render as (will default to `<a>` if href is provided)
-   */
   as: PropTypes.elementType,
-
-  /**
-   * If the NavigationItem goes to a new page, pass an href
-   */
   href: PropTypes.string,
-
-  /**
-   * If the NavigationItem does not go to a new page pass an onClick
-   */
   onClick: PropTypes.func,
-
-  /**
-   * Denotes which NavigationItem is currently selected
-   */
   selected: PropTypes.bool,
-
-  /**
-   * When minimized is set to true, the `<Navigation />` shows icons only while the text becomes a tooltip. When it is set to false, the `<Navigation />` shows text in addition to the icons
-   */
   minimized: PropTypes.bool
 };
 const allowedProps = ['elementRef', 'icon', 'label', 'as', 'href', 'onClick', 'selected', 'minimized'];

package/es/Navigation/NavigationLocator.js

@@ -24,7 +24,8 @@
 import { locator } from '@instructure/ui-test-locator';
 import { Navigation } from './index';
 import { NavigationItemLocator } from './NavigationItem/NavigationItemLocator';
-export { NavigationItemLocator };
+export { NavigationItemLocator }; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const NavigationLocator = locator(Navigation.selector, {
   findAllItems: function () {
     return NavigationItemLocator.findAll(...arguments);

package/es/Navigation/index.js

@@ -25,7 +25,7 @@ var _dec, _dec2, _dec3, _class, _class2;
  */
 
 /** @jsx jsx */
-import { Component, Children } from 'react';
+import React, { Component, Children } from 'react';
 import { testable } from '@instructure/ui-testable';
 import { deprecated, omitProps, safeCloneElement } from '@instructure/ui-react-utils';
 import { IconMoveStartLine } from '@instructure/ui-icons';
@@ -46,12 +46,13 @@ const navMinimized = _ref => {
 ---
 category: components/deprecated
 ---
+@tsProps
 **/
 
 
 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();
+    super(props);
     this.ref = null;
 
     this.handleNavToggle = event => {
@@ -59,11 +60,13 @@ let Navigation = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
         this.setState(navMinimized);
       }
 
-      this.props.onMinimized(event, !this.minimized);
+      if (typeof this.props.onMinimized === 'function') {
+        this.props.onMinimized(event, !this.minimized);
+      }
     };
 
     this.state = {
-      minimized: this.isControlled(props) ? props.minimized : !!props.defaultMinimized
+      minimized: this.isControlled(props) ? !!props.minimized : !!props.defaultMinimized
     };
   }
 
@@ -142,8 +145,8 @@ let Navigation = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
 }, _class2.displayName = "Navigation", _class2.componentId = 'Navigation', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   children: null,
   defaultMinimized: false,
-  onMinimized: function (event, minimized) {},
-  onClick: function (e) {}
+  // 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/es/Navigation/props.js

@@ -25,43 +25,16 @@ import PropTypes from 'prop-types';
 import { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { NavigationItem } from './NavigationItem';
 const propTypes = {
-  /**
-   * children of type Navigation.Item
-   */
   children: ChildrenPropTypes.oneOf([NavigationItem]),
-
-  /**
-   * When minimized is set to true, the `<Navigation />` shows icons only while the text becomes a tooltip. When it is set to false, the `<Navigation />` shows text in addition to the icons
-   */
   minimized: controllable(PropTypes.bool, 'onMinimized', 'defaultMinimized'),
-
-  /**
-   * Whether the `<Navigation />` is initially minimized (uncontrolled)
-   */
   defaultMinimized: PropTypes.bool,
   onMinimized: PropTypes.func,
-
-  /**
-   * Screen reader label for the main Navigation
-   */
   label: PropTypes.string.isRequired,
-
-  /**
-   * Screen reader label for the toggle button expanded/minimized state
-   */
   toggleLabel: PropTypes.shape({
     expandedLabel: PropTypes.string,
     minimizedLabel: PropTypes.string
   }).isRequired,
-
-  /**
-   * If the `<Navigation.Item>` goes to a new page, pass an href
-   */
   href: PropTypes.string,
-
-  /**
-   * If the `<Navigation.Item>` does not go to a new page pass an onClick
-   */
   onClick: PropTypes.func
 };
 const allowedProps = ['children', 'minimized', 'defaultMinimized', 'onMinimized', 'label', 'toggleLabel', 'href', 'onClick'];

package/lib/AppNav/AppNavLocator.js

@@ -34,6 +34,7 @@ var _AppNavItemLocator = require("./Item/AppNavItemLocator");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const AppNavLocator = (0, _locator.locator)(_index.AppNav.selector, {
   findAllItems: function () {
     return _AppNavItemLocator.AppNavItemLocator.findAll(...arguments);

package/lib/AppNav/Item/AppNavItemLocator.js

@@ -32,5 +32,6 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const AppNavItemLocator = (0, _locator.locator)(_index.Item.selector);
 exports.AppNavItemLocator = AppNavItemLocator;

package/lib/AppNav/Item/index.js

@@ -42,6 +42,7 @@ var _dec, _dec2, _class, _class2;
 parent: AppNav
 id: AppNav.Item
 ---
+@tsProps
 @module Item
 **/
 let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class Item extends _react.Component {
@@ -112,8 +113,6 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       display: "flex",
       position: "relative",
       borderRadius: "medium",
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
       cursor: isDisabled ? 'not-allowed' : cursor,
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.item
     }), icon, labelIsForScreenReaders ? label : (0, _emotion.jsx)("span", {
@@ -123,7 +122,6 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
 
 }, _class2.displayName = "Item", _class2.componentId = 'AppNav.Item', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   children: null,
-  onClick: function (event) {},
   isSelected: false,
   cursor: 'pointer',
   isDisabled: false

package/lib/AppNav/Item/props.js

@@ -33,56 +33,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * The text to display. If the `icon` prop is used, label text must be wrapped
-   * in `ScreenReaderContent`.
-   */
-  renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-
-  /**
-   * Content to display after the renderLabel text, such as a badge
-   */
+  renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string, _propTypes.default.func]).isRequired,
   renderAfter: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * The visual to display (ex. an Image, Logo, Avatar, or Icon)
-   */
   renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * If the item goes to a new page, pass an href
-   */
   href: _propTypes.default.string,
-
-  /**
-   * If the item does not go to a new page, pass an onClick
-   */
   onClick: _propTypes.default.func,
-
-  /**
-   * Denotes which item is currently selected
-   */
   isSelected: _propTypes.default.bool,
-
-  /**
-   * provides a reference to the underlying focusable (`button` or `a`) element
-   */
   elementRef: _propTypes.default.func,
-
-  /**
-   * The element type to render as (will default to `<a>` if href is provided)
-   */
   as: _propTypes.default.elementType,
-
-  /**
-   * Specify the mouse cursor to use on :hover.
-   * The `pointer` cursor is used by default.
-   */
   cursor: _propTypes.default.string,
-
-  /**
-   * Disables the link or button visually and functionally
-   */
   isDisabled: _propTypes.default.bool
 };
 exports.propTypes = propTypes;

package/lib/AppNav/index.js

@@ -41,6 +41,7 @@ var _dec, _dec2, _class, _class2;
 ---
 category: components
 ---
+@tsProps
 **/
 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() {
@@ -50,6 +51,8 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     };
     this.ref = null;
     this._list = null;
+    this._debounced = void 0;
+    this._resizeListener = void 0;
 
     this.measureItems = () => {
       var _this$props$styles;
@@ -93,9 +96,12 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
         const _this$measureItems = this.measureItems(),
               visibleItemsCount = _this$measureItems.visibleItemsCount;
 
-        this.props.onUpdate({
-          visibleItemsCount
-        });
+        if (typeof this.props.onUpdate === 'function') {
+          this.props.onUpdate({
+            visibleItemsCount
+          });
+        }
+
         this.setState({
           isMeasuring: false
         });
@@ -166,19 +172,17 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
 
   renderMenu(items) {
     const menu = (0, _emotion.jsx)(_Menu.Menu, {
-      onDismiss: this.handleMenuDismiss // TODO: remove when INSTUI-2262 is resolved
-      ,
       trigger: (0, _emotion.jsx)(AppNav.Item, {
         renderLabel: (0, _callRenderProp.callRenderProp)(this.props.renderTruncateLabel)
       })
     }, items.map((item, index) => {
       return (0, _emotion.jsx)(_Menu.Menu.Item, {
         href: item.props.href ? item.props.href : void 0,
-        onClick: item.props.onClick && !item.props.href ? item.props.onClick : null,
+        onClick: item.props.onClick && !item.props.href ? item.props.onClick : void 0,
         key: index
       }, (0, _callRenderProp.callRenderProp)(item.props.renderLabel));
     }));
-    return this.renderListItem(menu, true, null);
+    return this.renderListItem(menu, true);
   }
 
   render() {
@@ -220,9 +224,7 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   children: null,
   debounce: 300,
   margin: '0',
-  elementRef: el => {},
   renderTruncateLabel: () => 'More',
-  onUpdate: () => {},
   visibleItemsCount: 0
 }, _class2.Item = _Item.Item, _class2)) || _class) || _class);
 exports.AppNav = AppNav;

package/lib/AppNav/props.js

@@ -39,61 +39,15 @@ var _Item = require("./Item");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * Screenreader label for the overall navigation
-   */
   screenReaderLabel: _propTypes.default.string.isRequired,
-
-  /**
-   * Only accepts `AppNav.Item` as children
-   */
   children: _Children.Children.oneOf([_Item.Item]),
-
-  /**
-   * The rate (in ms) the component responds to container resizing or
-   * an update to one of its child items
-   */
   debounce: _propTypes.default.number,
-
-  /**
-   * Content to display before the navigation items, such as a logo
-   */
   renderBeforeItems: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Content to display after the navigation items, aligned to the far end
-   * of the navigation
-   */
   renderAfterItems: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: _emotion.ThemeablePropTypes.spacing,
-
-  /**
-   * Provides a reference to the underlying nav element
-   */
   elementRef: _propTypes.default.func,
-
-  /**
-   * Customize the text displayed in the menu trigger when links overflow
-   * the overall nav width.
-   */
   renderTruncateLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Called whenever the navigation items are updated or the size of
-   * the navigation changes. Passes in the `visibleItemsCount` as
-   * a parameter.
-   */
   onUpdate: _propTypes.default.func,
-
-  /**
-   * Sets the number of navigation items that are visible.
-   */
   visibleItemsCount: _propTypes.default.number
 };
 exports.propTypes = propTypes;