@instructure/ui-select 8.26.3-snapshot-0 → 8.26.4-snapshot-5

package/CHANGELOG.md

@@ -3,14 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.26.3-snapshot-0](https://github.com/instructure/instructure-ui/compare/v8.26.2...v8.26.3-snapshot-0) (2022-07-14)
+## [8.26.4-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.26.3...v8.26.4-snapshot-5) (2022-07-19)
 
-**Note:** Version bump only for package @instructure/ui-select
+
+### 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)
+
+### Bug Fixes
+
+- **ui-color-picker,ui-date-input,ui-date-time-input,ui-select,ui-simple-select,ui-text-input,ui-time-select:** before/after elements should inherit input color ([7daf257](https://github.com/instructure/instructure-ui/commit/7daf257a8ee491f84de2f00a56becd22636891e3))
+
 ## [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-select

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "8.26.3-snapshot-0",
+  "version": "8.26.4-snapshot-5",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,34 +23,34 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.26.3-snapshot-0",
-    "@instructure/ui-color-utils": "8.26.3-snapshot-0",
-    "@instructure/ui-test-locator": "8.26.3-snapshot-0",
-    "@instructure/ui-test-utils": "8.26.3-snapshot-0",
-    "@instructure/ui-themes": "8.26.3-snapshot-0"
+    "@instructure/ui-babel-preset": "8.26.4-snapshot-5",
+    "@instructure/ui-color-utils": "8.26.4-snapshot-5",
+    "@instructure/ui-test-locator": "8.26.4-snapshot-5",
+    "@instructure/ui-test-utils": "8.26.4-snapshot-5",
+    "@instructure/ui-themes": "8.26.4-snapshot-5"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.26.3-snapshot-0",
-    "@instructure/shared-types": "8.26.3-snapshot-0",
-    "@instructure/ui-dom-utils": "8.26.3-snapshot-0",
-    "@instructure/ui-form-field": "8.26.3-snapshot-0",
-    "@instructure/ui-icons": "8.26.3-snapshot-0",
-    "@instructure/ui-options": "8.26.3-snapshot-0",
-    "@instructure/ui-popover": "8.26.3-snapshot-0",
-    "@instructure/ui-position": "8.26.3-snapshot-0",
-    "@instructure/ui-prop-types": "8.26.3-snapshot-0",
-    "@instructure/ui-react-utils": "8.26.3-snapshot-0",
-    "@instructure/ui-selectable": "8.26.3-snapshot-0",
-    "@instructure/ui-testable": "8.26.3-snapshot-0",
-    "@instructure/ui-text-input": "8.26.3-snapshot-0",
-    "@instructure/ui-utils": "8.26.3-snapshot-0",
-    "@instructure/ui-view": "8.26.3-snapshot-0",
-    "@instructure/uid": "8.26.3-snapshot-0",
+    "@instructure/emotion": "8.26.4-snapshot-5",
+    "@instructure/shared-types": "8.26.4-snapshot-5",
+    "@instructure/ui-dom-utils": "8.26.4-snapshot-5",
+    "@instructure/ui-form-field": "8.26.4-snapshot-5",
+    "@instructure/ui-icons": "8.26.4-snapshot-5",
+    "@instructure/ui-options": "8.26.4-snapshot-5",
+    "@instructure/ui-popover": "8.26.4-snapshot-5",
+    "@instructure/ui-position": "8.26.4-snapshot-5",
+    "@instructure/ui-prop-types": "8.26.4-snapshot-5",
+    "@instructure/ui-react-utils": "8.26.4-snapshot-5",
+    "@instructure/ui-selectable": "8.26.4-snapshot-5",
+    "@instructure/ui-testable": "8.26.4-snapshot-5",
+    "@instructure/ui-text-input": "8.26.4-snapshot-5",
+    "@instructure/ui-utils": "8.26.4-snapshot-5",
+    "@instructure/ui-view": "8.26.4-snapshot-5",
+    "@instructure/uid": "8.26.4-snapshot-5",
     "prop-types": "^15"
   },
   "peerDependencies": {
-    "react": ">=16.8 <=17"
+    "react": ">=16.8 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/Select/Group/props.ts

@@ -29,14 +29,15 @@ import { Option } from '../Option'
 
 import type {
   OtherHTMLAttributes,
-  PropValidators
+  PropValidators,
+  Renderable
 } from '@instructure/shared-types'
 
 type SelectGroupOwnProps = {
   /**
    * The label associated with the group options.
    */
-  renderLabel: React.ReactNode | (() => React.ReactNode)
+  renderLabel: Renderable
   /**
    * Children of type `<SimpleSelect.Option />` that will be considered part of the group.
    */

package/src/Select/Option/props.ts

@@ -27,7 +27,8 @@ import PropTypes from 'prop-types'
 
 import type {
   OtherHTMLAttributes,
-  PropValidators
+  PropValidators,
+  Renderable
 } from '@instructure/shared-types'
 
 type OptionProps = {
@@ -53,9 +54,7 @@ type OptionProps = {
   children?: React.ReactNode
 }
 
-type RenderSelectOptionLabel =
-  | React.ReactNode
-  | ((args: OptionProps) => React.ReactNode)
+type RenderSelectOptionLabel = Renderable<OptionProps>
 
 type SelectOptionOwnProps = OptionProps & {
   /**

package/src/Select/index.tsx

@@ -352,7 +352,7 @@ class Select extends Component<SelectProps> {
       | ((_args: OptionsItemRenderProps) => React.ReactNode) => {
       return typeof renderOptionLabel === 'function' &&
         !renderOptionLabel?.prototype?.isReactComponent
-        ? renderOptionLabel.bind(null, {
+        ? (renderOptionLabel as any).bind(null, {
             id,
             isDisabled,
             isSelected,

package/src/Select/props.ts

@@ -45,6 +45,7 @@ import type {
   PositionMountNode
 } from '@instructure/ui-position'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import { Renderable } from '@instructure/shared-types'
 
 type SelectOwnProps = {
   /**
@@ -158,7 +159,7 @@ type PropsFromTextInput = {
   /**
    * The form field label.
    */
-  renderLabel: React.ReactNode | (() => React.ReactNode)
+  renderLabel: Renderable
 
   /**
    * The size of the text input.
@@ -220,13 +221,13 @@ type PropsFromTextInput = {
    * Content to display before the text input. This will commonly be an icon or
    * tags to show multiple selections.
    */
-  renderBeforeInput?: React.ReactNode | (() => React.ReactNode)
+  renderBeforeInput?: Renderable
 
   /**
    * Content to display after the text input. This content will replace the
    * default arrow icons.
    */
-  renderAfterInput?: React.ReactNode | (() => React.ReactNode)
+  renderAfterInput?: Renderable
 
   /**
    * Prevents the default behavior of wrapping the input and rendered content
@@ -261,7 +262,8 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type SelectProps = SelectOwnProps &
   WithStyleProps<SelectTheme, SelectStyle> &
-  OtherHTMLAttributes<SelectOwnProps, InputHTMLAttributes<SelectOwnProps>> & WithDeterministicIdProps
+  OtherHTMLAttributes<SelectOwnProps, InputHTMLAttributes<SelectOwnProps>> &
+  WithDeterministicIdProps
 
 type SelectStyle = ComponentStyle<'select' | 'icon' | 'assistiveText'>