@instructure/ui-select 11.7.7-snapshot-0 → 11.7.7-snapshot-3
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 +3 -4
- package/es/Select/v2/index.js +5 -3
- package/lib/Select/v2/index.js +5 -3
- package/package.json +19 -19
- package/src/Select/v2/index.tsx +8 -10
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Select/v2/index.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,12 +3,11 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [11.7.7-snapshot-
|
|
7
|
-
|
|
8
|
-
**Note:** Version bump only for package @instructure/ui-select
|
|
9
|
-
|
|
6
|
+
## [11.7.7-snapshot-3](https://github.com/instructure/instructure-ui/compare/v11.7.6...v11.7.7-snapshot-3) (2026-09-22)
|
|
10
7
|
|
|
8
|
+
### Bug Fixes
|
|
11
9
|
|
|
10
|
+
* **ui-select,ui-text-input:** show messages for non-editable selects ([e0d2743](https://github.com/instructure/instructure-ui/commit/e0d274340de17e3dbe118f27dabc49d8753e4d96))
|
|
12
11
|
|
|
13
12
|
|
|
14
13
|
## [11.7.6](https://github.com/instructure/instructure-ui/compare/v11.7.5...v11.7.6) (2026-09-14)
|
package/es/Select/v2/index.js
CHANGED
|
@@ -578,6 +578,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle),
|
|
|
578
578
|
...passthroughProps
|
|
579
579
|
});
|
|
580
580
|
const isEditable = typeof onInputChange !== 'undefined';
|
|
581
|
+
const isNonEditableSelect = interaction === 'enabled' && !isEditable;
|
|
581
582
|
let overrideProps = {};
|
|
582
583
|
if (!isEditable) {
|
|
583
584
|
overrideProps = {
|
|
@@ -603,8 +604,9 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle),
|
|
|
603
604
|
value: inputValue,
|
|
604
605
|
inputRef: utils.createChainedFunction(ref, this.handleInputRef),
|
|
605
606
|
inputContainerRef: this.handleInputContainerRef,
|
|
606
|
-
interaction:
|
|
607
|
-
|
|
607
|
+
interaction: isNonEditableSelect ? 'readonly' : interaction,
|
|
608
|
+
// if readonly prevent keyboard cursor
|
|
609
|
+
forceMessages: isNonEditableSelect,
|
|
608
610
|
isRequired,
|
|
609
611
|
shouldNotWrap,
|
|
610
612
|
layout,
|
|
@@ -631,7 +633,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle),
|
|
|
631
633
|
...triggerProps,
|
|
632
634
|
...getInputProps(inputProps),
|
|
633
635
|
suppressHydrationWarning: true,
|
|
634
|
-
...(
|
|
636
|
+
...(isNonEditableSelect && {
|
|
635
637
|
themeOverride: componentTheme => ({
|
|
636
638
|
backgroundReadonlyColor: componentTheme.backgroundColor
|
|
637
639
|
})
|
package/lib/Select/v2/index.js
CHANGED
|
@@ -589,6 +589,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
|
|
|
589
589
|
...passthroughProps
|
|
590
590
|
});
|
|
591
591
|
const isEditable = typeof onInputChange !== 'undefined';
|
|
592
|
+
const isNonEditableSelect = interaction === 'enabled' && !isEditable;
|
|
592
593
|
let overrideProps = {};
|
|
593
594
|
if (!isEditable) {
|
|
594
595
|
overrideProps = {
|
|
@@ -614,8 +615,9 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
|
|
|
614
615
|
value: inputValue,
|
|
615
616
|
inputRef: utils.createChainedFunction(ref, this.handleInputRef),
|
|
616
617
|
inputContainerRef: this.handleInputContainerRef,
|
|
617
|
-
interaction:
|
|
618
|
-
|
|
618
|
+
interaction: isNonEditableSelect ? 'readonly' : interaction,
|
|
619
|
+
// if readonly prevent keyboard cursor
|
|
620
|
+
forceMessages: isNonEditableSelect,
|
|
619
621
|
isRequired,
|
|
620
622
|
shouldNotWrap,
|
|
621
623
|
layout,
|
|
@@ -642,7 +644,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
|
|
|
642
644
|
...triggerProps,
|
|
643
645
|
...getInputProps(inputProps),
|
|
644
646
|
suppressHydrationWarning: true,
|
|
645
|
-
...(
|
|
647
|
+
...(isNonEditableSelect && {
|
|
646
648
|
themeOverride: componentTheme => ({
|
|
647
649
|
backgroundReadonlyColor: componentTheme.backgroundColor
|
|
648
650
|
})
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-select",
|
|
3
|
-
"version": "11.7.7-snapshot-
|
|
3
|
+
"version": "11.7.7-snapshot-3",
|
|
4
4
|
"description": "A component for select and autocomplete behavior.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -15,27 +15,27 @@
|
|
|
15
15
|
"license": "MIT",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@babel/runtime": "^7.29.7",
|
|
18
|
-
"@instructure/emotion": "11.7.7-snapshot-
|
|
19
|
-
"@instructure/shared-types": "11.7.7-snapshot-
|
|
20
|
-
"@instructure/ui-form-field": "11.7.7-snapshot-
|
|
21
|
-
"@instructure/ui-
|
|
22
|
-
"@instructure/ui-
|
|
23
|
-
"@instructure/ui-options": "11.7.7-snapshot-
|
|
24
|
-
"@instructure/ui-popover": "11.7.7-snapshot-
|
|
25
|
-
"@instructure/ui-
|
|
26
|
-
"@instructure/ui-
|
|
27
|
-
"@instructure/ui-
|
|
28
|
-
"@instructure/ui-
|
|
29
|
-
"@instructure/ui-
|
|
30
|
-
"@instructure/ui-
|
|
31
|
-
"@instructure/
|
|
32
|
-
"@instructure/
|
|
18
|
+
"@instructure/emotion": "11.7.7-snapshot-3",
|
|
19
|
+
"@instructure/shared-types": "11.7.7-snapshot-3",
|
|
20
|
+
"@instructure/ui-form-field": "11.7.7-snapshot-3",
|
|
21
|
+
"@instructure/ui-dom-utils": "11.7.7-snapshot-3",
|
|
22
|
+
"@instructure/ui-icons": "11.7.7-snapshot-3",
|
|
23
|
+
"@instructure/ui-options": "11.7.7-snapshot-3",
|
|
24
|
+
"@instructure/ui-popover": "11.7.7-snapshot-3",
|
|
25
|
+
"@instructure/ui-position": "11.7.7-snapshot-3",
|
|
26
|
+
"@instructure/ui-themes": "11.7.7-snapshot-3",
|
|
27
|
+
"@instructure/ui-text-input": "11.7.7-snapshot-3",
|
|
28
|
+
"@instructure/ui-selectable": "11.7.7-snapshot-3",
|
|
29
|
+
"@instructure/ui-utils": "11.7.7-snapshot-3",
|
|
30
|
+
"@instructure/ui-view": "11.7.7-snapshot-3",
|
|
31
|
+
"@instructure/uid": "11.7.7-snapshot-3",
|
|
32
|
+
"@instructure/ui-react-utils": "11.7.7-snapshot-3"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"vitest": "^5.0.0",
|
|
36
|
-
"@instructure/ui-babel-preset": "11.7.7-snapshot-
|
|
37
|
-
"@instructure/ui-color-utils": "11.7.7-snapshot-
|
|
38
|
-
"@instructure/ui-scripts": "11.7.7-snapshot-
|
|
36
|
+
"@instructure/ui-babel-preset": "11.7.7-snapshot-3",
|
|
37
|
+
"@instructure/ui-color-utils": "11.7.7-snapshot-3",
|
|
38
|
+
"@instructure/ui-scripts": "11.7.7-snapshot-3"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": ">=18 <=19"
|
package/src/Select/v2/index.tsx
CHANGED
|
@@ -719,6 +719,7 @@ class Select extends Component<SelectProps> {
|
|
|
719
719
|
const passthroughProps = omitProps(rest, Select.allowedProps)
|
|
720
720
|
const { ref, ...triggerProps } = getTriggerProps({ ...passthroughProps })
|
|
721
721
|
const isEditable = typeof onInputChange !== 'undefined'
|
|
722
|
+
const isNonEditableSelect = interaction === 'enabled' && !isEditable
|
|
722
723
|
|
|
723
724
|
let overrideProps: Partial<TextInputProps> = {}
|
|
724
725
|
if (!isEditable) {
|
|
@@ -746,10 +747,8 @@ class Select extends Component<SelectProps> {
|
|
|
746
747
|
value: inputValue,
|
|
747
748
|
inputRef: utils.createChainedFunction(ref, this.handleInputRef),
|
|
748
749
|
inputContainerRef: this.handleInputContainerRef,
|
|
749
|
-
interaction:
|
|
750
|
-
|
|
751
|
-
? 'readonly' // prevent keyboard cursor
|
|
752
|
-
: interaction,
|
|
750
|
+
interaction: isNonEditableSelect ? 'readonly' : interaction, // if readonly prevent keyboard cursor
|
|
751
|
+
forceMessages: isNonEditableSelect,
|
|
753
752
|
isRequired,
|
|
754
753
|
shouldNotWrap,
|
|
755
754
|
layout,
|
|
@@ -789,12 +788,11 @@ class Select extends Component<SelectProps> {
|
|
|
789
788
|
{...triggerProps}
|
|
790
789
|
{...getInputProps(inputProps)}
|
|
791
790
|
suppressHydrationWarning
|
|
792
|
-
{...(
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
})}
|
|
791
|
+
{...(isNonEditableSelect && {
|
|
792
|
+
themeOverride: (componentTheme) => ({
|
|
793
|
+
backgroundReadonlyColor: componentTheme.backgroundColor
|
|
794
|
+
})
|
|
795
|
+
})}
|
|
798
796
|
/>
|
|
799
797
|
)
|
|
800
798
|
}
|