@instructure/ui-selectable 8.25.1-snapshot-10 → 8.25.1-snapshot-13

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 (4) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Selectable/index.js +116 -113
  3. package/lib/Selectable/index.js +118 -115
  4. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
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
- ## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
6
+ ## [8.25.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-13) (2022-06-22)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-selectable
9
9
 
package/es/Selectable/index.js CHANGED
@@ -5,7 +5,7 @@ const _excluded = ["onMouseDown", "onClick"],
5
5
  _excluded4 = ["onMouseDown", "onClick"],
6
6
  _excluded5 = ["id", "onMouseOver", "onClick"];
7
7
 
8
- var _dec, _class;
8
+ var _dec, _class, _class2;
9
9
 
10
10
  /*
11
11
  * The MIT License (MIT)
@@ -45,135 +45,136 @@ tags: autocomplete, typeahead, combobox, dropdown, search
45
45
  @tsProps
46
46
  **/
47
47
 
48
- let Selectable = (_dec = withDeterministicId(), _dec(_class = class Selectable extends Component {
49
- static displayName = "Selectable";
50
- static allowedProps = allowedProps;
51
- static propTypes = propTypes;
52
- static defaultProps = {
53
- isShowingOptions: false
54
- };
55
- _id = this.props.id || this.props.deterministicId();
56
- _listId = `${this._id}-list`;
57
- _descriptionId = `${this._id}-description`;
58
- _trigger = null;
59
- isSelectedOption = id => {
60
- const selectedOptionId = this.props.selectedOptionId;
61
-
62
- if (Array.isArray(selectedOptionId)) {
63
- return selectedOptionId.indexOf(id) > -1;
64
- }
48
+ let Selectable = (_dec = withDeterministicId(), _dec(_class = (_class2 = class Selectable extends Component {
49
+ constructor() {
50
+ super(...arguments);
51
+ this._id = this.props.id || this.props.deterministicId();
52
+ this._listId = `${this._id}-list`;
53
+ this._descriptionId = `${this._id}-description`;
54
+ this._trigger = null;
65
55
 
66
- return selectedOptionId === id;
67
- };
68
- handleOpenClose = event => {
69
- const _this$props = this.props,
70
- isShowingOptions = _this$props.isShowingOptions,
71
- onRequestShowOptions = _this$props.onRequestShowOptions,
72
- onRequestHideOptions = _this$props.onRequestHideOptions;
73
- event.preventDefault();
74
-
75
- if (isShowingOptions) {
76
- onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
77
- } else {
78
- if (!isActiveElement(this._trigger)) {
79
- ;
56
+ this.isSelectedOption = id => {
57
+ const selectedOptionId = this.props.selectedOptionId;
80
58
 
81
- this._trigger.focus();
59
+ if (Array.isArray(selectedOptionId)) {
60
+ return selectedOptionId.indexOf(id) > -1;
82
61
  }
83
62
 
84
- onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
85
- }
86
- };
87
- handleKeyDown = event => {
88
- const _this$props2 = this.props,
89
- isShowingOptions = _this$props2.isShowingOptions,
90
- highlightedOptionId = _this$props2.highlightedOptionId,
91
- onRequestHighlightOption = _this$props2.onRequestHighlightOption,
92
- onRequestHighlightFirstOption = _this$props2.onRequestHighlightFirstOption,
93
- onRequestHighlightLastOption = _this$props2.onRequestHighlightLastOption,
94
- onRequestSelectOption = _this$props2.onRequestSelectOption;
95
- const key = keycode.names[event.keyCode];
96
-
97
- switch (key) {
98
- case 'space':
99
- if (!isShowingOptions) {
100
- // if options hidden, show them
101
- this.handleOpenClose(event);
102
- }
103
-
104
- break;
63
+ return selectedOptionId === id;
64
+ };
105
65
 
106
- case 'enter':
107
- if (highlightedOptionId) {
108
- // select highlighted option
109
- event.preventDefault();
110
- onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
111
- id: highlightedOptionId
112
- });
113
- }
66
+ this.handleOpenClose = event => {
67
+ const _this$props = this.props,
68
+ isShowingOptions = _this$props.isShowingOptions,
69
+ onRequestShowOptions = _this$props.onRequestShowOptions,
70
+ onRequestHideOptions = _this$props.onRequestHideOptions;
71
+ event.preventDefault();
114
72
 
115
- break;
116
-
117
- case 'down':
118
- event.preventDefault();
73
+ if (isShowingOptions) {
74
+ onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
75
+ } else {
76
+ if (!isActiveElement(this._trigger)) {
77
+ ;
119
78
 
120
- if (isShowingOptions) {
121
- // if options showing, change highlight
122
- onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
123
- direction: 1
124
- });
125
- } else {
126
- // otherwise, show options
127
- this.handleOpenClose(event);
79
+ this._trigger.focus();
128
80
  }
129
81
 
130
- break;
131
-
132
- case 'up':
133
- event.preventDefault();
82
+ onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
83
+ }
84
+ };
85
+
86
+ this.handleKeyDown = event => {
87
+ const _this$props2 = this.props,
88
+ isShowingOptions = _this$props2.isShowingOptions,
89
+ highlightedOptionId = _this$props2.highlightedOptionId,
90
+ onRequestHighlightOption = _this$props2.onRequestHighlightOption,
91
+ onRequestHighlightFirstOption = _this$props2.onRequestHighlightFirstOption,
92
+ onRequestHighlightLastOption = _this$props2.onRequestHighlightLastOption,
93
+ onRequestSelectOption = _this$props2.onRequestSelectOption;
94
+ const key = keycode.names[event.keyCode];
95
+
96
+ switch (key) {
97
+ case 'space':
98
+ if (!isShowingOptions) {
99
+ // if options hidden, show them
100
+ this.handleOpenClose(event);
101
+ }
102
+
103
+ break;
104
+
105
+ case 'enter':
106
+ if (highlightedOptionId) {
107
+ // select highlighted option
108
+ event.preventDefault();
109
+ onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
110
+ id: highlightedOptionId
111
+ });
112
+ }
113
+
114
+ break;
115
+
116
+ case 'down':
117
+ event.preventDefault();
134
118
 
135
- if (isShowingOptions) {
136
- // if options showing, change highlight
137
- onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
138
- direction: -1
139
- });
140
- } else {
141
- // otherwise, show options
142
- this.handleOpenClose(event);
143
- }
119
+ if (isShowingOptions) {
120
+ // if options showing, change highlight
121
+ onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
122
+ direction: 1
123
+ });
124
+ } else {
125
+ // otherwise, show options
126
+ this.handleOpenClose(event);
127
+ }
144
128
 
145
- break;
129
+ break;
146
130
 
147
- case 'home':
148
- if (isShowingOptions) {
149
- // if options showing, highlight first option
131
+ case 'up':
150
132
  event.preventDefault();
151
- onRequestHighlightFirstOption === null || onRequestHighlightFirstOption === void 0 ? void 0 : onRequestHighlightFirstOption(event);
152
- }
153
133
 
154
- break;
134
+ if (isShowingOptions) {
135
+ // if options showing, change highlight
136
+ onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
137
+ direction: -1
138
+ });
139
+ } else {
140
+ // otherwise, show options
141
+ this.handleOpenClose(event);
142
+ }
143
+
144
+ break;
145
+
146
+ case 'home':
147
+ if (isShowingOptions) {
148
+ // if options showing, highlight first option
149
+ event.preventDefault();
150
+ onRequestHighlightFirstOption === null || onRequestHighlightFirstOption === void 0 ? void 0 : onRequestHighlightFirstOption(event);
151
+ }
152
+
153
+ break;
154
+
155
+ case 'end':
156
+ if (isShowingOptions) {
157
+ // if options showing, highlight last option
158
+ event.preventDefault();
159
+ onRequestHighlightLastOption === null || onRequestHighlightLastOption === void 0 ? void 0 : onRequestHighlightLastOption(event);
160
+ }
161
+
162
+ break;
163
+ }
164
+ };
165
+
166
+ this.handleKeyUp = event => {
167
+ const isShowingOptions = this.props.isShowingOptions;
168
+ const key = keycode.names[event.keyCode];
155
169
 
156
- case 'end':
170
+ if (key === 'esc') {
157
171
  if (isShowingOptions) {
158
- // if options showing, highlight last option
159
- event.preventDefault();
160
- onRequestHighlightLastOption === null || onRequestHighlightLastOption === void 0 ? void 0 : onRequestHighlightLastOption(event);
172
+ // if options showing, hide them
173
+ this.handleOpenClose(event);
161
174
  }
162
-
163
- break;
164
- }
165
- };
166
- handleKeyUp = event => {
167
- const isShowingOptions = this.props.isShowingOptions;
168
- const key = keycode.names[event.keyCode];
169
-
170
- if (key === 'esc') {
171
- if (isShowingOptions) {
172
- // if options showing, hide them
173
- this.handleOpenClose(event);
174
175
  }
175
- }
176
- };
176
+ };
177
+ }
177
178
 
