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

package/lib/Navigation/NavigationItem/NavigationItemLocator.js

@@ -34,7 +34,9 @@ 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(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
+// @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 NavigationItemLocator = (0, _locator.locator)(_index.NavigationItem.selector, {
   findTooltipContent: function () {
     return _TooltipLocator.TooltipLocator.findContent(...arguments);

package/lib/Navigation/NavigationItem/index.js

@@ -34,6 +34,7 @@ var _dec, _dec2, _class, _class2;
 parent: Navigation
 id: Navigation.Item
 ---
+@tsProps
 **/
 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() {
@@ -76,7 +77,8 @@ let NavigationItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
           icon = _this$props3.icon,
           label = _this$props3.label;
     const props = (0, _omitProps.omitProps)(this.props, NavigationItem.allowedProps);
-    return (0, _emotion.jsx)(ElementType, Object.assign({}, props, {
+    return (0, _emotion.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,
@@ -105,7 +107,6 @@ let NavigationItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
 
 }, _class2.displayName = "NavigationItem", _class2.componentId = 'Navigation.Item', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   as: 'a',
-  onClick: function (e, selected) {},
   selected: false,
   minimized: false
 }, _class2)) || _class) || _class);

package/lib/Navigation/NavigationItem/props.js

@@ -33,44 +33,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * The reference to the underlying HTML element
-   */
   elementRef: _propTypes.default.func,
-
-  /**
-   * The visual to display (ex. an Image, Logo, Avatar, or Icon)
-   */
   icon: _propTypes.default.node.isRequired,
-
-  /**
-   * The text to display  for the Navigation Link
-   */
   label: _propTypes.default.node.isRequired,
-
-  /**
-   * The element type to render as (will default to `<a>` if href is provided)
-   */
   as: _propTypes.default.elementType,
-
-  /**
-   * If the NavigationItem goes to a new page, pass an href
-   */
   href: _propTypes.default.string,
-
-  /**
-   * If the NavigationItem does not go to a new page pass an onClick
-   */
   onClick: _propTypes.default.func,
-
-  /**
-   * Denotes which NavigationItem is currently selected
-   */
   selected: _propTypes.default.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.default.bool
 };
 exports.propTypes = propTypes;

package/lib/Navigation/NavigationLocator.js

@@ -40,6 +40,7 @@ var _NavigationItemLocator = require("./NavigationItem/NavigationItemLocator");
  * 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 NavigationLocator = (0, _locator.locator)(_index.Navigation.selector, {
   findAllItems: function () {
     return _NavigationItemLocator.NavigationItemLocator.findAll(...arguments);

package/lib/Navigation/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -14,7 +16,7 @@ Object.defineProperty(exports, "NavigationItem", {
 });
 exports.default = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
@@ -50,12 +52,13 @@ const navMinimized = _ref => {
 ---
 category: components/deprecated
 ---
+@tsProps
 **/
 
 
 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();
+    super(props);
     this.ref = null;
 
     this.handleNavToggle = event => {
@@ -63,11 +66,13 @@ let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
         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
     };
   }
 
@@ -146,8 +151,8 @@ let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
 }, _class2.displayName = "Navigation", _class2.componentId = 'Navigation', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.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.NavigationItem, _class2)) || _class) || _class) || _class);
 exports.Navigation = Navigation;
 var _default = Navigation;

package/lib/Navigation/props.js

