@instructure/ui-simple-select 10.26.1 → 11.0.0

package/src/SimpleSelect/index.tsx

@@ -22,10 +22,15 @@
  * SOFTWARE.
  */
 
-import { isValidElement, ComponentElement, Component, Children } from 'react'
+import {
+  isValidElement,
+  ComponentElement,
+  Component,
+  Children,
+  type ReactElement
+} from 'react'
 
 import * as utils from '@instructure/ui-utils'
-import { testable } from '@instructure/ui-testable'
 import {
   matchComponentTypes,
   passthroughProps,
@@ -47,7 +52,7 @@ import { Group } from './Group'
 import type { SimpleSelectGroupProps } from './Group/props'
 
 import type { SimpleSelectProps } from './props'
-import { allowedProps, propTypes, SimpleSelectState } from './props'
+import { allowedProps, SimpleSelectState } from './props'
 
 type OptionChild = ComponentElement<SimpleSelectOptionProps, Option>
 type GroupChild = ComponentElement<SimpleSelectGroupProps, Group>
@@ -64,7 +69,6 @@ tags: form, field, dropdown
 ---
 **/
 @withDeterministicId()
-@testable()
 class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
   static readonly componentId = 'SimpleSelect'
 
@@ -72,7 +76,6 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
   static Group = Group
 
   static allowedProps = allowedProps
-  static propTypes = propTypes
 
   static defaultProps = {
     size: 'medium',
@@ -143,7 +146,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
     const getValues = (children: SimpleSelectProps['children']) =>
       Children.map(children, (child) => {
         if (isValidElement(child)) {
-          return child.props.value
+          return (child as ReactElement<any>).props.value
         }
         return null
       })
@@ -424,21 +427,24 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
       ...rest
     } = option.props
 
-    const isDisabled = option.props.isDisabled
+    const isDisabled = option.props.isDisabled ?? false // after the react 19 upgrade `isDisabled` is undefined instead of defaulting to false if not specified (but only in vitest env for some reason)
     const isSelected = id === this.state.selectedOptionId
     const isHighlighted = id === this.state.highlightedOptionId
 
     const getRenderLabel = (renderLabel: RenderSimpleSelectOptionLabel) => {
-      return typeof renderLabel === 'function' &&
+      if (
+        typeof renderLabel === 'function' &&
         !renderLabel?.prototype?.isReactComponent
-        ? (renderLabel as any).bind(null, {
-            id,
-            isDisabled,
-            isSelected,
-            isHighlighted,
-            children
-          })
-        : renderLabel
+      ) {
+        return (renderLabel as any).bind(null, {
+          id,
+          isDisabled,
+          isSelected,
+          isHighlighted,
+          children
+        })
+      }
+      return renderLabel
     }
 
     return (
@@ -446,9 +452,9 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
         id={id}
         value={value}
         key={option.key || id}
-        isHighlighted={id === this.state.highlightedOptionId}
-        isSelected={id === this.state.selectedOptionId}
-        isDisabled={option.props.isDisabled}
+        isHighlighted={isHighlighted}
+        isSelected={isSelected}
+        isDisabled={isDisabled}
         renderBeforeLabel={getRenderLabel(renderBeforeLabel)}
         renderAfterLabel={getRenderLabel(renderAfterLabel)}
         {...passthroughProps(rest)}
@@ -541,6 +547,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
         isOptionContentAppliedToInput={this.props.isOptionContentAppliedToInput}
         layout={layout}
         {...passthroughProps(rest)}
+        data-cid="SimpleSelect"
       >
         {this.renderChildren()}
       </Select>

package/src/SimpleSelect/props.ts

@@ -23,20 +23,11 @@
  */
 
 import { InputHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
-import { FormPropTypes } from '@instructure/ui-form-field'
-import { PositionPropTypes } from '@instructure/ui-position'
-
-import { Group } from './Group'
-import { Option } from './Option'
 
 import type { FormMessage } from '@instructure/ui-form-field'
 import type {
   OtherHTMLAttributes,
-  PickPropsWithExceptions,
-  PropValidators
+  PickPropsWithExceptions
 } from '@instructure/shared-types'
 import type {
   PlacementPropValues,
@@ -272,41 +263,6 @@ type SimpleSelectState = {
   selectedOptionId?: string
 }
 
-const propTypes: PropValidators<PropKeys> = {
-  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  // TODO: it was using the "controllable" util, in the TS migration mimic that behaviour
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  defaultValue: PropTypes.string,
-  id: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  assistiveText: PropTypes.string,
-  placeholder: PropTypes.string,
-  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
-  isRequired: PropTypes.bool,
-  isInline: PropTypes.bool,
-  width: PropTypes.string,
-  visibleOptionsCount: PropTypes.number,
-  optionsMaxHeight: PropTypes.string,
-  optionsMaxWidth: PropTypes.string,
-  messages: PropTypes.arrayOf(FormPropTypes.message),
-  placement: PositionPropTypes.placement,
-  constrain: PositionPropTypes.constrain,
-  mountNode: PositionPropTypes.mountNode,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onShowOptions: PropTypes.func,
-  onHideOptions: PropTypes.func,
-  inputRef: PropTypes.func,
-  listRef: PropTypes.func,
-  renderEmptyOption: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  children: ChildrenPropTypes.oneOf([Group, Option]),
-  isOptionContentAppliedToInput: PropTypes.bool,
-  layout: PropTypes.oneOf(['stacked', 'inline'])
-}
-
 const allowedProps: AllowedPropKeys = [
   'renderLabel',
   'value',
@@ -341,4 +297,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { SimpleSelectProps, SimpleSelectState }
-export { propTypes, allowedProps }
+export { allowedProps }

package/tsconfig.build.json

@@ -10,10 +10,8 @@
     { "path": "../console/tsconfig.build.json" },
     { "path": "../ui-form-field/tsconfig.build.json" },
     { "path": "../ui-position/tsconfig.build.json" },
-    { "path": "../ui-prop-types/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-select/tsconfig.build.json" },
-    { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-babel-preset/tsconfig.build.json" },
     { "path": "../ui-color-utils/tsconfig.build.json" },
     { "path": "../ui-icons/tsconfig.build.json" },