178
179
  render() {
179
180
  var _this = this;
@@ -309,6 +310,8 @@ let Selectable = (_dec = withDeterministicId(), _dec(_class = class Selectable e
309
310
  }
310
311
  }
311
312
 
312
- }) || _class);
313
+ }, _class2.displayName = "Selectable", _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
314
+ isShowingOptions: false
315
+ }, _class2)) || _class);
313
316
  export default Selectable;
314
317
  export { Selectable };
package/lib/Selectable/index.js CHANGED
@@ -29,7 +29,7 @@ const _excluded = ["onMouseDown", "onClick"],
29
29
  _excluded4 = ["onMouseDown", "onClick"],
30
30
  _excluded5 = ["id", "onMouseOver", "onClick"];
31
31
 
32
- var _dec, _class;
32
+ var _dec, _class, _class2;
33
33
 
34
34
  /**
35
35
  ---
@@ -38,135 +38,136 @@ tags: autocomplete, typeahead, combobox, dropdown, search
38
38
  ---
39
39
  @tsProps
40
40
  **/
41
- let Selectable = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec(_class = class Selectable extends _react.Component {
42
- static displayName = "Selectable";
43
- static allowedProps = _props.allowedProps;
44
- static propTypes = _props.propTypes;
45
- static defaultProps = {
46
- isShowingOptions: false
47
- };
48
- _id = this.props.id || this.props.deterministicId();
49
- _listId = `${this._id}-list`;
50
- _descriptionId = `${this._id}-description`;
51
- _trigger = null;
52
- isSelectedOption = id => {
53
- const selectedOptionId = this.props.selectedOptionId;
54
-
55
- if (Array.isArray(selectedOptionId)) {
56
- return selectedOptionId.indexOf(id) > -1;
57
- }
58
-
59
- return selectedOptionId === id;
60
- };
61
- handleOpenClose = event => {
62
- const _this$props = this.props,
63
- isShowingOptions = _this$props.isShowingOptions,
64
- onRequestShowOptions = _this$props.onRequestShowOptions,
65
- onRequestHideOptions = _this$props.onRequestHideOptions;
66
- event.preventDefault();
67
-
68
- if (isShowingOptions) {
69
- onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
70
- } else {
71
- if (!(0, _isActiveElement.isActiveElement)(this._trigger)) {
72
- ;
73
-
74
- this._trigger.focus();
41
+ let Selectable = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec(_class = (_class2 = class Selectable extends _react.Component {
42
+ constructor() {
43
+ super(...arguments);
44
+ this._id = this.props.id || this.props.deterministicId();
45
+ this._listId = `${this._id}-list`;
46
+ this._descriptionId = `${this._id}-description`;
47
+ this._trigger = null;
48
+
49
+ this.isSelectedOption = id => {
50
+ const selectedOptionId = this.props.selectedOptionId;
51
+
52
+ if (Array.isArray(selectedOptionId)) {
53
+ return selectedOptionId.indexOf(id) > -1;
75
54
  }
76
55
 
77
- onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
78
- }
79
- };
80
- handleKeyDown = event => {
81
- const _this$props2 = this.props,
82
- isShowingOptions = _this$props2.isShowingOptions,
83
- highlightedOptionId = _this$props2.highlightedOptionId,
84
- onRequestHighlightOption = _this$props2.onRequestHighlightOption,
85
- onRequestHighlightFirstOption = _this$props2.onRequestHighlightFirstOption,
86
- onRequestHighlightLastOption = _this$props2.onRequestHighlightLastOption,
87
- onRequestSelectOption = _this$props2.onRequestSelectOption;
88
- const key = _keycode.default.names[event.keyCode];
89
-
90
- switch (key) {
91
- case 'space':
92
- if (!isShowingOptions) {
93
- // if options hidden, show them
94
- this.handleOpenClose(event);
95
- }
96
-
97
- break;
56
+ return selectedOptionId === id;
57
+ };
98
58
 
99
- case 'enter':
100
- if (highlightedOptionId) {
101
- // select highlighted option
102
- event.preventDefault();
103
- onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
104
- id: highlightedOptionId
105
- });
106
- }
59
+ this.handleOpenClose = event => {
60
+ const _this$props = this.props,
61
+ isShowingOptions = _this$props.isShowingOptions,
62
+ onRequestShowOptions = _this$props.onRequestShowOptions,
63
+ onRequestHideOptions = _this$props.onRequestHideOptions;
64
+ event.preventDefault();
107
65
 
108
- break;
109
-
110
- case 'down':
111
- event.preventDefault();
66
+ if (isShowingOptions) {
67
+ onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
68
+ } else {
69
+ if (!(0, _isActiveElement.isActiveElement)(this._trigger)) {
70
+ ;
112
71
 
113
- if (isShowingOptions) {
114
- // if options showing, change highlight
115
- onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
116
- direction: 1
117
- });
118
- } else {
119
- // otherwise, show options
120
- this.handleOpenClose(event);
72
+ this._trigger.focus();
121
73
  }
122
74
 
123
- break;
124
-
125
- case 'up':
126
- event.preventDefault();
75
+ onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
76
+ }
77
+ };
78
+
79
+ this.handleKeyDown = event => {
80
+ const _this$props2 = this.props,
81
+ isShowingOptions = _this$props2.isShowingOptions,
82
+ highlightedOptionId = _this$props2.highlightedOptionId,
83
+ onRequestHighlightOption = _this$props2.onRequestHighlightOption,
84
+ onRequestHighlightFirstOption = _this$props2.onRequestHighlightFirstOption,
85
+ onRequestHighlightLastOption = _this$props2.onRequestHighlightLastOption,
86
+ onRequestSelectOption = _this$props2.onRequestSelectOption;
87
+ const key = _keycode.default.names[event.keyCode];
88
+
89
+ switch (key) {
90
+ case 'space':
91
+ if (!isShowingOptions) {
92
+ // if options hidden, show them
93
+ this.handleOpenClose(event);
94
+ }
95
+
96
+ break;
97
+
98
+ case 'enter':
99
+ if (highlightedOptionId) {
100
+ // select highlighted option
101
+ event.preventDefault();
102
+ onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
103
+ id: highlightedOptionId
104
+ });
105
+ }
106
+
107
+ break;
108
+
109
+ case 'down':
110
+ event.preventDefault();
127
111
 
128
- if (isShowingOptions) {
129
- // if options showing, change highlight
130
- onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
131
- direction: -1
132
- });
133
- } else {
134
- // otherwise, show options
135
- this.handleOpenClose(event);
136
- }
112
+ if (isShowingOptions) {
113
+ // if options showing, change highlight
114
+ onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
115
+ direction: 1
116
+ });
117
+ } else {
118
+ // otherwise, show options
119
+ this.handleOpenClose(event);
120
+ }
137
121
 
138
- break;
122
+ break;
139
123
 
140
- case 'home':
141
- if (isShowingOptions) {
142
- // if options showing, highlight first option
124
+ case 'up':
143
125
  event.preventDefault();
144
- onRequestHighlightFirstOption === null || onRequestHighlightFirstOption === void 0 ? void 0 : onRequestHighlightFirstOption(event);
145
- }
146
126
 
147
- break;
127
+ if (isShowingOptions) {
128
+ // if options showing, change highlight
129
+ onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
130
+ direction: -1
131
+ });
132
+ } else {
133
+ // otherwise, show options
134
+ this.handleOpenClose(event);
135
+ }
136
+
137
+ break;
138
+
139
+ case 'home':
140
+ if (isShowingOptions) {
141
+ // if options showing, highlight first option
142
+ event.preventDefault();
143
+ onRequestHighlightFirstOption === null || onRequestHighlightFirstOption === void 0 ? void 0 : onRequestHighlightFirstOption(event);
144
+ }
145
+
146
+ break;
147
+
148
+ case 'end':
149
+ if (isShowingOptions) {
150
+ // if options showing, highlight last option
151
+ event.preventDefault();
152
+ onRequestHighlightLastOption === null || onRequestHighlightLastOption === void 0 ? void 0 : onRequestHighlightLastOption(event);
153
+ }
154
+
155
+ break;
156
+ }
157
+ };
158
+
159
+ this.handleKeyUp = event => {
160
+ const isShowingOptions = this.props.isShowingOptions;
161
+ const key = _keycode.default.names[event.keyCode];
148
162
 
149
- case 'end':
163
+ if (key === 'esc') {
150
164
  if (isShowingOptions) {
151
- // if options showing, highlight last option
152
- event.preventDefault();
153
- onRequestHighlightLastOption === null || onRequestHighlightLastOption === void 0 ? void 0 : onRequestHighlightLastOption(event);
165
+ // if options showing, hide them
166
+ this.handleOpenClose(event);
154
167
  }
155
-
156
- break;
157
- }
158
- };
159
- handleKeyUp = event => {
160
- const isShowingOptions = this.props.isShowingOptions;
161
- const key = _keycode.default.names[event.keyCode];
162
-
163
- if (key === 'esc') {
164
- if (isShowingOptions) {
165
- // if options showing, hide them
166
- this.handleOpenClose(event);
167
168
  }
168
- }
169
- };
169
+ };
170
+ }
170
171
 
