@instructure/ui-simple-select 11.7.2-snapshot-48 → 11.7.2-snapshot-49
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 +12 -2
- package/es/SimpleSelect/v2/Group/index.js +46 -0
- package/es/SimpleSelect/v2/Group/props.js +26 -0
- package/es/SimpleSelect/v2/Option/index.js +48 -0
- package/es/SimpleSelect/v2/Option/props.js +26 -0
- package/es/SimpleSelect/v2/index.js +444 -0
- package/es/SimpleSelect/v2/props.js +26 -0
- package/es/exports/b.js +26 -0
- package/lib/SimpleSelect/v2/Group/index.js +52 -0
- package/lib/SimpleSelect/v2/Group/props.js +31 -0
- package/lib/SimpleSelect/v2/Option/index.js +54 -0
- package/lib/SimpleSelect/v2/Option/props.js +31 -0
- package/lib/SimpleSelect/v2/index.js +454 -0
- package/lib/SimpleSelect/v2/props.js +31 -0
- package/lib/exports/b.js +26 -0
- package/package.json +21 -21
- package/src/SimpleSelect/v2/Group/index.tsx +51 -0
- package/src/SimpleSelect/v2/Group/props.ts +49 -0
- package/src/SimpleSelect/v2/Option/index.tsx +52 -0
- package/src/SimpleSelect/v2/Option/props.ts +83 -0
- package/src/SimpleSelect/v2/README.md +157 -0
- package/src/SimpleSelect/v2/index.tsx +559 -0
- package/src/SimpleSelect/v2/props.ts +300 -0
- package/src/exports/b.ts +31 -0
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/SimpleSelect/v2/Group/index.d.ts +20 -0
- package/types/SimpleSelect/v2/Group/index.d.ts.map +1 -0
- package/types/SimpleSelect/v2/Group/props.d.ts +19 -0
- package/types/SimpleSelect/v2/Group/props.d.ts.map +1 -0
- package/types/SimpleSelect/v2/Option/index.d.ts +26 -0
- package/types/SimpleSelect/v2/Option/index.d.ts.map +1 -0
- package/types/SimpleSelect/v2/Option/props.d.ts +45 -0
- package/types/SimpleSelect/v2/Option/props.d.ts.map +1 -0
- package/types/SimpleSelect/v2/index.d.ts +90 -0
- package/types/SimpleSelect/v2/index.d.ts.map +1 -0
- package/types/SimpleSelect/v2/props.d.ts +180 -0
- package/types/SimpleSelect/v2/props.d.ts.map +1 -0
- package/types/exports/b.d.ts +7 -0
- package/types/exports/b.d.ts.map +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,9 +3,19 @@
|
|
|
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.2-snapshot-
|
|
6
|
+
## [11.7.2-snapshot-49](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-49) (2026-04-16)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **many:** rework Select, SimpleSelect and TimeSelect ([fb95519](https://github.com/instructure/instructure-ui/commit/fb9551958326bdc8e95d55075c27c7e078c0c69c))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### BREAKING CHANGES
|
|
15
|
+
|
|
16
|
+
* **many:** contains breaking changes due to component using the new theming system
|
|
17
|
+
|
|
18
|
+
INSTUI-4807
|
|
9
19
|
|
|
10
20
|
|
|
11
21
|
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* The MIT License (MIT)
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
+
*
|
|
6
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
* in the Software without restriction, including without limitation the rights
|
|
9
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
* furnished to do so, subject to the following conditions:
|
|
12
|
+
*
|
|
13
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
* copies or substantial portions of the Software.
|
|
15
|
+
*
|
|
16
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
* SOFTWARE.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
import { Component } from 'react';
|
|
26
|
+
import { allowedProps } from "./props.js";
|
|
27
|
+
/**
|
|
28
|
+
---
|
|
29
|
+
parent: SimpleSelect
|
|
30
|
+
id: SimpleSelect.Group
|
|
31
|
+
---
|
|
32
|
+
**/
|
|
33
|
+
class Group extends Component {
|
|
34
|
+
/* istanbul ignore next */
|
|
35
|
+
render() {
|
|
36
|
+
// this component is only used for prop validation. Select.Group children
|
|
37
|
+
// are parsed in Select and rendered as Options components
|
|
38
|
+
return null;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
Group.displayName = "Group";
|
|
42
|
+
Group.componentId = 'SimpleSelect.Group';
|
|
43
|
+
Group.allowedProps = allowedProps;
|
|
44
|
+
Group.defaultProps = {};
|
|
45
|
+
export default Group;
|
|
46
|
+
export { Group };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* The MIT License (MIT)
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
+
*
|
|
6
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
* in the Software without restriction, including without limitation the rights
|
|
9
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
* furnished to do so, subject to the following conditions:
|
|
12
|
+
*
|
|
13
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
* copies or substantial portions of the Software.
|
|
15
|
+
*
|
|
16
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
* SOFTWARE.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
const allowedProps = ['renderLabel', 'children'];
|
|
26
|
+
export { allowedProps };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* The MIT License (MIT)
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
+
*
|
|
6
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
* in the Software without restriction, including without limitation the rights
|
|
9
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
* furnished to do so, subject to the following conditions:
|
|
12
|
+
*
|
|
13
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
* copies or substantial portions of the Software.
|
|
15
|
+
*
|
|
16
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
* SOFTWARE.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
import { Component } from 'react';
|
|
26
|
+
import { allowedProps } from "./props.js";
|
|
27
|
+
/**
|
|
28
|
+
---
|
|
29
|
+
parent: SimpleSelect
|
|
30
|
+
id: SimpleSelect.Option
|
|
31
|
+
---
|
|
32
|
+
**/
|
|
33
|
+
class Option extends Component {
|
|
34
|
+
/* istanbul ignore next */
|
|
35
|
+
render() {
|
|
36
|
+
// this component is only used for prop validation. SimpleSelect.Option children
|
|
37
|
+
// are parsed in Select and rendered as Options.Item components
|
|
38
|
+
return null;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
Option.displayName = "Option";
|
|
42
|
+
Option.componentId = 'SimpleSelect.Option';
|
|
43
|
+
Option.allowedProps = allowedProps;
|
|
44
|
+
Option.defaultProps = {
|
|
45
|
+
isDisabled: false
|
|
46
|
+
};
|
|
47
|
+
export default Option;
|
|
48
|
+
export { Option };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* The MIT License (MIT)
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
+
*
|
|
6
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
* in the Software without restriction, including without limitation the rights
|
|
9
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
* furnished to do so, subject to the following conditions:
|
|
12
|
+
*
|
|
13
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
* copies or substantial portions of the Software.
|
|
15
|
+
*
|
|
16
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
* SOFTWARE.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
const allowedProps = ['id', 'value', 'isDisabled', 'renderBeforeLabel', 'renderAfterLabel', 'children'];
|
|
26
|
+
export { allowedProps };
|
|
@@ -0,0 +1,444 @@
|
|
|
1
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
|
+
const _excluded = ["id", "value", "children", "renderBeforeLabel", "renderAfterLabel"],
|
|
3
|
+
_excluded2 = ["id", "renderLabel", "children"],
|
|
4
|
+
_excluded3 = ["renderLabel", "value", "defaultValue", "id", "size", "assistiveText", "placeholder", "interaction", "isRequired", "isInline", "width", "optionsMaxWidth", "optionsMaxHeight", "visibleOptionsCount", "messages", "placement", "constrain", "mountNode", "inputRef", "listRef", "renderEmptyOption", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onShowOptions", "onHideOptions", "children", "layout"];
|
|
5
|
+
var _dec, _class, _SimpleSelect;
|
|
6
|
+
/*
|
|
7
|
+
* The MIT License (MIT)
|
|
8
|
+
*
|
|
9
|
+
* Copyright (c) 2015 - present Instructure, Inc.
|
|
10
|
+
*
|
|
11
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
12
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
13
|
+
* in the Software without restriction, including without limitation the rights
|
|
14
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
15
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
16
|
+
* furnished to do so, subject to the following conditions:
|
|
17
|
+
*
|
|
18
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
19
|
+
* copies or substantial portions of the Software.
|
|
20
|
+
*
|
|
21
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
22
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
23
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
24
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
25
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
26
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
27
|
+
* SOFTWARE.
|
|
28
|
+
*/
|
|
29
|
+
|
|
30
|
+
import { isValidElement, Component, Children } from 'react';
|
|
31
|
+
import * as utils from '@instructure/ui-utils';
|
|
32
|
+
import { matchComponentTypes, passthroughProps, callRenderProp, getInteraction, withDeterministicId } from '@instructure/ui-react-utils';
|
|
33
|
+
import { Select } from '@instructure/ui-select/latest';
|
|
34
|
+
import { Option } from "./Option/index.js";
|
|
35
|
+
import { Group } from "./Group/index.js";
|
|
36
|
+
import { allowedProps } from "./props.js";
|
|
37
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
38
|
+
/**
|
|
39
|
+
---
|
|
40
|
+
category: components
|
|
41
|
+
tags: form, field, dropdown
|
|
42
|
+
---
|
|
43
|
+
**/
|
|
44
|
+
let SimpleSelect = (_dec = withDeterministicId(), _dec(_class = (_SimpleSelect = class SimpleSelect extends Component {
|
|
45
|
+
constructor(props) {
|
|
46
|
+
super(props);
|
|
47
|
+
this.ref = null;
|
|
48
|
+
this._emptyOptionId = void 0;
|
|
49
|
+
this.getOption = (field, value) => {
|
|
50
|
+
const children = Children.toArray(this.props.children);
|
|
51
|
+
let match;
|
|
52
|
+
for (let i = 0; i < children.length; ++i) {
|
|
53
|
+
const child = children[i];
|
|
54
|
+
if (matchComponentTypes(child, [Option])) {
|
|
55
|
+
if (child.props[field] === value) {
|
|
56
|
+
match = child;
|
|
57
|
+
}
|
|
58
|
+
} else if (matchComponentTypes(child, [Group])) {
|
|
59
|
+
const groupChildren = Children.toArray(child.props.children);
|
|
60
|
+
for (let j = 0; j < groupChildren.length; ++j) {
|
|
61
|
+
const groupChild = groupChildren[j];
|
|
62
|
+
if (groupChild.props[field] === value) {
|
|
63
|
+
match = groupChild;
|
|
64
|
+
break;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
if (match) break;
|
|
69
|
+
}
|
|
70
|
+
return match;
|
|
71
|
+
};
|
|
72
|
+
this.handleRef = node => {
|
|
73
|
+
this.ref = node;
|
|
74
|
+
};
|
|
75
|
+
this.handleBlur = event => {
|
|
76
|
+
this.setState({
|
|
77
|
+
highlightedOptionId: void 0
|
|
78
|
+
});
|
|
79
|
+
if (typeof this.props.onBlur === 'function') {
|
|
80
|
+
this.props.onBlur(event);
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
this.handleShowOptions = event => {
|
|
84
|
+
this.setState({
|
|
85
|
+
isShowingOptions: true
|
|
86
|
+
});
|
|
87
|
+
if (typeof this.props.onShowOptions === 'function') {
|
|
88
|
+
this.props.onShowOptions(event);
|
|
89
|
+
}
|
|
90
|
+
if (event.type.startsWith('key')) {
|
|
91
|
+
const keyboardEvent = event;
|
|
92
|
+
const children = Children.toArray(this.props.children);
|
|
93
|
+
if (!this.state.inputValue && children.length > 0) {
|
|
94
|
+
const position = keyboardEvent.key === 'ArrowDown' ? 'first' : keyboardEvent.key === 'ArrowUp' ? 'last' : void 0;
|
|
95
|
+
if (position) {
|
|
96
|
+
var _this$getOptionByPosi;
|
|
97
|
+
const optionId = (_this$getOptionByPosi = this.getOptionByPosition(position)) === null || _this$getOptionByPosi === void 0 ? void 0 : _this$getOptionByPosi.props.id;
|
|
98
|
+
optionId && this.setState({
|
|
99
|
+
highlightedOptionId: optionId
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
this.handleHideOptions = event => {
|
|
106
|
+
this.setState(state => {
|
|
107
|
+
const option = this.getOption('id', state.selectedOptionId);
|
|
108
|
+
return {
|
|
109
|
+
isShowingOptions: false,
|
|
110
|
+
highlightedOptionId: void 0,
|
|
111
|
+
inputValue: option ? option.props.children : ''
|
|
112
|
+
};
|
|
113
|
+
});
|
|
114
|
+
if (typeof this.props.onHideOptions === 'function') {
|
|
115
|
+
this.props.onHideOptions(event);
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
this.handleHighlightOption = (_event, {
|
|
119
|
+
id
|
|
120
|
+
}) => {
|
|
121
|
+
if (id === this._emptyOptionId) return;
|
|
122
|
+
this.setState({
|
|
123
|
+
highlightedOptionId: id,
|
|
124
|
+
inputValue: this.state.inputValue
|
|
125
|
+
});
|
|
126
|
+
};
|
|
127
|
+
this.handleSelectOption = (event, {
|
|
128
|
+
id
|
|
129
|
+
}) => {
|
|
130
|
+
if (id === this._emptyOptionId) {
|
|
131
|
+
// selected option is the empty option
|
|
132
|
+
this.setState({
|
|
133
|
+
isShowingOptions: false
|
|
134
|
+
});
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
const option = this.getOption('id', id);
|
|
138
|
+
const value = option && option.props.value;
|
|
139
|
+
|
|
140
|
+
// Focus needs to be reapplied to input
|
|
141
|
+
// after selecting an item to make sure VoiceOver behaves correctly on iOS
|
|
142
|
+
if (utils.isAndroidOrIOS()) {
|
|
143
|
+
this.blur();
|
|
144
|
+
this.focus();
|
|
145
|
+
}
|
|
146
|
+
if (this.isControlled) {
|
|
147
|
+
this.setState({
|
|
148
|
+
isShowingOptions: false
|
|
149
|
+
});
|
|
150
|
+
} else {
|
|
151
|
+
this.setState(state => ({
|
|
152
|
+
isShowingOptions: false,
|
|
153
|
+
selectedOptionId: id,
|
|
154
|
+
inputValue: option ? option.props.children : state.inputValue
|
|
155
|
+
}));
|
|
156
|
+
}
|
|
157
|
+
// fire onChange if selected option changed
|
|
158
|
+
if (option && typeof this.props.onChange === 'function') {
|
|
159
|
+
this.props.onChange(event, {
|
|
160
|
+
value,
|
|
161
|
+
id
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
// hide options list whenever selection is made
|
|
165
|
+
if (typeof this.props.onHideOptions === 'function') {
|
|
166
|
+
this.props.onHideOptions(event);
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
const _option = this.getInitialOption(props);
|
|
170
|
+
this.state = {
|
|
171
|
+
inputValue: _option ? _option.props.children : '',
|
|
172
|
+
isShowingOptions: false,
|
|
173
|
+
highlightedOptionId: void 0,
|
|
174
|
+
selectedOptionId: _option ? _option.props.id : void 0
|
|
175
|
+
};
|
|
176
|
+
this._emptyOptionId = props.deterministicId('Select-EmptyOption');
|
|
177
|
+
}
|
|
178
|
+
get _select() {
|
|
179
|
+
return this.ref;
|
|
180
|
+
}
|
|
181
|
+
focus() {
|
|
182
|
+
this.ref && this.ref.focus();
|
|
183
|
+
}
|
|
184
|
+
blur() {
|
|
185
|
+
this.ref && this.ref.blur();
|
|
186
|
+
}
|
|
187
|
+
get focused() {
|
|
188
|
+
return this.ref ? this.ref.focused : false;
|
|
189
|
+
}
|
|
190
|
+
get id() {
|
|
191
|
+
return this.ref ? this.ref.id : void 0;
|
|
192
|
+
}
|
|
193
|
+
get isControlled() {
|
|
194
|
+
return typeof this.props.value !== 'undefined';
|
|
195
|
+
}
|
|
196
|
+
get interaction() {
|
|
197
|
+
return getInteraction({
|
|
198
|
+
props: this.props
|
|
199
|
+
});
|
|
200
|
+
}
|
|
201
|
+
hasOptionsChanged(prevChildren, currentChildren) {
|
|
202
|
+
const getValues = children => Children.map(children, child => {
|
|
203
|
+
if (/*#__PURE__*/isValidElement(child)) {
|
|
204
|
+
return child.props.value;
|
|
205
|
+
}
|
|
206
|
+
return null;
|
|
207
|
+
});
|
|
208
|
+
const prevValues = getValues(prevChildren);
|
|
209
|
+
const currentValues = getValues(currentChildren);
|
|
210
|
+
return JSON.stringify(prevValues) !== JSON.stringify(currentValues);
|
|
211
|
+
}
|
|
212
|
+
componentDidUpdate(prevProps) {
|
|
213
|
+
if (this.hasOptionsChanged(prevProps.children, this.props.children)) {
|
|
214
|
+
// Compare current input value to children's child prop, this is put into
|
|
215
|
+
// state.inputValue
|
|
216
|
+
const option = this.getOption('children', this.state.inputValue);
|
|
217
|
+
this.setState({
|
|
218
|
+
inputValue: option ? option.props.children : void 0,
|
|
219
|
+
selectedOptionId: option ? option.props.id : ''
|
|
220
|
+
});
|
|
221
|
+
}
|
|
222
|
+
if (this.props.value !== prevProps.value) {
|
|
223
|
+
// if value has changed externally try to find an option with the same value
|
|
224
|
+
// and select it
|
|
225
|
+
let option = this.getOption('value', this.props.value);
|
|
226
|
+
if (typeof this.props.value === 'undefined') {
|
|
227
|
+
// preserve current value when changing from controlled to uncontrolled
|
|
228
|
+
option = this.getOption('value', prevProps.value);
|
|
229
|
+
}
|
|
230
|
+
this.setState({
|
|
231
|
+
inputValue: option ? option.props.children : '',
|
|
232
|
+
selectedOptionId: option ? option.props.id : ''
|
|
233
|
+
});
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
getInitialOption(props) {
|
|
237
|
+
const value = props.value,
|
|
238
|
+
defaultValue = props.defaultValue;
|
|
239
|
+
const initialValue = value || defaultValue;
|
|
240
|
+
if (typeof initialValue === 'string' || typeof initialValue === 'number') {
|
|
241
|
+
// get option based on value or defaultValue, if provided
|
|
242
|
+
return this.getOption('value', initialValue);
|
|
243
|
+
}
|
|
244
|
+
// otherwise get the first option
|
|
245
|
+
return this.getFirstOption();
|
|
246
|
+
}
|
|
247
|
+
getOptionLabelById(id) {
|
|
248
|
+
const option = this.getOption('id', id);
|
|
249
|
+
return option ? option.props.children : '';
|
|
250
|
+
}
|
|
251
|
+
getFirstOption() {
|
|
252
|
+
const children = Children.toArray(this.props.children);
|
|
253
|
+
let match;
|
|
254
|
+
for (let i = 0; i < children.length; i++) {
|
|
255
|
+
const child = children[i];
|
|
256
|
+
if (matchComponentTypes(child, [Option])) {
|
|
257
|
+
match = child;
|
|
258
|
+
} else if (matchComponentTypes(child, [Group])) {
|
|
259
|
+
// first child is a group, not an option, find first child in group
|
|
260
|
+
match = Children.toArray(child.props.children)[0];
|
|
261
|
+
}
|
|
262
|
+
if (match) {
|
|
263
|
+
break;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
return match;
|
|
267
|
+
}
|
|
268
|
+
getOptionByPosition(position) {
|
|
269
|
+
const children = Children.toArray(this.props.children);
|
|
270
|
+
|
|
271
|
+
// Determine where to start looking based on position
|
|
272
|
+
const index = position === 'first' ? 0 : children.length - 1;
|
|
273
|
+
|
|
274
|
+
// Check if child is an option or group
|
|
275
|
+
const child = children[index];
|
|
276
|
+
if (!child) return void 0;
|
|
277
|
+
|
|
278
|
+
// If it's a regular option, return it
|
|
279
|
+
if (matchComponentTypes(child, [Option])) {
|
|
280
|
+
return child;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
// If it's a group, get its options
|
|
284
|
+
if (matchComponentTypes(child, [Group])) {
|
|
285
|
+
const groupOptions = Children.toArray(child.props.children);
|
|
286
|
+
const groupIndex = position === 'first' ? 0 : groupOptions.length - 1;
|
|
287
|
+
return groupOptions[groupIndex];
|
|
288
|
+
}
|
|
289
|
+
return void 0;
|
|
290
|
+
}
|
|
291
|
+
renderChildren() {
|
|
292
|
+
let children = Children.toArray(this.props.children);
|
|
293
|
+
children = Children.map(children, child => {
|
|
294
|
+
if (matchComponentTypes(child, [Option])) {
|
|
295
|
+
return this.renderOption(child);
|
|
296
|
+
} else if (matchComponentTypes(child, [Group])) {
|
|
297
|
+
return this.renderGroup(child);
|
|
298
|
+
}
|
|
299
|
+
return null;
|
|
300
|
+
}).filter(child => !!child);
|
|
301
|
+
if (children.length === 0) {
|
|
302
|
+
// no valid children, render empty option
|
|
303
|
+
return this.renderEmptyOption();
|
|
304
|
+
}
|
|
305
|
+
return children;
|
|
306
|
+
}
|
|
307
|
+
renderEmptyOption() {
|
|
308
|
+
return _jsx(Select.Option, {
|
|
309
|
+
id: this._emptyOptionId,
|
|
310
|
+
isHighlighted: false,
|
|
311
|
+
isSelected: false,
|
|
312
|
+
children: callRenderProp(this.props.renderEmptyOption)
|
|
313
|
+
});
|
|
314
|
+
}
|
|
315
|
+
renderOption(option) {
|
|
316
|
+
var _option$props$isDisab;
|
|
317
|
+
const _option$props = option.props,
|
|
318
|
+
id = _option$props.id,
|
|
319
|
+
value = _option$props.value,
|
|
320
|
+
children = _option$props.children,
|
|
321
|
+
renderBeforeLabel = _option$props.renderBeforeLabel,
|
|
322
|
+
renderAfterLabel = _option$props.renderAfterLabel,
|
|
323
|
+
rest = _objectWithoutProperties(_option$props, _excluded);
|
|
324
|
+
const isDisabled = (_option$props$isDisab = option.props.isDisabled) !== null && _option$props$isDisab !== void 0 ? _option$props$isDisab : 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)
|
|
325
|
+
const isSelected = id === this.state.selectedOptionId;
|
|
326
|
+
const isHighlighted = id === this.state.highlightedOptionId;
|
|
327
|
+
const getRenderLabel = renderLabel => {
|
|
328
|
+
var _renderLabel$prototyp;
|
|
329
|
+
if (typeof renderLabel === 'function' && !(renderLabel !== null && renderLabel !== void 0 && (_renderLabel$prototyp = renderLabel.prototype) !== null && _renderLabel$prototyp !== void 0 && _renderLabel$prototyp.isReactComponent)) {
|
|
330
|
+
return renderLabel.bind(null, {
|
|
331
|
+
id,
|
|
332
|
+
isDisabled,
|
|
333
|
+
isSelected,
|
|
334
|
+
isHighlighted,
|
|
335
|
+
children
|
|
336
|
+
});
|
|
337
|
+
}
|
|
338
|
+
return renderLabel;
|
|
339
|
+
};
|
|
340
|
+
return _jsx(Select.Option, {
|
|
341
|
+
id: id,
|
|
342
|
+
value: value,
|
|
343
|
+
isHighlighted: isHighlighted,
|
|
344
|
+
isSelected: isSelected,
|
|
345
|
+
isDisabled: isDisabled,
|
|
346
|
+
renderBeforeLabel: getRenderLabel(renderBeforeLabel),
|
|
347
|
+
renderAfterLabel: getRenderLabel(renderAfterLabel),
|
|
348
|
+
...passthroughProps(rest),
|
|
349
|
+
children: children
|
|
350
|
+
}, option.key || id);
|
|
351
|
+
}
|
|
352
|
+
renderGroup(group) {
|
|
353
|
+
const _group$props = group.props,
|
|
354
|
+
id = _group$props.id,
|
|
355
|
+
renderLabel = _group$props.renderLabel,
|
|
356
|
+
children = _group$props.children,
|
|
357
|
+
rest = _objectWithoutProperties(_group$props, _excluded2);
|
|
358
|
+
return _jsx(Select.Group, {
|
|
359
|
+
renderLabel: renderLabel,
|
|
360
|
+
...passthroughProps(rest),
|
|
361
|
+
children: Children.map(children, child => this.renderOption(child))
|
|
362
|
+
}, group.key || id);
|
|
363
|
+
}
|
|
364
|
+
render() {
|
|
365
|
+
const _this$props = this.props,
|
|
366
|
+
renderLabel = _this$props.renderLabel,
|
|
367
|
+
value = _this$props.value,
|
|
368
|
+
defaultValue = _this$props.defaultValue,
|
|
369
|
+
id = _this$props.id,
|
|
370
|
+
size = _this$props.size,
|
|
371
|
+
assistiveText = _this$props.assistiveText,
|
|
372
|
+
placeholder = _this$props.placeholder,
|
|
373
|
+
interaction = _this$props.interaction,
|
|
374
|
+
isRequired = _this$props.isRequired,
|
|
375
|
+
isInline = _this$props.isInline,
|
|
376
|
+
width = _this$props.width,
|
|
377
|
+
optionsMaxWidth = _this$props.optionsMaxWidth,
|
|
378
|
+
optionsMaxHeight = _this$props.optionsMaxHeight,
|
|
379
|
+
visibleOptionsCount = _this$props.visibleOptionsCount,
|
|
380
|
+
messages = _this$props.messages,
|
|
381
|
+
placement = _this$props.placement,
|
|
382
|
+
constrain = _this$props.constrain,
|
|
383
|
+
mountNode = _this$props.mountNode,
|
|
384
|
+
inputRef = _this$props.inputRef,
|
|
385
|
+
listRef = _this$props.listRef,
|
|
386
|
+
renderEmptyOption = _this$props.renderEmptyOption,
|
|
387
|
+
renderBeforeInput = _this$props.renderBeforeInput,
|
|
388
|
+
renderAfterInput = _this$props.renderAfterInput,
|
|
389
|
+
onFocus = _this$props.onFocus,
|
|
390
|
+
onBlur = _this$props.onBlur,
|
|
391
|
+
onShowOptions = _this$props.onShowOptions,
|
|
392
|
+
onHideOptions = _this$props.onHideOptions,
|
|
393
|
+
children = _this$props.children,
|
|
394
|
+
layout = _this$props.layout,
|
|
395
|
+
rest = _objectWithoutProperties(_this$props, _excluded3);
|
|
396
|
+
return _jsx(Select, {
|
|
397
|
+
renderLabel: renderLabel,
|
|
398
|
+
inputValue: this.state.inputValue,
|
|
399
|
+
isShowingOptions: this.state.isShowingOptions,
|
|
400
|
+
id: id,
|
|
401
|
+
size: size,
|
|
402
|
+
assistiveText: assistiveText,
|
|
403
|
+
placeholder: placeholder,
|
|
404
|
+
interaction: this.interaction,
|
|
405
|
+
isRequired: isRequired,
|
|
406
|
+
isInline: isInline,
|
|
407
|
+
width: width,
|
|
408
|
+
optionsMaxWidth: optionsMaxWidth,
|
|
409
|
+
optionsMaxHeight: optionsMaxHeight,
|
|
410
|
+
visibleOptionsCount: visibleOptionsCount,
|
|
411
|
+
messages: messages,
|
|
412
|
+
placement: placement,
|
|
413
|
+
constrain: constrain,
|
|
414
|
+
mountNode: mountNode,
|
|
415
|
+
ref: this.handleRef,
|
|
416
|
+
inputRef: inputRef,
|
|
417
|
+
listRef: listRef,
|
|
418
|
+
renderBeforeInput: renderBeforeInput,
|
|
419
|
+
renderAfterInput: renderAfterInput,
|
|
420
|
+
onFocus: onFocus,
|
|
421
|
+
onBlur: this.handleBlur,
|
|
422
|
+
onRequestShowOptions: this.handleShowOptions,
|
|
423
|
+
onRequestHideOptions: this.handleHideOptions,
|
|
424
|
+
onRequestHighlightOption: this.handleHighlightOption,
|
|
425
|
+
onRequestSelectOption: this.handleSelectOption,
|
|
426
|
+
isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput,
|
|
427
|
+
layout: layout,
|
|
428
|
+
...passthroughProps(rest),
|
|
429
|
+
"data-cid": "SimpleSelect",
|
|
430
|
+
children: this.renderChildren()
|
|
431
|
+
});
|
|
432
|
+
}
|
|
433
|
+
}, _SimpleSelect.displayName = "SimpleSelect", _SimpleSelect.componentId = 'SimpleSelect', _SimpleSelect.Option = Option, _SimpleSelect.Group = Group, _SimpleSelect.allowedProps = allowedProps, _SimpleSelect.defaultProps = {
|
|
434
|
+
size: 'medium',
|
|
435
|
+
isRequired: false,
|
|
436
|
+
isInline: false,
|
|
437
|
+
visibleOptionsCount: 8,
|
|
438
|
+
placement: 'bottom stretch',
|
|
439
|
+
constrain: 'window',
|
|
440
|
+
renderEmptyOption: '---',
|
|
441
|
+
isOptionContentAppliedToInput: false
|
|
442
|
+
}, _SimpleSelect)) || _class);
|
|
443
|
+
export { SimpleSelect };
|
|
444
|
+
export default SimpleSelect;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* The MIT License (MIT)
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
+
*
|
|
6
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
* in the Software without restriction, including without limitation the rights
|
|
9
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
* furnished to do so, subject to the following conditions:
|
|
12
|
+
*
|
|
13
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
* copies or substantial portions of the Software.
|
|
15
|
+
*
|
|
16
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
* SOFTWARE.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
const allowedProps = ['renderLabel', 'value', 'defaultValue', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'children', 'layout'];
|
|
26
|
+
export { allowedProps };
|
package/es/exports/b.js
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* The MIT License (MIT)
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
+
*
|
|
6
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
* in the Software without restriction, including without limitation the rights
|
|
9
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
* furnished to do so, subject to the following conditions:
|
|
12
|
+
*
|
|
13
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
* copies or substantial portions of the Software.
|
|
15
|
+
*
|
|
16
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
* SOFTWARE.
|
|
23
|
+
*/
|
|
24
|
+
export { SimpleSelect } from "../SimpleSelect/v2/index.js";
|
|
25
|
+
export { Group as SimpleSelectGroup } from "../SimpleSelect/v2/Group/index.js";
|
|
26
|
+
export { Option as SimpleSelectOption } from "../SimpleSelect/v2/Option/index.js";
|