@@ -39,43 +39,16 @@ var _NavigationItem = require("./NavigationItem");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * children of type Navigation.Item
-   */
   children: _Children.Children.oneOf([_NavigationItem.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: (0, _controllable.controllable)(_propTypes.default.bool, 'onMinimized', 'defaultMinimized'),
-
-  /**
-   * Whether the `<Navigation />` is initially minimized (uncontrolled)
-   */
   defaultMinimized: _propTypes.default.bool,
   onMinimized: _propTypes.default.func,
-
-  /**
-   * Screen reader label for the main Navigation
-   */
   label: _propTypes.default.string.isRequired,
-
-  /**
-   * Screen reader label for the toggle button expanded/minimized state
-   */
   toggleLabel: _propTypes.default.shape({
     expandedLabel: _propTypes.default.string,
     minimizedLabel: _propTypes.default.string
   }).isRequired,
-
-  /**
-   * If the `<Navigation.Item>` goes to a new page, pass an href
-   */
   href: _propTypes.default.string,
-
-  /**
-   * If the `<Navigation.Item>` does not go to a new page pass an onClick
-   */
   onClick: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-navigation",
-  "version": "8.23.1-snapshot.9+11828d0b3",
+  "version": "8.24.1-snapshot.17+0604ec59c",
   "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.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-color-utils": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-test-locator": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-test-utils": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-themes": "8.23.1-snapshot.9+11828d0b3"
+    "@instructure/ui-babel-preset": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-color-utils": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-test-locator": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-test-utils": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-themes": "8.24.1-snapshot.17+0604ec59c"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/debounce": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/emotion": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/shared-types": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-a11y-content": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-a11y-utils": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-badge": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-dom-utils": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-focusable": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-icons": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-menu": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-prop-types": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-react-utils": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-testable": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-tooltip": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-utils": "8.23.1-snapshot.9+11828d0b3",
-    "@instructure/ui-view": "8.23.1-snapshot.9+11828d0b3",
+    "@instructure/console": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/debounce": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/emotion": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/shared-types": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-a11y-content": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-a11y-utils": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-badge": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-dom-utils": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-focusable": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-icons": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-menu": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-prop-types": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-react-utils": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-testable": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-tooltip": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-utils": "8.24.1-snapshot.17+0604ec59c",
+    "@instructure/ui-view": "8.24.1-snapshot.17+0604ec59c",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -57,5 +57,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "11828d0b32844a522d267e189c8bc52aa928843a"
+  "gitHead": "0604ec59c560ca2868fdac84d6f4948f92d38d5b"
 }

package/src/AppNav/Item/index.tsx

@@ -50,6 +50,7 @@ import { allowedProps, propTypes } from './props'
 parent: AppNav
 id: AppNav.Item
 ---
+@tsProps
 @module Item
 **/
 @withStyle(generateStyle, generateComponentTheme)
@@ -62,8 +63,6 @@ class Item extends Component<AppNavItemProps> {
 
   static defaultProps = {
     children: null,
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onClick: function (event) {},
     isSelected: false,
     cursor: 'pointer',
     isDisabled: false
@@ -89,8 +88,7 @@ class Item extends Component<AppNavItemProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleClick = (e) => {
+  handleClick = (e: React.MouseEvent<Element>) => {
     const { isDisabled, onClick } = this.props
 
     if (isDisabled) {
@@ -132,10 +130,6 @@ class Item extends Component<AppNavItemProps> {
         display="flex"
         position="relative"
         borderRadius="medium"
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'handleFocus' does not exist on type 'Ite... Remove this comment to see the full error message
-        onFocus={this.handleFocus}
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'handleBlur' does not exist on type 'Item... Remove this comment to see the full error message
-        onBlur={this.handleBlur}
         cursor={isDisabled ? 'not-allowed' : cursor}
         css={this.props.styles?.item}
       >

package/src/AppNav/Item/props.ts

@@ -31,72 +31,77 @@ import type {
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { Cursor } from '@instructure/ui-prop-types'
+import React from 'react'
 
 type AppNavItemOwnProps = {
-  renderLabel: React.ReactNode | ((...args: any[]) => any)
-  renderAfter?: React.ReactNode | ((...args: any[]) => any)
-  renderIcon?: React.ReactNode | ((...args: any[]) => any)
-  href?: string
-  onClick?: (...args: any[]) => any
-  isSelected?: boolean
-  elementRef?: (element: Element | null) => void
-  as?: AsElementType
-  cursor?: Cursor
-  isDisabled?: boolean
-}
-
-type PropKeys = keyof AppNavItemOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type AppNavItemProps = AppNavItemOwnProps &
-  WithStyleProps<AppNavItemTheme, AppNavItemStyle> &
-  OtherHTMLAttributes<AppNavItemOwnProps>
-
-type AppNavItemStyle = ComponentStyle<'item' | 'label'>
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * 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,
+  renderLabel: React.ReactNode | (() => React.ReactNode)
   /**
    * Content to display after the renderLabel text, such as a badge
    */
-  renderAfter: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderAfter?: React.ReactNode | (() => React.ReactNode)
   /**
    * The visual to display (ex. an Image, Logo, Avatar, or Icon)
    */
-  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderIcon?: React.ReactNode | (() => React.ReactNode)
   /**
    * If the item goes to a new page, pass an href
    */
-  href: PropTypes.string,
+  href?: string
   /**
    * If the item does not go to a new page, pass an onClick
    */
-  onClick: PropTypes.func,
+  onClick?: (event: React.MouseEvent<Element>) => void
   /**
    * Denotes which item is currently selected
    */
-  isSelected: PropTypes.bool,
+  isSelected?: boolean
   /**
    * provides a reference to the underlying focusable (`button` or `a`) element
    */
-  elementRef: PropTypes.func,
+  elementRef?: (element: Element | null) => void
   /**
    * The element type to render as (will default to `<a>` if href is provided)
    */
-  as: PropTypes.elementType,
+  as?: AsElementType
   /**
    * Specify the mouse cursor to use on :hover.
    * The `pointer` cursor is used by default.
    */
-  cursor: PropTypes.string,
+  cursor?: Cursor
   /**
    * Disables the link or button visually and functionally
    */
+  isDisabled?: boolean
+}
+
+type PropKeys = keyof AppNavItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type AppNavItemProps = AppNavItemOwnProps &
+  WithStyleProps<AppNavItemTheme, AppNavItemStyle> &
+  OtherHTMLAttributes<AppNavItemOwnProps>
+
+type AppNavItemStyle = ComponentStyle<'item' | 'label'>
+
+const propTypes: PropValidators<PropKeys> = {
+  renderLabel: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.string,
+    PropTypes.func
+  ]).isRequired,
+  renderAfter: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  isSelected: PropTypes.bool,
+  elementRef: PropTypes.func,
+  as: PropTypes.elementType,
+  cursor: PropTypes.string,
   isDisabled: PropTypes.bool
 }
 

package/src/AppNav/index.tsx

@@ -31,6 +31,7 @@ import { getBoundingClientRect } from '@instructure/ui-dom-utils'
 import { callRenderProp, omitProps } from '@instructure/ui-react-utils'
 import { px } from '@instructure/ui-utils'
 import { debounce } from '@instructure/debounce'
+import type { Debounced } from '@instructure/debounce'
 import { testable } from '@instructure/ui-testable'
 
 import { View } from '@instructure/ui-view'
@@ -41,11 +42,13 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import type { AppNavProps } from './props'
 import { allowedProps, propTypes } from './props'
+import { AppNavItemProps } from './Item/props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -59,10 +62,7 @@ class AppNav extends Component<AppNavProps> {
     children: null,
     debounce: 300,
     margin: '0',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el) => {},
     renderTruncateLabel: () => 'More',
-    onUpdate: () => {},
     visibleItemsCount: 0
   }
 
@@ -73,31 +73,29 @@ class AppNav extends Component<AppNavProps> {
   }
 
   ref: Element | null = null
-  _list = null
+  _list: HTMLUListElement | null = null
+  _debounced?: Debounced
+  _resizeListener?: ResizeObserver
 
   componentDidMount() {
     this.props.makeStyles?.()
     const { width: origWidth } = getBoundingClientRect(this._list)
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_debounced' does not exist on type 'AppN... Remove this comment to see the full error message
     this._debounced = debounce(this.handleResize, this.props.debounce, {
       leading: true,
       trailing: true
     })
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_resizeListener' does not exist on type ... Remove this comment to see the full error message
     this._resizeListener = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { width } = entry.contentRect
 
         if (origWidth !== width) {
-          // @ts-expect-error ts-migrate(2339) FIXME: Property '_debounced' does not exist on type 'AppN... Remove this comment to see the full error message
-          this._debounced()
+          this._debounced!()
         }
       }
     })
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_resizeListener' does not exist on type ... Remove this comment to see the full error message
-    this._resizeListener.observe(this._list)
+    this._resizeListener.observe(this._list!)
 
     this.handleResize()
   }
