@instructure/ui-simple-select 10.26.1-snapshot-2 → 10.26.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +5 -18
  2. package/es/SimpleSelect/Group/index.js +2 -1
  3. package/es/SimpleSelect/Group/props.js +8 -1
  4. package/es/SimpleSelect/Option/index.js +2 -1
  5. package/es/SimpleSelect/Option/props.js +10 -1
  6. package/es/SimpleSelect/index.js +17 -21
  7. package/es/SimpleSelect/props.js +41 -1
  8. package/lib/SimpleSelect/Group/index.js +1 -0
  9. package/lib/SimpleSelect/Group/props.js +9 -1
  10. package/lib/SimpleSelect/Option/index.js +1 -0
  11. package/lib/SimpleSelect/Option/props.js +11 -1
  12. package/lib/SimpleSelect/index.js +16 -20
  13. package/lib/SimpleSelect/props.js +42 -1
  14. package/package.json +16 -13
  15. package/src/SimpleSelect/Group/index.tsx +2 -1
  16. package/src/SimpleSelect/Group/props.ts +16 -2
  17. package/src/SimpleSelect/Option/index.tsx +2 -1
  18. package/src/SimpleSelect/Option/props.ts +17 -2
  19. package/src/SimpleSelect/index.tsx +19 -26
  20. package/src/SimpleSelect/props.ts +46 -2
  21. package/tsconfig.build.json +2 -0
  22. package/tsconfig.build.tsbuildinfo +1 -1
  23. package/types/SimpleSelect/Group/index.d.ts +4 -0
  24. package/types/SimpleSelect/Group/index.d.ts.map +1 -1
  25. package/types/SimpleSelect/Group/props.d.ts +3 -2
  26. package/types/SimpleSelect/Group/props.d.ts.map +1 -1
  27. package/types/SimpleSelect/Option/index.d.ts +8 -0
  28. package/types/SimpleSelect/Option/index.d.ts.map +1 -1
  29. package/types/SimpleSelect/Option/props.d.ts +3 -2
  30. package/types/SimpleSelect/Option/props.d.ts.map +1 -1
  31. package/types/SimpleSelect/index.d.ts +26 -0
  32. package/types/SimpleSelect/index.d.ts.map +1 -1
  33. package/types/SimpleSelect/props.d.ts +3 -2
  34. package/types/SimpleSelect/props.d.ts.map +1 -1
@@ -22,15 +22,10 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import {
26
- isValidElement,
27
- ComponentElement,
28
- Component,
29
- Children,
30
- type ReactElement
31
- } from 'react'
25
+ import { isValidElement, ComponentElement, Component, Children } from 'react'
32
26
 
33
27
  import * as utils from '@instructure/ui-utils'
28
+ import { testable } from '@instructure/ui-testable'
34
29
  import {
35
30
  matchComponentTypes,
36
31
  passthroughProps,
@@ -52,7 +47,7 @@ import { Group } from './Group'
52
47
  import type { SimpleSelectGroupProps } from './Group/props'
53
48
 
54
49
  import type { SimpleSelectProps } from './props'
55
- import { allowedProps, SimpleSelectState } from './props'
50
+ import { allowedProps, propTypes, SimpleSelectState } from './props'
56
51
 
57
52
  type OptionChild = ComponentElement<SimpleSelectOptionProps, Option>
58
53
  type GroupChild = ComponentElement<SimpleSelectGroupProps, Group>
@@ -69,6 +64,7 @@ tags: form, field, dropdown
69
64
  ---
70
65
  **/
71
66
  @withDeterministicId()
67
+ @testable()
72
68
  class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
73
69
  static readonly componentId = 'SimpleSelect'
74
70
 
@@ -76,6 +72,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
76
72
  static Group = Group
77
73
 
78
74
  static allowedProps = allowedProps
75
+ static propTypes = propTypes
79
76
 
80
77
  static defaultProps = {
81
78
  size: 'medium',
@@ -146,7 +143,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
146
143
  const getValues = (children: SimpleSelectProps['children']) =>
147
144
  Children.map(children, (child) => {
148
145
  if (isValidElement(child)) {
149
- return (child as ReactElement<any>).props.value
146
+ return child.props.value
150
147
  }
151
148
  return null
152
149
  })
@@ -427,24 +424,21 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
427
424
  ...rest
428
425
  } = option.props
429
426
 
430
- 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)
427
+ const isDisabled = option.props.isDisabled
431
428
  const isSelected = id === this.state.selectedOptionId
432
429
  const isHighlighted = id === this.state.highlightedOptionId
433
430
 
434
431
  const getRenderLabel = (renderLabel: RenderSimpleSelectOptionLabel) => {
435
- if (
436
- typeof renderLabel === 'function' &&
432
+ return typeof renderLabel === 'function' &&
437
433
  !renderLabel?.prototype?.isReactComponent
438
- ) {
439
- return (renderLabel as any).bind(null, {
440
- id,
441
- isDisabled,
442
- isSelected,
443
- isHighlighted,
444
- children
445
- })
446
- }
447
- return renderLabel
434
+ ? (renderLabel as any).bind(null, {
435
+ id,
436
+ isDisabled,
437
+ isSelected,
438
+ isHighlighted,
439
+ children
440
+ })
441
+ : renderLabel
448
442
  }
