@instructure/ui-navigation 8.24.0 → 8.24.1-snapshot.19

package/src/AppNav/props.ts

@@ -41,15 +41,52 @@ import type {
 } from '@instructure/shared-types'
 
 type AppNavOwnProps = {
+  /**
+   * Screenreader label for the overall navigation
+   */
   screenReaderLabel: string
+  /**
+   * The rate (in ms) the component responds to container resizing or
+   * an update to one of its child items
+   */
   debounce?: number
-  renderBeforeItems?: React.ReactNode | ((...args: any[]) => any)
-  renderAfterItems?: React.ReactNode | ((...args: any[]) => any)
+  /**
+   * Content to display before the navigation items, such as a logo
+   */
+  renderBeforeItems?: React.ReactNode | (() => React.ReactNode)
+  /**
+   * Content to display after the navigation items, aligned to the far end
+   * of the navigation
+   */
+  renderAfterItems?: React.ReactNode | (() => React.ReactNode)
+  /**
+   * 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?: Spacing
+  /**
+   * Provides a reference to the underlying nav element
+   */
   elementRef?: (element: Element | null) => void
-  renderTruncateLabel?: React.ReactNode | ((...args: any[]) => any)
-  onUpdate?: (...args: any[]) => any
+  /**
+   * Customize the text displayed in the menu trigger when links overflow
+   * the overall nav width.
+   */
+  renderTruncateLabel?: React.ReactNode | (() => React.ReactNode)
+  /**
+   * Called whenever the navigation items are updated or the size of
+   * the navigation changes. Passes in the `visibleItemsCount` as
+   * a parameter.
+   */
+  onUpdate?: ({ visibleItemsCount }: { visibleItemsCount: number }) => void
+  /**
+   * Sets the number of navigation items that are visible.
+   */
   visibleItemsCount?: number
+  /**
+   * Only accepts `AppNav.Item` as children
+   */
   children?: React.ReactNode
 }
 
@@ -71,52 +108,15 @@ type AppNavStyle = ComponentStyle<
 >
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * 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
 }
 

package/src/Navigation/NavigationItem/index.tsx

