@instructure/ui-drilldown 8.26.3 → 8.26.4-snapshot-3

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-3](https://github.com/instructure/instructure-ui/compare/v8.26.3...v8.26.4-snapshot-3) (2022-07-18)
+
+
+### 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-drilldown

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drilldown",
-  "version": "8.26.3",
+  "version": "8.26.4-snapshot-3",
   "description": "A drilldown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,31 +24,31 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.26.3",
-    "@instructure/emotion": "8.26.3",
-    "@instructure/shared-types": "8.26.3",
-    "@instructure/ui-dom-utils": "8.26.3",
-    "@instructure/ui-icons": "8.26.3",
-    "@instructure/ui-options": "8.26.3",
-    "@instructure/ui-popover": "8.26.3",
-    "@instructure/ui-position": "8.26.3",
-    "@instructure/ui-prop-types": "8.26.3",
-    "@instructure/ui-react-utils": "8.26.3",
-    "@instructure/ui-selectable": "8.26.3",
-    "@instructure/ui-testable": "8.26.3",
-    "@instructure/ui-utils": "8.26.3",
-    "@instructure/ui-view": "8.26.3",
+    "@instructure/console": "8.26.4-snapshot-3",
+    "@instructure/emotion": "8.26.4-snapshot-3",
+    "@instructure/shared-types": "8.26.4-snapshot-3",
+    "@instructure/ui-dom-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-icons": "8.26.4-snapshot-3",
+    "@instructure/ui-options": "8.26.4-snapshot-3",
+    "@instructure/ui-popover": "8.26.4-snapshot-3",
+    "@instructure/ui-position": "8.26.4-snapshot-3",
+    "@instructure/ui-prop-types": "8.26.4-snapshot-3",
+    "@instructure/ui-react-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-selectable": "8.26.4-snapshot-3",
+    "@instructure/ui-testable": "8.26.4-snapshot-3",
+    "@instructure/ui-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-view": "8.26.4-snapshot-3",
     "prop-types": "^15"
   },
   "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-3",
+    "@instructure/ui-color-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-test-locator": "8.26.4-snapshot-3",
+    "@instructure/ui-test-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-themes": "8.26.4-snapshot-3"
   },
   "peerDependencies": {
-    "react": ">=16.8 <=17"
+    "react": ">=16.8 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/Drilldown/DrilldownOption/props.ts

@@ -32,9 +32,13 @@ import type {
   AsElementType
 } from '@instructure/shared-types'
 import type { WithStyleProps } from '@instructure/emotion'
-import type { OptionsItemProps } from '@instructure/ui-options'
+import type {
+  OptionsItemRenderProps,
+  OptionsItemProps
+} from '@instructure/ui-options'
 
 import Drilldown from '../index'
+import { Renderable } from '@instructure/shared-types'
 
 type DrilldownOptionValue = string | number | undefined
 
@@ -46,7 +50,7 @@ type RenderContentProps = {
   as: DrilldownOptionOwnProps['as']
   role: DrilldownOptionOwnProps['role']
   variant: DrilldownOptionVariant
-  vAlign: RenderContentVAlign
+  vAlign?: RenderContentVAlign
   isSelected: boolean
 }
 
@@ -99,27 +103,21 @@ type DrilldownOptionOwnProps = {
    *
    * If a function is provided, it has a `props` parameter.
    */
-  renderLabelInfo?:
-    | React.ReactNode
-    | ((props: RenderContentProps) => React.ReactNode)
+  renderLabelInfo?: Renderable<RenderContentProps>
 
   /**
    * Content to render before the label.
    *
    * If a function is provided, it has a `props` parameter.
    */
-  renderBeforeLabel?:
-    | React.ReactNode
-    | ((props: RenderContentProps) => React.ReactNode)
+  renderBeforeLabel?: Renderable<OptionsItemRenderProps>
 
   /**
    * Content to render after the label.
    *
    * If a function is provided, it has a `props` parameter.
    */
-  renderAfterLabel?:
-    | React.ReactNode
-    | ((props: RenderContentProps) => React.ReactNode)
+  renderAfterLabel?: Renderable<OptionsItemRenderProps>
 
   /**
    * Sets the vAlign of renderBeforeLabel content

package/src/Drilldown/DrilldownPage/props.ts

@@ -37,6 +37,7 @@ import DrilldownOption from '../DrilldownOption'
 import DrilldownSeparator from '../DrilldownSeparator'
 
 import type { OptionChild, SeparatorChild, GroupChild } from '../props'
+import { Renderable } from '@instructure/shared-types'
 
 type PageChildren = GroupChild | OptionChild | SeparatorChild
 
@@ -52,7 +53,7 @@ type DrilldownPageOwnProps = {
   /**
    * The title of the page displayed in the header
    */
-  renderTitle?: React.ReactNode | (() => React.ReactNode)
+  renderTitle?: Renderable
 
   /**
    * Label for the optional "action" option in the header (e.g.: "Select all")
@@ -66,8 +67,8 @@ type DrilldownPageOwnProps = {
    * is the title of the previous page.
    */
   renderBackButtonLabel?:
-  | React.ReactNode
-  | ((prevPageTitle?: React.ReactNode) => React.ReactNode)
+    | React.ReactNode
+    | ((prevPageTitle?: React.ReactNode) => React.ReactNode)
 
   /**
    * Callback fired when the "action" option is clicked in the header

package/src/Drilldown/index.tsx

@@ -24,7 +24,7 @@
 
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
-import React, { Component, ReactElement } from 'react'
+import React, { Component, ReactElement, ReactNode } from 'react'
 
 import { warn, error } from '@instructure/console'
 import { testable } from '@instructure/ui-testable'
@@ -1129,7 +1129,10 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
 
     const optionLabel = callRenderProp(children, {
       id,
-      variant: optionProps.variant,
+      variant: optionProps.variant as Exclude<
+        OptionsItemProps['variant'],
+        'selected'
+      >,
       isSelected
     })
 
@@ -1142,7 +1145,10 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
     }
 
     const renderLabelProps = {
-      variant: optionProps.variant,
+      variant: optionProps.variant as Exclude<
+        OptionsItemProps['variant'],
+        'selected'
+      >,
       vAlign: afterLabelContentVAlign,
       as,
       role: optionProps.role,
@@ -1154,19 +1160,17 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       typeof optionProps.renderBeforeLabel === 'function' &&
       !optionProps.renderBeforeLabel?.prototype?.isReactComponent
     ) {
-      optionProps.renderBeforeLabel = optionProps.renderBeforeLabel.bind(
-        null,
-        renderLabelProps
-      )
+      optionProps.renderBeforeLabel = (
+        optionProps.renderBeforeLabel as () => ReactNode
+      ).bind(null, renderLabelProps)
     }
     if (
       typeof optionProps.renderAfterLabel === 'function' &&
       !optionProps.renderAfterLabel?.prototype?.isReactComponent
     ) {
-      optionProps.renderAfterLabel = optionProps.renderAfterLabel.bind(
-        null,
-        renderLabelProps
-      )
+      optionProps.renderAfterLabel = (
+        optionProps.renderAfterLabel as () => ReactNode
+      ).bind(null, renderLabelProps)
     }
 
     const labelInfo =