@instructure/ui-navigation 8.26.3 → 8.26.4-snapshot-6

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.26.4-snapshot-6](https://github.com/instructure/instructure-ui/compare/v8.26.3...v8.26.4-snapshot-6) (2022-07-21)
+
+
+### Features
+
+* support React 18 ([0a2bf0c](https://github.com/instructure/instructure-ui/commit/0a2bf0cdd4d8bcec6e42a7ccf28a787e4a35bc40))
+
+
+
+
+
 ## [8.26.3](https://github.com/instructure/instructure-ui/compare/v8.26.2...v8.26.3) (2022-07-14)
 
 **Note:** Version bump only for package @instructure/ui-navigation

package/package.json

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

package/src/AppNav/Item/index.tsx

@@ -35,6 +35,7 @@ import {
 import { testable } from '@instructure/ui-testable'
 
 import { View } from '@instructure/ui-view'
+import type { ViewOwnProps } from '@instructure/ui-view'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import type { ScreenReaderContentProps } from '@instructure/ui-a11y-content'
 
@@ -88,7 +89,7 @@ class Item extends Component<AppNavItemProps> {
     }
   }
 
-  handleClick = (e: React.MouseEvent<Element>) => {
+  handleClick = (e: React.MouseEvent<ViewOwnProps, MouseEvent>) => {
     const { isDisabled, onClick } = this.props
 
     if (isDisabled) {

package/src/AppNav/Item/props.ts

@@ -32,21 +32,23 @@ import type {
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { Cursor } from '@instructure/ui-prop-types'
 import React from 'react'
+import type { ViewOwnProps } from '@instructure/ui-view'
+import { Renderable } from '@instructure/shared-types'
 
 type AppNavItemOwnProps = {
   /**
    * The text to display. If the `icon` prop is used, label text must be wrapped
    * in `ScreenReaderContent`.
    */
-  renderLabel: React.ReactNode | (() => React.ReactNode)
+  renderLabel: Renderable
   /**
    * Content to display after the renderLabel text, such as a badge
    */
-  renderAfter?: React.ReactNode | (() => React.ReactNode)
+  renderAfter?: Renderable
   /**
    * The visual to display (ex. an Image, Logo, Avatar, or Icon)
    */
-  renderIcon?: React.ReactNode | (() => React.ReactNode)
+  renderIcon?: Renderable
   /**
    * If the item goes to a new page, pass an href
    */
@@ -54,7 +56,7 @@ type AppNavItemOwnProps = {
   /**
    * If the item does not go to a new page, pass an onClick
    */
-  onClick?: (event: React.MouseEvent<Element>) => void
+  onClick?: (event: React.MouseEvent<ViewOwnProps>) => void
   /**
    * Denotes which item is currently selected
    */

package/src/AppNav/props.ts

@@ -39,6 +39,7 @@ import type {
   AppNavTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
+import { Renderable } from '@instructure/shared-types'
 
 type AppNavOwnProps = {
   /**
@@ -53,12 +54,12 @@ type AppNavOwnProps = {
   /**
    * Content to display before the navigation items, such as a logo
    */
-  renderBeforeItems?: React.ReactNode | (() => React.ReactNode)
+  renderBeforeItems?: Renderable
   /**
    * Content to display after the navigation items, aligned to the far end
    * of the navigation
    */
-  renderAfterItems?: React.ReactNode | (() => React.ReactNode)
+  renderAfterItems?: Renderable
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
@@ -73,7 +74,7 @@ type AppNavOwnProps = {
    * Customize the text displayed in the menu trigger when links overflow
    * the overall nav width.
    */
-  renderTruncateLabel?: React.ReactNode | (() => React.ReactNode)
+  renderTruncateLabel?: Renderable
   /**
    * Called whenever the navigation items are updated or the size of
    * the navigation changes. Passes in the `visibleItemsCount` as