@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.
- package/CHANGELOG.md +5 -18
- package/es/SimpleSelect/Group/index.js +2 -1
- package/es/SimpleSelect/Group/props.js +8 -1
- package/es/SimpleSelect/Option/index.js +2 -1
- package/es/SimpleSelect/Option/props.js +10 -1
- package/es/SimpleSelect/index.js +17 -21
- package/es/SimpleSelect/props.js +41 -1
- package/lib/SimpleSelect/Group/index.js +1 -0
- package/lib/SimpleSelect/Group/props.js +9 -1
- package/lib/SimpleSelect/Option/index.js +1 -0
- package/lib/SimpleSelect/Option/props.js +11 -1
- package/lib/SimpleSelect/index.js +16 -20
- package/lib/SimpleSelect/props.js +42 -1
- package/package.json +16 -13
- package/src/SimpleSelect/Group/index.tsx +2 -1
- package/src/SimpleSelect/Group/props.ts +16 -2
- package/src/SimpleSelect/Option/index.tsx +2 -1
- package/src/SimpleSelect/Option/props.ts +17 -2
- package/src/SimpleSelect/index.tsx +19 -26
- package/src/SimpleSelect/props.ts +46 -2
- package/tsconfig.build.json +2 -0
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/SimpleSelect/Group/index.d.ts +4 -0
- package/types/SimpleSelect/Group/index.d.ts.map +1 -1
- package/types/SimpleSelect/Group/props.d.ts +3 -2
- package/types/SimpleSelect/Group/props.d.ts.map +1 -1
- package/types/SimpleSelect/Option/index.d.ts +8 -0
- package/types/SimpleSelect/Option/index.d.ts.map +1 -1
- package/types/SimpleSelect/Option/props.d.ts +3 -2
- package/types/SimpleSelect/Option/props.d.ts.map +1 -1
- package/types/SimpleSelect/index.d.ts +26 -0
- package/types/SimpleSelect/index.d.ts.map +1 -1
- package/types/SimpleSelect/props.d.ts +3 -2
- 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
|
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
|
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
|
-
|
436
|
-
typeof renderLabel === 'function' &&
|
432
|
+
return typeof renderLabel === 'function' &&
|
437
433
|
!renderLabel?.prototype?.isReactComponent
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
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={
|
456
|
-
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 }
|
package/tsconfig.build.json
CHANGED
@@ -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" },
|