171
172
  render() {
172
173
  var _this = this;
@@ -302,7 +303,9 @@ let Selectable = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec(_
302
303
  }
303
304
  }
304
305
 
305
- }) || _class);
306
+ }, _class2.displayName = "Selectable", _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
307
+ isShowingOptions: false
308
+ }, _class2)) || _class);
306
309
  exports.Selectable = Selectable;
307
310
  var _default = Selectable;
308
311
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-selectable",
3
- "version": "8.25.1-snapshot-10",
3
+ "version": "8.25.1-snapshot-13",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,17 +24,17 @@
24
24
  },
25
25
  "license": "MIT",
26
26
  "devDependencies": {
27
- "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
28
- "@instructure/ui-test-utils": "8.25.1-snapshot-10"
27
+ "@instructure/ui-babel-preset": "8.25.1-snapshot-13",
28
+ "@instructure/ui-test-utils": "8.25.1-snapshot-13"
29
29
  },
30
30
  "dependencies": {
31
31
  "@babel/runtime": "^7.13.10",
32
- "@instructure/console": "8.25.1-snapshot-10",
33
- "@instructure/shared-types": "8.25.1-snapshot-10",
34
- "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
35
- "@instructure/ui-react-utils": "8.25.1-snapshot-10",
36
- "@instructure/ui-testable": "8.25.1-snapshot-10",
37
- "@instructure/ui-utils": "8.25.1-snapshot-10",
32
+ "@instructure/console": "8.25.1-snapshot-13",
33
+ "@instructure/shared-types": "8.25.1-snapshot-13",
34
+ "@instructure/ui-dom-utils": "8.25.1-snapshot-13",
35
+ "@instructure/ui-react-utils": "8.25.1-snapshot-13",
36
+ "@instructure/ui-testable": "8.25.1-snapshot-13",
37
+ "@instructure/ui-utils": "8.25.1-snapshot-13",
38
38
  "keycode": "^2",
39
39
  "prop-types": "^15"
40
40
  },