@instructure/ui-options 8.26.2 → 8.26.4-snapshot-3

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 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-options
+
 ## [8.26.2](https://github.com/instructure/instructure-ui/compare/v8.26.1...v8.26.2) (2022-07-11)
 
 **Note:** Version bump only for package @instructure/ui-options

package/es/Options/Item/styles.js

@@ -39,7 +39,8 @@ const generateStyle = (componentTheme, props) => {
         hasContentBeforeLabel = props.renderBeforeLabel,
         hasContentAfterLabel = props.renderAfterLabel,
         beforeLabelContentVAlign = props.beforeLabelContentVAlign,
-        afterLabelContentVAlign = props.afterLabelContentVAlign;
+        afterLabelContentVAlign = props.afterLabelContentVAlign; // TODO if children are () => ReactNode this wont match anything
+
   const containsList = matchComponentTypes(children, ['Options']); // used for label and description too
 
   const variantVariants = {

package/lib/Options/Item/styles.js

@@ -47,7 +47,8 @@ const generateStyle = (componentTheme, props) => {
         hasContentBeforeLabel = props.renderBeforeLabel,
         hasContentAfterLabel = props.renderAfterLabel,
         beforeLabelContentVAlign = props.beforeLabelContentVAlign,
-        afterLabelContentVAlign = props.afterLabelContentVAlign;
+        afterLabelContentVAlign = props.afterLabelContentVAlign; // TODO if children are () => ReactNode this wont match anything
+
   const containsList = (0, _uiReactUtils.matchComponentTypes)(children, ['Options']); // used for label and description too
 
   const variantVariants = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "8.26.2",
+  "version": "8.26.4-snapshot-3",
   "description": "A view-only component for composing interactive lists and menus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,25 +23,25 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.26.2",
-    "@instructure/ui-color-utils": "8.26.2",
-    "@instructure/ui-test-locator": "8.26.2",
-    "@instructure/ui-test-utils": "8.26.2",
-    "@instructure/ui-themes": "8.26.2"
+    "@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"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.26.2",
-    "@instructure/shared-types": "8.26.2",
-    "@instructure/ui-icons": "8.26.2",
-    "@instructure/ui-prop-types": "8.26.2",
-    "@instructure/ui-react-utils": "8.26.2",
-    "@instructure/ui-testable": "8.26.2",
-    "@instructure/ui-view": "8.26.2",
+    "@instructure/emotion": "8.26.4-snapshot-3",
+    "@instructure/shared-types": "8.26.4-snapshot-3",
+    "@instructure/ui-icons": "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-testable": "8.26.4-snapshot-3",
+    "@instructure/ui-view": "8.26.4-snapshot-3",
     "prop-types": "^15"
   },
   "peerDependencies": {
-    "react": ">=16.8 <=17"
+    "react": ">=16.8 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/Options/Item/props.ts

@@ -22,20 +22,20 @@
  * SOFTWARE.
  */
 
-import React from 'react'
 import PropTypes from 'prop-types'
 
 import type {
   AsElementType,
   PropValidators,
   OptionsItemTheme,
-  OtherHTMLAttributes
+  OtherHTMLAttributes,
+  Renderable
 } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type OptionsItemRenderProps = {
-  children?: React.ReactNode | (() => React.ReactNode)
+  children?: Renderable
   /**
    * Element type to render as. Will be set to `<a>` if href is provided.
    */
@@ -60,16 +60,12 @@ type OptionsItemOwnProps = OptionsItemRenderProps & {
    * Content to render before the label
    * (if you pass a function, it has the `props` as its parameter)
    */
-  renderBeforeLabel?:
-    | React.ReactNode
-    | ((props: OptionsItemRenderProps) => React.ReactNode)
+  renderBeforeLabel?: Renderable<OptionsItemRenderProps>
   /**
    * Content to render after the label
    * (if you pass a function, it has the `props` as its parameter)
    */
-  renderAfterLabel?:
-    | React.ReactNode
-    | ((props: OptionsItemRenderProps) => React.ReactNode)
+  renderAfterLabel?: Renderable<OptionsItemRenderProps>
   /**
    * Sets the vAlign of renderBeforeLabel content
    */
@@ -81,7 +77,7 @@ type OptionsItemOwnProps = OptionsItemRenderProps & {
   /**
    * Additional "secondary" description text
    */
-  description?: React.ReactNode | (() => React.ReactNode)
+  description?: Renderable
   /**
    * The ARIA role of the description element
    */

package/src/Options/Item/styles.ts

@@ -26,6 +26,7 @@ import { matchComponentTypes } from '@instructure/ui-react-utils'
 
 import type { OptionsItemTheme } from '@instructure/shared-types'
 import type { OptionsItemProps, OptionsItemStyle } from './props'
+import { ReactNode } from 'react'
 
 /**
  * ---
@@ -49,8 +50,8 @@ const generateStyle = (
     beforeLabelContentVAlign,
     afterLabelContentVAlign
   } = props
-
-  const containsList = matchComponentTypes(children, ['Options'])
+  // TODO if children are () => ReactNode this wont match anything
+  const containsList = matchComponentTypes(children as ReactNode, ['Options'])
 
   // used for label and description too
   const variantVariants = {

package/src/Options/props.ts

@@ -34,6 +34,7 @@ import type {
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import { Renderable } from '@instructure/shared-types'
 
 type OptionsOwnProps = {
   /**
@@ -51,7 +52,7 @@ type OptionsOwnProps = {
   /**
    * Content to render as a label. Mostly for when the component is nested
    */
-  renderLabel?: React.ReactNode | (() => React.ReactNode)
+  renderLabel?: Renderable
 
   //TODO children has to be typed better
   //e.g.: ChildrenPropTypes.oneOf(['Options', 'Item', 'Separator']))