449
443
 
450
444
  return (
@@ -452,9 +446,9 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
452
446
  id={id}
453
447
  value={value}
454
448
  key={option.key || id}
455
- isHighlighted={isHighlighted}
456
- isSelected={isSelected}
457
- isDisabled={isDisabled}
449
+ isHighlighted={id === this.state.highlightedOptionId}
450
+ isSelected={id === this.state.selectedOptionId}
451
+ isDisabled={option.props.isDisabled}
458
452
  renderBeforeLabel={getRenderLabel(renderBeforeLabel)}
459
453
  renderAfterLabel={getRenderLabel(renderAfterLabel)}
460
454
  {...passthroughProps(rest)}
@@ -547,7 +541,6 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
547
541
  isOptionContentAppliedToInput={this.props.isOptionContentAppliedToInput}
548
542
  layout={layout}
549
543
  {...passthroughProps(rest)}
550
- data-cid="SimpleSelect"
551
544
  >
552
545
  {this.renderChildren()}
553
546
  </Select>
@@ -23,11 +23,20 @@
23
23
  */
24
24
 
25
25
  import { InputHTMLAttributes } from 'react'
26
+ import PropTypes from 'prop-types'
27
+
28
+ import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
29
+ import { FormPropTypes } from '@instructure/ui-form-field'
30
+ import { PositionPropTypes } from '@instructure/ui-position'
31
+
32
+ import { Group } from './Group'
33
+ import { Option } from './Option'
26
34
 
27
35
  import type { FormMessage } from '@instructure/ui-form-field'
28
36
  import type {
29
37
  OtherHTMLAttributes,
30
- PickPropsWithExceptions
38
+ PickPropsWithExceptions,
39
+ PropValidators
31
40
  } from '@instructure/shared-types'
32
41
  import type {
33
42
  PlacementPropValues,
@@ -263,6 +272,41 @@ type SimpleSelectState = {
263
272
  selectedOptionId?: string
264
273
  }
265
274
 
275
+ const propTypes: PropValidators<PropKeys> = {
276
+ renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
277
+ // TODO: it was using the "controllable" util, in the TS migration mimic that behaviour
278
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
279
+ defaultValue: PropTypes.string,
280
+ id: PropTypes.string,
281
+ size: PropTypes.oneOf(['small', 'medium', 'large']),
282
+ assistiveText: PropTypes.string,
283
+ placeholder: PropTypes.string,
284
+ interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
285
+ isRequired: PropTypes.bool,
286
+ isInline: PropTypes.bool,
287
+ width: PropTypes.string,
288
+ visibleOptionsCount: PropTypes.number,
289
+ optionsMaxHeight: PropTypes.string,
290
+ optionsMaxWidth: PropTypes.string,
291
+ messages: PropTypes.arrayOf(FormPropTypes.message),
292
+ placement: PositionPropTypes.placement,
293
+ constrain: PositionPropTypes.constrain,
294
+ mountNode: PositionPropTypes.mountNode,
295
+ onChange: PropTypes.func,
296
+ onFocus: PropTypes.func,
297
+ onBlur: PropTypes.func,
298
+ onShowOptions: PropTypes.func,
299
+ onHideOptions: PropTypes.func,
300
+ inputRef: PropTypes.func,
301
+ listRef: PropTypes.func,
302
+ renderEmptyOption: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
303
+ renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
304
+ renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
305
+ children: ChildrenPropTypes.oneOf([Group, Option]),
306
+ isOptionContentAppliedToInput: PropTypes.bool,
307
+ layout: PropTypes.oneOf(['stacked', 'inline'])
308
+ }
309
+
266
310
  const allowedProps: AllowedPropKeys = [
267
311
  'renderLabel',
268
312
  'value',
@@ -297,4 +341,4 @@ const allowedProps: AllowedPropKeys = [
297
341
  ]
298
342
 
299
343
  export type { SimpleSelectProps, SimpleSelectState }
300
- export { allowedProps }
344
+ export { propTypes, allowedProps }
@@ -10,8 +10,10 @@
10
10
  { "path": "../console/tsconfig.build.json" },
11
11
  { "path": "../ui-form-field/tsconfig.build.json" },
12
12
  { "path": "../ui-position/tsconfig.build.json" },
13
+ { "path": "../ui-prop-types/tsconfig.build.json" },
13
14
  { "path": "../ui-react-utils/tsconfig.build.json" },
14
15
  { "path": "../ui-select/tsconfig.build.json" },
16
+ { "path": "../ui-testable/tsconfig.build.json" },
15
17
  { "path": "../ui-babel-preset/tsconfig.build.json" },
16
18
  { "path": "../ui-color-utils/tsconfig.build.json" },
17
19
  { "path": "../ui-icons/tsconfig.build.json" },