@@ -40,6 +40,7 @@ import { allowedProps, propTypes } from './props'
 parent: Navigation
 id: Navigation.Item
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -51,8 +52,6 @@ class NavigationItem extends Component<NavigationItemProps> {
 
   static defaultProps = {
     as: 'a',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-    onClick: function (e, selected) {},
     selected: false,
     minimized: false
   } as const
@@ -83,7 +82,6 @@ class NavigationItem extends Component<NavigationItemProps> {
     const props = omitProps(this.props, NavigationItem.allowedProps)
 
     return (
-      //@ts-expect-error TODO: INSTUI-3245
       <ElementType
         // @ts-expect-error TODO: fix TS2590: Expression produces a union type that is too complex to represent.
         {...props}
@@ -91,7 +89,7 @@ class NavigationItem extends Component<NavigationItemProps> {
         onClick={onClick}
         ref={addRef ? this.handleRef : undefined}
         css={this.props.styles?.navigationItem}
-        aria-label={this.props.minimized ? label : undefined}
+        aria-label={this.props.minimized ? (label as string) : undefined}
       >
         <div css={this.props.styles?.icon} aria-hidden="true">
           {icon}

package/src/Navigation/NavigationItem/props.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import PropTypes from 'prop-types'
-
+import React from 'react'
 import type {
   AsElementType,
   PropValidators,
@@ -32,13 +32,37 @@ import type {
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type NavigationItemOwnProps = {
+  /**
+   * The reference to the underlying HTML element
+   */
   elementRef?: (el: Element | null) => void
+  /**
+   * The visual to display (ex. an Image, Logo, Avatar, or Icon)
+   */
   icon: React.ReactNode
+  /**
+   * The text to display  for the Navigation Link
+   */
   label: React.ReactNode
+  /**
+   * The element type to render as (will default to `<a>` if href is provided)
+   */
   as?: AsElementType
+  /**
+   * If the NavigationItem goes to a new page, pass an href
+   */
   href?: string
-  onClick?: (...args: any[]) => any
+  /**
+   * If the NavigationItem does not go to a new page pass an onClick
+   */
+  onClick?: (event: React.MouseEvent) => void
+  /**
+   * Denotes which NavigationItem is currently selected
+   */
   selected?: boolean
+  /**
+   * 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?: boolean
 }
 
@@ -53,37 +77,13 @@ type NavigationItemProps = NavigationItemOwnProps &
 type NavigationItemStyle = ComponentStyle<'navigationItem' | 'icon' | 'label'>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * 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
 }
 

package/src/Navigation/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 /** @jsx jsx */
-import { Component, Children, ReactElement } from 'react'
+import React, { Component, Children, ReactElement } from 'react'
 
 import { testable } from '@instructure/ui-testable'
 
@@ -42,13 +42,15 @@ import generateComponentTheme from './theme'
 import type { NavigationProps, NavigationState } from './props'
 import { allowedProps, propTypes } from './props'
 
-// @ts-expect-error ts-migrate(7031) FIXME: Binding element 'minimized' implicitly has an 'any... Remove this comment to see the full error message
-const navMinimized = ({ minimized }) => ({ minimized: !minimized })
+const navMinimized = ({ minimized }: { minimized: boolean }) => ({
+  minimized: !minimized
+})
 
 /**
 ---
 category: components/deprecated
 ---
+@tsProps
 **/
 
 @withStyle(generateStyle, generateComponentTheme)
@@ -63,24 +65,20 @@ class Navigation extends Component<NavigationProps, NavigationState> {
   static defaultProps = {
     children: null,
     defaultMinimized: false,
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onMinimized: function (event, minimized) {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-    onClick: function (e) {}
+    // TODO we should investigate later if it used or not
+    onClick: function (_e: React.MouseEvent) {}
   }
 
   static Item = NavigationItem
 
   ref: Element | null = null
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
-    // @ts-expect-error ts-migrate(2554) FIXME: Expected 1-2 arguments, but got 0.
-    super()
+  constructor(props: NavigationProps) {
+    super(props)
 
     this.state = {
       minimized: this.isControlled(props)
-        ? props.minimized
+        ? !!props.minimized
         : !!props.defaultMinimized
     }
   }
@@ -104,14 +102,13 @@ class Navigation extends Component<NavigationProps, NavigationState> {
     return typeof props.minimized === 'boolean'
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleNavToggle = (event) => {
+  handleNavToggle = (event: React.SyntheticEvent) => {
     if (!this.isControlled()) {
       this.setState(navMinimized)
     }
-
-    // @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.onMinimized(event, !this.minimized)
+    if (typeof this.props.onMinimized === 'function') {
+      this.props.onMinimized(event, !this.minimized)
+    }
   }
 
   renderChildren() {

package/src/Navigation/props.ts

@@ -39,16 +39,37 @@ import type {
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type NavigationOwnProps = {
-  minimized?: any // TODO: controllable(PropTypes.bool, 'onMinimized', 'defaultMinimized')
+  /**
+   * 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?: boolean
+  /**
+   * Whether the `<Navigation />` is initially minimized (uncontrolled)
+   */
   defaultMinimized?: boolean
-  onMinimized?: (...args: any[]) => any
+  onMinimized?: (event: React.SyntheticEvent, minimized: boolean) => void
+  /**
+   * Screen reader label for the main Navigation
+   */
   label: string
+  /**
+   * Screen reader label for the toggle button expanded/minimized state
+   */
   toggleLabel: {
     expandedLabel?: string
     minimizedLabel?: string
   }
+  /**
+   * If the `<Navigation.Item>` goes to a new page, pass an href
+   */
   href?: string
-  onClick?: (...args: any[]) => any
+  /**
+   * If the `<Navigation.Item>` does not go to a new page pass an onClick
+   */
+  onClick?: (event: React.MouseEvent) => void
+  /**
+   * children of type Navigation.Item
+   */
   children?: React.ReactNode
 }
 
@@ -69,37 +90,16 @@ type NavigationStyle = ComponentStyle<
 >
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * 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
 }