@@ -107,15 +105,11 @@ class AppNav extends Component<AppNavProps> {
   }
 
   componentWillUnmount() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_resizeListener' does not exist on type ... Remove this comment to see the full error message
     if (this._resizeListener) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_resizeListener' does not exist on type ... Remove this comment to see the full error message
       this._resizeListener.disconnect()
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_debounced' does not exist on type 'AppN... Remove this comment to see the full error message
     if (this._debounced) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_debounced' does not exist on type 'AppN... Remove this comment to see the full error message
       this._debounced.cancel()
     }
   }
@@ -127,7 +121,6 @@ class AppNav extends Component<AppNavProps> {
     if (this._list) {
       const { width: navWidth } = getBoundingClientRect(this._list)
 
-      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
       const itemWidths = Array.from(this._list.getElementsByTagName('li')).map(
         (item) => {
           // Todo: if item's type isn't `unknown`, can remove `Element`
@@ -156,8 +149,9 @@ class AppNav extends Component<AppNavProps> {
     this.setState({ isMeasuring: true }, () => {
       const { visibleItemsCount } = this.measureItems()
 
-      // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-      this.props.onUpdate({ visibleItemsCount })
+      if (typeof this.props.onUpdate === 'function') {
+        this.props.onUpdate({ visibleItemsCount })
+      }
       this.setState({ isMeasuring: false })
     })
   }
@@ -172,8 +166,7 @@ class AppNav extends Component<AppNavProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'item' implicitly has an 'any' type.
-  renderListItem(item, isMenuTrigger, key) {
+  renderListItem(item: React.ReactNode, isMenuTrigger: boolean, key?: number) {
     return (
       <li
         key={key}
@@ -187,20 +180,15 @@ class AppNav extends Component<AppNavProps> {
       </li>
     )
   }
-
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'items' implicitly has an 'any' type.
-  renderMenu(items) {
+  renderMenu(items: React.ComponentElement<AppNavItemProps, Item>[]) {
     const menu = (
       <Menu
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'handleMenuDismiss' does not exist on typ... Remove this comment to see the full error message
-        onDismiss={this.handleMenuDismiss} // TODO: remove when INSTUI-2262 is resolved
         trigger={
           <AppNav.Item
             renderLabel={callRenderProp(this.props.renderTruncateLabel)}
           />
         }
       >
-        {/* @ts-expect-error ts-migrate(7006) FIXME: Parameter 'item' implicitly has an 'any' type. */}
         {items.map((item, index) => {
           return (
             <Menu.Item
@@ -208,7 +196,7 @@ class AppNav extends Component<AppNavProps> {
               onClick={
                 item.props.onClick && !item.props.href
                   ? item.props.onClick
-                  : null
+                  : undefined
               }
               key={index}
             >
@@ -219,16 +207,12 @@ class AppNav extends Component<AppNavProps> {
       </Menu>
     )
 
-    return this.renderListItem(menu, true, null)
+    return this.renderListItem(menu, true)
   }
 
   render() {
-    const {
-      children,
-      visibleItemsCount,
-      screenReaderLabel,
-      margin
-    } = this.props
+    const { children, visibleItemsCount, screenReaderLabel, margin } =
+      this.props
 
     const passthroughProps = View.omitViewProps(
       omitProps(this.props, AppNav.allowedProps),
@@ -236,7 +220,10 @@ class AppNav extends Component<AppNavProps> {
     )
 
     const { isMeasuring } = this.state
-    const childrenArray = Children.toArray(children)
+    const childrenArray = Children.toArray(children) as React.ComponentElement<
+      AppNavItemProps,
+      Item
+    >[]
     const visibleChildren = isMeasuring
       ? childrenArray
       : childrenArray.splice(0, visibleItemsCount)
@@ -259,7 +246,6 @@ class AppNav extends Component<AppNavProps> {
       >
         {renderBeforeItems && <span>{renderBeforeItems}</span>}
         <ul
-          // @ts-expect-error ts-migrate(2322) FIXME: Type 'HTMLUListElement | null' is not assignable t... Remove this comment to see the full error message
           ref={(el) => (this._list = el)}
           css={this.props.styles?.list}
           aria-label={callRenderProp(screenReaderLabel)}