@instructure/ui-select 8.12.1-snapshot.44 → 8.12.1-snapshot.50
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/es/Select/SelectLocator.js +8 -2
- package/es/Select/index.js +37 -37
- package/lib/Select/Group/index.js +1 -1
- package/lib/Select/Group/props.js +1 -1
- package/lib/Select/Option/index.js +1 -1
- package/lib/Select/Option/props.js +1 -1
- package/lib/Select/SelectLocator.js +8 -2
- package/lib/Select/index.js +38 -38
- package/lib/Select/props.js +1 -1
- package/package.json +23 -23
|
@@ -30,8 +30,14 @@ import { PopoverLocator } from '@instructure/ui-popover/es/Popover/PopoverLocato
|
|
|
30
30
|
|
|
31
31
|
import { Select } from './index';
|
|
32
32
|
export const SelectLocator = locator(Select.selector, {
|
|
33
|
-
findInput: (
|
|
34
|
-
|
|
33
|
+
findInput: function () {
|
|
34
|
+
return locator('input').find(...arguments);
|
|
35
|
+
},
|
|
36
|
+
findOptionsList: async function (element) {
|
|
37
|
+
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
38
|
+
args[_key - 1] = arguments[_key];
|
|
39
|
+
}
|
|
40
|
+
|
|
35
41
|
const content = await PopoverLocator.findContent(element, ...args);
|
|
36
42
|
return content ? OptionsLocator.find(content.getDOMNode()) : null;
|
|
37
43
|
}
|
package/es/Select/index.js
CHANGED
|
@@ -56,8 +56,8 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
|
|
|
56
56
|
**/
|
|
57
57
|
|
|
58
58
|
let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Select extends Component {
|
|
59
|
-
constructor(
|
|
60
|
-
super(...
|
|
59
|
+
constructor() {
|
|
60
|
+
super(...arguments);
|
|
61
61
|
this.ref = null;
|
|
62
62
|
this.state = {
|
|
63
63
|
hasInputRef: false
|
|
@@ -228,10 +228,9 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
|
|
|
228
228
|
onRequestHideOptions: event => {
|
|
229
229
|
onRequestHideOptions(event);
|
|
230
230
|
},
|
|
231
|
-
onRequestHighlightOption: (event, {
|
|
232
|
-
id,
|
|
233
|
-
|
|
234
|
-
}) => {
|
|
231
|
+
onRequestHighlightOption: (event, _ref) => {
|
|
232
|
+
let id = _ref.id,
|
|
233
|
+
direction = _ref.direction;
|
|
235
234
|
if (!isShowingOptions) return; // if id exists, use that
|
|
236
235
|
|
|
237
236
|
let highlightId = this._optionIds.indexOf(id) > -1 ? id : null;
|
|
@@ -259,9 +258,9 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
|
|
|
259
258
|
onRequestHighlightLastOption: event => {
|
|
260
259
|
this.highlightOption(event, this._optionIds[this._optionIds.length - 1]);
|
|
261
260
|
},
|
|
262
|
-
onRequestSelectOption: (event, {
|
|
263
|
-
id
|
|
264
|
-
|
|
261
|
+
onRequestSelectOption: (event, _ref2) => {
|
|
262
|
+
let id = _ref2.id;
|
|
263
|
+
|
|
265
264
|
if (id && this._optionIds.indexOf(id) !== -1) {
|
|
266
265
|
// only select if id exists as a valid option
|
|
267
266
|
onRequestSelectOption(event, {
|
|
@@ -514,34 +513,35 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
|
|
|
514
513
|
highlightedOptionId: highlightedOptionId,
|
|
515
514
|
isShowingOptions: isShowingOptions,
|
|
516
515
|
selectedOptionId: selectedOptionId ? selectedOptionId : null
|
|
517
|
-
}, this.getEventHandlers()),
|
|
518
|
-
getRootProps,
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
516
|
+
}, this.getEventHandlers()), _ref3 => {
|
|
517
|
+
let getRootProps = _ref3.getRootProps,
|
|
518
|
+
getInputProps = _ref3.getInputProps,
|
|
519
|
+
getTriggerProps = _ref3.getTriggerProps,
|
|
520
|
+
getListProps = _ref3.getListProps,
|
|
521
|
+
getOptionProps = _ref3.getOptionProps,
|
|
522
|
+
getDisabledOptionProps = _ref3.getDisabledOptionProps,
|
|
523
|
+
getDescriptionProps = _ref3.getDescriptionProps;
|
|
524
|
+
return jsx("span", getRootProps({
|
|
525
|
+
css: styles === null || styles === void 0 ? void 0 : styles.select
|
|
526
|
+
}), this.renderInput({
|
|
527
|
+
getInputProps,
|
|
528
|
+
getTriggerProps
|
|
529
|
+
}), jsx("span", Object.assign({}, getDescriptionProps(), {
|
|
530
|
+
css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
|
|
531
|
+
}), assistiveText), jsx(Popover, {
|
|
532
|
+
constrain: constrain,
|
|
533
|
+
placement: placement,
|
|
534
|
+
mountNode: mountNode,
|
|
535
|
+
positionTarget: this._inputContainer,
|
|
536
|
+
isShowingContent: isShowingOptions,
|
|
537
|
+
shouldReturnFocus: false,
|
|
538
|
+
withArrow: false
|
|
539
|
+
}, this.renderList({
|
|
540
|
+
getListProps,
|
|
541
|
+
getOptionProps,
|
|
542
|
+
getDisabledOptionProps
|
|
543
|
+
})));
|
|
544
|
+
});
|
|
545
545
|
}
|
|
546
546
|
|
|
547
547
|
}, _class2.displayName = "Select", _class2.componentId = 'Select', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
|
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.propTypes = exports.allowedProps = void 0;
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.propTypes = exports.allowedProps = void 0;
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
@@ -41,8 +41,14 @@ var _index = require("./index");
|
|
|
41
41
|
|
|
42
42
|
/* eslint-enable no-restricted-imports */
|
|
43
43
|
const SelectLocator = (0, _locator.locator)(_index.Select.selector, {
|
|
44
|
-
findInput: (
|
|
45
|
-
|
|
44
|
+
findInput: function () {
|
|
45
|
+
return (0, _locator.locator)('input').find(...arguments);
|
|
46
|
+
},
|
|
47
|
+
findOptionsList: async function (element) {
|
|
48
|
+
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
49
|
+
args[_key - 1] = arguments[_key];
|
|
50
|
+
}
|
|
51
|
+
|
|
46
52
|
const content = await _PopoverLocator.PopoverLocator.findContent(element, ...args);
|
|
47
53
|
return content ? _OptionsLocator.OptionsLocator.find(content.getDOMNode()) : null;
|
|
48
54
|
}
|
package/lib/Select/index.js
CHANGED
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.default = exports.Select = void 0;
|
|
9
9
|
|
|
10
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
11
|
|
|
@@ -66,8 +66,8 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
|
|
|
66
66
|
---
|
|
67
67
|
**/
|
|
68
68
|
let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Select extends _react.Component {
|
|
69
|
-
constructor(
|
|
70
|
-
super(...
|
|
69
|
+
constructor() {
|
|
70
|
+
super(...arguments);
|
|
71
71
|
this.ref = null;
|
|
72
72
|
this.state = {
|
|
73
73
|
hasInputRef: false
|
|
@@ -242,10 +242,9 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
|
|
|
242
242
|
onRequestHideOptions: event => {
|
|
243
243
|
onRequestHideOptions(event);
|
|
244
244
|
},
|
|
245
|
-
onRequestHighlightOption: (event, {
|
|
246
|
-
id,
|
|
247
|
-
|
|
248
|
-
}) => {
|
|
245
|
+
onRequestHighlightOption: (event, _ref) => {
|
|
246
|
+
let id = _ref.id,
|
|
247
|
+
direction = _ref.direction;
|
|
249
248
|
if (!isShowingOptions) return; // if id exists, use that
|
|
250
249
|
|
|
251
250
|
let highlightId = this._optionIds.indexOf(id) > -1 ? id : null;
|
|
@@ -273,9 +272,9 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
|
|
|
273
272
|
onRequestHighlightLastOption: event => {
|
|
274
273
|
this.highlightOption(event, this._optionIds[this._optionIds.length - 1]);
|
|
275
274
|
},
|
|
276
|
-
onRequestSelectOption: (event, {
|
|
277
|
-
id
|
|
278
|
-
|
|
275
|
+
onRequestSelectOption: (event, _ref2) => {
|
|
276
|
+
let id = _ref2.id;
|
|
277
|
+
|
|
279
278
|
if (id && this._optionIds.indexOf(id) !== -1) {
|
|
280
279
|
// only select if id exists as a valid option
|
|
281
280
|
onRequestSelectOption(event, {
|
|
@@ -524,34 +523,35 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
|
|
|
524
523
|
highlightedOptionId: highlightedOptionId,
|
|
525
524
|
isShowingOptions: isShowingOptions,
|
|
526
525
|
selectedOptionId: selectedOptionId ? selectedOptionId : null
|
|
527
|
-
}, this.getEventHandlers()),
|
|
528
|
-
getRootProps,
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
526
|
+
}, this.getEventHandlers()), _ref3 => {
|
|
527
|
+
let getRootProps = _ref3.getRootProps,
|
|
528
|
+
getInputProps = _ref3.getInputProps,
|
|
529
|
+
getTriggerProps = _ref3.getTriggerProps,
|
|
530
|
+
getListProps = _ref3.getListProps,
|
|
531
|
+
getOptionProps = _ref3.getOptionProps,
|
|
532
|
+
getDisabledOptionProps = _ref3.getDisabledOptionProps,
|
|
533
|
+
getDescriptionProps = _ref3.getDescriptionProps;
|
|
534
|
+
return (0, _emotion.jsx)("span", getRootProps({
|
|
535
|
+
css: styles === null || styles === void 0 ? void 0 : styles.select
|
|
536
|
+
}), this.renderInput({
|
|
537
|
+
getInputProps,
|
|
538
|
+
getTriggerProps
|
|
539
|
+
}), (0, _emotion.jsx)("span", Object.assign({}, getDescriptionProps(), {
|
|
540
|
+
css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
|
|
541
|
+
}), assistiveText), (0, _emotion.jsx)(_Popover.Popover, {
|
|
542
|
+
constrain: constrain,
|
|
543
|
+
placement: placement,
|
|
544
|
+
mountNode: mountNode,
|
|
545
|
+
positionTarget: this._inputContainer,
|
|
546
|
+
isShowingContent: isShowingOptions,
|
|
547
|
+
shouldReturnFocus: false,
|
|
548
|
+
withArrow: false
|
|
549
|
+
}, this.renderList({
|
|
550
|
+
getListProps,
|
|
551
|
+
getOptionProps,
|
|
552
|
+
getDisabledOptionProps
|
|
553
|
+
})));
|
|
554
|
+
});
|
|
555
555
|
}
|
|
556
556
|
|
|
557
557
|
}, _class2.displayName = "Select", _class2.componentId = 'Select', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
package/lib/Select/props.js
CHANGED
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.propTypes = exports.allowedProps = void 0;
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-select",
|
|
3
|
-
"version": "8.12.1-snapshot.
|
|
3
|
+
"version": "8.12.1-snapshot.50+3786369ec",
|
|
4
4
|
"description": "A component for select and autocomplete behavior.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -24,30 +24,30 @@
|
|
|
24
24
|
},
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@instructure/ui-babel-preset": "8.12.1-snapshot.
|
|
28
|
-
"@instructure/ui-color-utils": "8.12.1-snapshot.
|
|
29
|
-
"@instructure/ui-test-locator": "8.12.1-snapshot.
|
|
30
|
-
"@instructure/ui-test-utils": "8.12.1-snapshot.
|
|
31
|
-
"@instructure/ui-themes": "8.12.1-snapshot.
|
|
27
|
+
"@instructure/ui-babel-preset": "8.12.1-snapshot.50+3786369ec",
|
|
28
|
+
"@instructure/ui-color-utils": "8.12.1-snapshot.50+3786369ec",
|
|
29
|
+
"@instructure/ui-test-locator": "8.12.1-snapshot.50+3786369ec",
|
|
30
|
+
"@instructure/ui-test-utils": "8.12.1-snapshot.50+3786369ec",
|
|
31
|
+
"@instructure/ui-themes": "8.12.1-snapshot.50+3786369ec"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.13.10",
|
|
35
|
-
"@instructure/emotion": "8.12.1-snapshot.
|
|
36
|
-
"@instructure/shared-types": "8.12.1-snapshot.
|
|
37
|
-
"@instructure/ui-dom-utils": "8.12.1-snapshot.
|
|
38
|
-
"@instructure/ui-form-field": "8.12.1-snapshot.
|
|
39
|
-
"@instructure/ui-icons": "8.12.1-snapshot.
|
|
40
|
-
"@instructure/ui-options": "8.12.1-snapshot.
|
|
41
|
-
"@instructure/ui-popover": "8.12.1-snapshot.
|
|
42
|
-
"@instructure/ui-position": "8.12.1-snapshot.
|
|
43
|
-
"@instructure/ui-prop-types": "8.12.1-snapshot.
|
|
44
|
-
"@instructure/ui-react-utils": "8.12.1-snapshot.
|
|
45
|
-
"@instructure/ui-selectable": "8.12.1-snapshot.
|
|
46
|
-
"@instructure/ui-testable": "8.12.1-snapshot.
|
|
47
|
-
"@instructure/ui-text-input": "8.12.1-snapshot.
|
|
48
|
-
"@instructure/ui-utils": "8.12.1-snapshot.
|
|
49
|
-
"@instructure/ui-view": "8.12.1-snapshot.
|
|
50
|
-
"@instructure/uid": "8.12.1-snapshot.
|
|
35
|
+
"@instructure/emotion": "8.12.1-snapshot.50+3786369ec",
|
|
36
|
+
"@instructure/shared-types": "8.12.1-snapshot.50+3786369ec",
|
|
37
|
+
"@instructure/ui-dom-utils": "8.12.1-snapshot.50+3786369ec",
|
|
38
|
+
"@instructure/ui-form-field": "8.12.1-snapshot.50+3786369ec",
|
|
39
|
+
"@instructure/ui-icons": "8.12.1-snapshot.50+3786369ec",
|
|
40
|
+
"@instructure/ui-options": "8.12.1-snapshot.50+3786369ec",
|
|
41
|
+
"@instructure/ui-popover": "8.12.1-snapshot.50+3786369ec",
|
|
42
|
+
"@instructure/ui-position": "8.12.1-snapshot.50+3786369ec",
|
|
43
|
+
"@instructure/ui-prop-types": "8.12.1-snapshot.50+3786369ec",
|
|
44
|
+
"@instructure/ui-react-utils": "8.12.1-snapshot.50+3786369ec",
|
|
45
|
+
"@instructure/ui-selectable": "8.12.1-snapshot.50+3786369ec",
|
|
46
|
+
"@instructure/ui-testable": "8.12.1-snapshot.50+3786369ec",
|
|
47
|
+
"@instructure/ui-text-input": "8.12.1-snapshot.50+3786369ec",
|
|
48
|
+
"@instructure/ui-utils": "8.12.1-snapshot.50+3786369ec",
|
|
49
|
+
"@instructure/ui-view": "8.12.1-snapshot.50+3786369ec",
|
|
50
|
+
"@instructure/uid": "8.12.1-snapshot.50+3786369ec",
|
|
51
51
|
"prop-types": "^15"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"access": "public"
|
|
58
58
|
},
|
|
59
59
|
"sideEffects": false,
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "3786369ec892bc0f716844828cc2729447adb8be"
|
|
61
61
|
}
|